:root {
    --site-nav-bg: rgb(9 9 11 / 0.85);
    --site-nav-bg-opaque: #09090b;
    --site-nav-surface: #0f0f12;
    --site-nav-text: #fafafa;
    --site-nav-text-muted: #a1a1aa;
    --site-nav-on-accent: #09090b;
    --site-nav-brand-ext: #3b82f6;
    --site-nav-border: rgb(255 255 255 / 0.06);
    --site-nav-border-strong: rgb(255 255 255 / 0.12);
    --site-nav-hover: rgb(255 255 255 / 0.05);

    --site-nav-space-1: 0.25rem;
    --site-nav-space-2: 0.5rem;
    --site-nav-space-3: 0.75rem;
    --site-nav-space-4: 1rem;
    --site-nav-space-6: 1.5rem;
    --site-nav-space-8: 2rem;
    --site-nav-gutter: var(--site-nav-space-4);
    --site-nav-target: 2.75rem;
    --site-nav-radius: 0.5rem;
    --site-nav-radius-lg: 0.75rem;

    --site-nav-z: 1000;
    --site-nav-duration: 150ms;
    --site-nav-ease-out: cubic-bezier(0.2, 0, 0, 1);

    /* Tallest header (global bar + product bar) so in-page anchors land below it. */
    --site-nav-offset: 7.5rem;
}

html {
    scroll-padding-top: var(--site-nav-offset);
}

.site-nav-skip {
    position: absolute;
    top: var(--site-nav-space-2);
    left: var(--site-nav-space-4);
    z-index: calc(var(--site-nav-z) + 1);
    padding: var(--site-nav-space-3) var(--site-nav-space-4);
    border-radius: var(--site-nav-radius);
    background: var(--site-nav-text);
    color: var(--site-nav-bg-opaque);
    font-weight: 600;
    text-decoration: none;
    translate: 0 -200%;
}

.site-nav-skip:focus {
    translate: 0 0;
}

.site-nav-skip:focus-visible {
    outline: 2px solid var(--site-nav-brand-ext);
    outline-offset: 2px;
}

.site-nav {
    --nav-accent: var(--site-nav-brand-ext);
    --nav-brand-fill: var(--nav-accent);

    position: sticky;
    top: 0;
    z-index: var(--site-nav-z);
    box-shadow: 0 1px 0 var(--site-nav-border);
    color: var(--site-nav-text);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.site-nav-bar::before,
.site-nav-product::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        color-mix(in oklab, var(--nav-accent) 12%, transparent),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 400ms var(--site-nav-ease-out);
    pointer-events: none;
}

.site-nav-product::before {
    --mouse-y: var(--mouse-y-product);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .site-nav:hover .site-nav-bar::before,
    .site-nav:hover .site-nav-product::before {
        opacity: 1;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-nav-bar,
    .site-nav-product,
    .site-nav-list {
        background: var(--site-nav-bg-opaque);
        backdrop-filter: none;
    }
}

/* Pages style bare li, ul and a:hover; these keep that out of the nav. */
.site-nav-list > li,
.site-nav-product-links > li {
    margin: 0;
}

.site-nav-brand:hover,
.site-nav-product-name:hover,
.site-nav-cta:hover,
.site-nav-item:hover,
.site-nav-link:hover {
    text-decoration: none;
}

.site-nav-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-nav :focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
    border-radius: var(--site-nav-radius);
}

.site-nav-bar,
.site-nav-product {
    position: relative;
    isolation: isolate;
    background: var(--site-nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--site-nav-space-6);
    padding-inline: var(--site-nav-gutter);
}

.site-nav-bar {
    min-height: 3.75rem;
}

.site-nav-brand {
    display: inline-block;
    line-height: var(--site-nav-target);
    color: var(--site-nav-text);
    font-size: 1.25rem;
    text-decoration: none;
}

.site-nav-brand-name {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.site-nav-brand-ext {
    color: var(--site-nav-brand-ext);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.76em;
    letter-spacing: -0.01em;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    gap: var(--site-nav-space-2);
    min-height: var(--site-nav-target);
    padding-inline: var(--site-nav-space-3);
    border: 0;
    border-radius: var(--site-nav-radius);
    background: none;
    color: var(--site-nav-text-muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--site-nav-duration) var(--site-nav-ease-out);
}

.site-nav-toggle:hover,
.site-nav-toggle[aria-expanded="true"] {
    color: var(--site-nav-text);
}

.site-nav-chevron {
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.2em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    transition: rotate var(--site-nav-duration) var(--site-nav-ease-out),
        translate var(--site-nav-duration) var(--site-nav-ease-out);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-chevron {
    rotate: 225deg;
    translate: 0 0.2em;
}

.site-nav-menu {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    column-gap: var(--site-nav-space-8);
    padding-bottom: var(--site-nav-space-2);
}

.site-nav-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--site-nav-space-4);
}

.site-nav-group--product {
    display: none;
}

.site-nav-group-label {
    color: var(--site-nav-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-nav-list,
.site-nav-product-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--site-nav-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav-item,
.site-nav-link {
    display: flex;
    align-items: center;
    gap: var(--site-nav-space-1);
    min-height: var(--site-nav-target);
    color: var(--site-nav-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--site-nav-duration) var(--site-nav-ease-out);
}

.site-nav-item:hover,
.site-nav-link:hover,
.site-nav-item[aria-current],
.site-nav-link[aria-current] {
    color: var(--site-nav-text);
}

.site-nav-item[aria-current] .site-nav-item-title,
.site-nav-link[aria-current] {
    text-decoration: underline 2px var(--nav-accent);
    text-underline-offset: 0.4em;
}

.site-nav-item-desc {
    display: none;
    color: var(--site-nav-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.site-nav-external {
    font-size: 0.85em;
}

.site-nav-product {
    min-height: 3.25rem;
}

/*
 * Once scrolled, the product bar tucks behind the global bar and slides back on
 * hover, focus or scroll-up. It's positioned out of flow with its space reserved
 * by the header's margin, so the slide never shifts page content.
 */
.js .site-nav:has(.site-nav-product) {
    margin-bottom: var(--site-nav-product-h, 3.25rem);
}

.js .site-nav-product {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    box-shadow: 0 1px 0 var(--site-nav-border);
    transition: translate 250ms var(--site-nav-ease-out),
        opacity 250ms var(--site-nav-ease-out);
}

.js .site-nav.is-condensed .site-nav-product {
    translate: 0 -100%;
    opacity: 0;
}

.js .site-nav.is-condensed:focus-within .site-nav-product {
    translate: 0 0;
    opacity: 1;
}

@media (hover: hover) {
    .js .site-nav.is-condensed:hover .site-nav-product {
        translate: 0 0;
        opacity: 1;
    }
}

.site-nav-product-name {
    display: inline-flex;
    align-items: center;
    min-height: var(--site-nav-target);
    color: var(--nav-accent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}

@supports (background-clip: text) {
    .site-nav-product-name {
        background: var(--nav-brand-fill);
        background-clip: text;
        color: transparent;
    }
}

.site-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--site-nav-space-2);
    min-height: var(--site-nav-target);
    margin-inline-start: auto;
    padding-inline: var(--site-nav-space-4);
    border-radius: var(--site-nav-radius);
    background: var(--nav-accent);
    color: var(--site-nav-on-accent);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--site-nav-duration) var(--site-nav-ease-out);
}

.site-nav-cta:hover {
    background: color-mix(in oklab, var(--nav-accent) 85%, white);
}

@media (width < 56rem) {
    .js .site-nav-toggle--menu {
        display: inline-flex;
        margin-inline-start: auto;
    }

    .js .site-nav-menu {
        display: none;
    }

    .js .site-nav-menu.is-open {
        display: flex;
        flex-direction: column;
        gap: var(--site-nav-space-4);
        max-height: calc(100dvh - 4rem);
        overflow-y: auto;
        padding-block: var(--site-nav-space-2) var(--site-nav-space-4);
        border-top: 1px solid var(--site-nav-border);
    }

    .js .site-nav-group,
    .js .site-nav-group--product {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .js .site-nav-group-label {
        padding-top: var(--site-nav-space-2);
    }

    .js .site-nav-list {
        flex-direction: column;
    }

    .js .site-nav-list > li + li {
        border-top: 1px solid var(--site-nav-border);
    }

    .js .site-nav-product-links {
        display: none;
    }
}

@media (width >= 56rem) {
    .site-nav {
        --site-nav-gutter: var(--site-nav-space-8);
    }

    .site-nav-bar {
        flex-wrap: nowrap;
    }

    .site-nav-menu {
        flex-basis: auto;
        margin-inline-start: auto;
        padding-bottom: 0;
    }

    .site-nav-product-links {
        column-gap: var(--site-nav-space-6);
    }

    .js .site-nav-menu {
        column-gap: var(--site-nav-space-2);
    }

    .js .site-nav-toggle--group {
        display: inline-flex;
    }

    .js .site-nav-group {
        position: relative;
    }

    .js .site-nav-group-label {
        display: none;
    }

    .js .site-nav-list {
        position: absolute;
        top: calc(100% + var(--site-nav-space-2));
        right: 0;
        display: none;
        flex-direction: column;
        min-width: 16rem;
        padding: var(--site-nav-space-2);
        border: 1px solid var(--site-nav-border-strong);
        border-radius: var(--site-nav-radius-lg);
        background: var(--site-nav-surface);
        box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
        opacity: 0;
        translate: 0 -4px;
        transition: opacity var(--site-nav-duration) var(--site-nav-ease-out),
            translate var(--site-nav-duration) var(--site-nav-ease-out),
            display var(--site-nav-duration) allow-discrete;
    }

    .js .site-nav-list.is-open {
        display: flex;
        opacity: 1;
        translate: 0 0;
    }

    @starting-style {
        .js .site-nav-list.is-open {
            opacity: 0;
            translate: 0 -4px;
        }
    }

    .js .site-nav-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: var(--site-nav-space-2) var(--site-nav-space-3);
        border-radius: var(--site-nav-radius);
    }

    .js .site-nav-item:hover {
        background: var(--site-nav-hover);
    }

    .js .site-nav-item-title {
        color: var(--site-nav-text);
    }

    .js .site-nav-item-desc {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav *,
    .site-nav::before {
        transition-duration: 0.01ms !important; /* must beat every component transition above */
    }
}