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

      .code-block {
        position: relative;
        background: var(--surface-primary);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }

      /* ── Header chrome ──────────────────────────────────────────────────
         A 36px bar: the title in the body font, the filename in mono, the
         language as a quiet mono tag at the end, and an icon-only copy. */
      .code-block__header {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        min-height: 36px;
        box-sizing: border-box;
        padding-block: 0;
        padding-inline: var(--space-md) 4px;
        border-bottom: 1px solid var(--divider);
        background: var(--surface-raised);
      }

      .code-block__title {
        display: flex;
        align-items: baseline;
        gap: var(--space-sm);
        min-width: 0;
      }

      .code-block__label {
        font-family: var(--font-body);
        font-size: var(--_text-sm);
        font-weight: var(--font-body-weight, 500);
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .code-block__filename {
        font-family: var(--font-mono);
        font-size: var(--_text-sm);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .code-block__filename:empty {
        display: none;
      }

      .code-block__lang {
        font-family: var(--font-mono);
        font-size: var(--_text-xs);
        color: var(--text-ghost);
      }

      /* The language, or the copy button when there is no language, takes
         the free space so both sit at the end. */
      .code-block__header > .code-block__lang,
      .code-block__header > .code-block__copy.code-block__copy--bar {
        margin-inline-start: auto;
      }

      .code-block__header > .code-block__lang ~ .code-block__copy.code-block__copy--bar {
        margin-inline-start: 0;
      }

      /* ── end header chrome ── */

      .code-block__body-wrap {
        position: relative;
      }

      .code-block__body {
        padding: var(--space-md);
        /* Inside the scroller on purpose. Code that fits never reaches under
           the button, and code that overflows clears it once scrolled to the
           end. Held on the wrapper instead it would be a permanent dead column
           down the full height of the block, which costs every multi-line
           sample real width to solve a case only long single lines hit. */
        padding-inline-end: calc(var(--space-md) + 80px);
        overflow-x: auto;
        overflow-y: hidden;
      }

      /* Shiki CSS-variables theme: map --shiki-* to design tokens.
         Consumers override --accent-primary, --color-success, etc. and
         syntax colors follow automatically. */
      .code-block {
        --shiki-foreground: var(--text-secondary);
        --shiki-background: var(--surface-primary);
        --shiki-token-comment: var(--text-ghost);
        --shiki-token-keyword: var(--accent-primary);
        --shiki-token-string: var(--color-success);
        --shiki-token-constant: var(--accent-secondary);
        --shiki-token-function: var(--text-primary);
        --shiki-token-parameter: var(--text-secondary);
        --shiki-token-string-expression: var(--color-success);
        --shiki-token-punctuation: var(--text-muted);
        --shiki-token-link: var(--accent-primary);
        /* Shell: a wrapper such as sudo, the command, its subcommand, plain
           arguments, flags, variables, operators, a trailing backslash, and
           arguments that name a path, URL or image. */
        --shiki-token-prefix: var(--text-muted);
        --shiki-token-command: var(--text-primary);
        --shiki-token-subcommand: var(--accent-primary);
        --shiki-token-argument: var(--text-secondary);
        --shiki-token-flag: var(--accent-secondary);
        --shiki-token-variable: var(--color-warning);
        --shiki-token-operator: var(--text-muted);
        --shiki-token-continuation: var(--text-ghost);
        --shiki-token-path: var(--color-success);
      }

      .code-block__copy {
        position: absolute;
        top: var(--space-sm);
        inset-inline-end: var(--space-sm);
        z-index: 1;
        border-radius: var(--radius-sm);
        /* Fully visible by default. On a block whose code fits, the reserved
           inline-end padding means the button covers nothing, so hiding it
           would cost discoverability and buy nothing back. */
        opacity: 1;
        transition: opacity var(--transition-fast);
      }

      /* Only where it can actually get in the way: once the code overflows, a
           line can scroll under the button, so it drops back to a hint of
           itself and returns on presence. Tuning the transparency alone could
           never work for both cases at once; this picks per block. */
      .code-block__copy--quiet {
        opacity: 0.25;
      }

      .code-block__body-wrap:hover .code-block__copy--quiet,
      .code-block__copy--quiet:focus-within {
        opacity: 1;
      }

      /* No hover to bring it back, so never hide it in the first place. */
      @media (hover: none) {
        .code-block__copy--quiet { opacity: 1; }
      }

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

      /* One line has no top-right to speak of: the button would sit level with
         the only row of code, slightly above its centre, which reads as
         misaligned rather than as anchored. Centre it against the single line
         instead, and let anything taller keep the corner. */
      /* Not for the basic variant, which lays the button out as a static flex
         item: the top offset is inert there but the transform is not, so a
         -50% lifted it clean out through the top edge of the block. */
      :host(:not([variant="basic"])) .code-block__copy--centered {
        top: 50%;
        transform: translateY(-50%);
      }

      /* One pre for both the plain and the highlighted render, so the colors
         arriving change no box and nothing reflows. It is as wide as its
         longest line, so line backgrounds reach the end of a scrolled line. */
      .code-block__pre {
        margin: 0;
        min-width: 100%;
        width: max-content;
        box-sizing: border-box;
        font-family: var(--font-mono);
        font-size: var(--code-size);
        line-height: var(--code-lh);
        color: var(--shiki-foreground);
        white-space: pre;
        tab-size: 2;
      }

      /* A block with no language is never highlighted: full-strength text. */
      .code-block__pre--plain {
        color: var(--text-primary);
      }

      .code-block__pre code {
        display: block;
        font: inherit;
      }

      .code-block__line {
        display: flex;
        min-height: 1lh;
      }

      .code-block__text {
        flex: 1 0 auto;
      }

      .code-block__tok {
        transition: color var(--transition-fast);
      }

      .code-block__tok--command {
        font-weight: var(--font-label-weight, 600);
      }

      /* Colors fade in from the plain text color as the highlighter lands. */
      @starting-style {
        .code-block__tok { color: var(--shiki-foreground); }
      }

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

      .code-block__gutter,
      .code-block__prompt {
        flex: none;
        user-select: none;
        -webkit-user-select: none;
      }

      .code-block__gutter {
        min-width: calc(var(--_gutter-ch, 1) * 1ch);
        margin-inline-end: var(--space-md);
        text-align: end;
        color: var(--text-ghost);
      }

      .code-block__gutter::before {
        content: attr(data-n);
      }

      .code-block__prompt {
        min-width: calc(var(--_prompt-ch, 1) * 1ch + 1ch);
        color: var(--text-ghost);
      }

      .code-block__prompt::before {
        content: attr(data-prompt);
      }

      /* Emphasis and diff tints run edge to edge, across the body padding. */
      .code-block__line--highlight,
      .code-block__line--add,
      .code-block__line--remove {
        margin-inline: calc(-1 * var(--space-md));
        padding-inline: calc(var(--space-md) - 2px) var(--space-md);
        border-inline-start: 2px solid transparent;
      }

      .code-block__line--highlight {
        background: rgba(var(--accent-primary-rgb), 0.1);
        border-inline-start-color: var(--accent-primary);
      }

      .code-block__line--add {
        background: rgba(var(--color-success-rgb), 0.1);
        border-inline-start-color: rgba(var(--color-success-rgb), 0.6);
      }

      .code-block__line--remove {
        background: rgba(var(--color-error-rgb), 0.1);
        border-inline-start-color: rgba(var(--color-error-rgb), 0.6);
      }

      /* Wrap: the pre takes the body's width and the text column wraps inside
         its own flex item, so a wrapped line stays clear of the gutter and
         the prompt. */
      :host([wrap]) .code-block__pre {
        width: auto;
        white-space: pre-wrap;
      }

      :host([wrap]) .code-block__text {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
      }

      /* Collapsed: the pre stops at max-lines and fades out over its last
         two. overflow-y: clip leaves the horizontal scroll alone. */
      /* The pre widens by the body padding here, because the mask clips to
         its box and would otherwise cut the edge-to-edge line tints. */
      .code-block__pre--collapsed {
        margin-inline: calc(-1 * var(--space-md));
        padding-inline: var(--space-md);
        min-width: calc(100% + 2 * var(--space-md));
        max-height: calc(var(--_max-lines) * 1lh);
        overflow-y: clip;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2lh), rgba(0, 0, 0, 0));
        mask-image: linear-gradient(to bottom, #000 calc(100% - 2lh), rgba(0, 0, 0, 0));
      }

      .code-block__expand {
        display: block;
        width: 100%;
        padding: var(--space-xs) var(--space-md);
        border: 0;
        border-top: 1px solid var(--divider);
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-size: var(--_text-xs);
        text-align: center;
        cursor: pointer;
        transition: color var(--transition-fast), background var(--transition-fast);
      }

      .code-block__expand:hover {
        color: var(--text-primary);
        background: var(--surface-hover);
      }

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

      arc-status-bar {
        border-radius: 0;
      }

      arc-status-bar::part(base) {
        border-top-color: var(--divider);
      }

      /* Window variant */
      :host([variant="window"]) .code-block {
        box-shadow: var(--shadow-overlay);
      }

      .code-block__titlebar {
        display: flex;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--divider);
        background: var(--surface-primary);
        position: relative;
      }

      .code-block__orbs {
        display: flex;
        gap: 8px;
      }

      .code-block__orb {
        width: 12px;
        height: 12px;
        border-radius: var(--radius-full);
      }

      .code-block__orb--close    { background: var(--orb-close); }
      .code-block__orb--minimize { background: var(--orb-minimize); }
      .code-block__orb--maximize { background: var(--orb-maximize); }

      .code-block__titlebar-filename {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-family: var(--font-mono);
        font-size: var(--_text-sm);
        color: var(--text-muted);
      }

      .code-block__titlebar-filename.code-block__label {
        font-family: var(--font-body);
        color: var(--text-primary);
      }

      /* Basic variant */
      :host([variant="basic"]) .code-block__body-wrap {
        display: flex;
        align-items: center;
        padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
      }

      :host([variant="basic"]) .code-block__body {
        flex: 1;
        min-width: 0;
        padding: var(--space-sm);
        padding-inline-end: var(--space-xs);
      }

      /* In a bar the button is an ordinary flex item at the end of the row;
         the body no longer reserves a column for it */
      .code-block__copy.code-block__copy--bar {
        position: static;
        flex-shrink: 0;
        margin-inline-start: var(--space-sm);
      }

      .code-block__titlebar .code-block__copy--bar {
        margin-inline-start: auto;
      }

      .code-block__body--clear {
        padding-inline-end: var(--space-md);
      }

      :host([variant="basic"]) .code-block__copy {
        position: static;
        flex-shrink: 0;
        order: 1;
        margin-inline-start: var(--space-sm);
      }

      .code-block__meta {
        font-family: var(--font-mono);
        font-size: var(--_text-xs);
        color: var(--text-ghost);
      }

      /* Inside arc-code-group, which draws the frame, the tabs and the one copy
         button. The block keeps its template (so a server render hydrates the
         same) and hides its own chrome. */
      :host([data-grouped]) .code-block {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
      }

      :host([data-grouped]) .code-block__header,
      :host([data-grouped]) .code-block__titlebar,
      :host([data-grouped]) arc-status-bar,
      :host([data-grouped]) .code-block__copy {
        display: none;
      }

      :host([data-grouped]) .code-block__body {
        padding-inline-end: var(--space-md);
      }