*, *::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;
        /* The indicator's light. A lobe shape substitutes its var()s at the
           element that declares it, and the shapes are declared on :host — an
           input set on the indicator itself would paint in the fallback color
           with nothing failing. */
        --lobe-rgb: var(--interactive-rgb);
        --lobe-alpha: 1;
      }

      .tabs__list {
        position: relative;
        display: flex;
        border-bottom: 1px solid var(--divider);
        gap: var(--space-xs);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        /* A scrollbar here would lie directly on the divider and read as a
           second rule under the bar. Overflow announces itself through the
           half-cut tab at the edge, and the selection scrolls itself into
           view, so nothing depends on the bar being visible. */
        scrollbar-width: none;
      }

      .tabs__list::-webkit-scrollbar { display: none; }

      /* Alignment */
      :host([align="center"]) .tabs__list { justify-content: center; }
      :host([align="end"]) .tabs__list { justify-content: flex-end; }

      /* ── The indicator ──
         One element for every variant and orientation: the component hands it
         the selected button's box and CSS decides what to paint inside that
         box. This is what makes a selection *travel* — the tab you left and
         the tab you chose are connected by the same piece of light moving
         between them, which is the one authored moment here. Everything else
         in the bar stays quiet so the move stays legible. */
      .tabs__ind {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: var(--_ind-w, 0px);
        height: var(--_ind-h, 0px);
        transform: translate(var(--_ind-x, 0px), var(--_ind-y, 0px));
        pointer-events: none;
        opacity: 0;
        transition:
          transform var(--duration-base) var(--ease-out),
          width var(--duration-base) var(--ease-out),
          height var(--duration-base) var(--ease-out),
          opacity var(--transition-fast);
      }

      /* Measured for the first time, or re-measured after a resize. Neither is
         a selection, so neither travels — without this the indicator flies in
         from the list's origin on load and lurches on every reflow. */
      .tabs__ind.is-instant { transition: none; }

      .tabs__ind.is-on { opacity: 1; }

      /* Underline: a lobe laid along the divider, brightest under the label
         and thinning to nothing at both ends, rather than a 2px rectangle
         that starts and stops. */
      .tabs__ind::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        background: var(--lobe-line);
        box-shadow: 0 0 10px rgba(var(--interactive-rgb), 0.45);
      }

      /* …and the light that line throws back up into the tab it marks. Glow
         over definition: the selected tab is lit, not outlined. */
      .tabs__ind::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(var(--interactive-rgb), 0.14),
          rgba(var(--interactive-rgb), 0) 72%
        );
      }

      .tabs__tab {
        position: relative;
        z-index: 1;
        font-family: var(--font-label);
        font-weight: var(--font-label-weight, 600);
        font-size: var(--_text-xs);
        letter-spacing: var(--label-spacing);
        text-transform: uppercase;
        color: var(--text-ghost);
        background: none;
        border: none;
        padding: var(--touch-pad) var(--space-md);
        min-height: var(--touch-min);
        cursor: pointer;
        /* Not a state — the gutter the indicator's line sits in, and the 1px
           of overlap that puts it on top of the divider rather than above it. */
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        transition:
          color var(--transition-fast),
          background var(--transition-fast),
          transform 150ms var(--ease-out);
        white-space: nowrap;
      }

      .tabs__tab:hover:not(:disabled):not([aria-selected="true"]) {
        color: var(--text-primary);
        background: rgba(var(--text-primary-rgb), 0.045);
      }

      .tabs__tab:active:not(:disabled) { transform: scale(0.97); }

      .tabs__tab:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* The selected tab lifts to the accent and stops there. Its ground, its
         underline and its glow all belong to the indicator, so that they can
         move. */
      .tabs__tab[aria-selected="true"] { color: var(--interactive); }

      /* Pills variant */
      :host([variant="pills"]) .tabs__list {
        border-bottom: none;
        gap: var(--space-xs);
      }

      :host([variant="pills"]) .tabs__tab {
        border-bottom: none;
        margin-bottom: 0;
        border-radius: var(--radius-sm);
      }

      :host([variant="pills"]) .tabs__tab:hover:not(:disabled):not([aria-selected="true"]) {
        background: rgba(var(--text-primary-rgb), 0.08);
      }

      /* The travelling line is an underline's device; a pill's is the ground
         itself, which the same element becomes. */
      :host([variant="pills"]) .tabs__ind::after { display: none; }

      :host([variant="pills"]) .tabs__ind::before {
        background: rgba(var(--interactive-rgb), 0.12);
        border-radius: var(--radius-sm);
        box-shadow: var(--interactive-hover);
      }

      .tabs__tab:focus-visible {
        outline: none;
        box-shadow: var(--interactive-focus-ring);
        border-radius: var(--radius-sm);
      }

      .tabs__panel {
        padding: var(--space-lg) 0;
        color: var(--text-secondary);
        font-size: var(--body-size);
        line-height: var(--body-lh);
      }

      /* The panel does not cut — it arrives, once, on the switch that caused
         it. The docs have promised this transition since v2. */
      .tabs__panel.is-entering {
        animation: tabs-panel-in var(--duration-enter) var(--ease-out) both;
      }

      @keyframes tabs-panel-in {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
      }

      .tabs__panel[hidden] { display: none; }

      /* ── Vertical orientation ── */
      :host([orientation="vertical"]) .tabs {
        display: flex;
        flex-direction: row;
      }

      :host([orientation="vertical"]) .tabs__list {
        flex-direction: column;
        border-bottom: none;
        border-inline-end: 1px solid var(--divider);
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 180px;
      }

      :host([orientation="vertical"]) .tabs__tab {
        border-bottom: none;
        margin-bottom: 0;
        margin-inline-end: var(--space-xs);
        border-radius: var(--radius-sm);
        text-align: start;
      }

      /* State is tint, glow and accent text. The colored edge this used to run
         down the side of the selected tab is the house's hardest ban, and the
         rail beside it is structure — one flat --divider that never changes
         colour — so the selection has to be carried by light instead. */
      :host([orientation="vertical"]) .tabs__ind::after { display: none; }

      :host([orientation="vertical"]) .tabs__ind::before {
        background: rgba(var(--interactive-rgb), 0.12);
        border-radius: var(--radius-sm);
        box-shadow: inset 0 0 14px -6px rgba(var(--interactive-rgb), 0.9);
      }

      :host([orientation="vertical"]) .tabs__panel {
        padding: 0 0 0 var(--space-lg);
        flex: 1;
        min-width: 0;
      }

      /* Vertical + Pills variant */
      :host([orientation="vertical"][variant="pills"]) .tabs__list {
        border-inline-end: none;
      }

      :host([orientation="vertical"][variant="pills"]) .tabs__tab {
        margin-inline-end: 0;
      }

      @media (prefers-reduced-motion: reduce) {
        .tabs__list { scroll-behavior: auto; }
        .tabs__ind,
        .tabs__tab { transition: none; }
        .tabs__panel.is-entering { animation: none; }
      }