/* Shared floating navigation for the landing pages and blog. */
.site-navigation {
    --nav-fill: rgba(24, 24, 24, 0.38);
    --nav-label: #ffffff;
    --nav-muted: rgba(255, 255, 255, 0.8);
    --nav-control: #28282b;
    --nav-menu: #181819;
    --nav-hover: rgba(255, 255, 255, 0.08);
    position: fixed;
    inset: 24px 0 auto;
    z-index: 50;
    color: var(--nav-label);
    font-family: 'Geist', 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.25;
    pointer-events: none;
}

[data-theme="light"] .site-navigation {
    --nav-fill: rgba(255, 255, 255, 0.7);
    --nav-label: #111111;
    --nav-muted: #555555;
    --nav-control: #eeeeef;
    --nav-menu: #ffffff;
    --nav-hover: rgba(0, 0, 0, 0.05);
}

.site-navigation *, .site-navigation *::before, .site-navigation *::after { box-sizing: border-box; }
.site-navigation [hidden] { display: none !important; }
.site-navigation a { color: inherit; text-decoration: none; }
.site-navigation button, .site-navigation summary { font: inherit; cursor: pointer; }
.site-navigation :is(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.site-navigation__capsule, .site-navigation__round {
    border: 0;
    background: var(--nav-fill);
    -webkit-backdrop-filter: blur(28px) saturate(120%);
    backdrop-filter: blur(28px) saturate(120%);
    pointer-events: auto;
}

.site-navigation__capsule {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: min(760px, calc(100% - 176px));
    min-height: 64px;
    margin-inline: auto;
    padding: 7px 8px 7px 24px;
    border-radius: 999px;
}

.site-navigation__brand { display: inline-flex; flex: none; align-items: center; }
.site-navigation__wordmark { display: block; width: 128px; overflow: hidden; }
.site-navigation__logo { display: block; width: 128px; height: auto; max-width: none; }
[data-theme="light"] .site-navigation__logo { filter: invert(1); }
.site-navigation__links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.site-navigation__links a { display: flex; align-items: center; min-height: 44px; color: var(--nav-muted); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color 160ms ease; }
.site-navigation__links a:is(:hover, [aria-current]) { color: var(--nav-label); }

.site-navigation__download {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding-inline: 18px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}
.site-navigation a.site-navigation__download { color: #111111; }
.has-hero .site-navigation__download { display: none; }
.has-hero .site-navigation.is-past-hero .site-navigation__download { display: inline-flex; }
.site-navigation__download svg { width: 15px; height: 18px; flex: none; }
.site-navigation__download:is(:hover, :focus-visible) { background: #ededed; }
.site-navigation__download:focus-visible { outline-color: var(--nav-label); }

.site-navigation__round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; color: var(--nav-label); transition: background-color 160ms ease; }
.site-navigation__round:hover { background: var(--nav-control); }
.site-navigation__language { position: absolute; top: 8px; right: 24px; pointer-events: auto; }
.site-navigation__language summary { list-style: none; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.site-navigation__language summary::-webkit-details-marker { display: none; }
.site-navigation__language[open] summary { background: var(--nav-control); }
.site-navigation__languages { position: absolute; top: calc(100% + 12px); right: 0; display: grid; gap: 4px; min-width: 172px; padding: 8px; border: 0; border-radius: 20px; background: var(--nav-menu); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); }
.site-navigation__languages a { padding: 12px; border-radius: 12px; font-size: 15px; }
.site-navigation__languages a:is(:hover, [aria-current]) { background: var(--nav-hover); }
.site-navigation__theme { position: absolute; top: 8px; left: 24px; }
.site-navigation__theme svg { width: 20px; height: 20px; }
.site-navigation__theme .nav-icon-sun, [data-theme="dark"] .site-navigation__theme .nav-icon-moon { display: none; }
[data-theme="dark"] .site-navigation__theme .nav-icon-sun { display: block; }

.site-navigation__toggle { display: none; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; aspect-ratio: 1; margin-left: auto; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; }
.site-navigation__toggle:hover { background: var(--nav-hover); }
.site-navigation__toggle svg { width: 20px; height: 20px; }
.site-navigation__toggle[aria-expanded="true"] .nav-menu-lines { display: none; }
.site-navigation__toggle[aria-expanded="false"] .nav-menu-close { display: none; }
.site-navigation__mobile { position: absolute; top: calc(100% + 12px); inset-inline: 0; display: grid; gap: 4px; padding: 10px; border: 0; border-radius: 24px; background: var(--nav-menu); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); }
.site-navigation__mobile a { display: flex; align-items: center; min-height: 48px; padding-inline: 16px; border-radius: 14px; font-size: 16px; font-weight: 500; }
.site-navigation__mobile a:is(:hover, [aria-current]) { background: var(--nav-hover); }
.site-navigation__fallback { display: none; }

/* Reserve room for both circular controls, even on pages without a theme switch. */
@media (max-width: 900px) {
    .site-navigation { top: 16px; }
    .site-navigation__capsule { width: calc(100% - 144px); min-height: 56px; padding: 5px 6px 5px 18px; gap: 8px; }
    .site-navigation__links { display: none; }
    .site-navigation__fallback { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: calc(100% - 24px); margin: 8px auto 0; padding: 8px; border: 0; border-radius: 20px; background: var(--nav-menu); pointer-events: auto; }
    .site-navigation__fallback a { padding: 10px; font-size: 14px; }
    .site-navigation__toggle { display: inline-flex; }
    .site-navigation__download { min-height: 44px; padding-inline: 16px; font-size: 15px; }
    .site-navigation__language { right: 16px; top: 4px; }
    .site-navigation__theme { left: 16px; top: 4px; }
}

@media (max-width: 600px) {
    .site-navigation { top: 14px; }
    .site-navigation__capsule { width: calc(100% - 80px); margin-left: 12px; padding-left: 16px; gap: 4px; }
    .site-navigation__language { right: 12px; }
    .site-navigation__wordmark, .site-navigation__logo { width: 110px; }
    .site-navigation__download { padding-inline: 12px; font-size: 14px; }
    .site-navigation--with-theme .site-navigation__capsule { width: calc(100% - 128px); margin-inline: 64px; padding-left: 12px; }
    .site-navigation--with-theme .site-navigation__theme { left: 8px; }
    .site-navigation--with-theme .site-navigation__language { right: 8px; }
}

@media (max-width: 480px) {
    .site-navigation__wordmark, .site-navigation__logo { width: clamp(76px, 22vw, 100px); }
    .site-navigation--with-theme .site-navigation__wordmark { width: 24px; }
    .site-navigation--with-theme .site-navigation__logo { width: 132.4px; }
}

@media (max-width: 360px) {
    .site-navigation__brand .site-navigation__wordmark { display: block; width: 24px; }
    .site-navigation__logo { width: 132.4px; }
    .site-navigation__capsule { padding-left: 12px; }
    .site-navigation--with-theme .site-navigation__capsule { width: calc(100% - 112px); margin-inline: 56px; padding-left: 8px; gap: 2px; }
    .site-navigation--with-theme .site-navigation__round { width: 44px; height: 44px; }
    .site-navigation--with-theme .site-navigation__theme, .site-navigation--with-theme .site-navigation__language { top: 6px; }
    .site-navigation--with-theme .site-navigation__download { padding-inline: 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-navigation *, .site-navigation *::before, .site-navigation *::after { transition: none !important; }
}