grr-cli 2.0.0

/* grr — Tailwind CSS v4 + DaisyUI 5.
   Tailwind owns layout and component chrome; DaisyUI owns the component
   library and the two themes (bumblebee light, dim dark — both tuned to the
   grr orange-accent terminal identity). What remains in this file is only
   what Tailwind cannot express: the 3270 font-face pair, the animation layer
   (keyframes, view-timelines, scroll-driven reveals — the site's soul), the
   theme tokens the custom pieces reference, and a handful of genuinely
   custom pieces (starfield backdrop, terminal window, copy glyph, floating
   install slab, story meter, button glow). */

@import "tailwindcss";

@plugin "daisyui" {
  themes: bumblebee --default, dim --prefersdark;
}

/* grr's tuned palette for the two DaisyUI themes: bumblebee (light) and dim
   (dark) — the warm brown-black pairing that keeps the orange-accent terminal
   identity (dark, night and black are cool blue-gray and would cold the warm
   palette). Bumblebee contributes its warm yellow (secondary) and warm
   neutrals; primary stays the grr orange so the accent identity reads
   identically, and base keeps the site's cream paper so the brand is
   unmistakable. Radii are zero: the 3270 terminal identity is sharp and flat.

   Declared as plain CSS rather than @plugin "daisyui/theme" blocks: DaisyUI
   emits its stock theme values inside @layer base, while these rules are
   unlayered, so they win on layer order and reach every case — no stored
   choice, an explicit data-theme, and both system preferences. The light/dark
   split is one light-dark() pair per token; light-dark() resolves from the
   color-scheme DaisyUI sets on :root and on [data-theme], so the dark halves
   no longer need their own @media and [data-theme='dim'] copies. */

:where(:root) {
  --color-base-100: light-dark(#fbf7f1, #1b130e);
  --color-base-200: light-dark(#f6ecdf, #241a13);
  --color-base-300: light-dark(#eadfd5, #46311f);
  --color-base-content: light-dark(#1a120b, #fff4e8);
  --color-primary: light-dark(#f97316, #fb923c);
  --color-primary-content: light-dark(#1a120b, #1b130e);
  --color-secondary: #fbbd23;
  --color-secondary-content: #28240f;
  --color-accent: #fdba74;
  --color-accent-content: #431407;
  --color-neutral: light-dark(#241a14, #2c2016);
  --color-neutral-content: light-dark(#fff8ee, #f0d8c5);
  --color-info: light-dark(#2563eb, #60a5fa);
  --color-info-content: light-dark(#f8faff, #0b1727);
  --color-success: light-dark(#15803d, #4ade80);
  --color-success-content: light-dark(#f0fdf4, #052e16);
  --color-warning: light-dark(#b45309, #fbbd24);
  --color-warning-content: light-dark(#fffbeb, #28240f);
  --color-error: light-dark(#dc2626, #f87171);
  --color-error-content: light-dark(#fef2f2, #450a0a);
  --radius-selector: 0rem;
  --radius-field: 0rem;
  --radius-box: 0rem;
  --depth: 0;
  --noise: 0;
}

@theme {
  /* The 3270 font is the brand — every page keeps it, including DaisyUI
     components (kbd, code, buttons) via the font-mono token. */
  --font-sans: 'IBM3270', 'IBM3270 Fallback', ui-monospace, monospace;
  --font-mono: 'IBM3270', 'IBM3270 Fallback', ui-monospace, monospace;
}

@font-face {
  font-family: 'IBM3270';
  src: url('/fonts/3270-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
}

/* Metric-matched stand-in for the swap window. IBM 3270 advances 0.54em and
   Courier New 0.60em, so the fallback is scaled to 90%: glyph widths, and
   therefore line breaks, are identical before and after the real font lands.
   ascent/descent are overridden to IBM 3270's 80/20 split. */
@font-face {
  font-family: 'IBM3270 Fallback';
  src:
    local('Courier New'),
    local('CourierNewPSMT'),
    local('Liberation Mono'),
    local('DejaVu Sans Mono');
  size-adjust: 90%;
  ascent-override: 88.9%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}

/* Theme tokens the custom pieces and the animation layer reference.
   light-dark() still drives the light/dark split: the DaisyUI themes set
   color-scheme per [data-theme], so these resolve correctly in both themes. */
:root {
  --accent: var(--color-primary);
  --accent-hot: light-dark(#ea580c, #fb923c);
  /* Text sitting on the paper needs a deeper orange than the accent to clear
     AA: #b23c0a measures 5.55:1 on base-100 and 5.07:1 on the footer's
     base-200 cream; #fb923c does the same job on the dark paper. */
  --accent-text: light-dark(#b23c0a, #fb923c);
  --accent-deep: #c2410c;
  --ink: light-dark(#1a120b, #fff4e8);
  --ink-soft: light-dark(#3f3025, #f0d8c5);
  --muted: light-dark(#6b5c50, #c7ad99);
  /* #7d6a5b only reached 4.40:1 on the footer's base-200; #74624f clears AA
     at 5.46:1 on base-100 and 4.99:1 on base-200 while staying a visible
     step below --muted. */
  --quiet: light-dark(#74624f, #a78d7a);
  --line: light-dark(#eadfd5, #46311f);
  --line-strong: light-dark(#d6c3b0, #76513a);
  --terminal-bg: #241a14;
  --terminal-line: #684532;
  --terminal-text: #fff8ee;
  --terminal-dim: light-dark(#d7bba7, #c9a68d);
  --shadow-contact: light-dark(rgba(67, 35, 17, 0.38), rgba(0, 0, 0, 0.55));
  --star-bright: light-dark(rgba(64, 37, 20, 0.5), rgba(255, 236, 214, 0.42));
  --star-dim: light-dark(rgba(64, 37, 20, 0.3), rgba(255, 236, 214, 0.24));
  --star-accent: light-dark(rgba(194, 65, 12, 0.4), rgba(251, 146, 60, 0.42));
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --step-ease: steps(7, end);
  --motion-1: 140ms;
  --motion-2: 240ms;
  --max-width: 1120px;
  --slab-edge: color-mix(in srgb, var(--terminal-bg), #000 38%);
  /* Lets the animatable-to-`auto` size keywords work on the DaisyUI
     details/collapse transitions. */
  interpolate-size: allow-keywords;
}

@property --glow-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --accent-slide {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -130%;
}

@layer base {
  html {
    min-width: 320px;
    /* Reserve the scrollbar gutter from the first paint: on long pages (the
       79-method reference is the extreme) the scrollbar arrives after the
       first layout, shrinking the viewport and shifting every element —
       the CLS Lighthouse measured on a cold load. */
    scrollbar-gutter: stable;
  }

  body {
    margin: 0;
    overflow-x: clip;
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    font-family: var(--font-sans);
    font-size: 15px;
    font-synthesis: none;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background-color: color-mix(in srgb, var(--accent) 24%, transparent);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

@layer components {
  /* ── Accessibility chrome ─────────────────────────────────────────── */

  .skip-link {
    position: fixed;
    z-index: 100;
    top: 8px;
    left: 8px;
    padding: 8px 14px;
    color: var(--color-primary-content);
    background: var(--accent);
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* ── Layout primitives ────────────────────────────────────────────── */

  /* .container lives unlayered further down (see "Page container"): defined
     here it lost to Tailwind's core `.container` in @layer utilities. */

  .site-shell {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow-x: clip;
  }

  .section {
    position: relative;
    padding-block: clamp(44px, 6vw, 88px);
  }

  .section-heading h2 {
    margin: 4px 0 8px;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.15;
  }

  .section-heading p {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
  }

  .section-intro {
    max-width: 62ch;
    margin-bottom: 36px;
  }

  .hero {
    padding-block: clamp(32px, 5vw, 60px) clamp(40px, 6vw, 72px);
  }

  .page-hero {
    padding-block: clamp(32px, 5vw, 56px) 0;
  }

  /* ── Header ───────────────────────────────────────────────────────── */

  /* The header chrome that DaisyUI's navbar does not provide: the hairline
     and the accent scan line that draws in as the page scrolls. */
  .site-header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    background: var(--line);
  }

  .site-header::before {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: '';
    background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent), transparent 40%));
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .primary-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 1.2vw, 14px);

    a {
      position: relative;
      padding: 8px 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 18px;
      text-decoration: none;

      &::after {
        position: absolute;
        right: 10px;
        bottom: 4px;
        left: 10px;
        height: 2px;
        content: '';
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--motion-2) var(--ease-out);
      }

      &.active {
        color: var(--ink);

        &::after {
          transform: scaleX(1);
        }
      }
    }
  }

  /* The theme toggle: a bordered square whose pixel-art moon and sun
     crossfade with a discrete display transition. Colors are custom because
     the two icons swap per theme, not per element. */
  .theme-toggle {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: transform var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out);
  }

  .theme-toggle:hover {
    border-color: var(--accent-hot);
    transform: translateY(-1px);
  }

  .theme-toggle:active {
    transform: translateY(1px);
  }

  .theme-toggle svg {
    display: none;
    grid-area: 1 / 1;
    opacity: 0;
    transform: rotate(-40deg) scale(0.6);
    transition: opacity var(--motion-2) var(--ease-out), transform var(--motion-2) var(--ease-out),
      display var(--motion-2) allow-discrete;
  }

  .theme-toggle .icon-moon {
    display: block;
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  [data-theme='dim'] .theme-toggle .icon-moon {
    display: none;
    opacity: 0;
    transform: rotate(40deg) scale(0.6);
  }

  [data-theme='dim'] .theme-toggle .icon-sun {
    display: block;
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .icon-moon {
      display: none;
      opacity: 0;
      transform: rotate(40deg) scale(0.6);
    }

    :root:not([data-theme]) .theme-toggle .icon-sun {
      display: block;
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }

  @starting-style {
    .theme-toggle .icon-moon,
    .theme-toggle .icon-sun {
      opacity: 0;
      transform: rotate(-40deg) scale(0.6);
    }
  }

  /* ── Search ───────────────────────────────────────────────────────── */

  /* Progressive enhancement: the trigger only paints once the header's inline
     script has run, so a JS-disabled browser gets no dead control — only the
     <noscript> docs-index link. */
  .search {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .search-trigger {
    display: none;
  }

  html[data-search-ready] .search-trigger {
    display: inline-flex;
  }

  .search-noscript {
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
  }

  .search-noscript:hover {
    color: var(--ink);
  }

  /* Same bordered-square language as the theme toggle, widened for the label. */
  .search-trigger {
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: transform var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out),
      color var(--motion-1) var(--ease-out);
  }

  .search-trigger:hover {
    border-color: var(--accent-hot);
    color: var(--ink);
    transform: translateY(-1px);
  }

  .search-trigger:active {
    transform: translateY(1px);
  }

  .search-trigger-label,
  .search-trigger-kbd {
    display: none;
  }

  .search-trigger-label {
    font-size: 13px;
  }

  .search-trigger-kbd {
    padding: 0 5px;
    border: 1px solid var(--line);
    color: var(--quiet);
    font-family: inherit;
    font-size: 11px;
    line-height: 16px;
  }

  @media (min-width: 900px) {
    .search-trigger-label,
    .search-trigger-kbd {
      display: inline;
    }
  }

  /* The magnifier is two borders, not a new SVG asset. */
  .search-icon {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
  }

  .search-icon::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border: 2px solid currentcolor;
    content: '';
  }

  .search-icon::after {
    position: absolute;
    bottom: 1px;
    left: 11px;
    width: 2px;
    height: 6px;
    content: '';
    background: currentcolor;
    transform: rotate(-45deg);
    transform-origin: center;
  }

  .search-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: clamp(52px, 12vh, 140px) 16px 24px;
  }

  /* Author styles beat the UA [hidden] rule, so the hidden state is explicit. */
  .search-overlay[hidden] {
    display: none;
  }

  .search-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, #1a120b, transparent 35%);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }

  .search-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(72vh, 620px);
    border: 1px solid var(--line-strong);
    background: var(--color-base-100);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 55%);
    animation: fade-rise var(--motion-2) var(--ease-out) both;
  }

  .search-field {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  .search-prompt {
    flex: 0 0 auto;
    color: var(--accent-text);
    font-size: 13px;
  }

  .search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    font-size: 15px;
  }

  .search-input::placeholder {
    color: var(--quiet);
  }

  .search-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 24px;
    padding: 0 7px;
    border: 1px solid var(--line);
    color: var(--quiet);
    background: transparent;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .search-close:hover {
    border-color: var(--accent-hot);
    color: var(--ink);
  }

  .search-status {
    margin: 0;
    padding: 9px 14px 0;
    color: var(--quiet);
    font-size: 12px;
  }

  .search-results {
    flex: 1;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    list-style: none;
  }

  .search-result-link {
    display: block;
    padding: 9px 10px;
    border-left: 2px solid transparent;
    color: var(--ink);
    text-decoration: none;
  }

  .search-result.is-active .search-result-link {
    border-left-color: var(--accent);
    background: color-mix(in oklab, var(--accent), transparent 90%);
  }

  .search-result-title {
    display: block;
    font-size: 14px;
  }

  .search-result-excerpt {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .search-result-excerpt mark {
    color: var(--accent-text);
    background: transparent;
  }

  .search-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    color: var(--quiet);
    font-size: 11px;
  }

  .search-hint kbd {
    padding: 1px 5px;
    border: 1px solid var(--line);
    color: var(--muted);
    font: inherit;
  }

  @media (max-width: 600px) {
    .search-trigger {
      height: 48px;
      padding: 0 12px;
    }

    .search-dialog {
      max-height: 80vh;
    }

    .search-hint {
      display: none;
    }
  }

  /* ── Typography ───────────────────────────────────────────────────── */

  .eyebrow {
    display: inline-flex;
    align-items: baseline;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: '// ';
    color: var(--accent-text);
  }

  .stat-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
  }

  /* ── Prose (the docs and long-form copy) ──────────────────────────── */

  .prose {
    max-width: 68ch;

    .lead {
      color: var(--ink-soft);
      font-size: 16px;
    }

    h2 {
      margin: 34px 0 10px;
      font-size: 19px;
      line-height: 1.25;
    }

    p {
      margin: 0 0 14px;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.75;
    }

    ul {
      margin: 0 0 14px;
      padding: 0;
      list-style: none;

      li {
        position: relative;
        padding-left: 20px;
        color: var(--ink-soft);
        font-size: 14px;

        &::before {
          position: absolute;
          top: 0.5em;
          left: 0;
          width: 6px;
          height: 6px;
          content: '';
          background: var(--accent);
        }

        /* Prose lists are the one place the site links out in running text,
           so give those links a real hit area instead of a bare text line. */
        a {
          display: inline-flex;
          align-items: center;
          min-height: 28px;
        }
      }
    }
  }

  /* Inline code outside a terminal window is an accent run: #c2410c on the
     light paper and #fb923c on the dark paper, both AA-checked. */
  .prose code,
  .machine-copy code,
  .session-copy code,
  .install-card code,
  .source-copy code {
    color: var(--accent-text);
    font-size: 0.94em;
  }

  /* Code inside a terminal window is terminal output, not an accent run —
     the accent color on the terminal background is only 3.29:1. */
  .code-window code,
  .install-card .code-window code {
    color: var(--terminal-text);
    font-size: inherit;
  }

  .terms-list {
    counter-reset: terms;
    display: grid;
    gap: 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .terms-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
  }

  .terms-list li::before {
    color: var(--accent-text);
    font-size: 13px;
    line-height: 1.9;
    content: counter(terms, decimal-leading-zero);
    counter-increment: terms;
  }

  /* ── Starfield backdrop ───────────────────────────────────────────── */

  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .backdrop span {
    position: absolute;
    inset: -30%;
    background-repeat: repeat;
  }

  .backdrop-stars-back {
    background-image:
      radial-gradient(circle 1px at 8% 12%, var(--star-dim) 99%, transparent),
      radial-gradient(circle 1px at 34% 68%, var(--star-dim) 99%, transparent),
      radial-gradient(circle 2px at 62% 28%, var(--star-dim) 99%, transparent),
      radial-gradient(circle 1px at 86% 82%, var(--star-dim) 99%, transparent),
      radial-gradient(circle 1px at 48% 44%, var(--star-accent) 99%, transparent);
    background-size: 420px 360px;
    opacity: 0.8;
  }

  .backdrop-stars-mid {
    background-image:
      radial-gradient(circle 2px at 18% 78%, var(--star-bright) 99%, transparent),
      radial-gradient(circle 1px at 72% 8%, var(--star-bright) 99%, transparent),
      radial-gradient(circle 1px at 92% 48%, var(--star-bright) 99%, transparent),
      radial-gradient(circle 2px at 42% 92%, var(--star-accent) 99%, transparent);
    background-size: 520px 440px;
    opacity: 0.55;
  }

  .scroll-progress {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
  }

  /* ── Terminal demo (genuinely custom — the asciinema shell) ───────── */

  .demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }

  .demo-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.1;
  }

  .demo-copy p {
    max-width: 46ch;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 14px;
  }

  .demo-note {
    color: var(--quiet);
    font-size: 12px;
  }

  .demo-shell {
    background: var(--terminal-bg);
    border-top: 2px solid var(--accent);
    box-shadow: 0 24px 64px -32px color-mix(in oklab, var(--accent) 28%, transparent);
    /* A laptop-shaped terminal: the cast is 130 cols x 34 rows, so at the
       shell's width the player's fit-to-width math renders ~13.4px text —
       site-body size — and this 16:10 reserve matches its natural shape,
       so the lazy mount causes no layout shift. */
    aspect-ratio: 16 / 10;
  }

  .demo-visual {
    /* Cap the shell so the fitted font never exceeds ~site size on huge
       screens; the grid column can be wider than 960px past ~1900px. */
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
  }

  .demo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--terminal-dim) 30%, transparent);
  }

  .demo-dots {
    display: flex;
    gap: 5px;
  }

  .demo-dots i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 65%, transparent);
  }

  .demo-title {
    color: var(--terminal-dim);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .demo-dims {
    /* The demo card is the dark terminal in both themes, so this cannot ride
       on --quiet (only 2.9:1 there in light mode). --terminal-dim is the
       light-on-dark token: 9.4:1 on the #241a14 shell. */
    color: var(--terminal-dim);
    font-size: 10.5px;
    white-space: nowrap;
  }

  .demo-stage {
    height: calc(100% - 37px);
  }

  /* The player's own chrome, blended into the shell: the player renders its
     own terminal area; keep it transparent so the shell owns the surface. */
  .demo-stage .ap-wrapper,
  .demo-stage .ap-terminal {
    background: transparent !important;
  }

  @media (max-width: 900px) {
    .demo-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* ── Terminal window (genuinely custom — the brand's code chrome) ─── */

  .code-window {
    padding: 12px 16px 14px;
    background: var(--terminal-bg);
    border-top: 2px solid var(--accent);
  }

  .code-window pre {
    margin: 0;
    overflow-x: auto;
    color: var(--terminal-text);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* .code-window-label / .code-window-tools are declared unlayered further
     down: inside @layer components they would lose to DaisyUI's .kbd, which
     ships in @layer utilities. */

  .terminal-caret {
    flex: 0 0 auto;
    width: 8px;
    height: 14px;
    background: var(--terminal-dim);
  }

  .copy-button {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    /* 28px tall, but the hit area is padded out to the 48px target below
       rather than inflating the bar. */
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--terminal-dim);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--motion-1) var(--ease-out), border-color var(--motion-1) var(--ease-out),
      background-color var(--motion-1) var(--ease-out);
  }

  .copy-button.is-copied {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  /* Small clipboard glyph drawn in CSS so there is no icon font or SVG. */
  .copy-glyph {
    position: relative;
    width: 11px;
    height: 11px;
    border: 1.5px solid currentcolor;
    border-radius: 2px;
    opacity: 0.85;
  }

  .copy-glyph::after {
    position: absolute;
    inset: 2px -3px -3px 2px;
    border: 1.5px solid currentcolor;
    border-radius: 2px;
    background: var(--terminal-bg, transparent);
    content: '';
  }

  .copy-text {
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .status-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--accent);
  }

  /* ── Command marquee ──────────────────────────────────────────────── */

  .command-marquee {
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding-block: 14px;
  }

  /* width: max-content is what makes the translateX(-50%) loop seamless. */
  .command-marquee-track {
    display: flex;
    width: max-content;
  }

  .command-marquee-group {
    display: flex;
    flex: 0 0 auto;
  }

  .command-marquee-group span {
    margin-right: 64px;
    white-space: nowrap;
    color: var(--muted);
    font-size: 14px;
  }

  .command-marquee-group span::before {
    content: '$ ';
    color: var(--accent-text);
  }

  /* ── Hero (the 3D scene + steps() line reveals) ───────────────────── */

  .hero-copy .eyebrow {
    color: var(--ink-soft);
  }

  .hero-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.05em;
  }

  .hero-line-inner {
    display: inline-block;
  }

  /* The accent sweep rides on --accent-slide (registered @property), driven
     by the accent-sweep keyframes in the animation layer. */
  .hero-line-accent {
    color: transparent;
    background: linear-gradient(
      100deg,
      var(--accent-text) 0%,
      var(--accent-text) 38%,
      color-mix(in oklab, var(--accent-text), white 32%) 50%,
      var(--accent-text) 62%,
      var(--accent-text) 100%
    );
    background-size: 220% 100%;
    background-position: var(--accent-slide) 0;
    background-clip: text;
  }

  .hero-stage {
    position: relative;
    transform-style: preserve-3d;
  }

  .hero-terminal-art {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .hero-terminal-art svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .hero-spark {
    position: absolute;
    z-index: 4;
    width: 5px;
    height: 5px;
    background: var(--accent);
    transform: translateZ(90px);
  }

  .hero-spark-a {
    top: 7%;
    left: 9%;
  }

  .hero-spark-b {
    top: 34%;
    right: 0;
    background: var(--accent-hot);
  }

  .hero-spark-c {
    bottom: 18%;
    left: 3%;
    background: var(--accent-hot);
  }

  .hero-contact-shadow {
    position: absolute;
    z-index: 0;
    right: 10%;
    bottom: 5%;
    left: 10%;
    height: 26px;
    background: var(--shadow-contact);
    border-radius: 50%;
    filter: blur(14px);
    transform: translateZ(-30px);
  }

  .hero-mascot {
    position: absolute;
    z-index: 3;
    top: -12%;
    right: 1%;
    width: 34%;
    transform: translateZ(46px);
  }

  .cta-mascot {
    position: absolute;
    z-index: 2;
    top: -12px;
    right: 4%;
    width: 148px;
  }

  /* ── Stats sparks ─────────────────────────────────────────────────── */

  .stat-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .stat-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent);
    opacity: 0;
  }

  .stat-spark-a {
    top: 30%;
    left: 6%;
    --sx: -1;
    --sy: -0.6;
  }

  .stat-spark-b {
    top: 24%;
    left: 27%;
    background: var(--accent-hot);
    --sx: -0.5;
    --sy: -1;
  }

  .stat-spark-c {
    top: 34%;
    right: 10%;
    --sx: 1;
    --sy: -0.8;
  }

  .stat-spark-d {
    top: 18%;
    left: 52%;
    background: var(--accent-hot);
    --sx: 0.4;
    --sy: -1.2;
  }

  .stat-spark-e {
    top: 40%;
    left: 68%;
    --sx: 0.8;
    --sy: -0.5;
  }

  .stat-spark-f {
    top: 20%;
    right: 30%;
    background: var(--accent-hot);
    --sx: -0.2;
    --sy: -1.4;
  }

  /* ── Release strip + footnote (scroll-animated hooks stay) ────────── */

  .stats-release-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .stats-footnote {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin: 18px 0 0;
    color: var(--quiet);
    font-size: 12px;
  }

  .stats-footnote a {
    color: var(--accent-text);
  }

  .stats-noscript {
    margin: 12px 0 0;
    color: var(--quiet);
    font-size: 12px;
  }

  /* ── Link cards (the pixel-melt hover is the signature) ───────────── */

  .link-card {
    position: relative;
    display: block;
    padding-top: 14px;
    border-top: 2px solid var(--line-strong);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--motion-2) var(--ease-out), border-color var(--motion-2) var(--ease-out),
      opacity var(--motion-2) var(--ease-out);
  }

  .link-card::before {
    position: absolute;
    inset: 0;
    content: '';
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms var(--ease-out);
  }

  .link-card:hover {
    transform: perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-3px);
    border-top-color: var(--accent);
  }

  /* ── Story (scrollytelling) ───────────────────────────────────────── */

  .story-section {
    view-timeline-name: --story;
  }

  .story-meter {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
  }

  .story-tick {
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid var(--line-strong);
  }

  .story-tick::before {
    position: absolute;
    inset: 0;
    content: '';
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }

  /* ── Mascots ──────────────────────────────────────────────────────── */

  .mascot-wrap {
    position: relative;
  }

  .mascot-wrap svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .mascot-story .mascot-sprite {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
  }

  .mascot-story .mascot-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .mascot-story .mascot-frame-idle {
    opacity: 1;
  }

  /* ── Floating install slab (genuinely custom 3D) ──────────────────── */

  .install-slab {
    position: relative;
    width: min(100%, 440px);
    margin-inline: auto;
    transform: rotateX(16deg);
    transform-style: preserve-3d;
    transition: transform 320ms var(--ease-out);
  }

  .install-slab:hover {
    transform: rotateX(9deg) translateY(-8px);
  }

  .install-slab::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    content: '';
    background: var(--slab-edge);
  }

  .install-slab::before {
    left: 0;
    transform-origin: 0 50%;
    transform: rotateY(90deg);
  }

  .install-slab::after {
    right: 0;
    transform-origin: 100% 50%;
    transform: rotateY(-90deg);
  }

  .install-slab:hover .slab-face {
    transform: translateZ(10px);
  }

  .slab-face {
    position: relative;
    display: block;
    padding: 22px 24px;
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-line);
    color: var(--terminal-text);
    font-size: 14px;
    white-space: nowrap;
    transform-style: preserve-3d;
    transition: transform 320ms var(--ease-out);
  }

  .slab-base {
    position: absolute;
    inset: 0;
    background: var(--color-base-content);
    transform: translateZ(-26px);
  }

  .slab-contact-shadow {
    position: absolute;
    right: 14%;
    bottom: 12px;
    left: 14%;
    height: 30px;
    background: var(--shadow-contact);
    border-radius: 50%;
    filter: blur(16px);
    transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
  }

  /* ── API reference (the generated per-service pages) ──────────────────

     Every class the api-reference pages use lived here in markup and in
     nothing else: Tailwind's preflight sets `font-size: inherit;
     font-weight: inherit` on headings, so the resource and method headings
     rendered at body weight, and the seven-column parameter table rendered
     as bare borderless text. Defined here rather than as utility classes in
     the template because the same shapes repeat 401 times per build. */

  .api-resource-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  .api-resource-head h2 {
    margin: 0;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    line-height: 1.25;
    /* Clears the sticky 4rem site header, so a `#res-…` link does not land
       underneath it. */
    scroll-margin-top: calc(4rem + 12px);
  }

  .api-resource-count {
    flex: none;
    color: var(--quiet);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .api-methods {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
  }

  .api-method {
    padding: 16px 18px 18px;
    background: var(--color-base-100);
    border: 1px solid var(--line);
    scroll-margin-top: calc(4rem + 12px);
  }

  .api-method-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
  }

  .api-method-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .api-verb {
    flex: none;
    font-family: var(--font-mono);
  }

  .api-method-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted);
  }

  .api-path {
    color: var(--quiet);
    overflow-wrap: anywhere;
  }

  .api-method-desc {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* The parameter table is the widest thing on the page. `body` sets
     `overflow-x: clip`, so without an explicit scroll container the
     Location/Description/Enum columns are simply unreachable on a phone. */
  .api-params-wrap {
    margin-top: 12px;
    overflow-x: auto;
  }

  .api-params {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    line-height: 1.5;
  }

  .api-params th,
  .api-params td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }

  .api-params thead th {
    color: var(--quiet);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .api-params tbody th {
    font-weight: 500;
    white-space: nowrap;
  }

  .api-params tbody tr:last-child th,
  .api-params tbody tr:last-child td {
    border-bottom: 0;
  }

  .api-param-type,
  .api-param-loc {
    color: var(--muted);
    white-space: nowrap;
  }

  .api-param-flag {
    color: var(--quiet);
    text-align: center;
  }

  .api-param-desc {
    min-width: 22ch;
    color: var(--muted);
  }

  .api-param-enum {
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  .api-noparams {
    margin: 10px 0 0;
    color: var(--quiet);
    font-size: 12px;
  }

  .api-scopes-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 12px 0 0;
    font-size: 12px;
  }

  .api-scope-least {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .api-scope-tag {
    padding: 1px 6px;
    color: var(--quiet);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--line-strong);
  }

  .api-scope-none {
    color: var(--quiet);
  }

  .api-scopes-all summary {
    color: var(--quiet);
    font-size: 11.5px;
    cursor: pointer;
  }

  .api-scopes-all ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
  }

  .api-scopes-all li {
    padding: 1px 0;
    overflow-wrap: anywhere;
  }

  /* ── Alternating feature rows ─────────────────────────────────────────

     `FeatureRow` sets this class for every other service on the homepage, and
     nothing reordered the two grid cells — the alternating layout the prop
     exists to produce never happened. Order only applies to grid items, so
     this is scoped to the breakpoint where the row is two columns; the
     stacked mobile order stays copy-then-visual. */
  @media (min-width: 1024px) {
    .feature-row-reverse .feature-row-copy {
      order: 2;
    }

    .feature-row-reverse .feature-row-visual {
      order: 1;
    }
  }

  /* ── FAQ (the open-state accent bar, no layout shift) ─────────────── */

  .faq-item[open] {
    box-shadow: inset 3px 0 0 0 var(--accent);
  }
}

/* ── Page container ──────────────────────────────────────────────────
   Unlayered on purpose. Tailwind's core `.container` (width:100%) lives in
   @layer utilities, and the header and footer elements also carry `w-full`
   in that same layer. Unlayered declarations outrank every layer in the
   cascade, so this is the only placement where the 20px gutter and the
   1120px cap actually reach the page. Only `width` is overridden: the core
   container's breakpoint max-widths stay layered so a `max-w-*` utility on
   the same element (e.g. `container prose max-w-[68ch]`) still wins. */
.container {
  width: min(calc(100% - 40px), var(--max-width));
  margin-inline: auto;
}

/* ── Code window bar ─────────────────────────────────────────────────
   Unlayered because DaisyUI's .kbd ships in @layer utilities and sets
   display:inline-flex + flex-shrink:0; a components-layer override loses on
   layer order regardless of specificity. The label must be the one shrinking
   item so a long command ellipsizes instead of shoving the Copy button off a
   390px screen; the tools hold their natural width. */
.code-window-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--terminal-dim);
  border-color: var(--terminal-line);
  background: transparent;
}

.code-window-tools {
  flex: 0 0 auto;
}

/* The primary button's signature: a hard pixel shadow (the terminal look)
   plus a slowly spinning conic glow ring. Kept as custom CSS because the
   glow rides on the registered --glow-angle property that the animation
   layer drives; unlayered so it beats the DaisyUI component styles. */
.menu-title {
  /* DaisyUI renders menu titles as base-content at 40% opacity, which lands
     at 3.58:1 on the dark base-200 — the --muted token clears AA in both
     themes. Unlayered for the same reason as .btn-primary. */
  color: var(--muted);
}

.footer-title {
  /* Same treatment as the docs sidenav's .menu-title above: DaisyUI paints
     footer titles as base-content at 60% opacity (4.6:1 on base-200);
     --muted is the shared section-label token and clears AA (5.5:1). */
  opacity: 1;
  color: var(--muted);
}

.btn-primary {
  position: relative;
  isolation: isolate;
  box-shadow: 0 4px 0 var(--accent-deep);
}

.btn-primary::before {
  position: absolute;
  inset: -3px;
  z-index: -1;
  content: '';
  background: conic-gradient(
    from var(--glow-angle),
    color-mix(in oklab, var(--accent), transparent 84%) 0deg,
    color-mix(in oklab, var(--accent-hot), transparent 52%) 42deg,
    color-mix(in oklab, var(--accent), transparent 84%) 96deg,
    transparent 168deg,
    color-mix(in oklab, var(--accent-deep), transparent 62%) 252deg,
    transparent 324deg
  );
  opacity: 0.32;
  transition: opacity var(--motion-2) var(--ease-out);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--accent-deep);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--accent-deep);
}

.btn-primary:hover::before {
  opacity: 0.85;
}

/* Touch: every interactive target clears 48px on the short axis. */
@media (max-width: 600px) {
  .theme-toggle {
    width: 48px;
    height: 48px;
  }

  .btn {
    min-height: 48px;
  }

  .btn-sm {
    min-height: 44px;
  }

  .copy-button {
    padding-block: 12px;
  }

  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  .prose ul li a {
    min-height: 48px;
  }

  .stats-footnote a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  .changelog-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  .cta-mascot {
    width: 110px;
  }
}

/* ── Keyframes ──────────────────────────────────────────────────────── */

@keyframes drift-back {
  to {
    transform: translate3d(-420px, -360px, 0);
  }
}

@keyframes drift-mid {
  to {
    transform: translate3d(520px, -440px, 0);
  }
}

@keyframes progress-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes line-rise {
  from {
    transform: translateY(120%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-rise {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 1;
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes caret-blink {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes marquee-slide {
  to {
    transform: translateX(-50%);
  }
}

@keyframes pose-cycle {
  0%,
  18% {
    opacity: 1;
  }

  25%,
  100% {
    opacity: 0;
  }
}

@keyframes stat-rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes stat-count {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.35em);
  }

  to {
    clip-path: inset(-30% 0 -30% 0);
    transform: translateY(0);
  }
}

@keyframes reveal-rise {
  from {
    transform: translateY(18px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes story-wave {
  from {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* One reveal for both the idle and sleep frames: they differ only in delay. */
@keyframes story-show {
  from {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes story-celebrate {
  from {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-drift-scene {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-14px);
  }
}

@keyframes hero-drift-terminal {
  from {
    transform: translateZ(0) translateY(0);
  }

  to {
    transform: translateZ(0) translateY(26px);
  }
}

@keyframes hero-drift-mascot {
  from {
    transform: translateZ(46px) translateY(0);
  }

  to {
    transform: translateZ(46px) translateY(-44px);
  }
}

@keyframes stage-breathe {
  0%,
  100% {
    transform: rotateY(0deg) rotateX(0deg);
  }

  50% {
    transform: rotateY(-2.4deg) rotateX(0.6deg);
  }
}

@keyframes accent-sweep {
  0%,
  55% {
    --accent-slide: -130%;
  }

  80%,
  100% {
    --accent-slide: 130%;
  }
}

@keyframes glow-spin {
  from {
    --glow-angle: 0deg;
  }

  to {
    --glow-angle: 360deg;
  }
}

@keyframes ht-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ht-fill {
  to {
    fill-opacity: 1;
  }
}

@keyframes ht-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes ht-glow-pulse {
  0%,
  100% {
    opacity: 0.14;
  }

  50% {
    opacity: 0.24;
  }
}

@keyframes ht-crab-drift {
  to {
    transform: translateY(-16px);
  }
}

@keyframes pixel-melt {
  0% {
    clip-path: polygon(0 0, 18% 0, 18% 26%, 0 26%);
  }

  20% {
    clip-path: polygon(0 0, 46% 0, 46% 54%, 12% 54%, 12% 100%, 0 100%);
  }

  40% {
    clip-path: polygon(0 0, 78% 0, 78% 30%, 30% 30%, 30% 100%, 12% 100%, 12% 72%, 0 72%);
  }

  60% {
    clip-path: polygon(0 0, 100% 0, 100% 64%, 55% 64%, 55% 100%, 26% 100%, 26% 82%, 0 82%);
  }

  80% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 62% 88%, 30% 88%, 30% 100%, 8% 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes header-compact {
  to {
    min-height: 48px;
  }
}

@keyframes header-scan {
  to {
    transform: scaleX(1);
  }
}

@keyframes spark-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }

  24% {
    opacity: 1;
    transform: translate(calc(var(--sx) * -10px), calc(var(--sy) * -10px)) scale(1.35);
  }

  100% {
    opacity: 0;
    transform: translate(calc(var(--sx) * -30px), calc(var(--sy) * -26px)) scale(0.3);
  }
}

@keyframes story-cap {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  14%,
  86% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@keyframes story-cap-hold {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  14%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tick-fill {
  to {
    transform: scaleY(1);
  }
}

/* ── Scroll-driven animation layer (the site's soul) ────────────────── */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .backdrop-stars-back {
    animation: drift-back 160s linear infinite;
  }

  .backdrop-stars-mid {
    animation: drift-mid 220s linear infinite;
  }

  .hero-line-inner {
    animation: line-rise 560ms var(--step-ease) both;
  }

  .hero-line:nth-of-type(2) .hero-line-inner {
    animation-delay: 120ms;
  }

  .hero-fade,
  .hero-copy > :nth-child(3) {
    animation: fade-rise 420ms var(--ease-out) both;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 140ms;
  }

  .hero-copy > :nth-child(4) {
    animation: fade-rise 420ms var(--ease-out) 230ms both;
  }

  .hero-copy > :nth-child(5) {
    animation: fade-rise 420ms var(--ease-out) 320ms both;
  }

  .hero-spark-a {
    animation: twinkle 2.8s ease-in-out infinite;
  }

  .hero-spark-b {
    animation: twinkle 3.6s ease-in-out 0.9s infinite;
  }

  .hero-spark-c {
    animation: twinkle 2.2s ease-in-out 1.7s infinite;
  }

  .hero-mascot .mascot-wrap {
    animation: bob 5.2s ease-in-out infinite;
  }

  .hero-stage {
    animation: stage-breathe 11s ease-in-out infinite;
  }

  .hero-line-accent {
    animation: accent-sweep 9s var(--ease-out) infinite;
  }

  .btn-primary {
    animation: glow-spin 12s linear infinite;
  }

  .ht-ln {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ht-draw 460ms var(--ease-out) var(--ln-delay) both;
    animation-timing-function: steps(var(--steps), end);
  }

  .ht-prompt {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    fill-opacity: 0;
    animation: ht-draw 520ms var(--ease-out) 40ms both, ht-fill 320ms var(--ease-out) 460ms both;
  }

  .ht-caret {
    animation: ht-blink 1.1s linear 1.15s infinite;
  }

  .ht-glow {
    animation: ht-glow-pulse 6.5s ease-in-out infinite;
  }

  .link-card:hover::before {
    opacity: 1;
    animation: pixel-melt 340ms steps(1, end) both;
  }

  .header-inner {
    animation: header-compact linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 180px;
  }

  .site-header::before {
    animation: header-scan linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 180px;
  }

  .cta-mascot .mascot-wrap {
    animation: bob 4.6s ease-in-out infinite;
  }

  .terminal-caret {
    animation: caret-blink 1.2s steps(2, end) infinite;
  }

  .command-marquee-track {
    animation: marquee-slide 26s linear infinite;
  }

  .command-marquee:hover .command-marquee-track {
    animation-play-state: paused;
  }

  .mascot-story .mascot-frame-idle {
    opacity: 0;
  }

  .mascot-story .mascot-frame {
    animation: pose-cycle 10s linear infinite;
  }

  .mascot-story .mascot-frame-idle {
    animation-delay: 2.5s;
  }

  .mascot-story .mascot-frame-sleep {
    animation-delay: 5s;
  }

  .mascot-story .mascot-frame-celebrate {
    animation-delay: 7.5s;
  }

  @supports (animation-timeline: view()) {
    .scroll-progress {
      animation: progress-grow linear both;
      animation-timeline: scroll(root);
    }

    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .hero {
      view-timeline-name: --hero;
    }

    .hero-visual {
      animation: hero-drift-scene linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .hero-terminal-art {
      animation: hero-drift-terminal linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .hero-mascot {
      animation: hero-drift-mascot linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .stats-grid {
      view-timeline-name: --stats;
    }

    .stat-card {
      animation: stat-rise linear both;
      animation-timeline: --stats;
      animation-range: entry 0% entry 55%;
    }

    .stat-card:nth-child(2) {
      animation-range: entry 6% entry 61%;
    }

    .stat-card:nth-child(3) {
      animation-range: entry 12% entry 67%;
    }

    .stat-card:nth-child(4) {
      animation-range: entry 18% entry 73%;
    }

    .stat-value {
      animation: stat-count steps(8, end) both;
      animation-timeline: --stats;
      animation-range: entry 8% entry 80%;
    }

    .stats-release-strip,
    .stats-footnote {
      animation: stat-rise linear both;
      animation-timeline: --stats;
      animation-range: entry 30% entry 90%;
    }

    .mascot-story .mascot-frame {
      animation: none;
    }

    .mascot-story .mascot-frame-wave {
      animation: story-wave linear both;
      animation-timeline: --story;
      animation-range: entry 30% contain 30%;
    }

    .mascot-story .mascot-frame-idle {
      animation: story-show linear both;
      animation-timeline: --story;
      animation-range: contain 22% contain 58%;
    }

    .mascot-story .mascot-frame-sleep {
      animation: story-show linear both;
      animation-timeline: --story;
      animation-range: contain 50% contain 90%;
    }

    .mascot-story .mascot-frame-celebrate {
      animation: story-celebrate linear both;
      animation-timeline: --story;
      animation-range: contain 78% exit 80%;
    }

    .ht-crab {
      animation: ht-crab-drift linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    .stats-section {
      view-timeline-name: --stats-in;
    }

    .stat-spark {
      animation: spark-burst 640ms steps(6, end) both;
      animation-timeline: --stats-in;
      animation-range: entry 22% entry 46%;
    }

    .stat-spark-b {
      animation-range: entry 25% entry 49%;
    }

    .stat-spark-c {
      animation-range: entry 20% entry 44%;
    }

    .stat-spark-d {
      animation-range: entry 27% entry 51%;
    }

    .stat-spark-e {
      animation-range: entry 24% entry 48%;
    }

    .stat-spark-f {
      animation-range: entry 29% entry 53%;
    }

    .story-cap {
      position: absolute;
      inset: 0;
    }

    .story-captions {
      position: relative;
      display: block;
      min-height: 1.9em;
    }

    .story-cap-wave {
      animation: story-cap linear both;
      animation-timeline: --story;
      animation-range: entry 30% contain 30%;
    }

    .story-cap-idle {
      animation: story-cap linear both;
      animation-timeline: --story;
      animation-range: contain 22% contain 58%;
    }

    .story-cap-sleep {
      animation: story-cap linear both;
      animation-timeline: --story;
      animation-range: contain 50% contain 90%;
    }

    .story-cap-celebrate {
      animation: story-cap-hold linear both;
      animation-timeline: --story;
      animation-range: contain 78% exit 80%;
    }

    .story-tick-wave::before {
      animation: tick-fill steps(4, end) both;
      animation-timeline: --story;
      animation-range: entry 30% contain 30%;
    }

    .story-tick-idle::before {
      animation: tick-fill steps(4, end) both;
      animation-timeline: --story;
      animation-range: contain 22% contain 58%;
    }

    .story-tick-sleep::before {
      animation: tick-fill steps(4, end) both;
      animation-timeline: --story;
      animation-range: contain 50% contain 90%;
    }

    .story-tick-celebrate::before {
      animation: tick-fill steps(4, end) both;
      animation-timeline: --story;
      animation-range: contain 78% exit 80%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mascot-wrap svg *,
  .hero-terminal-art svg * {
    animation-play-state: paused !important;
  }
}