.SiteHeader {
    --BarHeight: 3.25rem;
    --BarDrop: 0.375rem;
    --EdgeShrink: 0.94;
    --TrackInset: 0.1875rem;
    --SurfaceStretch: 1.04 1.16;
    --SheetShift: -0.5rem;
    --SheetScale: 0.97;
    --ItemShift: -0.25rem;
    --SheetFill: rgb(11 16 24 / 0.92);
    --BarShift: 0rem;
    --SurfaceOpacity: 1;
    --SurfaceScale: 1;
    --SurfaceEvents: auto;
    --SurfaceFade: var(--DurationBase) var(--EaseOut);
    --SurfaceMorph: var(--DurationSlow) var(--EaseOut);
    --EdgeOpacity: 1;
    --EdgeVisibility: visible;
    --EdgeScale: 1;
    --EdgeFade: var(--DurationSlow) var(--EaseOut);
    --EdgeSlide: var(--DurationSlow) var(--EaseOut);
    --EdgeDelay: 80ms;
    --TrackFill: rgb(255 255 255 / 0.05);
    --LinkInk: var(--InkMuted);
    --LinkHover: var(--InkStrong);
    --LinkShadow: rgb(4 22 52 / 0);
    --LinkFocus: var(--AccentBright);
    --IndicatorFill: rgb(255 255 255 / 0.08);
    --ToggleInk: var(--InkStrong);
    --ToggleFill: rgb(255 255 255 / 0);
    --ToggleBorder: rgb(255 255 255 / 0);
    --ToggleHover: rgb(255 255 255 / 0.08);
    --ToggleShadow: inset 0 1px 0 rgb(255 255 255 / 0);
    --ToggleFilter: none;
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--LayerHeader);
    display: grid;
    justify-items: center;
    padding: var(--SpaceSmall) var(--SpaceSmall) 0;
    pointer-events: none;
}

body:has(.Hero) .SiteHeader[data-state="top"] {
    --BarShift: var(--BarDrop);
    --SurfaceOpacity: 0;
    --SurfaceScale: var(--SurfaceStretch);
    --SurfaceEvents: none;
    --SurfaceFade: var(--DurationBase) var(--EaseSmooth);
    --SurfaceMorph: var(--DurationBase) var(--EaseSmooth);
    --EdgeOpacity: 0;
    --EdgeVisibility: hidden;
    --EdgeScale: var(--EdgeShrink);
    --EdgeFade: var(--DurationFast) var(--EaseIn);
    --EdgeSlide: var(--DurationBase) var(--EaseIn);
    --EdgeDelay: 0ms;
    --TrackFill: rgb(255 255 255 / 0);
    --LinkInk: var(--SkyInk);
    --LinkHover: var(--InkWhite);
    --LinkShadow: rgb(4 22 52 / 0.32);
    --LinkFocus: var(--InkWhite);
    --IndicatorFill: var(--SkyGlass);
    --ToggleInk: var(--SkyInk);
    --ToggleFill: var(--SkyGlass);
    --ToggleBorder: var(--SkyBorder);
    --ToggleHover: rgb(255 255 255 / 0.24);
    --ToggleShadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
    --ToggleFilter: blur(0.875rem) saturate(1.4);
}

.HeaderBar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: var(--NarrowWidth);
    min-height: var(--BarHeight);
    padding-inline: var(--SpaceTiny);
    border-radius: var(--RadiusRound);
    isolation: isolate;
    translate: 0 var(--BarShift);
    transition: translate var(--DurationSlow) var(--EaseOut);
}

.HeaderBar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--BorderDefault);
    border-radius: inherit;
    background: var(--SurfaceGlass);
    box-shadow: var(--ShadowFloating), var(--InsetHighlight);
    backdrop-filter: blur(1.25rem) saturate(1.5) brightness(0.72);
    opacity: var(--SurfaceOpacity);
    scale: var(--SurfaceScale);
    pointer-events: var(--SurfaceEvents);
    transition:
        opacity var(--SurfaceFade),
        scale var(--SurfaceMorph);
}

.HeaderBrand {
    grid-area: 1 / 1;
    justify-self: start;
    display: flex;
    align-items: center;
    height: var(--ControlSmall);
    padding-inline: var(--SpaceSmall);
    border-radius: var(--RadiusRound);
    opacity: var(--EdgeOpacity);
    visibility: var(--EdgeVisibility);
    transform: scale(var(--EdgeScale));
    pointer-events: auto;
    transition:
        opacity var(--EdgeFade) var(--EdgeDelay),
        transform var(--EdgeSlide) var(--EdgeDelay),
        visibility var(--EdgeFade) var(--EdgeDelay);
}

.HeaderBrand img {
    width: auto;
    height: 1.125rem;
    transition: opacity var(--DurationBase) var(--EaseOut);
}

.HeaderBrand:hover img {
    opacity: 0.8;
}

.HeaderAction {
    grid-area: 1 / 3;
    justify-self: end;
    opacity: var(--EdgeOpacity);
    visibility: var(--EdgeVisibility);
    transform: scale(var(--EdgeScale));
    pointer-events: auto;
    transition:
        scale var(--DurationFast) var(--EaseOut),
        background-color var(--DurationBase) var(--EaseOut),
        border-color var(--DurationBase) var(--EaseOut),
        color var(--DurationBase) var(--EaseOut),
        opacity var(--EdgeFade) calc(var(--EdgeDelay) * 1.75),
        transform var(--EdgeSlide) calc(var(--EdgeDelay) * 1.75),
        visibility var(--EdgeFade) calc(var(--EdgeDelay) * 1.75);
}

.HeaderLinks {
    --IndicatorTop: 0px;
    --IndicatorRight: 0px;
    --IndicatorBottom: 0px;
    --IndicatorLeft: 0px;
    --IndicatorRadius: var(--RadiusRound);
    position: relative;
    grid-area: 1 / 2;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: var(--TrackInset);
    border-radius: var(--RadiusRound);
    background: var(--TrackFill);
    isolation: isolate;
    pointer-events: auto;
    transition: background-color var(--DurationBase) var(--EaseOut);
}

.HeaderLinks::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--IndicatorFill);
    clip-path: inset(var(--IndicatorTop) var(--IndicatorRight) var(--IndicatorBottom) var(--IndicatorLeft) round var(--IndicatorRadius));
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--DurationBase) var(--EaseOut),
        background-color var(--DurationBase) var(--EaseOut);
}

.HeaderLinks[data-indicator="visible"]::before {
    opacity: 1;
    transition:
        clip-path var(--DurationSlow) var(--EaseOut),
        opacity var(--DurationBase) var(--EaseOut),
        background-color var(--DurationBase) var(--EaseOut);
}

.HeaderLink {
    display: inline-flex;
    align-items: center;
    height: calc(var(--ControlSmall) - 2 * var(--TrackInset));
    padding-inline: var(--SpaceSmall);
    border-radius: var(--RadiusRound);
    font-size: var(--SizeSmall);
    font-weight: var(--WeightMedium);
    line-height: 1;
    white-space: nowrap;
    color: var(--LinkInk);
    text-shadow: 0 1px 0.125rem var(--LinkShadow);
    transition:
        color var(--DurationBase) var(--EaseOut),
        text-shadow var(--DurationBase) var(--EaseOut),
        opacity var(--DurationBase) var(--EaseOut);
}

.HeaderLink:hover,
.HeaderLink:focus-visible,
.HeaderLink[aria-current="true"] {
    color: var(--LinkHover);
}

.HeaderLink:focus-visible,
.MenuToggle:focus-visible {
    outline-color: var(--LinkFocus);
    outline-offset: 0.125rem;
}

.HeaderLink[aria-disabled="true"] {
    cursor: help;
    opacity: 0.58;
}

.HeaderLink[aria-disabled="true"]:hover,
.HeaderLink[aria-disabled="true"]:focus-visible {
    opacity: 0.86;
}

.MenuToggle {
    display: none;
}

.SiteHeader[data-motion="instant"] *,
.SiteHeader[data-motion="instant"] *::before {
    transition: none;
}

@media (width < 48rem) {
    .HeaderBar {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: var(--BarHeight) auto;
        column-gap: var(--SpaceMicro);
    }

    .HeaderBar::before {
        bottom: auto;
        height: var(--BarHeight);
    }

    .HeaderAction {
        grid-area: 1 / 2;
    }

    .MenuToggle {
        grid-area: 1 / 3;
        display: grid;
        place-items: center;
        width: var(--ControlSmall);
        height: var(--ControlSmall);
        border: 1px solid var(--ToggleBorder);
        border-radius: var(--RadiusRound);
        color: var(--ToggleInk);
        background: var(--ToggleFill);
        box-shadow: var(--ToggleShadow);
        backdrop-filter: var(--ToggleFilter);
        pointer-events: auto;
        transition:
            color var(--DurationBase) var(--EaseOut),
            background-color var(--DurationBase) var(--EaseOut),
            border-color var(--DurationBase) var(--EaseOut),
            box-shadow var(--DurationBase) var(--EaseOut),
            scale var(--DurationFast) var(--EaseOut);
    }

    .MenuToggle:hover {
        background-color: var(--ToggleHover);
    }

    .MenuToggle:active {
        scale: 0.94;
        transition-duration: var(--DurationInstant);
    }

    .MenuToggle svg {
        width: 1.125rem;
        height: 1.125rem;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
    }

    .MenuToggle path {
        transform-box: fill-box;
        transform-origin: center;
        transition:
            rotate var(--DurationFast) var(--EaseOut),
            translate var(--DurationFast) var(--EaseOut) 150ms;
    }

    .MenuToggle[aria-expanded="true"] path {
        transition:
            translate 140ms var(--EaseOut),
            rotate var(--DurationBase) var(--EaseOut) 140ms;
    }

    .MenuToggle[aria-expanded="true"] path:first-child {
        translate: 0 2.5px;
        rotate: 45deg;
    }

    .MenuToggle[aria-expanded="true"] path:last-child {
        translate: 0 -2.5px;
        rotate: -45deg;
    }

    .HeaderLinks {
        --LinkInk: var(--InkStrong);
        --LinkShadow: rgb(4 22 52 / 0);
        --IndicatorFill: rgb(255 255 255 / 0.07);
        --IndicatorRadius: var(--RadiusMedium);
        grid-area: 2 / 1 / 3 / -1;
        display: grid;
        margin-top: var(--SpaceTiny);
        padding: var(--SpaceTiny);
        border: 1px solid var(--BorderDefault);
        border-radius: var(--RadiusLarge);
        background: var(--SheetFill);
        box-shadow: var(--ShadowFloating), var(--InsetHighlight);
        backdrop-filter: blur(1.25rem) saturate(1.6);
        transform-origin: calc(100% - 1.625rem) 0;
        opacity: 0;
        visibility: hidden;
        translate: 0 var(--SheetShift);
        scale: var(--SheetScale);
        transition:
            opacity var(--DurationFast) var(--EaseIn),
            translate var(--DurationFast) var(--EaseIn),
            scale var(--DurationFast) var(--EaseIn),
            visibility var(--DurationFast) var(--EaseIn);
    }

    .SiteHeader[data-menu="open"] .HeaderLinks {
        opacity: 1;
        visibility: visible;
        translate: none;
        scale: none;
        transition:
            opacity var(--DurationBase) var(--EaseOut) 40ms,
            translate var(--DurationSlow) var(--EaseOut) 40ms,
            scale var(--DurationSlow) var(--EaseOut) 40ms,
            visibility var(--DurationBase) var(--EaseOut) 40ms;
    }

    .HeaderLinks > li {
        opacity: 0;
        translate: 0 var(--ItemShift);
        transition:
            opacity var(--DurationInstant) var(--EaseIn),
            translate var(--DurationInstant) var(--EaseIn);
    }

    .SiteHeader[data-menu="open"] .HeaderLinks > li {
        opacity: 1;
        translate: none;
        transition:
            opacity var(--DurationBase) var(--EaseOut) calc(90ms + var(--ItemOrder, 0) * 30ms),
            translate var(--DurationSlow) var(--EaseOut) calc(90ms + var(--ItemOrder, 0) * 30ms);
    }

    .HeaderLink {
        width: 100%;
        height: var(--ControlMedium);
        padding-inline: var(--SpaceBase);
        border-radius: var(--RadiusMedium);
        font-size: var(--SizeBody);
    }
}

@media (prefers-reduced-motion: reduce) {
    .SiteHeader {
        --EdgeShrink: 1;
        --SurfaceStretch: 1;
        --SheetShift: 0rem;
        --SheetScale: 1;
        --ItemShift: 0rem;
    }

    .HeaderBar,
    .MenuToggle path,
    .MenuToggle[aria-expanded="true"] path {
        transition: none;
    }

    .HeaderLinks[data-indicator="visible"]::before {
        transition:
            opacity var(--DurationBase) var(--EaseOut),
            background-color var(--DurationBase) var(--EaseOut);
    }
}