.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-left: 14px;
  font: 12px/1 var(--font-mono, monospace);
  white-space: nowrap;
}

.language-switch button {
  padding: 4px 1px;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font: inherit;
  opacity: .42;
  transition: opacity .25s ease, transform .25s ease;
}

.language-switch button:hover,
.language-switch button:focus-visible,
.language-switch button.is-active { opacity: 1; }
.language-switch button:hover { transform: translateY(-1px); }
.language-switch button.is-active { text-decoration: underline; text-underline-offset: 4px; }
.language-switch span { opacity: .35; }

body.language-switching main,
body.language-switching footer { opacity: .18; transition: opacity .18s ease; }

h1, h2, h3, h4, p, a, button, span, small, strong, em, label {
  overflow-wrap: normal;
  word-break: normal;
}

.nav-links, .nav-links a, .nav-back, .journey-nav a, .workflow-nav a,
.solutions-nav a, .lab-nav a, .error-nav a, .language-switch,
.language-switch button {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.language-switch, .nav-toggle { flex: 0 0 auto; }
.nav-logo { flex: 0 0 auto; }
.hero-subtitle { width: min(520px, calc(100vw - 48px)); max-width: calc(100vw - 48px); white-space: normal; }

/* The home page has a wider editorial navigation than the compact project pages. */
.home-section-motion .nav {
  width: min(1280px, calc(100vw - 48px));
  height: 72px;
  padding-inline: 36px;
  gap: clamp(24px, 3vw, 52px);
}
.home-section-motion .nav-links {
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(24px, 3vw, 52px);
}
.home-section-motion .nav-logo { font-size: 18px; }
.home-section-motion .nav-link { font-size: 15px; }
.home-section-motion .nav-link,
.home-section-motion .language-switch { white-space: nowrap; }
.home-section-motion .language-switch {
  position: static;
  flex: 0 0 auto;
  margin-left: 0;
  padding-left: 0;
  transform: none;
}
.home-section-motion .nav.scrolled {
  width: min(760px, calc(100vw - 48px));
  padding-inline: 20px;
  gap: 16px;
}
.home-section-motion .nav.scrolled .nav-links {
  gap: clamp(12px, 1.8vw, 24px);
}
.home-section-motion .nav.scrolled .nav-link { font-size: 12px; }

/* Subpages share a stable three-zone navigation: brand, page context, actions. */
.solutions-nav,
.lab-nav,
.journey-nav,
.workflow-nav,
body:not(.home-section-motion):not(.error-page) .nav {
  width: min(1280px, calc(100vw - 64px));
  min-height: 64px;
  padding-inline: 48px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  gap: 24px;
}

.solutions-nav .nav-logo,
.lab-nav .nav-logo,
.journey-nav .journey-logo,
.workflow-nav .workflow-logo,
body:not(.home-section-motion):not(.error-page) .nav .nav-logo {
  grid-column: 1;
  justify-self: start;
}

.solutions-nav .nav-links,
.lab-nav .nav-links,
.journey-nav .journey-nav-links,
.workflow-nav .workflow-nav-links,
body:not(.home-section-motion):not(.error-page) .nav .nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
}

.journey-nav-links a,
.workflow-nav-links a {
  color: var(--muted);
  font: 12px var(--mono, monospace);
  text-decoration: none;
  transition: color .2s ease;
}
.journey-nav-links a:hover,
.journey-nav-links a.active,
.workflow-nav-links a:hover { color: var(--ink); }

.solutions-nav .nav-actions,
.lab-nav .nav-actions,
body:not(.home-section-motion):not(.error-page) .nav .nav-actions,
.journey-nav-right,
.workflow-nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.journey-nav-right .journey-back,
.workflow-nav-right .workflow-back,
.nav-actions .nav-back { min-width: 0; }

/* Keep the long-form project headers inside the pill at every zoom level. */
.journey-nav,
.workflow-nav {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  overflow: visible;
}
.journey-nav .journey-logo,
.workflow-nav .workflow-logo { flex: 0 0 auto; }
.journey-nav .journey-nav-links,
.workflow-nav .workflow-nav-links {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.journey-nav .journey-nav-right,
.workflow-nav .workflow-nav-right {
  flex: 0 0 auto;
  margin-left: auto;
  grid-column: auto;
}

.journey-nav .journey-github,
.workflow-nav .workflow-github { display: none; }

.solutions-nav .language-switch,
.lab-nav .language-switch,
.journey-nav .language-switch,
.workflow-nav .language-switch,
body:not(.home-section-motion):not(.error-page) .nav .language-switch {
  position: static;
  margin: 0;
  padding: 0;
  transform: none;
}

@media (max-width: 900px) {
  .solutions-nav,
  .lab-nav,
  .journey-nav,
  .workflow-nav,
  body:not(.home-section-motion):not(.error-page) .nav {
    width: calc(100vw - 40px);
    min-height: 56px;
    padding-inline: 22px;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
  }
  .solutions-nav .nav-links,
  .lab-nav .nav-links,
  .journey-nav .journey-nav-links,
  .workflow-nav .workflow-nav-links,
  body:not(.home-section-motion):not(.error-page) .nav .nav-links { gap: 16px; }
  .solutions-nav .nav-actions,
  .lab-nav .nav-actions,
  body:not(.home-section-motion):not(.error-page) .nav .nav-actions,
  .journey-nav-right,
  .workflow-nav-right { gap: 13px; }
}

@media (max-width: 760px) {
  .language-switch { padding-left: 8px; }
  .home-section-motion .nav {
    width: calc(100vw - 48px);
    padding-inline: 20px 14px;
    gap: 0;
  }
  .home-section-motion .nav-links { display: none; }
  .home-section-motion .nav > .language-switch {
    position: absolute;
    top: 50%;
    right: 58px;
    margin: 0;
    padding-left: 0;
    transform: translateY(-50%);
  }
  .home-section-motion .nav > .nav-toggle {
    position: absolute;
    top: 6px;
    right: 8px;
  }
  .solutions-nav .nav-links,
  .lab-nav .nav-links,
  .journey-nav .journey-nav-links,
  .workflow-nav .workflow-nav-links,
  body:not(.home-section-motion):not(.error-page) .nav .nav-links { display: none; }
  .solutions-nav .nav-actions,
  .lab-nav .nav-actions,
  body:not(.home-section-motion):not(.error-page) .nav .nav-actions,
  .journey-nav-right,
  .workflow-nav-right { gap: 10px; }
}

/* On narrow screens, the home navigation follows the bubble-menu pattern:
   two persistent controls and a separate layer of generous menu pills. */
@media (max-width: 768px) {
  .home-section-motion .nav,
  .home-section-motion .nav.scrolled {
    width: calc(100vw - 32px);
    height: 56px;
    min-height: 56px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .48);
    background: rgba(255, 255, 255, .34);
    box-shadow:
      0 10px 28px rgba(17, 17, 17, .07),
      inset 0 1px 0 rgba(255, 255, 255, .66);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
  }
  .home-section-motion .nav .nav-logo,
  .home-section-motion .nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
  }
  .home-section-motion .nav .nav-logo {
    min-width: 112px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .home-section-motion .nav .nav-toggle {
    border: 1px solid rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .42);
    box-shadow:
      0 8px 24px rgba(17, 17, 17, .11),
      inset 0 1px 0 rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
  .home-section-motion .nav .nav-logo { border-radius: 999px; font-size: 15px; }
  .home-section-motion .nav .nav-toggle {
    width: 52px;
    padding: 0;
    border-radius: 50%;
  }
  .home-section-motion .nav .nav-toggle span { width: 21px; background: var(--ink); }
  .home-section-motion .nav > .language-switch { display: none; }

  .home-section-motion .nav.is-menu-open {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    background: rgba(247, 245, 238, .2) !important;
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
  }
  .home-section-motion .nav.is-menu-open .nav__glass {
    display: block;
    position: fixed;
    inset: 0;
    border-radius: 0;
  }
  .home-section-motion .nav.is-menu-open .nav-logo {
    top: 14px;
    left: 16px;
    font-size: 15px;
    transform: none;
    transition: none;
  }
  .home-section-motion .nav.is-menu-open .nav-toggle {
    top: 18px;
    right: 20px;
  }
  .home-section-motion .nav.is-menu-open > .language-switch {
    position: absolute;
    top: 24px;
    right: 84px;
    bottom: auto;
    left: auto;
    z-index: 102;
    display: inline-flex;
    width: max-content;
    height: 36px;
    min-height: 40px;
    max-width: calc(100vw - 170px);
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 6px 18px rgba(17, 17, 17, .08);
    color: var(--ink);
    transform: none;
  }
  .home-section-motion .nav-links.open {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(82px, 1fr);
    top: 132px;
    right: 20px;
    bottom: auto;
    left: 20px;
    width: auto;
    height: min(420px, calc(100dvh - 250px));
    min-height: 330px;
    align-content: center;
    justify-content: center;
    gap: 8px 6px;
    overflow: visible;
    padding: 8px 0;
  }
  .home-section-motion .nav-links.open li {
    display: flex;
    width: auto;
    min-width: 0;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    animation: bubble-menu-pop .58s cubic-bezier(.2, .85, .28, 1.25) forwards;
  }
  .home-section-motion .nav-links.open li:nth-child(1) { animation-delay: 60ms; }
  .home-section-motion .nav-links.open li:nth-child(2) { animation-delay: 140ms; }
  .home-section-motion .nav-links.open li:nth-child(3) { animation-delay: 220ms; }
  .home-section-motion .nav-links.open li:nth-child(4) { animation-delay: 300ms; }
  .home-section-motion .nav-links.open li:nth-child(5) { animation-delay: 380ms; }
  .home-section-motion .nav-links.open li:nth-child(6) { animation-delay: 460ms; }
  .home-section-motion .nav-links.open li:nth-child(7) { animation-delay: 540ms; }
  .home-section-motion .nav-links.open li:last-child { grid-column: 2; }
  .home-section-motion .nav-links.open .nav-link {
    display: grid;
    width: 100%;
    min-height: 82px;
    padding: 10px 6px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 14px rgba(255, 255, 255, .62);
    color: var(--ink);
    font-size: clamp(15px, 4.4vw, 22px);
    font-weight: 600;
    text-align: center;
  }
  .home-section-motion .nav-links.open li:nth-child(3n + 1) .nav-link { transform: rotate(-4deg); }
  .home-section-motion .nav-links.open li:nth-child(3n + 2) .nav-link { transform: rotate(2deg); }
  .home-section-motion .nav-links.open li:nth-child(3n) .nav-link { transform: rotate(-2deg); }
  .home-section-motion .nav-links.open .nav-link.active,
  .home-section-motion .nav-links.open .nav-link:hover {
    background: transparent;
    color: var(--ink);
    opacity: .58;
  }

  .home-section-motion .hero-subtitle {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    margin-right: 24px;
    padding-right: 0;
    font-size: 14px;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .home-section-motion .nav,
  .home-section-motion .nav.scrolled,
  .home-section-motion .nav .nav-toggle {
    background: rgba(247, 245, 238, .94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .home-section-motion .nav:not(.is-menu-open),
  .home-section-motion .nav:not(.is-menu-open) .nav-toggle {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: 0 4px 16px rgba(17, 17, 17, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .home-section-motion .nav:not(.is-menu-open) .nav-logo {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

@media (prefers-contrast: more) {
  .home-section-motion .nav,
  .home-section-motion .nav.scrolled {
    background: rgba(247, 245, 238, .96);
    border-color: rgba(17, 17, 17, .42);
    box-shadow: 0 5px 18px rgba(17, 17, 17, .14);
  }
}

@keyframes bubble-menu-pop {
  0% { opacity: 0; transform: translateY(24px) scale(.72); }
  68% { opacity: 1; transform: translateY(-5px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-section-motion .nav-links.open li {
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   RESPONSIVE TYPE CONTRACT
   Keep translated copy readable without changing the site's visual language.
   ============================================================ */
:root {
  --font-body: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', 'Inter', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', Helvetica, Arial, sans-serif;
  --font-mono-accessible: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

body {
  min-width: 320px;
  font-family: var(--display, var(--font-body));
}

button, input, textarea, select { font-family: inherit; }

/* These labels are supporting content, but must remain legible on low-density displays. */
body :where(
  small,
  .sec-label,
  .kicker,
  .eyebrow,
  .section-index,
  .stepper-label,
  .step-kicker,
  .signal-kicker,
  .card-top,
  .panel-top,
  .assistant-note,
  .journey-kicker,
  .card-label,
  .menu-index,
  .menu-hint,
  .deployment-strip,
  .stepper-count,
  .step-indicator b,
  .step-tags span,
  .diagram-node b,
  .diagram-node small,
  .download-checklist span,
  .download-checklist small,
  .meter-label,
  .load-stats,
  .parameter-list label,
  .step-button,
  .stepper-footer p,
  .model-card-top,
  .model-architecture,
  .model-columns h4,
  .model-columns ul,
  .model-bottom span,
  .model-experience,
  .loading-state,
  .hardware-top,
  .hardware-spec small,
  .hardware-fit,
  .size-tradeoff,
  .format-row--head,
  .format-row p b,
  .timeline-toolbar,
  .tree-seed strong,
  .tree-canopy strong,
  .timeline-aside span,
  .site-map span,
  .optimization-list span,
  .flow-stack span,
  .deployment-flow,
  .journey-footer,
  .workflow-footer,
  .solutions-footer,
  .solution-card-top,
  .solution-tag,
  .solution-footer,
  .empty-state,
  .offline-note,
  .platform-index,
  .platform-sub,
  .platform-count,
  .paper,
  .paper em,
  .photo-info-meta,
  .gallery-end,
  .photo-hero-top,
  .photo-hero-side,
  .photo-hero-scroll
) {
  font-size: max(12px, .75rem);
}

/* Grid children must be allowed to shrink before translated text wraps naturally. */
body :where(.grid, .container, .page-width, .section-shell, .solutions-hero,
  .lab-hero, .section-heading, .step-panel, .models-grid, .hardware-grid,
  .format-row, .timeline-item, .hero-inner, .streams-grid, .assistant-box) > * {
  min-width: 0;
}

/* English words stay intact; titles wrap at spaces and can grow vertically. */
body :where(h1, h2, h3, h4, .nav-link, .nav-logo, .project-title,
  .solution-title, .model-name, .workflow-card strong, .photo-hero-title) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .home-section-motion .nav {
    width: calc(100vw - 40px);
    padding-inline: 22px;
  }

  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .models-grid, .hardware-grid { grid-template-columns: 1fr 1fr; }
  .timeline-item { grid-template-columns: 56px minmax(0, 1fr); gap: 28px; }
  .timeline-aside, .site-map, .design-swatch, .flow-stack,
  .optimization-list, .deployment-flow {
    grid-column: 2;
    justify-self: start;
    margin-top: 24px;
  }
}

@media (max-width: 900px) {
  .solutions-hero, .lab-hero, .section-heading, .step-panel,
  .size-explorer, .archive-section, .future-section {
    gap: 32px;
  }

  .step-panel { grid-template-columns: 1fr; }
  .step-viewport, .step-panel { min-height: 0; }
  .step-viewport { overflow: visible; }
  .solution-card, .model-card, .hardware-card { min-height: auto; }
}

@media (max-width: 768px) {
  .container, .page-width, .section-shell {
    width: calc(100vw - 40px);
  }

  .hero-title {
    font-size: clamp(56px, 15vw, 108px);
  }

  .hero-title-line { white-space: nowrap; }
  .hero-title-line:last-child { padding-left: min(14vw, 80px); }

  .solution-grid, .models-grid, .hardware-grid { grid-template-columns: 1fr; }
  .solution-card, .model-card, .hardware-card { min-height: 0; }

  .workflow-card {
    height: auto;
    min-height: 290px;
  }

  .timeline-item { grid-template-columns: 46px minmax(0, 1fr); gap: 20px; }
  .timeline-marker { width: 46px; height: 46px; }

  .home-section-motion .hero-subtitle {
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }
}

@media (max-width: 600px) {
  .solutions-nav, .lab-nav, .journey-nav, .workflow-nav,
  body:not(.home-section-motion):not(.error-page) .nav {
    width: calc(100vw - 28px);
    padding-inline: 16px;
  }

  .solutions-hero, .lab-hero { padding-top: 150px; }
  .format-row { grid-template-columns: 1fr; gap: 12px; }
  .format-row--head { display: none; }
  .timeline-aside, .site-map, .design-swatch, .flow-stack,
  .optimization-list, .deployment-flow { grid-column: 2; }
}

/* Shared liquid-glass navigation material. Keep each page's layout and
   accent colors, but make every site-level navigation one floating layer. */
.nav:not(.is-menu-open),
.solutions-nav,
.lab-nav,
.journey-nav,
.workflow-nav,
.error-nav {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .46);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 46%, rgba(255, 255, 255, .2)),
    rgba(255, 255, 255, .18);
  box-shadow:
    0 18px 48px rgba(17, 17, 17, .11),
    0 5px 16px rgba(17, 17, 17, .06),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(24px) saturate(1.45) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.45) brightness(1.04);
}

.nav:not(.is-menu-open)::before,
.solutions-nav::before,
.lab-nav::before,
.journey-nav::before,
.workflow-nav::before,
.error-nav::before {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .2), transparent 36%),
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .24), transparent 34%);
  content: '';
  pointer-events: none;
}

.nav:not(.is-menu-open) > *,
.solutions-nav > *,
.lab-nav > *,
.journey-nav > *,
.workflow-nav > *,
.error-nav > * {
  position: relative;
  z-index: 1;
}

.nav:not(.is-menu-open) > .nav__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.solutions-nav .nav-links a,
.lab-nav .nav-links a,
.nav-links .nav-link,
.journey-nav-links a,
.workflow-nav-links a,
.nav-back,
.journey-back,
.workflow-back,
.workflow-github,
.error-nav-meta a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.solutions-nav .nav-links a:hover,
.solutions-nav .nav-links a.active,
.lab-nav .nav-links a:hover,
.lab-nav .nav-links a.active {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
}

/* The homepage React surface supplies the material itself. */
.home-section-motion .nav:not(.is-menu-open) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-section-motion .nav:not(.is-menu-open)::before { display: none; }

/* Preserve legibility on the aurora, archive, and photography pages. */
body:has(.lab-nav) .lab-nav,
body:has(.solutions-nav) .solutions-nav,
body:has(.photo-hero) .nav {
  border-color: rgba(255, 255, 255, .24);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 46%, rgba(255, 255, 255, .1)),
    rgba(12, 15, 16, .28);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .28),
    0 5px 16px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(26px) saturate(1.35) brightness(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(1.35) brightness(1.08);
}

body:has(.lab-nav) .lab-nav::after { inset: 0; }

@media (max-width: 768px) {
  .nav:not(.is-menu-open),
  .solutions-nav,
  .lab-nav,
  .journey-nav,
  .workflow-nav,
  .error-nav {
    backdrop-filter: blur(20px) saturate(1.3) brightness(1.03);
    -webkit-backdrop-filter: blur(20px) saturate(1.3) brightness(1.03);
  }

  .nav:not(.is-menu-open)::before,
  .solutions-nav::before,
  .lab-nav::before,
  .journey-nav::before,
  .workflow-nav::before,
  .error-nav::before { opacity: .72; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav:not(.is-menu-open),
  .solutions-nav,
  .lab-nav,
  .journey-nav,
  .workflow-nav,
  .error-nav {
    background: rgba(247, 245, 238, .94);
    border-color: rgba(17, 17, 17, .16);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav:not(.is-menu-open)::before,
  .solutions-nav::before,
  .lab-nav::before,
  .journey-nav::before,
  .workflow-nav::before,
  .error-nav::before { display: none; }
}

/* The navigation material is rendered by the shared GlassSurface entry. */
.nav:not(.is-menu-open),
.solutions-nav,
.lab-nav,
.journey-nav,
.workflow-nav,
.error-nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav:not(.is-menu-open)::before,
.solutions-nav::before,
.lab-nav::before,
.journey-nav::before,
.workflow-nav::before,
.error-nav::before,
body:has(.lab-nav) .lab-nav::after {
  display: none;
}

.nav:not(.is-menu-open) > .nav__glass,
.solutions-nav > .nav__glass,
.lab-nav > .nav__glass,
.journey-nav > .nav__glass,
.workflow-nav > .nav__glass,
.error-nav > .nav__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.nav__glass-surface {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow:
    0 8px 24px rgba(17, 17, 17, .08),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}

.nav__glass-surface.glass-surface--svg {
  background: light-dark(
    hsl(0 0% 100% / var(--glass-frost, 0)),
    hsl(0 0% 0% / var(--glass-frost, 0))
  ) !important;
  border-color: rgba(255, 255, 255, .62);
}

.nav__glass-surface.glass-surface--fallback {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px) saturate(1.05) brightness(1.03);
  -webkit-backdrop-filter: blur(14px) saturate(1.05) brightness(1.03);
}

.nav__glass-surface .glass-surface__content { padding: 0; }

.nav__glass-proxy {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

/* Keep navigation content readable as the surface below it changes. */
[data-nav-contrast="dark"] :where(.nav-logo, .nav-link, .nav-links a,
  .nav-back, .journey-logo, .journey-nav-links a, .journey-back,
  .workflow-logo, .workflow-nav-links a, .workflow-back, .workflow-github,
  .error-nav-meta, .error-nav-meta a, .language-switch, .language-switch button) {
  color: #111 !important;
  text-shadow: none;
}

[data-nav-contrast="light"] :where(.nav-logo, .nav-link, .nav-links a,
  .nav-back, .journey-logo, .journey-nav-links a, .journey-back,
  .workflow-logo, .workflow-nav-links a, .workflow-back, .workflow-github,
  .error-nav-meta, .error-nav-meta a, .language-switch, .language-switch button) {
  color: #f7f5ee !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}

[data-nav-contrast="dark"] :where(.nav-link::after, .nav-links .active::after) {
  background: #111 !important;
}

[data-nav-contrast="light"] :where(.nav-link::after, .nav-links .active::after) {
  background: #f7f5ee !important;
}

[data-nav-contrast="dark"] .nav__glass-surface,
[data-nav-contrast="light"] .nav__glass-surface {
  --nav-edge: rgba(255, 255, 255, .58);
  border-color: var(--nav-edge);
}

[data-nav-contrast="light"] .nav__glass-surface {
  --nav-edge: rgba(255, 255, 255, .72);
}

[data-nav-contrast="dark"] .nav__glass-surface { color-scheme: light; }
[data-nav-contrast="light"] .nav__glass-surface { color-scheme: dark; }