*, *::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);
    --section-title-size: var(--_text-xs);
    --section-title-weight: var(--font-label-weight, 600);
    --section-title-spacing: 2px;
    --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);

    /* 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);
      }

      .nav {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
      }

      .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: 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: 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: 1.4;
      }

      .nav__slot-host { display: none; }

      /* ── Mobile panel ── */
      /* nav-collapse: keep in step with tokens.breakpoint.navCollapse.
         Literal for prism's sake — see the note in arc-top-bar. Guarded by
         check-breakpoint-drift.js. */
      @media (max-width: 900px) {
        .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), transparent 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: 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: 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: 1.4;
        margin-top: 2px;
      }