/* ═══════════════════════════════════════════════════════════════════
   parallelogram.dev — landing stylesheet
   Aesthetic: premium dark technical instrument panel / dataset
   inspection console. Monochrome layered surfaces, one linter-green
   accent, severity colors reserved for diagnostics.

   Severity mapping (global): ERROR=red/rose · WARNING=amber ·
   FIXED/OK=green · INFO/EXACT=cyan · ESTIMATED=violet ·
   PLANNED=violet @ low opacity + dashed border.

   Layer order is the cascade contract — later layers win.
   ═══════════════════════════════════════════════════════════════════ */

@layer tokens, base, components, sections, legal, motion, utilities;

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — design tokens + self-hosted fonts
   ═══════════════════════════════════════════════════════════════════ */
@layer tokens {

  @font-face {
    font-family: "GeistSans";
    src: url("fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "GeistMono";
    src: url("fonts/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /* Machine0-compatible fallback metrics for the Geist Sans variable font */
  @font-face {
    font-family: "GeistSans Fallback";
    src: local("Arial");
    ascent-override: 94.56%;
    descent-override: 27.76%;
    line-gap-override: 0%;
    size-adjust: 106.28%;
  }

  :root {
    --bg:#08090A; --bg-2:#0B0C0E;
    --surface:#101216; --surface-2:#14171B; --surface-3:#1A1D22;
    --border:#1E2228; --border-strong:#2A2F36; --border-glow:#3A4049;
    --text:#ECEDEF; --text-2:#B6BBC2; --text-dim:#888E98; /* AA on --bg */
    --text-mute:#565B64; /* decorative only — never for readable text */
    --green:#86EFAC; --green-2:#4ADE80; --green-soft:rgba(134,239,172,.12); --green-line:rgba(134,239,172,.35);
    --red:#FB7185;   --red-deep:#F43F5E; --red-soft:rgba(244,63,94,.14);  --red-line:rgba(244,63,94,.4);
    --amber:#FBBF24; --amber-soft:rgba(251,191,36,.12); --amber-line:rgba(251,191,36,.35);
    --cyan:#67E8F9;  --cyan-soft:rgba(103,232,249,.10); --cyan-line:rgba(103,232,249,.35);
    --violet:#A78BFA; --violet-soft:rgba(167,139,250,.12); --violet-line:rgba(167,139,250,.35);
    --f-sans:"GeistSans","GeistSans Fallback",ui-sans-serif,system-ui,sans-serif;
    --f-mono:"GeistMono",ui-monospace,SFMono-Regular,"Roboto Mono",Menlo,Monaco,"Liberation Mono","DejaVu Sans Mono","Courier New",monospace;
    --radius:2px; --radius-sm:2px;
    --container:1180px; --pad:28px; --header-h:64px;
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
    --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
    --shadow-sm:0 1px 0 rgba(255,255,255,.03) inset;
    --shadow-md:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px -16px rgba(0,0,0,.8);
    --shadow-lg:0 1px 0 rgba(255,255,255,.04) inset, 0 16px 32px -24px rgba(0,0,0,.85);
    --ease:cubic-bezier(.22,1,.36,1);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BASE — reset, document defaults, global chrome
   ═══════════════════════════════════════════════════════════════════ */
@layer base {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  /* Anchor targeting — every id'd element clears the fixed header */
  [id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-sans);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  p {
    overflow-wrap: break-word;
  }

  pre,
  code,
  kbd,
  samp {
    font-family: var(--f-mono);
  }

  pre {
    overflow-x: auto;
  }

  /* Inline code — outside .codeblock / terminals */
  :not(pre) > code {
    font-size: 0.9em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 2px;
    color: var(--text);
    white-space: nowrap;
  }

  ::selection {
    background: rgba(134, 239, 172, .25);
    color: var(--text);
  }

  /* Focus — one consistent instrument-green ring on everything interactive */
  :focus {
    outline: none;
  }

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

  /* Scrollbar theming — thin, surface-toned, both engines */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 2px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-glow);
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Container */
  .wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  @media (max-width: 640px) {
    :root {
      --pad: 20px;
    }
  }

  @media (max-width: 380px) {
    :root {
      --pad: 16px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS — alphabetical, consumed by every section
   ═══════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── anchor alias ─────────────────────────────────────────────── */
  .anchor-alias {
    position: relative;
    display: block;
    height: 0;
  }

  /* ── arch — console-led visual schema ─────────────────────────── */
  .arch {
    position: relative;
  }

  .arch-canvas {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, .86fr) minmax(300px, 1.18fr) minmax(230px, .9fr);
    gap: 18px;
    min-height: 430px;
    margin-top: var(--space-7);
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background:
      linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
      radial-gradient(ellipse 64% 70% at 50% 36%, rgba(134, 239, 172, .04), transparent 70%),
      #020303;
    background-size: 42px 42px, 42px 42px, auto, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 48px -36px rgba(0, 0, 0, .9);
  }

  .arch-canvas::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(255, 255, 255, .06);
    pointer-events: none;
  }

  .arch-lane {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
  }

  .arch-lane + .arch-lane::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 18px;
    border-top: 1px solid var(--green-line);
    opacity: .75;
  }

  .arch-lane + .arch-lane::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    left: -5px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--green-line);
    border-right: 1px solid var(--green-line);
    rotate: 45deg;
    opacity: .8;
  }

  .arch-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
      rgba(7, 9, 10, .9);
    color: var(--text);
    padding: 16px;
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 36px -30px rgba(0, 0, 0, .95);
    transition:
      transform .2s var(--ease),
      border-color .2s var(--ease),
      box-shadow .2s var(--ease),
      background-color .2s var(--ease);
  }

  .arch-panel:hover {
    transform: translateY(-2px);
  }

  .arch-panel:focus-visible {
    outline: 2px solid var(--green-line);
    outline-offset: 3px;
  }

  .arch-panel.is-active {
    border-color: var(--green-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--green-line), 0 0 26px rgba(134, 239, 172, .13);
  }

  .arch-panel-label {
    color: var(--green);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .arch-panel-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
  }

  .arch-code,
  .arch-log {
    display: grid;
    gap: 7px;
    color: var(--text-2);
  }

  .arch-code span,
  .arch-log span,
  .arch-shape,
  .arch-result {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arch-code b {
    color: var(--text-dim);
    font-weight: 400;
    margin-right: 8px;
  }

  .arch-format-strip {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: rgba(2, 3, 3, .58);
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 12px;
  }

  .arch-format-strip span:last-child {
    color: var(--green);
  }

  .arch-panel--parser {
    border-color: rgba(134, 239, 172, .34);
  }

  .arch-shape {
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(255, 255, 255, .035);
    padding: 9px 10px;
  }

  .arch-error,
  .arch-warn {
    display: inline-block;
    min-width: 46px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
  }

  .arch-error {
    color: var(--red);
  }

  .arch-warn {
    color: var(--amber);
  }

  .arch-fix-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .arch-fix-row b,
  .arch-result {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    padding: 9px 10px;
  }

  .arch-fix-row b {
    font-weight: 500;
    color: var(--text-2);
  }

  .arch-result b {
    font-weight: 500;
  }

  .arch-result em {
    color: var(--text-dim);
    font-size: 12px;
    font-style: normal;
  }

  .arch-result--clean {
    border-color: var(--green-line);
  }

  .arch-result--drop {
    border-color: var(--red-line);
  }

  .arch.in .arch-panel {
    animation: archPanelIn .55s var(--ease) both;
  }

  .arch.in .arch-lane:nth-child(2) .arch-panel {
    animation-delay: .08s;
  }

  .arch.in .arch-lane:nth-child(3) .arch-panel {
    animation-delay: .16s;
  }

  /* Reserve description height — node clicks swap text without CLS */
  .arch-desc {
    min-height: 3em;
    margin-top: var(--space-5);
    max-width: 860px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-2);
  }

  @media (max-width: 1024px) {
    .arch-canvas {
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }

    .arch-lane--output {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 860px) {
    .arch-canvas {
      grid-template-columns: 1fr;
      gap: 12px;
      min-height: 0;
      padding: 18px;
      background-size: 32px 32px, 32px 32px, auto, auto;
    }

    .arch-canvas::before,
    .arch-lane + .arch-lane::before,
    .arch-lane + .arch-lane::after {
      display: none;
    }

    .arch-panel:hover {
      transform: none;
    }

    .arch-code span,
    .arch-log span,
    .arch-shape,
    .arch-result {
      white-space: normal;
    }
  }

  /* ── btn ──────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 2px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
    transition:
      transform .16s var(--ease),
      background-color .2s var(--ease),
      border-color .2s var(--ease),
      color .2s var(--ease),
      box-shadow .2s var(--ease);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn-primary {
    background: var(--green);
    border-color: var(--green);
    color: #071109;
    box-shadow: 0 0 0 1px rgba(134, 239, 172, .12), 0 10px 28px -16px rgba(134, 239, 172, .55);
  }

  .btn-primary:hover {
    background: #A7F3C9;
    border-color: #63E794;
    box-shadow: 0 0 0 1px rgba(134, 239, 172, .2), 0 12px 32px -14px rgba(134, 239, 172, .6);
  }

  .btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-2);
  }

  .btn-ghost:hover {
    color: var(--text);
    border-color: var(--border-glow);
    background: var(--surface);
  }

  .btn-sm {
    padding: 7px 12px;
    font-size: 12.5px;
    border-radius: 2px;
  }

  /* ── card ─────────────────────────────────────────────────────── */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--surface), var(--bg-2) 160%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition:
      border-color .25s var(--ease),
      transform .25s var(--ease),
      box-shadow .25s var(--ease);
  }

  .card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .card h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: 8px;
    color: var(--text);
  }

  .card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
  }

  /* Failure-mode card — thin red bleed along the top edge */
  .card-fail {
    position: relative;
    overflow: hidden;
  }

  .card-fail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red-line), transparent 65%);
    pointer-events: none;
  }

  .mini-code {
    font-family: var(--f-mono);
    font-size: 12px;
    line-height: 1.6;
    background: #060708;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 12px 0;
    color: var(--text-2);
    white-space: pre;
    overflow-x: auto;
  }

  .card-diag {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: var(--space-3);
  }

  /* ── cmp — before/after compare panes ─────────────────────────── */
  .cmp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }

  .cmp-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .cmp-card.in-pane {
    border-left: 2px solid var(--red-line);
  }

  .cmp-card.out-pane {
    border-left: 2px solid var(--green-line);
  }

  .cmp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }

  .cmp-label {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--text);
  }

  .cmp-meta {
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--text-dim);
    white-space: nowrap;
  }

  .cm-num {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .cm-good {
    color: var(--green);
  }

  .cmp-stream {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, black 78%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent);
  }

  .cs-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    animation: csIn .35s var(--ease) forwards;
  }

  .cs-line {
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }

  .cs-body {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cs-tag {
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 4px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
  }

  .cs-row.bad {
    border-color: rgba(244, 63, 94, .25);
    color: var(--red);
  }

  .cs-row.bad .cs-line {
    color: var(--red);
  }

  .cs-row.bad .cs-tag {
    background: var(--red-soft);
    border-color: var(--red-line);
    color: var(--red);
  }

  .cs-row.warn {
    border-color: rgba(251, 191, 36, .25);
    color: var(--amber);
  }

  .cs-row.warn .cs-line {
    color: var(--amber);
  }

  .cs-row.warn .cs-tag {
    background: var(--amber-soft);
    border-color: var(--amber-line);
    color: var(--amber);
  }

  .cs-row.good {
    border-color: rgba(134, 239, 172, .2);
    color: var(--text-2);
  }

  .cs-row.good .cs-line {
    color: var(--green);
  }

  /* Held-back row flashes red before it is dropped from the clean side */
  .cs-row.flash-out {
    animation: csIn .35s var(--ease) forwards, csFlash .5s var(--ease) forwards;
  }

  @media (max-width: 860px) {
    .cmp-grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .cmp-card {
      min-height: 300px;
    }
  }

  /* ── codeblock + copy button ──────────────────────────────────── */
  .codeblock {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .codeblock pre {
    margin: 0;
    padding: 14px 112px 14px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text);
    overflow-x: auto;
  }

  .codeblock code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: inherit;
  }

  /* Shared prompt token — codeblocks and terminals */
  .pr {
    color: var(--green);
    user-select: none;
  }

  .codeblock .comm {
    color: var(--text-dim);
  }

  .codeblock .k {
    color: var(--cyan);
  }

  .codeblock .g {
    color: var(--green);
  }

  .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-dim);
    font-family: var(--f-mono);
    font-size: 11px;
    line-height: 1;
    transition:
      color .18s var(--ease),
      border-color .18s var(--ease),
      background-color .18s var(--ease);
  }

  .copy-btn:hover {
    color: var(--text);
    border-color: var(--border-glow);
    background: var(--surface-3);
  }

  .copy-btn:focus-visible {
    outline: 2px solid var(--green-line);
    outline-offset: 2px;
  }

  .copy-ic {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .copy-btn.copied {
    color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
  }

  /* ── matrix — checks table ────────────────────────────────────── */
  .matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    /* Right-edge fade hints at horizontal overflow without hiding
       the sticky first column on the left */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), rgba(0, 0, 0, .25) 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), rgba(0, 0, 0, .25) 100%);
  }

  table.matrix {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .matrix thead th {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-dim);
    background: var(--surface-2);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
  }

  .matrix td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    vertical-align: top;
  }

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

  .matrix th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    font-family: var(--f-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--text);
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: top;
  }

  .matrix thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }

  .matrix tbody tr:hover td {
    background: rgba(20, 23, 27, .5);
  }

  .matrix .pill {
    vertical-align: middle;
  }

  /* ── meter — token budget instrument ──────────────────────────── */
  .meter {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
  }

  .meter-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .meter-label {
    flex: 1;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .meter-count {
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }

  .meter-count .num {
    color: var(--text);
    font-weight: 600;
  }

  /* Track represents 0–5500 tokens; max_seq_len 4096 ⇒ marker ≈ 74.5%.
     overflow stays visible so the marker label can sit above the rail —
     the fill never exceeds the track (--fill is clamped ≤ 1 by main.js). */
  .meter-track {
    position: relative;
    height: 14px;
    margin-top: 22px;
    border-radius: 2px;
    background: var(--surface-3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  }

  /* Risk band — over-budget territory beyond the marker */
  .meter-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 74.5%;
    right: 0;
    background: var(--amber-soft);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
  }

  .meter-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--green-2), var(--green) 55%, var(--amber) 94%);
    transform: scaleX(var(--fill, 0));
    transform-origin: left;
    will-change: transform;
  }

  .meter.is-over .meter-fill {
    background: linear-gradient(90deg, var(--green-2), var(--amber) 58%, var(--red-deep) 84%);
  }

  .meter-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 74.5%;
    width: 2px;
    background: var(--text-dim);
    pointer-events: none;
  }

  .meter-marker span {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--text-dim);
    white-space: nowrap;
  }

  .meter.is-over .meter-marker {
    background: var(--red);
    animation: meterPulse 1.1s var(--ease) 3;
  }

  .meter.is-over .meter-marker span {
    color: var(--red);
  }

  .meter-diag {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
  }

  .meter .btn {
    align-self: flex-start;
  }

  /* ── pill — severity + neutral tags ───────────────────────────── */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
  }

  .pill--error {
    color: var(--red);
    background: var(--red-soft);
    border-color: var(--red-line);
  }

  .pill--warn {
    color: var(--amber);
    background: var(--amber-soft);
    border-color: var(--amber-line);
  }

  .pill--fixed {
    color: var(--green);
    background: var(--green-soft);
    border-color: var(--green-line);
  }

  .pill--info {
    color: var(--cyan);
    background: var(--cyan-soft);
    border-color: var(--cyan-line);
  }

  .pill--est {
    color: var(--violet);
    background: var(--violet-soft);
    border-color: var(--violet-line);
  }

  /* Not shipped — visibly provisional */
  .pill--planned {
    color: rgba(167, 139, 250, .75);
    background: transparent;
    border: 1px dashed var(--violet-line);
  }

  /* ── section-head ─────────────────────────────────────────────── */
  .section-head {
    max-width: 760px;
    margin-bottom: var(--space-6);
  }

  .section-head.center {
    margin-inline: auto;
    text-align: center;
  }

  .kicker {
    display: block;
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 14px;
  }

  .section-head h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    font-weight: 500;
    margin-bottom: 14px;
    color: var(--text);
  }

  .section-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-2);
    max-width: 640px;
  }

  .section-head.center .section-sub {
    margin-inline: auto;
  }

  /* ── tabs ─────────────────────────────────────────────────────── */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tab {
    font-family: var(--f-mono);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    line-height: 1.5;
    white-space: nowrap;
    transition:
      color .18s var(--ease),
      border-color .18s var(--ease),
      background-color .18s var(--ease);
  }

  .tab:hover {
    color: var(--text);
    border-color: var(--border-glow);
    background: var(--surface-2);
  }

  .tab[aria-pressed="true"] {
    color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
  }

  /* ── term — terminal window ───────────────────────────────────── */
  .term {
    margin: 0;
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 140%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(134, 239, 172, .03);
    overflow: hidden;
  }

  /* CRT scanlines — barely-there texture, never legibility-affecting */
  .term::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .03) 0px,
      rgba(255, 255, 255, .03) 1px,
      transparent 1px,
      transparent 3px
    );
    opacity: .45;
  }

  .term-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(20, 23, 27, .6);
  }

  .term-dots {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .term-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  .term-dots i:nth-child(1) { background: #8C3A42; }
  .term-dots i:nth-child(2) { background: #8A6B2F; }
  .term-dots i:nth-child(3) { background: #2F6B47; }

  .term-title {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .term-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    min-width: 0;
    overflow-x: auto;
  }

  .term-tab {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
    padding: 6px 10px;
    border-radius: 2px;
    white-space: nowrap;
    transition: color .18s var(--ease), box-shadow .18s var(--ease);
  }

  .term-tab:hover {
    color: var(--text-2);
  }

  .term-tab[aria-selected="true"] {
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--green);
  }

  .term-body {
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.65;
    padding: 18px 20px 22px;
    color: var(--text-2);
    overflow: auto;
    max-height: 420px;
    position: relative;
  }

  /* Terminal output lines — emitted by hero-terminal.js + demo.js */
  .t-line {
    display: block;
    white-space: pre-wrap;
  }

  .t-line.cmd {
    color: var(--text);
  }

  .t-line.blank {
    height: .65em;
  }

  .t-line.detail {
    color: var(--text-dim);
  }

  .t-line.panel,
  .t-line.ok-panel {
    margin-block: 4px;
  }

  .t-line.ok-panel {
    color: var(--green);
  }

  .cur {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--green);
    vertical-align: -3px;
    margin-left: 2px;
    animation: blink 1s steps(1, end) infinite;
  }

  .err  { color: var(--red); }
  .warn { color: var(--amber); }
  .ok   { color: var(--green); }
  .dim  { color: var(--text-dim); }
  .lno  { color: var(--text-2); }
  .rid  { color: var(--cyan); }

  .sum-strong {
    color: var(--text);
    font-weight: 600;
  }

  /* Bordered summary panel — the CLI's rich box, sans box-drawing chars */
  .t-panel {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: rgba(8, 9, 10, .55);
    position: relative;
    max-width: 100%;
  }

  .t-panel-title {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 0 6px;
    background: var(--surface);
    font-family: var(--f-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.6;
  }

  .t-panel.border-red {
    border-color: var(--red-line);
    background: rgba(244, 63, 94, .06);
    box-shadow: 0 0 0 1px rgba(244, 63, 94, .1);
  }

  .t-panel.border-amber {
    border-color: var(--amber-line);
    background: rgba(251, 191, 36, .05);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .1);
  }

  .t-panel.border-green {
    border-color: var(--green-line);
    background: rgba(134, 239, 172, .05);
    box-shadow: 0 0 0 1px rgba(134, 239, 172, .1);
  }

  @media (max-width: 380px) {
    .term-body {
      font-size: 11.5px;
      padding: 14px;
    }

    .codeblock pre {
      font-size: 12px;
      padding-right: 96px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS — page order, banner numbers match index.html
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* Shared vertical rhythm */
  #ecosystem,
  #failures,
  #architecture,
  #demo,
  #checks,
  #tokenizers,
  #quickstart,
  #use-cases,
  #open-source,
  #vision {
    position: relative;
    padding: 72px 0;
  }

  /* NOTE: content-visibility:auto was removed deliberately — its
     contain-intrinsic-size estimate made anchor jumps land hundreds of
     pixels off target on deep links. Correct #anchor navigation beats
     the marginal layout savings on a page this light. */

  @media (max-width: 640px) {
    #failures,
    #architecture,
    #demo,
    #checks,
    #tokenizers,
    #quickstart,
    #use-cases,
    #open-source,
    #vision {
      padding: var(--space-8) 0;
    }
  }

  /* ───────────────────── 00 · HEADER #site-header ───────────────── */
  #site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: var(--header-h);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
      background-color .3s var(--ease),
      border-color .3s var(--ease);
  }

  #site-header.is-scrolled {
    background: rgba(8, 9, 10, .72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--border);
  }

  #site-header .wrap,
  .header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0;
    flex-shrink: 0;
  }

  .brand-mark {
    width: 22px;
    height: 19px;
    color: var(--green);
    flex-shrink: 0;
  }

  .brand-word {
    font-size: 15px;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-links a {
    position: relative;
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--text-dim);
    padding: 8px 10px;
    border-radius: 2px;
    transition: color .18s var(--ease);
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 1px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
  }

  .nav-links a:hover {
    color: var(--text);
  }

  .nav-links a:hover::after {
    transform: scaleX(1);
  }

  .nav-links a[aria-current="true"] {
    color: var(--green);
  }

  .nav-links a[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .nav-ctas {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  .nav-ctas .btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Desktop: the #nav-menu wrapper dissolves into the header flex row */
  #nav-menu {
    display: contents;
  }

  /* Hamburger — drawn with gradients so inner markup doesn't matter */
  #nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    background: var(--surface);
    flex-shrink: 0;
    transition: border-color .18s var(--ease), background-color .18s var(--ease);
  }

  #nav-toggle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 12px;
    transform: translate(-50%, -50%);
    background-image:
      linear-gradient(var(--text-2), var(--text-2)),
      linear-gradient(var(--text-2), var(--text-2)),
      linear-gradient(var(--text-2), var(--text-2));
    background-size: 100% 2px;
    background-position: 0 0, 0 5px, 0 10px;
    background-repeat: no-repeat;
  }

  #nav-toggle:hover {
    border-color: var(--border-glow);
    background: var(--surface-2);
  }

  #nav-toggle[aria-expanded="true"] {
    border-color: var(--green-line);
    background: var(--green-soft);
  }

  @media (max-width: 860px) {
    #nav-toggle {
      display: block;
    }

    /* Mobile: full-width panel sliding from under the header.
       max-height is the one sanctioned non-transform transition. */
    #nav-menu {
      display: block;
      position: fixed;
      top: var(--header-h);
      left: 0;
      right: 0;
      z-index: 119;
      background: rgba(8, 9, 10, .96);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
      border-bottom: 1px solid transparent;
      padding: 0 var(--pad);
      max-height: 0;
      overflow: hidden;
      visibility: hidden;
      transition:
        max-height .32s var(--ease),
        visibility 0s linear .32s;
    }

    /* main.js may flag .is-open on header, body, or the menu itself */
    #site-header.is-open #nav-menu,
    body.is-open #nav-menu,
    #nav-menu.is-open {
      max-height: 480px;
      visibility: visible;
      border-bottom-color: var(--border);
      transition:
        max-height .32s var(--ease),
        visibility 0s;
    }

    #site-header.is-open,
    body.is-open #site-header {
      background: rgba(8, 9, 10, .96);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
      border-bottom-color: var(--border);
    }

    #nav-menu .nav-links {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 14px 0 6px;
    }

    #nav-menu .nav-links a {
      font-size: 14px;
      padding: 12px 4px;
      border-radius: 0;
      border-bottom: 1px solid var(--border);
    }

    #nav-menu .nav-links a::after {
      left: 4px;
      right: auto;
      width: 28px;
      bottom: 8px;
    }

    #nav-menu .nav-ctas {
      margin: 0;
      padding: 14px 0 20px;
    }

    #nav-menu .nav-ctas .btn {
      flex: 1;
      justify-content: center;
    }
  }

  /* ───────────────────── 01 · HERO #product ─────────────────────── */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: 92svh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 72px) 0 var(--space-9);
  }

  /* Faint 64px engineering grid, masked toward the edges */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
      repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 64px);
    mask-image: radial-gradient(ellipse 95% 75% at 50% 28%, black 30%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 28%, black 30%, transparent 82%);
  }

  /* Green instrument glow top-center + vignette into the page below */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 58% 40% at 50% -4%, rgba(134, 239, 172, .08), transparent 70%),
      radial-gradient(ellipse 140% 50% at 50% 112%, var(--bg) 30%, transparent 72%);
  }

  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: center;
    gap: var(--space-7) 56px;
  }

  .hero-copy {
    max-width: 600px;
  }

  .hero h1 {
    font-size: clamp(38px, 4.8vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.012em;
    font-weight: 520;
    color: var(--text);
  }

  .hero h1 .accent,
  .hero h1 em {
    font-style: normal;
    color: var(--green);
  }

  .hero-sub {
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 540px;
    margin: 18px 0 26px;
  }

  .hero-install {
    max-width: 460px;
    margin-bottom: 18px;
  }

  .hero-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
  }

  .trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .trust-row .pill {
    font-size: 11px;
  }

  .hero-term .term-body {
    min-height: 380px;
  }

  @media (max-width: 1024px) {
    .hero {
      min-height: 0;
      padding-top: calc(var(--header-h) + 56px);
    }

    .hero .wrap {
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }

    .hero-copy {
      max-width: 640px;
    }
  }

  @media (max-width: 640px) {
    .hero {
      padding-bottom: var(--space-8);
    }

    .hero-ctas {
      align-items: stretch;
      flex-direction: column;
    }

    .hero-ctas .btn {
      justify-content: center;
    }

    .hero-install {
      max-width: none;
    }
  }

  @media (max-width: 380px) {
    .hero h1 {
      font-size: 34px;
    }

    .hero-term .term-body {
      min-height: 320px;
    }
  }

  /* ───────────────────── 02 · PAIN GRID #failures ───────────────── */
  #failures .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #failures .card h3 {
    font-family: var(--f-mono);
    font-size: 14px;
    letter-spacing: 0;
  }

  #failures .mini-code {
    flex-shrink: 0;
  }

  @media (max-width: 1024px) {
    #failures .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    #failures .card-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ───────────────────── 03 · ARCHITECTURE #architecture ────────── */
  #architecture {
    isolation: isolate;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* Fine dotted drafting grid, distinct from the hero's line grid */
  #architecture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .03) 1px, transparent 0);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 90%);
    pointer-events: none;
  }

  /* ───────────────────── 04 · LIVE DEMO #demo ───────────────────── */
  .demo-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .demo-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .demo-samples {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .demo-samples-label {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: var(--space-1);
  }

  [data-demo-sample] {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    padding: 6px 13px;
    transition:
      color .18s var(--ease),
      border-color .18s var(--ease),
      background-color .18s var(--ease);
  }

  [data-demo-sample]:hover {
    color: var(--text);
    border-color: var(--border-glow);
    background: var(--surface-2);
  }

  [data-demo-sample].is-active {
    color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
  }

  .demo-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  #demo-run {
    font-family: var(--f-mono);
    font-size: 12.5px;
    font-weight: 560;
    color: #071109;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 2px;
    padding: 7px 16px;
    transition:
      background-color .18s var(--ease),
      transform .18s var(--ease),
      box-shadow .18s var(--ease);
  }

  #demo-run:hover {
    background: #A7F3C9;
    transform: translateY(-1px);
    box-shadow: 0 0 18px -6px var(--green-line);
  }

  #demo-run:active {
    transform: translateY(0);
  }

  #demo-resume,
  #demo-edit-toggle {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    padding: 7px 13px;
    transition:
      color .18s var(--ease),
      border-color .18s var(--ease),
      background-color .18s var(--ease);
  }

  #demo-resume:hover,
  #demo-edit-toggle:hover {
    color: var(--text);
    border-color: var(--border-glow);
  }

  #demo-edit-toggle[aria-expanded="true"] {
    color: var(--green);
    border-color: var(--green-line);
    background: var(--green-soft);
  }

  /* Editor — collapsed by default; grid-row trick keeps it cheap */
  #demo-editor-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows .35s var(--ease),
      opacity .25s var(--ease);
  }

  #demo-editor-wrap[data-open] {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  #demo-editor-wrap > * {
    min-height: 0;
    overflow: hidden;
  }

  #demo-editor {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    font-family: var(--f-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text);
    background: #060708;
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 14px 16px;
    outline: none;
    transition: border-color .18s var(--ease);
  }

  #demo-editor:focus-visible {
    outline: 2px solid var(--green-line);
    outline-offset: 2px;
  }

  #demo-editor:focus {
    border-color: var(--green-line);
  }

  #demo-editor::placeholder {
    color: var(--text-dim);
  }

  .demo-editor-hint {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--text-dim);
    margin: 8px 2px 0;
  }

  /* Check + fix terminals side by side ≥1024 */
  .demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  #terminal-body,
  #demo-fix-body {
    max-height: 460px;
    min-height: 320px;
  }

  /* Estimate-mode honesty note */
  .demo-note {
    font-family: var(--f-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
  }

  @media (max-width: 1024px) {
    .demo-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .demo-controls {
      flex-direction: column;
      align-items: stretch;
    }

    .demo-actions {
      justify-content: space-between;
    }

    #terminal-body,
    #demo-fix-body {
      min-height: 260px;
      max-height: 400px;
    }
  }

  /* ───────────────────── 05 · CHECKS MATRIX #checks ─────────────── */
  #checks .matrix-wrap {
    margin-top: var(--space-2);
  }

  #checks .section-foot {
    margin-top: var(--space-5);
    font-size: 14px;
    color: var(--text-dim);
    max-width: 720px;
  }

  /* ───────────────────── 06 · TOKENIZERS #tokenizers ────────────── */
  .tok-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-7);
    align-items: center;
  }

  .tok-copy .codeblock {
    margin: var(--space-4) 0;
  }

  .tok-copy p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 560px;
  }

  .tok-copy p + p {
    margin-top: var(--space-3);
  }

  .tok-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-4);
  }

  @media (max-width: 1024px) {
    .tok-grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
  }

  /* ───────────────────── 07 · FORMATS #formats ──────────────────── */
  .fmt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .fmt-grid .card h3 {
    font-family: var(--f-mono);
    font-size: 15px;
    letter-spacing: 0;
  }

  /* Roadmap band — visually provisional: dashed, violet-tinted */
  .roadmap {
    margin-top: var(--space-6);
    border: 1px dashed var(--violet-line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(167, 139, 250, .05), transparent 85%);
    padding: var(--space-6);
  }

  .roadmap-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
  }

  .roadmap-head h3 {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violet);
  }

  .roadmap p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    max-width: 720px;
  }

  .roadmap-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-4);
  }

  @media (max-width: 860px) {
    .fmt-grid {
      grid-template-columns: 1fr;
    }

    .roadmap {
      padding: var(--space-5);
    }
  }

  /* ───────────────────── 08 · BEFORE/AFTER #compare ─────────────── */
  #compare-replay {
    margin-top: var(--space-3);
  }

  #compare .static-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  @media (max-width: 860px) {
    #compare .static-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ───────────────────── 08 · QUICKSTART #quickstart ────────────── */
  .qs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--space-7);
    align-items: start;
  }

  .qs-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .qs-step-label {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-2);
  }

  /* Exit-code pills — cycled by main.js */
  .exit-codes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--space-5) 0 var(--space-2);
  }

  .exit-codes-label {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 4px;
  }

  .exit-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 2px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-2);
    transition:
      border-color .25s var(--ease),
      background-color .25s var(--ease),
      transform .25s var(--ease),
      box-shadow .25s var(--ease);
  }

  .exit-code-pill .ec-num {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
  }

  .exit-code-pill .ec-text {
    color: var(--text-dim);
  }

  #ec-0 .ec-num { color: var(--green); }
  #ec-1 .ec-num { color: var(--amber); }
  #ec-2 .ec-num { color: var(--red); }

  .exit-code-pill.is-active {
    background: var(--surface-2);
    transform: translateY(-2px);
  }

  #ec-0.is-active {
    border-color: var(--green-line);
    box-shadow: 0 0 0 1px var(--green-line);
  }

  #ec-1.is-active {
    border-color: var(--amber-line);
    box-shadow: 0 0 0 1px var(--amber-line);
  }

  #ec-2.is-active {
    border-color: var(--red-line);
    box-shadow: 0 0 0 1px var(--red-line);
  }

  .qs-guarantee {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    border-left: 2px solid var(--green-line);
    padding-left: var(--space-4);
    margin-top: var(--space-4);
  }

  @media (max-width: 1024px) {
    .qs-grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
  }

  /* ───────────────────── 09 · USE CASES #use-cases ──────────────── */
  #use-cases .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 1024px) {
    #use-cases .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    #use-cases .card-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ───────────────────── 10 · TRUST #open-source ────────────────── */
  .trust-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
      radial-gradient(ellipse 60% 70% at 50% 0%, rgba(134, 239, 172, .04), transparent 65%),
      var(--surface);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-sm);
  }

  .trust-item h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text);
  }

  .trust-item-label {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
  }

  .trust-item p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
  }

  .trust-item a {
    color: var(--text-2);
    border-bottom: 1px solid var(--border-glow);
    transition: color .18s var(--ease), border-color .18s var(--ease);
  }

  .trust-item a:hover {
    color: var(--green);
    border-bottom-color: var(--green-line);
  }

  @media (max-width: 860px) {
    .trust-band {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-5);
      padding: var(--space-6) var(--space-5);
    }
  }

  @media (max-width: 380px) {
    .trust-band {
      grid-template-columns: 1fr;
    }
  }

  /* ───────────────────── 12 · VISION #vision ────────────────────── */
  .timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-left: 30px;
    max-width: 760px;
  }

  .timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 0;
    border-left: 1px solid var(--border-strong);
  }

  .tl-node {
    position: relative;
  }

  .tl-node::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
  }

  /* TODAY node carries the live indicator */
  .tl-node:first-child::before {
    background: var(--green-soft);
    border-color: var(--green-line);
    box-shadow: 0 0 12px -2px var(--green-line);
  }

  .tl-stage {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
  }

  .tl-node:first-child .tl-stage {
    color: var(--green);
  }

  .tl-node h3 {
    font-size: 17px;
    font-weight: 550;
    margin-bottom: 6px;
    color: var(--text);
  }

  .tl-node p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 640px;
  }

  .tl-node .pill {
    margin-top: var(--space-3);
  }

  /* Closing CTA controls live inside the trust section. */
  .cta-install {
    max-width: 580px;
    margin: 0 auto var(--space-5);
    text-align: left;
  }

  .cta-ctas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ───────────────────── 11 · FOOTER + cookie banner ────────────── */
  .footer {
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    padding: var(--space-8) 0 var(--space-6);
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: var(--space-6);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .footer-col h3,
  .footer-col h4 {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 12px;
  }

  .footer-col a {
    display: block;
    font-size: 13.5px;
    color: var(--text-2);
    padding: 4px 0;
    transition: color .15s var(--ease);
  }

  .footer-col a:hover {
    color: var(--text);
  }

  .footer-col p,
  .footer-col li {
    font-size: 13.5px;
    color: var(--text-2);
    padding: 4px 0;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
  }

  @media (max-width: 860px) {
    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 380px) {
    .footer-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Cookie banner — fixed bottom-right card */
  #cookie-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    width: min(420px, calc(100vw - 32px));
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: rgba(16, 18, 22, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
  }

  #cookie-banner p {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
  }

  #cookie-banner a {
    color: var(--green);
    border-bottom: 1px solid var(--green-line);
  }

  .cookie-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  @media (max-width: 640px) {
    #cookie-banner {
      right: 16px;
      bottom: 16px;
    }

    .cookie-actions .btn {
      flex: 1;
      justify-content: center;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL — privacy.html / terms.html
   ═══════════════════════════════════════════════════════════════════ */
@layer legal {

  .legal {
    position: relative;
    padding: 80px 0 100px;
  }

  /* When the page carries the new fixed header, clear it */
  body:has(#site-header) .legal {
    padding-top: calc(var(--header-h) + 64px);
  }

  .legal-container {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  .legal .kicker {
    color: var(--green);
  }

  .legal h1 {
    font-size: clamp(34px, 5vw, 50px);
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 12px 0 8px;
  }

  .legal-effective {
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 0 0 36px;
  }

  .legal h2 {
    font-size: 19px;
    font-weight: 550;
    letter-spacing: -0.015em;
    margin: 36px 0 12px;
    color: var(--text);
  }

  .legal p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0 0 14px;
  }

  .legal ul,
  .legal ol {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--text-2);
  }

  .legal li {
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 6px;
  }

  .legal a {
    color: var(--green);
    text-decoration: none;
    border-bottom: 1px solid var(--green-line);
    transition: border-color .15s var(--ease);
  }

  .legal a:hover {
    border-bottom-color: var(--green);
  }

  .legal-back {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  .legal-back a {
    color: var(--text-dim);
    border-bottom: none;
    font-family: var(--f-mono);
    font-size: 13px;
  }

  .legal-back a:hover {
    color: var(--text);
  }

  /* ── legacy header/footer compat ──────────────────────────────────
     Current privacy/terms markup still uses .nav/.container/.foot.
     Kept minimal so those pages render correctly until the rewritten
     legal pages (new #site-header/.footer markup) ship. Safe to delete
     after integration confirms both pages use the new shells. */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad);
  }

  .container.legal-container {
    max-width: 720px;
  }

  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 9, 10, .72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
  }

  .nav-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 12px var(--pad);
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav .nav-links {
    display: flex;
    gap: 4px;
  }

  .nav .nav-ctas {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  @media (max-width: 860px) {
    .nav .nav-links {
      display: none;
    }

    .nav .nav-ctas .btn-ghost {
      display: none;
    }
  }

  .foot {
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    padding: 56px 0 36px;
  }

  .foot-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
  }

  .foot-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 550;
    font-size: 14px;
  }

  .foot-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .foot-cols h5 {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 12px;
  }

  .foot-cols div a {
    display: block;
    font-size: 13.5px;
    color: var(--text-2);
    padding: 4px 0;
    transition: color .15s var(--ease);
  }

  .foot-cols div a:hover {
    color: var(--text);
  }

  .foot-line {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
  }

  .muted {
    color: var(--text-dim);
  }

  @media (max-width: 860px) {
    .foot-inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .foot-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 380px) {
    .foot-cols {
      grid-template-columns: 1fr;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION — reveals, keyframes, reduced-motion kill switch
   ═══════════════════════════════════════════════════════════════════ */
@layer motion {

  [data-reveal] {
    opacity: 0;
    translate: 0 14px;
    transition:
      opacity .6s var(--ease),
      translate .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  [data-reveal].in {
    opacity: 1;
    translate: 0 0;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
  }

  @keyframes dashFlow {
    to { stroke-dashoffset: -64; }
  }

  @keyframes archPanelIn {
    from { opacity: .55; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes csIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes csFlash {
    0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
    35%  { opacity: 1; box-shadow: 0 0 0 1px var(--red-line); transform: translateX(-2px); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); transform: none; }
  }

  @keyframes meterPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
  }

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

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      transition-delay: 0ms !important;
    }

    [data-reveal] {
      opacity: 1;
      translate: 0 0;
    }

    .cur {
      animation: none;
      opacity: 1;
    }

    .arch-edge-flow {
      animation: none;
    }

    .cs-row {
      animation: none;
      opacity: 1;
    }

    .meter-marker {
      animation: none !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES — final say
   ═══════════════════════════════════════════════════════════════════ */
@layer utilities {

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  [hidden] {
    display: none !important;
  }

  .num,
  .tnum {
    font-variant-numeric: tabular-nums;
  }

  .mono {
    font-family: var(--f-mono);
  }

  .text-2 {
    color: var(--text-2);
  }

  .text-dim {
    color: var(--text-dim);
  }

  .text-green {
    color: var(--green);
  }

  .nowrap {
    white-space: nowrap;
  }

  .center {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INTEGRATION — section-layer rules for markup-only classes
   (appended @layer blocks merge into the layer declared up top)
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* 01 · hero — eyebrow pills + the exit-0 guarantee line */
  .eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-4);
  }

  .hero-guarantee {
    font-family: var(--f-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
    margin-top: var(--space-4);
    padding-left: var(--space-3);
    border-left: 2px solid var(--green-line);
  }

  /* 00 · header — GitHub nav link carries an inline star icon */
  .nav-links .nav-gh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* 02 · pain grid — note beside a diagnostic pill */
  .card-diag-note {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--text-dim);
  }

  /* 03 · architecture — the SVG bus line is scoped to the node row,
     not the whole diagram (the description sits below it) */
  .arch-stage {
    position: relative;
  }

  /* 08 · compare — stream grid gains a center column for the arrow */
  #compare .cmp-grid {
    grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr);
  }

  .compare-arrow {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .ca-track {
    position: relative;
    width: 100%;
    height: 0;
    border-top: 1px dashed var(--border-glow);
  }

  .ca-pulse {
    position: absolute;
    top: -3px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green-line);
    animation: caTravel 2.2s linear infinite;
  }

  .ca-label {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
  }

  @media (max-width: 860px) {
    #compare .cmp-grid {
      grid-template-columns: 1fr;
    }

    .compare-arrow {
      flex-direction: row;
      justify-content: center;
      padding: 4px 0;
    }

    .ca-track {
      display: none;
    }
  }

  /* 07 · formats — internal-shape card spans the grid; arrows point in */
  .fmt-grid .format-card--internal {
    grid-column: 1 / -1;
    border-color: var(--green-line);
    background:
      linear-gradient(180deg, rgba(134, 239, 172, .05), transparent 70%),
      var(--surface);
  }

  .format-arrow {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--green);
    margin-top: var(--space-3);
  }

  .roadmap-items li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--text-2);
    border: 1px dashed var(--violet-line);
    border-radius: 2px;
    padding: 6px 12px;
    background: rgba(167, 139, 250, .04);
  }

  /* 06 · tokenizers — coverage groups under the meter/commands grid */
  .tok-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .tok-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--space-4);
  }

  .tok-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-3);
  }

  @media (max-width: 860px) {
    .tok-groups {
      grid-template-columns: 1fr;
    }
  }

  /* 10 · trust — CTA row under the band */
  .trust-cta {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    text-align: center;
  }

  /* a11y — small code examples wrap instead of becoming unfocusable
     scroll regions; commands wrap on narrow screens for the same reason */
  .mini-code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
  }

  .codeblock pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
  }

  /* 00 · header — the open mobile panel must be fully opaque: page
     content under a translucent fixed panel reads as visual noise */
  @media (max-width: 860px) {
    #nav-menu {
      background: #0A0B0D;
    }

    #site-header.is-open {
      background: #0A0B0D;
    }
  }

  /* 04 · demo — single inner row so the collapse actually reaches 0;
     hidden from the tab order while closed */
  #demo-editor-wrap {
    visibility: hidden;
    transition:
      grid-template-rows .35s var(--ease),
      opacity .25s var(--ease),
      visibility 0s linear .35s;
  }

  #demo-editor-wrap[data-open] {
    visibility: visible;
    transition:
      grid-template-rows .35s var(--ease),
      opacity .25s var(--ease),
      visibility 0s;
  }

  .demo-editor-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #demo-editor-wrap:not([data-open]) #demo-editor {
    min-height: 0;
  }

  /* 03 · architecture — node internals */
  .arch-node-kicker {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .arch-node-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
  }

  .arch-node-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .arch-node-pills .pill {
    font-size: 10px;
    padding: 2px 7px;
  }

  /* 08 · compare — static before/after cards above the stream */
  .cmp-static h3 {
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }

  .cmp-static--before h3 { color: var(--red); }
  .cmp-static--after h3  { color: var(--green); }

  .cmp-static ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cmp-static li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
  }

  .cmp-static--before li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: var(--red);
  }

  .cmp-static--after li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
  }
}

@layer motion {
  @keyframes caTravel {
    0%   { left: 0;    opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GRID SYSTEM PASS — squared grid language, hero console, eater,
   ecosystem chips, schema diagram, record-flow graph
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* ── engineered page grid: vertical rails + section seams ─────── */
  @media (min-width: 1024px) {
    body::before {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      left: 50%;
      width: min(calc(var(--container) + 2 * var(--pad)), 100%);
      transform: translateX(-50%);
      border-inline: 1px solid rgba(255, 255, 255, .04);
      pointer-events: none;
      z-index: 1;
    }

    body:has(.legal)::before {
      display: none;
    }
  }

  main > section + section {
    border-top: 1px solid var(--border);
  }

  #architecture {
    border-top: 0; /* the shared seam already draws this line */
  }

  /* ── corner crosshairs — drafting marks on major surfaces ─────── */
  .corners {
    position: relative;
  }

  .corners::before {
    content: "";
    position: absolute;
    inset: -4px;
    pointer-events: none;
    background-image:
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow)),
      linear-gradient(var(--border-glow), var(--border-glow));
    background-repeat: no-repeat;
    background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px;
    background-position:
      left 0 top 4px, left 4px top 0,
      right 0 top 4px, right 4px top 0,
      left 0 bottom 4px, left 4px bottom 0,
      right 0 bottom 4px, right 4px bottom 0;
  }

  /* ── console-grade terminal chrome: square status ticks ────────── */
  .term-dots i {
    width: 7px;
    height: 7px;
    border-radius: 1px;
  }

  /* ── 01 · hero: centered copy over a full-width console ───────── */
  .hero .wrap {
    display: block;
  }

  .hero {
    min-height: 0;
    padding: calc(var(--header-h) + 56px) 0 var(--space-7);
  }

  .hero-copy {
    max-width: 840px;
    margin: 0 auto var(--space-7);
    text-align: center;
  }

  .hero-copy .eyebrow,
  .hero-copy .trust-row {
    justify-content: center;
  }

  .hero h1 {
    font-size: clamp(40px, 5.2vw, 68px);
    line-height: 1.0;
    letter-spacing: -0.012em;
    font-weight: 520;
    max-width: 18ch;
    margin-inline: auto;
  }

  .hero-sub {
    margin-inline: auto;
    max-width: 620px;
  }

  .hero-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
  }

  .hero-actions .hero-install {
    margin: 0;
    max-width: none;
  }

  .hero-actions .hero-install pre {
    padding: 11px 96px 11px 16px;
  }

  .hero-guarantee {
    border-left: 0;
    padding-left: 0;
    text-align: center;
    margin-top: var(--space-4);
  }

  .hero-guarantee::before {
    content: "✓ ";
    color: var(--green);
  }

  .hero-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    box-shadow: var(--shadow-lg);
  }

  .console-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
  }

  .console-pane:last-child {
    border-right: 0;
  }

  .console-pane--main {
    background: var(--surface);
  }

  .console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .015);
  }

  .console-file {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-2);
  }

  .console-head .pill {
    font-size: 10px;
  }

  .console-pane .term-body {
    flex: 1;
    min-height: 380px;
    max-height: 380px;
    overflow: auto;
    padding: 14px;
    font-size: 12px;
    line-height: 1.7;
  }

  /* side panes: wrap inside the terminal instead of creating hidden overflow */
  .console-pane--side .t-line {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* diagnostics land → the matching dirty row lights up */
  .console-pane--side .t-line[data-line] {
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
  }

  .console-pane--side .t-line.is-flagged {
    background: var(--red-soft);
    box-shadow: inset 2px 0 0 var(--red);
  }

  .console-pane--side .t-line[data-line="97"].is-flagged {
    background: var(--amber-soft);
    box-shadow: inset 2px 0 0 var(--amber);
  }

  /* clean rows materialize when the fix summary prints */
  #hero-pane-clean .t-line {
    transition: opacity .5s var(--ease);
  }

  #hero-pane-clean .t-line.is-pending {
    opacity: .18;
  }

  @media (max-width: 1024px) {
    .hero-console {
      grid-template-columns: 1fr;
    }

    .console-pane {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .console-pane:last-child {
      border-bottom: 0;
    }

    .console-pane .term-body {
      min-height: 0;
      max-height: 260px;
    }

    .console-pane--main .term-body {
      min-height: 300px;
      max-height: 340px;
    }
  }

  /* ── the data eater: bad tokens in, clean status dots out ─────── */
  .eater-strip {
    position: relative;
    height: 44px;
    border: 1px solid var(--border);
    border-top: 0;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 48px),
      var(--bg-2);
    overflow: hidden;
  }

  .eater-strip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed var(--border-strong);
  }

  .eater-token {
    position: absolute;
    left: var(--x);
    top: 50%;
    translate: -50% -50%;
    font-family: var(--f-mono);
    font-size: 10.5px;
    line-height: 1;
    padding: 4px 7px;
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    border-radius: 2px;
    white-space: nowrap;
    transition:
      color .25s var(--ease),
      background-color .25s var(--ease),
      border-color .25s var(--ease),
      padding .25s var(--ease),
      font-size .25s var(--ease);
  }

  .eater-token.eaten {
    color: transparent;
    font-size: 0;
    padding: 3px;
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 8px var(--green-line);
  }

  .eater-agent {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 15px;
    height: 15px;
    background: var(--green);
    border-radius: 1px;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 55% 50%, 100% 70%, 100% 100%, 0 100%);
  }

  .eater-strip.is-running .eater-agent {
    animation: chomp .28s steps(1) infinite;
  }

  /* ── 02 · ecosystem chips ──────────────────────────────────────── */
  .eco-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
  }

  .eco-chip {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 16px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
  }

  .eco-chip:nth-child(5n) {
    border-right: 0;
  }

  .eco-chip:nth-child(n+6) {
    border-bottom: 0;
  }

  .eco-chip:hover {
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--green-line);
  }

  .eco-name {
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
  }

  a.eco-name:hover {
    color: var(--green);
  }

  .eco-role {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .eco-note {
    margin-top: var(--space-4);
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--text-dim);
  }

  @media (max-width: 1024px) {
    .eco-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eco-chip:nth-child(5n) {
      border-right: 1px solid var(--border);
    }

    .eco-chip:nth-child(2n) {
      border-right: 0;
    }

    .eco-chip:nth-child(n+6) {
      border-bottom: 1px solid var(--border);
    }

    .eco-chip:nth-child(n+9) {
      border-bottom: 0;
    }
  }

  /* ── 08 · schema-normalization diagram ─────────────────────────── */
  .schema-srcs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .schema-box {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .schema-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--f-mono);
    font-size: 12.5px;
    color: var(--text);
  }

  .schema-code {
    margin: 0;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .sk {
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 -2px;
  }

  .schema .sk.p1 { animation: pairPulse 6s var(--ease) infinite; }
  .schema .sk.p2 { animation: pairPulse 6s var(--ease) 2s infinite; }
  .schema .sk.p3 { animation: pairPulse 6s var(--ease) 4s infinite; }

  .schema-join {
    width: 50%;
    height: 30px;
    margin: 0 auto;
    border-inline: 1px solid var(--border-glow);
    border-bottom: 1px solid var(--border-glow);
    position: relative;
  }

  .schema-join::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    height: 14px;
    border-left: 1px solid var(--border-glow);
  }

  .schema-box--norm {
    margin-top: 14px;
    border-color: var(--green-line);
    background:
      linear-gradient(180deg, rgba(134, 239, 172, .04), transparent 70%),
      var(--surface);
  }

  .schema-pipe {
    width: 0;
    height: 30px;
    margin: 0 auto;
    border-left: 1px dashed var(--green-line);
  }

  .schema-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
  }

  @media (max-width: 860px) {
    .schema-srcs {
      grid-template-columns: 1fr;
    }

    .schema-join {
      width: 0;
      border-inline: none;
      border-bottom: 0;
      border-left: 1px solid var(--border-glow);
      height: 24px;
    }

    .schema-join::after {
      display: none;
    }
  }

  /* ── 07 · meters: exact + estimated, stacked ───────────────────── */
  .meter-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .meter--est .meter-fill {
    background: linear-gradient(90deg, var(--violet) 0%, var(--amber) 85%);
    transform: scaleX(var(--fill, 0));
  }

  .meter--est .meter-diag {
    display: block;
    color: var(--amber);
  }

  /* ── 09 · record-flow graph ────────────────────────────────────── */
  .flow-graph {
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    padding: var(--space-5) var(--space-5) var(--space-4);
    margin-bottom: var(--space-5);
  }

  .fg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--space-4);
  }

  .fg-title {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .fg-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .fg-end {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
  }

  .fg-end--ok {
    color: var(--green);
  }

  .fg-bar {
    flex: 1;
    display: flex;
    height: 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    overflow: hidden;
  }

  .fg-seg {
    flex-grow: var(--w, 1);
    min-width: 6px;
  }

  .fg-seg--unchanged { background: rgba(134, 239, 172, .45); }
  .fg-seg--fixed     { background: var(--cyan); }
  .fg-seg--dropped   { background: var(--red-deep); }

  .fg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: var(--space-3);
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--text-2);
  }

  .fg-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .fg-dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
  }

  .fg-dot--unchanged { background: rgba(134, 239, 172, .45); }
  .fg-dot--fixed     { background: var(--cyan); }
  .fg-dot--dropped   { background: var(--red-deep); }

  .fg-note {
    margin-top: var(--space-3);
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--text-dim);
  }

  @media (max-width: 640px) {
    .fg-row {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }

    .fg-end {
      text-align: left;
    }
  }
}

@layer motion {
  @keyframes chomp {
    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 30%, 55% 50%, 100% 70%, 100% 100%, 0 100%); }
    50%      { clip-path: polygon(0 0, 100% 0, 100% 4%, 55% 50%, 100% 96%, 100% 100%, 0 100%); }
  }

  @keyframes pairPulse {
    0%, 22%, 100% { background-color: transparent; color: inherit; }
    6%, 14%       { background-color: var(--green-soft); color: var(--green); }
  }

  @media (prefers-reduced-motion: reduce) {
    .eater-agent {
      animation: none !important;
    }

    .schema .sk {
      animation: none !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REFINEMENT PASS — DAG layout, ecosystem logos, compare cleanup
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* 04 · architecture — directed-pipeline layout: two inputs fan in,
     stages run left to right, the fixer fans out to clean / dropped */
  .arch-grid--dag {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "a c d e f g"
      "b c d e f h";
    gap: 28px 44px;
    align-items: center;
  }

  .arch-grid--dag .arch-node {
    align-self: center;
    width: 100%;
  }

  .arch-svg {
    color: var(--border-glow); /* arrowhead fill */
    overflow: visible;
  }

  .arch-node--in {
    border-style: dashed;
  }

  .arch-node--ok {
    border-color: var(--green-line);
  }

  .arch-node--drop {
    border-color: var(--red-line);
  }

  .arch-node--drop .arch-node-title {
    color: var(--red);
  }

  @media (max-width: 1024px) {
    .arch-grid--dag {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        "a b"
        "c c"
        "d e"
        "f f"
        "g h";
      gap: 14px;
    }
  }

  @media (max-width: 640px) {
    .arch-grid--dag {
      grid-template-columns: 1fr;
      grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h";
    }
  }

  /* 02 · ecosystem — brand marks */
  .eco-chip {
    position: relative;
    padding-left: 46px;
  }

  .eco-ic {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 18px;
    height: 18px;
    color: var(--text-dim);
    transition: color .18s var(--ease);
  }

  .eco-chip:hover .eco-ic {
    color: var(--green);
  }

  /* 12 · trust — the long CTA must wrap on narrow screens */
  .trust-cta .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }

  /* 09 · compare — pointer back to the live hero pipeline */
  .cmp-note {
    margin-top: var(--space-4);
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--text-dim);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ALIGNMENT PASS — fixed demo heights, grid-aligned hero, one body scale
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* 05 · demo — FIXED terminal heights: streaming output must never
     change layout. The panes scroll internally instead of growing. */
  #terminal-body,
  #demo-fix-body {
    height: 420px;
    min-height: 0;
    max-height: none;
  }

  @media (max-width: 1024px) {
    #terminal-body,
    #demo-fix-body {
      height: 320px;
    }
  }

  /* 01 · hero — left-aligned to the page rails like every other
     section: one grid, one alignment, everywhere */
  .hero-copy {
    margin: 0 0 var(--space-7);
    text-align: left;
    max-width: 840px;
  }

  .hero-copy .eyebrow,
  .hero-copy .trust-row {
    justify-content: flex-start;
  }

  .hero h1 {
    margin-inline: 0;
  }

  .hero-sub {
    margin-inline: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-guarantee {
    text-align: left;
  }

  /* one body-copy scale: 14px/1.65 text-2 for card-level prose,
     16px section subs, captions stay mono text-dim */
  .card p,
  .trust-item p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.4.2 PASS — centered hero, free-running pixel pac-man
   ═══════════════════════════════════════════════════════════════════ */
@layer sections {

  /* 01 · hero — centered again (the console below stays full-width) */
  .hero-copy {
    margin: 0 auto var(--space-7);
    text-align: center;
  }

  .hero-copy .eyebrow,
  .hero-copy .trust-row,
  .hero-actions {
    justify-content: center;
  }

  .hero h1 {
    margin-inline: auto;
  }

  .hero-sub {
    margin-inline: auto;
  }

  .hero-guarantee {
    text-align: center;
  }

  /* the launch row: eater track sits directly on top of the
     install-command / PyPI / GitHub row and spans exactly its width */
  .hero-launch {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  /* free track — no box, no border, no background; just open ground
     between the corners of the row below */
  .eater-strip {
    position: relative;
    height: 40px;
    border: 0;
    background: none;
    overflow: visible;
    margin-bottom: 2px;
  }

  .eater-strip::before {
    display: none;
  }

  .eater-token {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* the agent: larger, pixel-art (SVG built by hero-terminal.js from a
     pixel map, two frames toggled below), riding the same baseline */
  .eater-agent {
    width: 30px;
    height: 30px;
    background: none;
    border-radius: 0;
    clip-path: none;
    z-index: 2;
  }

  .eater-agent svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
    color: var(--green);
  }

  /* frame flip-book: open mouth ↔ closed mouth, hard steps — no tween */
  .eater-agent .frame-closed {
    visibility: hidden;
  }

  .eater-strip.is-running .frame-open {
    animation: pixOpen .36s steps(1, end) infinite;
  }

  .eater-strip.is-running .frame-closed {
    animation: pixClosed .36s steps(1, end) infinite;
  }
}

@layer motion {
  @keyframes pixOpen {
    0%, 49%  { visibility: visible; }
    50%, 100% { visibility: hidden; }
  }

  @keyframes pixClosed {
    0%, 49%  { visibility: hidden; }
    50%, 100% { visibility: visible; }
  }

  @media (prefers-reduced-motion: reduce) {
    .eater-agent .frame-open  { animation: none !important; visibility: visible; }
    .eater-agent .frame-closed { animation: none !important; visibility: hidden; }
  }
}