*, *::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;
        width: 100%;
        z-index: 100;
      }

      :host([fixed]) {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
      }

      .topbar {
        position: relative;
        height: var(--nav-height);
        background: color-mix(in srgb, var(--surface-base) 85%, transparent);
        backdrop-filter: blur(12px) saturate(130%);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
        border-bottom: 1px solid var(--divider);
        transition:
          background var(--transition-slow),
          backdrop-filter var(--transition-slow),
          border-color var(--transition-slow);
      }

      /* A pinned region has to be one color, not two.
         arc-footer paints --surface-base flat, while this bar mixes it 85% with
         transparent. When the region's scheme matches the page that costs
         nothing — 15% of a near-black page bleeds through as near-black. When
         it doesn't, the 15% is 15% of the opposite ground, so the identical
         token renders one color up here and another down there, and two regions
         pinned to the same scheme visibly disagree. Opaque when the region is
         pinned; the translucency stays for bars that follow the page, which are
         the ones with something worth seeing behind them. The blur goes with
         it, and loses nothing: it was already imperceptible behind an
         85%-opaque fill. */
      :host(.theme-fixed-dark) .topbar,
      :host(.theme-fixed-light) .topbar {
        background: var(--surface-base);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      /* Immersive: at the top of the document the bar carries no chrome at all,
         and takes on the blur, the fill and the border only once content is
         actually passing underneath and the boundary starts doing work.
         Opt-in, because it suits a page whose first screen is one designed
         image — a hero, a landing page — and actively hurts an application
         layout, where the bar is one panel among several defined panels and is
         expected to be a fixed edge rather than something that comes and goes.
         Also gated on [fixed]: a bar in the flow scrolls away with the page and
         never overlays anything, so it has nothing to earn. */
      /* :not([menu-open]) because an open mobile panel is content passing
         underneath in every sense that matters — it is a filled, blurred sheet
         hanging directly below a bar that is still showing the hero through
         itself, so the panel reads as floating loose under nothing. The bar
         earns its chrome the moment it has something to sit on top of. */
      :host([immersive][fixed]:not([scrolled]):not([menu-open])) .topbar {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
      }

      @media (prefers-reduced-motion: reduce) {
        .topbar { transition: none; }
      }

      .topbar__content {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        height: 100%;
        padding-inline: var(--space-lg);
      }

      arc-container { height: 100%; }
      arc-container::part(container) { height: 100%; }

      :host([contained]) .topbar__content {
        padding-inline: 0;
      }

      .topbar__glow {
        position: absolute;
        bottom: -1px;
        inset-inline-start: 20%;
        inset-inline-end: 20%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--accent-secondary-rgb), 0.2), rgba(var(--accent-primary-rgb), 0.15), transparent);
        opacity: 0;
        transition: opacity var(--transition-slow);
        pointer-events: none;
      }

      :host([scrolled]) .topbar__glow {
        opacity: 1;
      }

      .topbar__brand {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--text-primary);
        text-decoration: none;
        flex: 0 0 auto;
        overflow: visible;
      }

      .topbar__heading {
        font-family: var(--font-body);
        font-size: var(--wordmark-size);
        font-weight: var(--wordmark-weight);
        letter-spacing: var(--wordmark-spacing);
        text-transform: uppercase;
      }

      .topbar__center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
      }

      .topbar__actions {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-shrink: 0;
      }

      /* Centered nav means centered in the *bar*, not in whatever space the brand
         and the actions happen to leave over. With the flex row alone the nav
         sits at the midpoint of the gap between them, which is the middle of
         the viewport only when those two are identically wide — they never are.
         Giving both sides an equal flex basis of zero makes them claim the same
         width whatever they contain, so the middle column's centre is the bar's
         centre. Only for nav-align=center: left and right alignment want the
         brand to keep its natural width.

         Keyed on "not the other two" as well as on the value itself: nav-align
         defaults to center in the constructor and is not reflected, so
         :host([nav-align="center"]) alone matches nothing in the default case —
         the very failure check-enum-fallbacks.js exists to catch. The explicit
         selector stays beside it so prism can still infer the union. */
      :host(:not([nav-align="left"]):not([nav-align="right"])) .topbar__brand,
      :host(:not([nav-align="left"]):not([nav-align="right"])) .topbar__actions,
      :host([nav-align="center"]) .topbar__brand,
      :host([nav-align="center"]) .topbar__actions {
        flex: 1 1 0;
        min-width: 0;
      }

      :host(:not([nav-align="left"]):not([nav-align="right"])) .topbar__actions,
      :host([nav-align="center"]) .topbar__actions {
        justify-content: flex-end;
      }

      :host(:not([nav-align="left"]):not([nav-align="right"])) .topbar__center,
      :host([nav-align="center"]) .topbar__center {
        flex: 0 1 auto;
      }

      .topbar__menu-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        aspect-ratio: 1;
        background: none;
        /* Circular and border-less, like the icon buttons it shares the bar
           with. It was a --radius-sm square with a visible edge, which the
           round-icon-button pass left behind — the one square control in a row
           of circles, and the only one outlined. The open state still takes an
           accent border, so the affordance is kept where it means something. */
        border: 1px solid transparent;
        color: var(--text-primary);
        cursor: pointer;
        padding: 0;
        border-radius: var(--radius-full);
        transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
      }

      .topbar__menu-btn:hover {
        background: var(--surface-hover);
        box-shadow: var(--glow-sm);
      }

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

      .topbar__menu-btn--open {
        border-color: rgba(var(--interactive-rgb), 0.3);
        background: rgba(var(--interactive-rgb), 0.06);
      }

      .topbar__hamburger {
        width: 16px;
        height: 12px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .topbar__hamburger-line {
        display: block;
        width: 100%;
        height: 1.5px;
        background: currentColor;
        border-radius: 1px; /* cosmetic rounding on 1.5px hamburger lines -- intentionally not tokenized */
        transition: transform 400ms var(--ease-out), opacity 250ms var(--ease-standard), width 400ms var(--ease-out);
        transform-origin: center;
      }

      .topbar__hamburger-line:nth-child(2) {
        width: 100%;
      }

      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(1) {
        transform: translateY(5.25px) rotate(45deg);
      }

      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(2) {
        opacity: 0;
        width: 0;
      }

      .topbar__menu-btn--open .topbar__hamburger-line:nth-child(3) {
        transform: translateY(-5.25px) rotate(-45deg);
      }

      /* nav-collapse: keep in step with tokens.breakpoint.navCollapse.
         A literal, not an interpolation. prism reads these css templates as
         text to generate the standalone CSS package, and cannot evaluate an
         interpolation; doing it here compiled fine and dropped this query from
         arc-ui.css entirely. The JS side reads the token directly, and
         check-breakpoint-drift.js asserts this number still matches it.
         Separately, and the reason this comment is worth reading: a comment
         sitting directly above an at-rule used to make prism scope it, emitting
         the component selector in front of the @media — invalid CSS, so the
         rule stopped applying in the standalone package the moment this note
         was added. Fixed in prism (v3, "don't scope an at-rule whose prelude a
         comment precedes"); if a media query ever goes missing from arc-ui.css
         again, check the emitted CSS before trusting that it compiled. */
      @media (max-width: 900px) {
        .topbar__menu-btn { display: flex; }
      }