*, *::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;
    }
  }

      :host { display: inline-flex; align-items: center; }
      :host([disabled]) { pointer-events: none; opacity: 0.5; }

      .toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        cursor: pointer;
        min-height: var(--touch-min);
      }

      .toggle__track {
        position: relative;
        width: 44px;
        height: 24px;
        border-radius: var(--radius-full);
        background: var(--surface-overlay);
        border: 1px solid var(--border-bright);
        transition:
          background var(--transition-base),
          border-color var(--transition-base),
          box-shadow var(--transition-base);
        flex-shrink: 0;
      }

      .toggle__track:hover {
        box-shadow: var(--glow-xs);
      }

      :host([checked]) .toggle__track {
        background: var(--interactive);
        border-color: transparent;
        box-shadow:
          0 0 8px rgba(var(--interactive-rgb), 0.5),
          0 0 20px rgba(var(--interactive-rgb), 0.3),
          0 0 40px rgba(var(--interactive-rgb), 0.15);
      }

      :host([checked]) .toggle__track:hover {
        box-shadow:
          0 0 10px rgba(var(--interactive-rgb), 0.6),
          0 0 28px rgba(var(--interactive-rgb), 0.35),
          0 0 50px rgba(var(--interactive-rgb), 0.2);
      }

      .toggle__thumb {
        position: absolute;
        top: 3px;
        inset-inline-start: 3px;
        width: 16px;
        height: 16px;
        border-radius: var(--radius-full);
        background: var(--text-primary);
        transition:
          transform 300ms var(--ease-out-expo),
          box-shadow var(--transition-base);
        box-shadow: var(--shadow-xs);
      }

      :host([checked]) .toggle__thumb {
        transform: translateX(20px);
        box-shadow:
          var(--shadow-xs),
          0 0 8px rgba(var(--interactive-rgb), 0.5),
          0 0 16px rgba(var(--interactive-rgb), 0.3);
      }

      /* Sizes */
      :host([size="sm"]) .toggle__track { width: 34px; height: 18px; }
      :host([size="sm"]) .toggle__thumb { width: 12px; height: 12px; top: 2px; left: 2px; }
      :host([size="sm"][checked]) .toggle__thumb { transform: translateX(16px); }
      :host([size="sm"]) .toggle__label { font-size: var(--_text-sm); }
      :host([size="lg"]) .toggle__track { width: 56px; height: 30px; }
      :host([size="lg"]) .toggle__thumb { width: 22px; height: 22px; top: 3px; left: 3px; }
      :host([size="lg"][checked]) .toggle__thumb { transform: translateX(26px); }

      .toggle__label {
        font-family: var(--font-body);
        font-size: var(--body-size);
        font-weight: var(--field-weight, 400);
        letter-spacing: normal;
        text-transform: none;
        color: var(--text-muted);
        user-select: none;
      }

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

      /* focus-ring-exempt: a checked track is filled with the accent, so the
         standard glow (the same hue at lower alpha) dissolves into it. This
         is that glow with the alphas raised until it reads against its own
         fill. The only surface in the library that is its own focus color. */
      :host([checked]) .toggle__track:focus-visible {
        box-shadow:
          0 0 0 1px rgba(var(--interactive-rgb), 0.25),
          0 0 10px rgba(var(--interactive-rgb), 0.6),
          0 0 28px rgba(var(--interactive-rgb), 0.35),
          0 0 50px rgba(var(--interactive-rgb), 0.2);
      }

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