*, *::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-size: 14px;
    --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);

  }

  /* The hidden attribute hides, on every component. A component's own
     :host display (block, flex, inline-flex…) outranked the UA's
     [hidden] { display: none }, so hiding an element the platform way did
     nothing: a filtered arc-list-item stayed on screen. :host([hidden]) is
     more specific than any bare :host, so it wins wherever it is declared,
     and it lives here once rather than in every file. */
  :host([hidden]) {
    display: none;
  }

  
  @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;
    }
  }

  /* ── Primary ── */
  :host([variant="primary"]) .btn,
  :host([variant="primary"]) .btn-slot::slotted(a) {
    background: var(--interactive);
    color: var(--on-accent);
    border-color: var(--interactive);
  }
  :host([variant="primary"]) .btn:hover,
  :host([variant="primary"]) .btn-slot::slotted(a:hover) {
    box-shadow: var(--interactive-active);
  }

  /* ── Secondary ── */
  :host([variant="secondary"]) .btn,
  :host([variant="secondary"]) .btn-slot::slotted(a) {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
  }
  :host([variant="secondary"]) .btn:hover,
  :host([variant="secondary"]) .btn-slot::slotted(a:hover) {
    border-color: var(--interactive);
    color: var(--interactive);
    box-shadow: 0 0 20px rgba(var(--interactive-rgb), 0.15);
  }

  /* ── Ghost ── */
  :host([variant="ghost"]) .btn,
  :host([variant="ghost"]) .btn-slot::slotted(a) {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
  }
  :host([variant="ghost"]) .btn:hover,
  :host([variant="ghost"]) .btn-slot::slotted(a:hover) {
    color: var(--text-primary);
    background: var(--surface-hover);
  }

  /* ── Focus ── */
  .btn:focus-visible { outline: none; box-shadow: var(--interactive-focus); }
  .btn-slot::slotted(a:focus-visible) { outline: none; box-shadow: var(--interactive-focus); }

  /* ── Disabled ── */
  :host([disabled]) .btn,
  :host([disabled]) .btn-slot::slotted(a) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

  /* Circular. An icon-only control has no text to give it a reading direction,
     so a square is arbitrary about its corners in a way a circle is not; it
     also separates the bare-glyph controls from the labeled, rectangular ones
     at a glance. This is the shape arc-theme-toggle already had, now applied to
     both rather than to one of them. */
  .btn:not(.btn--has-text),
  .btn-slot::slotted(a) { border-radius: var(--radius-full); }

  .btn:not(.btn--has-text) { aspect-ratio: 1; }

  .btn:not(.btn--has-text),
  .btn-slot::slotted(a) { min-width: var(--touch-min); min-height: var(--touch-min); }

  /* The default arm is keyed on "not the others" so an unrecognized size lands
     on it rather than on no rule at all. See check-enum-fallbacks.js. The
     explicit [size="md"] selector stays so prism can infer the union. */
  :host(:not([size="lg"]):not([size="sm"]):not([size="xs"])) .btn:not(.btn--has-text),
  :host(:not([size="lg"]):not([size="sm"]):not([size="xs"])) .btn-slot::slotted(a),
  :host([size="md"]) .btn:not(.btn--has-text),
  :host([size="md"]) .btn-slot::slotted(a) { width: 36px; height: 36px; }

  :host([size="xs"]) .btn:not(.btn--has-text),
  :host([size="xs"]) .btn-slot::slotted(a) { width: 28px; height: 28px; }

  :host([size="sm"]) .btn:not(.btn--has-text),
  :host([size="sm"]) .btn-slot::slotted(a) { width: 32px; height: 32px; }

  :host([size="lg"]) .btn:not(.btn--has-text),
  :host([size="lg"]) .btn-slot::slotted(a) { width: 44px; height: 44px; }

      :host { display: inline-flex; }
      :host([disabled]) { pointer-events: none; }

      /* Anchor-adoption form: a lone slotted <a> becomes the control and takes
         the same box styling as .btn; see shared/anchor-adoption.js. The
         adopted anchor is always treated as icon-only, since any text the
         consumer wants lives inside their own anchor. */
      .btn,
      .btn-slot::slotted(a) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition:
          background var(--transition-base),
          border-color var(--transition-base),
          box-shadow var(--transition-base),
          color var(--transition-base),
          transform 120ms var(--ease-out-expo);
        text-decoration: none;
        box-sizing: border-box;
        color: inherit;
      }

      /* With text */
      .btn--has-text {
        font-family: var(--font-label);
        font-weight: var(--font-label-weight, 600);
        text-transform: uppercase;
        --_ls: 1.5px;
        letter-spacing: var(--_ls);
        white-space: nowrap;
      }

      .btn__text {
        line-height: var(--glyph-lh);
        /* letter-spacing also lands after the final letter, and that trailing
           space is inside the box being centered, so the word rendered half of
           it, 0.75px, to the left of centre. Pulled back off the end here, at
           the cause: the box then matches the ink and every size centres
           correctly, where compensating with padding would have meant patching
           each of the four size rules separately.
           arc-navigation-menu does the same correction with asymmetric padding
           instead, because its label is a bare text node with no element to
           hang a margin on. */
        margin-inline-end: calc(var(--_ls) * -1);
      }

      /* Sizes, icon-only: see iconBoxStyles in ../button-styles.js, shared with
         arc-theme-toggle so the two cannot drift apart in a top bar. */

      /* Sizes: with text */
      .btn--has-text { min-height: var(--touch-min); }
      :host([size="xs"]) .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--_text-xs); }
      :host([size="sm"]) .btn--has-text { padding: calc(var(--space-xs) + 2px) calc(var(--space-sm) + 2px); font-size: var(--_text-xs); }
      :host(:not([size="lg"]):not([size="sm"]):not([size="xs"])) .btn--has-text,
      :host([size="md"]) .btn--has-text { padding: var(--space-xs) var(--space-sm); font-size: var(--_text-xs); }
      :host([size="lg"]) .btn--has-text { padding: var(--space-sm) var(--space-md); font-size: var(--_text-xs); }

      /* Default → ghost */
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn,
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn-slot::slotted(a) {
        background: transparent;
        color: var(--text-muted);
        border-color: transparent;
      }
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn:hover,
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn-slot::slotted(a:hover) {
        color: var(--text-primary);
        background: var(--surface-hover);
      }

      /* :active scale */
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn:active,
      :host(:not([variant="primary"]):not([variant="secondary"])) .btn-slot::slotted(a:active),
      :host([variant="ghost"]) .btn:active,
      :host([variant="ghost"]) .btn-slot::slotted(a:active) {
        transform: scale(0.93);
        background: var(--surface-overlay);
      }
      :host([variant="secondary"]) .btn:active,
      :host([variant="secondary"]) .btn-slot::slotted(a:active) {
        transform: scale(0.93);
        background: rgba(var(--interactive-rgb), 0.05);
      }
      :host([variant="primary"]) .btn:active,
      :host([variant="primary"]) .btn-slot::slotted(a:active) {
        transform: scale(0.93);
        box-shadow: 0 0 8px rgba(var(--interactive-rgb), 0.5);
      }

      /* IconButton secondary uses text-secondary instead of text-primary */
      :host([variant="secondary"]) .btn,
      :host([variant="secondary"]) .btn-slot::slotted(a) {
        color: var(--text-secondary);
      }

      /* IconButton secondary hover uses smaller glow */
      :host([variant="secondary"]) .btn:hover,
      :host([variant="secondary"]) .btn-slot::slotted(a:hover) {
        box-shadow: 0 0 16px var(--accent-primary-ring);
      }