*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Neutralise the UA stylesheet for [popover]. PositionController promotes
     floating panels to the top layer, and the UA rules for a popover include
     a solid border, padding, a canvas background and inset:0/margin:auto —
     enough to inflate a measured panel by 14px and to paint a border no
     component asked for. :where() keeps this at zero specificity so it beats
     the UA origin but loses to every rule a component writes for itself. */
  :where([popover]) {
    border: 0;
    padding: 0;
    margin: 0;
    inset: auto;
    width: auto;
    height: auto;
    background: none;
    color: inherit;
    overflow: visible;
  }

  :host {
    transition: opacity var(--transition-fast);

    
    /* Generated from shared/tokens.js by scripts/generate/host-tokens.js. */
    /* Do not edit by hand — edit the token tree instead. */

    --font-body: var(--font-body-family, 'Host Grotesk'), var(--font-body-fallback, system-ui, sans-serif);
    --font-label: var(--font-label-family, 'Tomorrow'), var(--font-label-fallback, system-ui, -apple-system, Segoe UI, sans-serif);
    --font-mono: var(--font-mono-family, 'JetBrains Mono'), var(--font-mono-fallback, ui-monospace, monospace);
    --font-quote: var(--font-quote-family, Georgia), var(--font-quote-fallback, serif);
    --font-display: var(--font-display-family, var(--font-body-family, 'Host Grotesk')), var(--font-display-fallback, var(--font-body-fallback, system-ui, sans-serif));
    --font-accent: var(--font-label);

    /* Private mirrors: components read these, consumers override --text-*. */
    --_text-xs: var(--text-xs, 12px);
    --_text-sm: var(--text-sm, 16px);
    --_text-md: var(--text-md, 17px);
    --_text-lg: var(--text-lg, clamp(18px, 1.5vw, 20px));
    --_text-xl: var(--text-xl, clamp(22px, 2.5vw, 26px));
    --_text-2xl: var(--text-2xl, clamp(28px, 3vw, 36px));
    --_text-3xl: var(--text-3xl, clamp(36px, 5vw, 52px));

    --display-xl-size: var(--_text-3xl);
    --display-xl-weight: var(--font-display-weight, 500);
    --display-xl-spacing: -1px;
    --heading-size: var(--_text-xl);
    --heading-weight: var(--font-display-weight, 500);
    --heading-lh: 1.2;
    --body-size: var(--_text-md);
    --body-weight: var(--font-body-weight, 500);
    --body-lh: 1.7;
    --wordmark-size: clamp(20px, 2.5vw, 28px);
    --wordmark-weight: var(--font-display-weight, 500);
    --wordmark-spacing: clamp(8px, 1.2vw, 14px);
    --glyph-lh: 1;
    --ui-lh: 1.4;
    --numeral-size: clamp(24px, 3vw, 36px);
    --numeral-weight: 200;
    --label-size: var(--_text-xs);
    --label-weight: var(--font-label-weight, 600);
    --label-spacing: 2px;
    --section-title-size: var(--label-size);
    --section-title-weight: var(--label-weight);
    --section-title-spacing: var(--label-spacing);
    --ui-accent-size: 16px;
    --ui-accent-weight: var(--font-label-weight, 600);
    --ui-accent-spacing: 0.5px;
    --code-size: 14px;
    --code-lh: 1.8;
    --label-inline-size: 10px;
    --label-inline-spacing: 0.75px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* Radii */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions and motion */
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-base: var(--duration-base) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-standard);
    --transition-enter: var(--duration-enter) var(--ease-out);
    --transition-exit: var(--duration-exit) var(--ease-in);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 400ms;
    --duration-enter: 500ms;
    --duration-exit: 300ms;
    --ease-out-expo: var(--ease-out);
    --ease-in-out: var(--ease-standard);

    /* Z-index */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-tooltip: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    --z-max: 9999;

    /* Glow and focus */
    --glow-xs: 0 0 6px rgba(var(--accent-primary-rgb), 0.3);
    --glow-sm: 0 0 8px rgba(var(--accent-primary-rgb), 0.3);
    --glow-md: 0 0 12px rgba(var(--accent-primary-rgb), 0.25);
    --glow-status: 0 0 12px rgba(var(--_status-rgb), var(--glow-status-alpha, 0.15));
    --glow-status-alpha: 0.15;
    --glow-hover: 0 0 12px rgba(var(--accent-primary-rgb), 0.15);
    --focus-ring: 0 0 0 1px rgba(var(--accent-primary-rgb),0.25);
    --focus-glow: 0 0 0 1px rgba(var(--accent-primary-rgb),0.2), 0 0 6px rgba(var(--accent-primary-rgb),0.35), 0 0 16px rgba(var(--accent-primary-rgb),0.2), 0 0 40px rgba(var(--accent-secondary-rgb),0.12);
    --focus-error: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-error), 0 0 16px rgba(var(--color-error-rgb), 0.2);
    --focus-inset: inset 0 0 0 2px var(--interactive);
    --focus-thumb: 0 0 8px rgba(var(--interactive-rgb), 0.5), 0 0 20px rgba(var(--interactive-rgb), 0.25);

    /* Decorative presets */
    --gradient-sunset: linear-gradient(135deg, #ff6b6b, #ffa500, #ff4757);
    --gradient-ocean: linear-gradient(135deg, #00d2ff, #3a7bd5, #6dd5fa);
    --orb-close: #ff5f57;
    --orb-minimize: #febc2e;
    --orb-maximize: #28c840;

    /* Lobes of light */
    --lobe-line: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-start: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0));
    --lobe-end: linear-gradient(var(--lobe-axis, 90deg), rgba(var(--lobe-rgb, var(--border-default-rgb)), 0), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 1)));
    --lobe-ambient: radial-gradient(var(--lobe-shape, ellipse), rgba(var(--lobe-rgb, var(--border-default-rgb)), var(--lobe-alpha, 0.08)) 0%, rgba(var(--lobe-rgb, var(--border-default-rgb)), 0) var(--lobe-extent, 70%));

    /* Semantic aliases */
    --interactive: var(--accent-primary);
    --interactive-rgb: var(--accent-primary-rgb);
    --interactive-hover: var(--glow-hover);
    --interactive-active: var(--glow-primary);
    --interactive-focus: var(--focus-glow);
    --interactive-focus-ring: var(--focus-ring);
    --interactive-focus-error: var(--focus-error);
    --interactive-focus-inset: var(--focus-inset);
    --interactive-focus-thumb: var(--focus-thumb);
    --interactive-muted: var(--text-ghost);
    --surface-base: var(--bg-deep);
    --surface-primary: var(--bg-surface);
    --surface-raised: var(--bg-card);
    --surface-overlay: var(--bg-elevated);
    --surface-hover: var(--bg-hover);
    --divider: var(--border-subtle);
    --on-accent: var(--surface-base);

    /* Interactive and layout */
    --touch-min: 24px;
    --touch-pad: 4px;
    --max-width: 1120px;
    --max-width-sm: 720px;
    --nav-height: 64px;
    --nav-row-inset: var(--space-sm);

  }

  
  @media (pointer: coarse) {
    :host {
      --touch-min: 36px;
      --touch-pad: 8px;
    }
  }


  /* Reduced motion, once, for every component that adopts these styles.

     This was copy-pasted verbatim into sixty-nine component files while fifteen
     animating components had no guard at all — which is the usual outcome when
     a cross-cutting rule is a convention rather than a place. Components keep
     their own blocks only for what this cannot express: scroll-behavior,
     animation-play-state, a transform that must be neutralised rather than
     shortened.

     0.01ms rather than "animation: none" on purpose. A component that removes
     itself on animationend — the exiting toast and snackbar both do — would
     wait forever for an event that a canceled animation never fires. A
     duration this short is imperceptible and still completes. */
  @media (prefers-reduced-motion: reduce) {
    :host *,
    :host *::before,
    :host *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

      :host {
        display: block;
        position: relative;
        font-family: var(--font-body);
        /* container-type: inline-size on .nav__container (below) makes the
           component's intrinsic inline size zero — containment is the point,
           but it means a shrink-to-fit parent has nothing to measure. As a
           flex item this host therefore sized to 0, the collapse query read
           0 <= 900, and the desktop bar display:none'd itself at every
           viewport — the site's own top-bar nav vanished on the day the
           container query landed. A contained container must be sized from
           outside, so the host claims the row's free space instead of asking
           its contents. In non-flex contexts flex is inert and display:block
           already spans. */
        flex: 1 1 auto;
        min-width: 0;
      }

      .nav {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        /* With the host stretching (above), where the items sit inside it is
           the embedder's call — arc-top-bar sets this from nav-align. */
        justify-content: var(--nav-justify, flex-start);
      }

      .nav__item {
        position: relative;
        display: flex;
        align-items: center;
      }

      .nav__trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-family: var(--font-label);
        font-size: var(--_text-xs);
        font-weight: var(--font-label-weight, 600);
        --_trigger-ls: 2px;
        letter-spacing: var(--_trigger-ls);
        text-transform: uppercase;
        color: var(--text-muted);
        background: transparent;
        /* --border-default, not --border-subtle: this is a standalone control
           floating on a bar, not a hairline between rows, and subtle put its
           outline within a point of the background. */
        border: 1px solid var(--border-default);
        /* Pill, like every other standalone control in a top bar — the buttons,
           the version badge, the icon-only toggles. The dropdown rows and the
           mobile panel links below keep --radius-sm: those are rows inside a
           container, the same class of thing as a sidebar link, and rounding
           them would make a list read as a pile of separate objects. */
        border-radius: var(--radius-full);
        /* The inline padding is asymmetric by half the letter-spacing, which is
           what puts the word in the middle rather than merely putting its *box*
           there. letter-spacing adds its 2px after the final letter too, and
           that trailing space is inside the box being centered — so the glyphs
           end up sitting half of it, 1px, to the left. Derived from the same
           custom property the letter-spacing uses, so the two cannot drift. */
        padding-block: var(--space-sm);
        padding-inline:
          calc(var(--space-sm) + var(--space-xs) + var(--_trigger-ls) / 2)
          calc(var(--space-sm) + var(--space-xs) - var(--_trigger-ls) / 2);
        cursor: pointer;
        text-decoration: none;
        transition:
          color var(--transition-fast),
          background var(--transition-fast),
          border-color var(--transition-fast),
          box-shadow var(--transition-fast),
          transform 120ms var(--ease-out-expo);
        white-space: nowrap;
      }

      .nav__trigger:hover,
      .nav__trigger--open {
        color: var(--text-primary);
        background: var(--surface-hover);
        box-shadow: var(--glow-sm);
      }

      /* Press feedback. There was none: the trigger transitioned color,
         background, border and shadow but had no :active rule and no transform
         in its transition list, so it was the one control in the bar that did
         not move under the pointer while the buttons and icon buttons beside it
         did. 0.97 and 120ms are what arc-button uses for a wide control —
         arc-icon-button's 0.93 is pitched for a small square and reads as a
         lurch across something this long. */
      .nav__trigger:active {
        transform: scale(0.97);
      }

      .nav__trigger--active {
        color: var(--interactive);
        background: rgba(var(--interactive-rgb), 0.06);
        border-color: rgba(var(--interactive-rgb), 0.3);
        box-shadow: inset 0 0 8px rgba(var(--interactive-rgb), 0.06), 0 0 8px rgba(var(--interactive-rgb), 0.08);
      }

      .nav__trigger--active:hover {
        border-color: rgba(var(--interactive-rgb), 0.5);
        box-shadow: inset 0 0 8px rgba(var(--interactive-rgb), 0.08), 0 0 12px rgba(var(--interactive-rgb), 0.12);
      }

      .nav__trigger--muted {
        color: var(--text-muted);
        font-weight: var(--font-body-weight, 500);
        background: transparent;
        border-color: transparent;
      }

      .nav__trigger--muted:hover,
      .nav__trigger--muted.nav__trigger--open {
        color: var(--text-primary);
        background: rgba(var(--text-primary-rgb), 0.12);
        border-color: transparent;
        box-shadow: 0 0 12px rgba(var(--text-primary-rgb), 0.06);
      }

      .nav__trigger--muted.nav__trigger--active {
        color: var(--text-primary);
        background: rgba(var(--interactive-rgb), 0.08);
        border-color: transparent;
        box-shadow: 0 0 12px rgba(var(--interactive-rgb), 0.1);
      }

      .nav__trigger--muted.nav__trigger--active:hover {
        background: rgba(var(--interactive-rgb), 0.12);
        box-shadow: 0 0 16px rgba(var(--interactive-rgb), 0.14);
      }

      .nav__trigger--primary {
        color: var(--interactive);
        border-color: rgba(var(--interactive-rgb), 0.2);
        background: rgba(var(--interactive-rgb), 0.04);
      }

      .nav__trigger--primary:hover,
      .nav__trigger--primary.nav__trigger--open {
        color: var(--interactive);
        background: rgba(var(--interactive-rgb), 0.1);
        border-color: rgba(var(--interactive-rgb), 0.4);
        box-shadow: var(--interactive-hover);
      }

      .nav__trigger--primary.nav__trigger--active {
        color: var(--interactive);
        background: rgba(var(--interactive-rgb), 0.1);
        border-color: rgba(var(--interactive-rgb), 0.5);
        box-shadow: inset 0 0 10px rgba(var(--interactive-rgb), 0.1), 0 0 14px rgba(var(--interactive-rgb), 0.15);
      }

      .nav__trigger--primary.nav__trigger--active:hover {
        border-color: rgba(var(--interactive-rgb), 0.6);
        box-shadow: inset 0 0 12px rgba(var(--interactive-rgb), 0.12), 0 0 18px rgba(var(--interactive-rgb), 0.2);
      }

      .nav__trigger:focus-visible {
        outline: none;
        box-shadow: var(--interactive-focus);
      }

      .nav__chevron {
        display: inline-block;
        width: 10px;
        height: 10px;
        transition: transform var(--transition-fast);
      }

      .nav__chevron--open {
        transform: rotate(180deg);
      }

      .nav__dropdown {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        min-width: 280px;
        background: var(--surface-raised);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--space-sm);
        box-shadow: var(--shadow-overlay);
        z-index: var(--z-dropdown);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        pointer-events: none;
        transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
      }

      .nav__dropdown--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      .nav__dropdown-item {
        display: block;
        text-align: start;
        background: none;
        border: none;
        padding: var(--touch-pad) var(--space-md);
        min-height: var(--touch-min);
        border-radius: var(--radius-sm);
        cursor: pointer;
        text-decoration: none;
        color: var(--text-primary);
        transition: background var(--transition-fast);
      }

      .nav__dropdown-item:hover {
        background: rgba(var(--interactive-rgb), 0.08);
      }

      .nav__dropdown-item:focus-visible {
        outline: none;
        box-shadow: var(--interactive-focus);
      }

      .nav__dropdown-label {
        display: block;
        font-size: var(--_text-sm);
        font-weight: var(--font-body-weight, 500);
        color: var(--text-primary);
        margin-bottom: 2px; /* cosmetic micro-spacing */
      }

      .nav__dropdown-desc {
        display: block;
        font-size: var(--_text-sm);
        color: var(--text-muted);
        line-height: var(--ui-lh);
      }

      .nav__slot-host { display: none; }

      /* The query container for the desktop bar.
       *
       * A wrapper rather than :host, and the reason is that containment is
       * public. container-type: inline-size implies contain: layout style
       * inline-size on whatever carries it, and on :host that is the custom
       * element itself — so a consumer's page would inherit a containing block
       * for fixed-position content and an element whose size stops depending on
       * its contents, neither of which this component asked them to accept.
       *
       * It would also re-create the hazard the mobile overlay already routes
       * around. That overlay renders into a portal rather than this shadow root
       * (finding #67) precisely because ancestors kept clipping and stacking
       * it; a layout-contained host is one more such ancestor, waiting for the
       * next fixed child. Wrapping only the thing the query is about costs one
       * block-level div and leaves both problems unmade. */
      .nav__container {
        container-type: inline-size;
        container-name: nav;
        display: block;
      }

      /* ── Mobile panel ── */
      /* nav-fit: keep in step with tokens.breakpoint.navFit.
         Literal for prism's sake — see the note in arc-top-bar. Guarded by
         check-breakpoint-drift.js.

         A container query, not a media query (V4-PLAN 4.4). The unit here is
         the component: a nav in a narrow sidebar should collapse whatever the
         viewport is doing, and a nav in a wide page should not collapse because
         a phone is holding the page. It is also what makes the desktop bar
         testable — a test can set the container's width, and could never set
         the viewport's.

         navFit, not navCollapse: this measures the *column the pills sit in*,
         not the page. Carrying the 900px viewport number into a container
         query hid the nav on every docs page at every desktop width — the
         search box and actions leave the centre column ~860px inside the
         bar's 1280px cap, which a 900px reading calls mobile while the
         viewport-keyed hamburger stays hidden. See the token's comment. */
      @container nav (max-width: 480px) {
        .nav { display: none; }
      }

      .mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        top: var(--nav-height);
        background: var(--overlay-backdrop);
        z-index: var(--z-overlay);
      }

      .mobile-backdrop--open {
        display: block;
        animation: mobile-fade-in var(--duration-enter) var(--ease-out-expo) both;
      }

      .mobile-backdrop--closing {
        display: block;
        animation: mobile-fade-out var(--duration-exit) var(--ease-in) both;
      }

      .mobile-panel {
        display: none;
        position: fixed;
        top: var(--nav-height);
        inset-inline-start: 0;
        inset-inline-end: 0;
        max-height: calc(100dvh - var(--nav-height));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background:
          radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-primary-rgb), 0.07), rgba(var(--accent-primary-rgb), 0) 70%),
          color-mix(in srgb, var(--surface-base) 92%, transparent);
        backdrop-filter: blur(12px) saturate(130%);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-overlay);
        will-change: clip-path, opacity;
      }

      /* The lit hairline every other v3 surface ends on — the footer's horizon,
         the tooltip's top edge — rather than a flat --divider. The panel hangs
         from the bar, so its own bottom edge is where it meets the page. */
      .mobile-panel::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 1px;
        background: var(--divider-glow);
      }

      .mobile-panel--open {
        display: block;
        animation: mobile-slide-in var(--duration-enter) var(--ease-out-expo) both;
      }

      .mobile-panel--closing {
        display: block;
        animation: mobile-slide-out var(--duration-exit) var(--ease-in) both;
      }

      .mobile-panel--open .mobile-item {
        animation: mobile-item-in 400ms var(--ease-out-expo) both;
      }

      .mobile-panel--closing .mobile-item {
        animation: mobile-item-out var(--duration-exit) var(--ease-in) both;
      }

      @keyframes mobile-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes mobile-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
      }

      @keyframes mobile-slide-in {
        from { clip-path: inset(0 0 100% 0); opacity: 0; }
        to { clip-path: inset(0 0 0 0); opacity: 1; }
      }

      @keyframes mobile-slide-out {
        from { clip-path: inset(0 0 0 0); opacity: 1; }
        to { clip-path: inset(0 0 100% 0); opacity: 0; }
      }

      @keyframes mobile-item-in {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes mobile-item-out {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-8px); }
      }

      .mobile-glow {
        height: 2px;
        background: var(--divider-glow);
      }

      .mobile-list {
        list-style: none;
        margin: 0;
        padding: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
      }

      .mobile-item {}

      .mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--space-md) var(--space-lg);
        min-height: var(--touch-min);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-family: var(--font-label);
        font-size: var(--section-title-size);
        font-weight: var(--section-title-weight);
        letter-spacing: var(--section-title-spacing);
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--transition-fast), background var(--transition-fast),
          border-color var(--transition-fast), box-shadow var(--transition-fast),
          transform 80ms var(--ease-standard);
      }

      .mobile-trigger:hover {
        color: var(--text-primary);
        background: var(--surface-hover);
        box-shadow: var(--glow-sm);
      }

      .mobile-trigger:active {
        transform: scale(0.98);
        background: rgba(var(--interactive-rgb), 0.08);
        border-color: rgba(var(--interactive-rgb), 0.25);
        transition-duration: 0ms;
      }

      /* One row is marked, and it is marked the way v3 marks state everywhere
         else: tint, glow, accent text. Every row used to carry its own fill and
         border, which ranks none of them — the same thing the API tables were
         doing before they stopped. The color goes through the theme's solved
         text mix, so the label holds AA on the tint in both themes. */
      .mobile-trigger--active {
        color: color-mix(in srgb, var(--interactive), var(--text-primary) var(--accent-text-mix, 0%));
        background: rgba(var(--interactive-rgb), 0.08);
        border-color: rgba(var(--interactive-rgb), 0.28);
        box-shadow: var(--glow-sm);
      }

      .mobile-trigger--active:hover {
        border-color: rgba(var(--interactive-rgb), 0.45);
        box-shadow: var(--glow-md);
      }

      .mobile-trigger--muted {
        color: var(--text-muted);
        font-weight: var(--field-weight, 400);
        border-color: transparent;
        background: transparent;
      }

      .mobile-trigger--muted:hover {
        color: var(--text-primary);
        background: rgba(var(--text-primary-rgb), 0.06);
        box-shadow: var(--glow-sm);
      }

      .mobile-trigger--muted.mobile-trigger--active {
        color: var(--text-primary);
        background: rgba(var(--interactive-rgb), 0.06);
        border-color: rgba(var(--interactive-rgb), 0.2);
        box-shadow: 0 0 8px rgba(var(--interactive-rgb), 0.08);
      }

      .mobile-trigger--muted.mobile-trigger--active:hover {
        background: rgba(var(--interactive-rgb), 0.1);
        box-shadow: var(--interactive-hover);
      }

      .mobile-trigger--primary {
        color: var(--interactive);
        border-color: rgba(var(--interactive-rgb), 0.2);
        background: rgba(var(--interactive-rgb), 0.04);
      }

      .mobile-trigger--primary:hover {
        color: var(--interactive);
        background: rgba(var(--interactive-rgb), 0.1);
        border-color: rgba(var(--interactive-rgb), 0.4);
        box-shadow: var(--interactive-hover);
      }

      .mobile-trigger--primary.mobile-trigger--active {
        color: var(--interactive);
        background: rgba(var(--interactive-rgb), 0.1);
        border-color: rgba(var(--interactive-rgb), 0.5);
        box-shadow: inset 0 0 10px rgba(var(--interactive-rgb), 0.1),
          0 0 14px rgba(var(--interactive-rgb), 0.15);
      }

      .mobile-trigger--primary.mobile-trigger--active:hover {
        border-color: rgba(var(--interactive-rgb), 0.6);
        box-shadow: inset 0 0 12px rgba(var(--interactive-rgb), 0.12),
          0 0 18px rgba(var(--interactive-rgb), 0.2);
      }

      .mobile-chevron {
        width: 12px;
        height: 12px;
        transition: transform var(--transition-fast);
        flex-shrink: 0;
      }

      .mobile-chevron--open {
        transform: rotate(180deg);
      }

      .mobile-children {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--transition-slow), visibility var(--transition-slow);
      }

      .mobile-children--open {
        grid-template-rows: 1fr;
        visibility: visible;
      }

      .mobile-children__inner {
        overflow: hidden;
        padding: 0 var(--space-sm);
      }

      .mobile-child {
        display: block;
        padding: var(--space-sm) var(--space-md);
        min-height: var(--touch-min);
        text-decoration: none;
        color: var(--text-primary);
        font-weight: var(--field-weight, 400);
        font-size: var(--body-size);
        border-radius: var(--radius-sm);
        -webkit-tap-highlight-color: transparent;
        transition: background var(--transition-fast), transform 80ms var(--ease-standard);
        cursor: pointer;
      }

      .mobile-child:hover {
        background: rgba(var(--interactive-rgb), 0.08);
      }

      .mobile-child:active {
        transform: scale(0.98);
        background: rgba(var(--interactive-rgb), 0.12);
        transition-duration: 0ms;
      }

      .mobile-child-label {
        display: block;
      }

      .mobile-child-desc {
        display: block;
        font-size: var(--_text-sm);
        color: var(--text-muted);
        line-height: var(--ui-lh);
        margin-top: 2px;
      }