/* ============================================================================
   EARSHOT — design plan (earshot.channel)

   Concept: "the call clock is the spine". The one thing Earshot owns that no
   ticket or platform log has is a recording with structure in it, so the site
   is laid out like an instrument reading that recording: left-aligned, ruled
   with hairlines, section markers written as monospace indices in a gutter
   column, numbers set in tabular figures so timestamps line up. Nothing is
   centred except the 404. Corners are 3 px. No shadows; depth comes from
   three graded steel-blue grounds and hairline rules.

   Palette (cold steel-blue neutrals, one cold signal, one hot accent,
            three status hues)
     --ink     #0C1219   page ground, blue-black
     --ink-2   #121B24   panels
     --ink-3   #1A2531   raised / hover / code
     --rule    #273441   hairlines
     --fog     #AEBBC7   body text
     --paper   #EDF1F4   headings, maximum contrast
     --signal  #5FD6E3   the instrument: DTMF, tab underlines, code keys,
                         links at rest, focus rings, selected states.
                         Cold. It says "this is a reading".
     --volt    #F3E549   the highlighter: primary CTA buttons, the playhead
                         and its clock, section indices, the one stat that
                         matters, link hover. Warm. It says "look here".
                         Volt never marks a state and never sits inside a
                         data lane; signal never sits on a button.
     --pass    #52D08B   PASS
     --warn    #E0A93B   ERROR, spinners, the limits callout
     --fail    #F0685A   FAIL / red annotations
     --plan    #7A8899   muted / SKIPPED
     --speech  #C9D6E2   utterance blocks
     --music   #7D8FB0   hold-music hatching

   Type roles (Google Fonts, display=swap)
     display  "Bricolage Grotesque" 600/700 — headings, hero, big ROI numbers
     body     "IBM Plex Sans" 400/500/600  — copy, UI, tables
     mono     "IBM Plex Mono" 400/500      — code, timestamps, chips, markers
   Scale (1.25 from 16): 12.8 / 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61 (clamped).
   Tabular numerals on every timestamp, score and price.

   Layout: 12-col grid, max 1240 px, 16 px gutter at 400 px, 32 px from 720.
   Sections: [gutter index column 7rem] [content 1fr]; index column drops
   above the heading below 900 px. Interactive instruments (timeline, diff,
   terminal, report) run edge to edge inside the content column.
   Motion: one orchestrated hero moment (the timeline sweep), then only
   micro-interactions under 300 ms. prefers-reduced-motion renders end states.
   ========================================================================== */

:root {
  --ink: #0C1219;
  --ink-2: #121B24;
  --ink-3: #1A2531;
  --ink-4: #22303D;
  --rule: #273441;
  --rule-2: #34434F;
  --fog: #AEBBC7;
  --fog-2: #8A99A8;
  --paper: #EDF1F4;
  --signal: #5FD6E3;
  --signal-dim: rgba(95, 214, 227, 0.14);
  --volt: #F3E549;
  --volt-2: #F8EE7A;
  --volt-dim: rgba(243, 229, 73, 0.14);
  --pass: #52D08B;
  --pass-dim: rgba(82, 208, 139, 0.14);
  --warn: #E0A93B;
  --warn-dim: rgba(224, 169, 59, 0.14);
  --fail: #F0685A;
  --fail-dim: rgba(240, 104, 90, 0.14);
  --plan: #7A8899;
  --speech: #C9D6E2;
  --music: #7D8FB0;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: 0.8rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5625rem;
  --t-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.44rem);
  --t-3xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.05rem);
  --t-4xl: clamp(2.4rem, 1.4rem + 3.8vw, 3.8rem);

  --gutter: 16px;
  --max: 1240px;
  --radius: 3px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fog);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--paper); font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); font-weight: 600; }
h4 { font-size: var(--t-lg); font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--volt); text-decoration: underline; text-underline-offset: 0.15em; }
strong { color: var(--paper); font-weight: 600; }
em { font-style: italic; }
code, pre, kbd, samp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; color: var(--paper); background: var(--ink-3); padding: 0.08em 0.35em; border-radius: var(--radius); }
pre { margin: 0; }
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 0.55em 0.75em; border-bottom: 1px solid var(--rule); }
th { color: var(--paper); font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.02em; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::selection { background: rgba(95, 214, 227, 0.3); color: var(--paper); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: var(--gutter); top: -3rem; background: var(--volt); color: var(--ink); padding: 0.5em 0.9em; border-radius: var(--radius); z-index: 100; font-weight: 600; }
.skip:focus { top: 0.6rem; text-decoration: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(12, 18, 25, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.wordmark:hover { text-decoration: none; }
.wordmark svg { width: 22px; height: 22px; }
.nav { display: none; margin-left: auto; align-items: center; gap: 1.6rem; }
.nav a { color: var(--fog); font-size: var(--t-sm); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); text-decoration: none; }
.nav a:hover { color: var(--volt); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal); padding-bottom: 2px; }
.nav .btn { margin-left: 0.4rem; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--ink); }
.menu-btn { margin-left: auto; background: none; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--paper); font-size: var(--t-sm); padding: 0.4em 0.8em; font-family: var(--font-mono); }
.mobile-nav { display: none; border-bottom: 1px solid var(--rule); background: var(--ink-2); }
.mobile-nav.open { display: block; }
.mobile-nav .wrap { display: flex; flex-direction: column; height: auto; align-items: stretch; padding-top: 0.75rem; padding-bottom: 1rem; gap: 0.2rem; }
.mobile-nav a { padding: 0.6em 0; color: var(--paper); border-bottom: 1px solid var(--rule); font-weight: 500; }
.mobile-nav a:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .menu-btn, .mobile-nav { display: none !important; }
}

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.1em; border-radius: var(--radius); border: 1px solid var(--rule-2); background: var(--ink-3); color: var(--paper); font-weight: 600; font-size: var(--t-sm); line-height: 1.2; text-decoration: none; transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.btn:hover { background: var(--ink-4); border-color: var(--fog-2); color: var(--paper); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.btn-primary:hover { background: var(--volt-2); border-color: var(--volt-2); color: var(--ink); }
.btn-primary[aria-busy="true"], .btn[disabled] { opacity: 0.6; cursor: progress; }
.btn svg { width: 14px; height: 14px; }
.btn-sm { padding: 0.45em 0.8em; font-size: var(--t-xs); font-family: var(--font-mono); font-weight: 500; }
.btn-ghost { background: transparent; }

.chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.18em 0.6em; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.chip-shipped { background: var(--pass); color: var(--ink); border-color: var(--pass); }
.chip-building { color: var(--warn); border-color: var(--warn); background: transparent; }
.chip-planned { color: var(--plan); border-color: var(--plan); background: transparent; }
.chip-pass { background: var(--pass-dim); color: var(--pass); border-color: rgba(82, 208, 139, 0.4); }
.chip-fail { background: var(--fail-dim); color: var(--fail); border-color: rgba(240, 104, 90, 0.4); }
.chip-info { background: var(--ink-3); color: var(--fog); border-color: var(--rule-2); }
.chip-error { background: var(--warn-dim); color: var(--warn); border-color: rgba(224, 169, 59, 0.4); }
.chip-skipped { color: var(--plan); border-color: var(--rule-2); }
.chip-ghost { color: var(--fog-2); border-color: var(--rule-2); }

.eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--volt); letter-spacing: 0.02em; margin-bottom: 1.2rem; }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--volt); }

/* ---------- sections ---------- */
.sec { padding: clamp(3.5rem, 6vw, 6.5rem) 0; border-top: 1px solid var(--rule); }
.sec-inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.sec-index { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); letter-spacing: 0.02em; padding-top: 0.6rem; line-height: 1.4; }
.sec-index b { color: var(--volt); font-weight: 500; }
.sec-index .chip { display: table; margin: 0.45rem 0 0; }
@media (min-width: 900px) { .sec-index { padding-right: 0.5rem; } }
.sec-body { min-width: 0; }
.sec-inner > * { min-width: 0; }
.walk, .plat, .report, .arch, .tl, .table-wrap, .dl, .cta-band, .tiers, .tier, .access, .form { min-width: 0; max-width: 100%; }
.sec-head { max-width: 56rem; margin-bottom: 2rem; }
.sec-head h2 { margin-bottom: 0.9rem; }
.sec-head .sub { font-size: var(--t-lg); color: var(--fog); line-height: 1.45; max-width: 46rem; }
.prose { max-width: 44rem; }
.prose p { margin-bottom: 1.1em; }
.prose blockquote { margin: 1.2em 0; padding: 0.8em 1.1em; border-left: 2px solid var(--rule-2); background: var(--ink-2); color: var(--paper); font-family: var(--font-mono); font-size: var(--t-sm); border-radius: 0 var(--radius) var(--radius) 0; }
.prose blockquote p { margin: 0 0 0.6em; }
.prose blockquote p:last-child { margin: 0; }
@media (min-width: 900px) {
  .sec-inner { grid-template-columns: 7rem 1fr; gap: 2rem; }
}

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.two-col > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; } }
.two-col.even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.cards { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 2rem; }
.cards.cols-3 { grid-template-columns: 1fr; }
.cards.cols-4 { grid-template-columns: 1fr; }
.card { background: var(--ink-2); padding: 1.3rem 1.4rem; min-width: 0; }
.card h3 { font-size: var(--t-lg); margin-bottom: 0.5rem; }
.card h4 { margin-bottom: 0.4rem; }
.card .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--signal); margin-bottom: 0.6rem; }
.card p { font-size: var(--t-sm); color: var(--fog); }
@media (min-width: 640px) { .cards.cols-3, .cards.cols-4, .cards.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .cards.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.callout { border: 1px solid var(--rule-2); border-left: 3px solid var(--warn); background: var(--ink-2); padding: 1.1rem 1.3rem; border-radius: var(--radius); font-size: var(--t-sm); color: var(--fog); }
.callout h4 { color: var(--paper); margin-bottom: 0.5rem; font-size: var(--t-md); }
.callout.limit { border-left-color: var(--warn); }
.callout.rules { border-left-color: var(--signal); }
.callout.status { border-left-color: var(--plan); }
.callout p { margin-bottom: 0.7em; }
.callout code { background: var(--ink-3); }

.numbered { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.numbered li { background: var(--ink-2); padding: 1.2rem 1.3rem; margin: 0; min-width: 0; }
.numbered .n { font-family: var(--font-mono); color: var(--volt); font-size: var(--t-xs); display: block; margin-bottom: 0.5rem; }
.numbered h3 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; margin-bottom: 0.4rem; }
.numbered p { font-size: var(--t-sm); }
@media (min-width: 640px) { .numbered { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .numbered.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li { padding: 1rem 0; border-top: 1px solid var(--rule); margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.rules-list li:first-child { border-top: 0; padding-top: 0; }
.rules-list .ic { width: 28px; height: 28px; border: 1px solid var(--rule-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--signal); font-family: var(--font-mono); font-size: var(--t-xs); }
.rules-list h3 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; margin-bottom: 0.3rem; }
.rules-list p { font-size: var(--t-sm); }

.kv { width: 100%; }
.kv th { width: 30%; white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--radius); }
.table-wrap table { min-width: 520px; }
.table-wrap th { background: var(--ink-2); }
.table-wrap td code { white-space: nowrap; }

/* ---------- code blocks ---------- */
.code { position: relative; background: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius); margin: 0; min-width: 0; max-width: 100%; }
.code pre { overflow-x: auto; padding: 1rem 1.1rem; font-size: 0.82rem; line-height: 1.55; color: var(--speech); tab-size: 2; }
.code pre code { color: inherit; }
.code .copy { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--fog); font-family: var(--font-mono); font-size: 0.7rem; padding: 0.3em 0.6em; border-radius: var(--radius); opacity: 0.85; }
.code .copy:hover { color: var(--paper); border-color: var(--fog-2); opacity: 1; }
.code .copy.done { color: var(--pass); border-color: var(--pass); }
.code .lang { position: absolute; top: 0.55rem; left: 0.9rem; font-family: var(--font-mono); font-size: 0.65rem; color: var(--fog-2); letter-spacing: 0.06em; }
.code.has-lang pre { padding-top: 2rem; }
.c-cm { color: var(--fog-2); }
.c-k { color: var(--signal); }
.c-s { color: #E6C58A; }
.c-n { color: #B6A6F0; }
.c-verb { color: var(--paper); }
.code .verb { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--paper); text-decoration: underline dotted var(--fog-2); text-underline-offset: 0.2em; cursor: help; border-radius: 2px; }
.code .verb:hover, .code .verb:focus-visible { color: var(--signal); text-decoration-color: var(--signal); }

.glossary-card { position: absolute; z-index: 30; max-width: 22rem; background: var(--ink-2); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.8rem 0.95rem; font-size: var(--t-xs); color: var(--fog); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }
.glossary-card b { display: block; color: var(--paper); font-family: var(--font-mono); margin-bottom: 0.3rem; }
.glossary-card a { display: inline-block; margin-top: 0.5rem; font-family: var(--font-mono); }
.glossary-card[hidden] { display: none; }

/* diff */
.diff pre { padding-left: 0; padding-right: 0; }
.diff .ln { display: block; padding: 0 1rem 0 2.4rem; position: relative; white-space: pre; }
.diff .ln::before { content: attr(data-g); position: absolute; left: 0.9rem; color: var(--fog-2); }
.diff .ln.add { background: rgba(82, 208, 139, 0.11); color: #BFF0D4; }
.diff .ln.add::before { color: var(--pass); }
.diff .ln.del { background: rgba(240, 104, 90, 0.11); color: #F5C0BA; }
.diff .ln.del::before { color: var(--fail); }
.diff .ln.hl { outline: 1px solid var(--signal); outline-offset: -1px; background: var(--signal-dim); }
.diff .ln.dim { opacity: 0.35; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.6em 0.9em; color: var(--fog); font-family: var(--font-mono); font-size: var(--t-xs); }
.tabs button:hover { color: var(--paper); }
.tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--signal); }
.tabpanel[hidden] { display: none; }
.caption { font-size: var(--t-xs); color: var(--fog-2); font-family: var(--font-mono); margin: 0.6rem 0 0; line-height: 1.5; }
.caption.em { font-family: var(--font-body); font-size: var(--t-sm); color: var(--fog); font-style: italic; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); border-top: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hero-grid > * { min-width: 0; }
.hero h1 { max-width: 15ch; margin-bottom: 1.4rem; }
.hero .sub { font-size: var(--t-lg); max-width: 40rem; color: var(--fog); margin-bottom: 1.8rem; line-height: 1.45; }
.hero .cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.hero .under { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.proof { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.proof li { background: var(--ink-2); padding: 0.9rem 1rem; margin: 0; font-size: var(--t-xs); color: var(--fog); line-height: 1.45; }
.proof li b { display: block; color: var(--paper); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; line-height: 1.15; margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.proof li.key b { color: var(--volt); }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, 1fr); } }

/* ---------- timeline instrument ---------- */
.tl { background: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--radius); position: relative; }
.tl-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.tl-head .id { color: var(--paper); }
.tl-head .spacer { flex: 1; }
.tl-head .clock { color: var(--volt); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.tl-canvas { position: relative; padding: 0.5rem 0 0.25rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-canvas svg { width: 100%; height: auto; display: block; cursor: crosshair; overflow: visible; }
.tl-lanes text { font-family: var(--font-mono); font-size: 11px; fill: var(--fog-2); }
.tl-lanes .lane-label { fill: var(--fog-2); font-size: 10px; letter-spacing: 0.04em; }
.tl-lanes .grid { stroke: var(--rule); stroke-width: 1; }
.tl-lanes .tick { fill: var(--fog-2); font-size: 10px; }
.tl-lanes .ring { fill: var(--ink-4); }
.tl-lanes .utt { fill: var(--ink-4); stroke: var(--rule-2); stroke-width: 1; transition: fill 200ms var(--ease), stroke 200ms var(--ease); }
.tl-lanes .utt-label { fill: var(--speech); font-size: 11px; pointer-events: none; }
.tl-lanes .utt.on { fill: #2C3D4D; stroke: var(--speech); }
.tl-lanes .utt.was { fill: #24323F; stroke: var(--rule-2); }
.tl-lanes .utt.bad.on, .tl-lanes .utt.bad.was { stroke: var(--fail); }
.tl-lanes .dtmf line { stroke: var(--signal); stroke-width: 2; opacity: 0.55; }
.tl-lanes .dtmf text { fill: var(--signal); font-size: 10.5px; }
.tl-lanes .dtmf .key { fill: var(--ink-3); stroke: var(--signal); stroke-width: 1; opacity: 0.6; }
.tl-lanes .dtmf .lbl-bg { fill: var(--ink-2); opacity: 0.92; }
.tl-lanes .dtmf.was line, .tl-lanes .dtmf.was .key { opacity: 1; }
.tl-lanes .dtmf.hit .key { animation: dtmfpulse 600ms var(--ease) 1; transform-origin: center; transform-box: fill-box; }
.tl-lanes .dtmf.bad line, .tl-lanes .dtmf.bad .key { stroke: var(--fail); }
.tl-lanes .dtmf.bad text { fill: var(--fail); }
@keyframes dtmfpulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.tl-lanes .music { fill: url(#hatch); stroke: var(--music); stroke-width: 1; opacity: 0.55; transition: opacity 200ms; }
.tl-lanes .music.on, .tl-lanes .music.was { opacity: 1; }
.tl-lanes .music-tint { fill: var(--music); opacity: 0.12; }
.tl-lanes .badge { fill: var(--paper); font-size: 11px; font-weight: 500; }
.tl-lanes .badge-bg { fill: var(--ink-2); stroke: var(--music); stroke-width: 1; }
.tl-lanes .zig { stroke: var(--fog); stroke-width: 1.5; fill: none; }
.tl-lanes .zig-label { fill: var(--fog-2); font-size: 9.5px; }
.tl-lanes .silence { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-lanes .pin circle { fill: var(--ink-2); stroke: var(--fog-2); stroke-width: 1.5; transition: fill 200ms, stroke 200ms; }
.tl-lanes .pin line { stroke: var(--fog-2); stroke-width: 1; stroke-dasharray: 2 2; }
.tl-lanes .pin text { fill: var(--fog-2); font-size: 10px; }
.tl-lanes .pin.was circle { fill: var(--pass); stroke: var(--pass); }
.tl-lanes .pin.was text { fill: var(--pass); }
.tl-lanes .pin.was line { stroke: var(--pass); }
.tl-lanes .pin.fail.was circle { fill: var(--fail); stroke: var(--fail); }
.tl-lanes .pin.fail.was text, .tl-lanes .pin.fail.was line { fill: var(--fail); stroke: var(--fail); }
.tl-lanes .pin .chipt { opacity: 0; transition: opacity 200ms; }
.tl-lanes .pin.was .chipt { opacity: 1; }
.tl-lanes .evt circle { fill: var(--fog-2); }
.tl-lanes .evt text { font-size: 9.5px; }
.tl-lanes .evt.was circle { fill: var(--signal); }
.tl-lanes .playhead line { stroke: var(--volt); stroke-width: 1.5; }
.tl-lanes .playhead polygon { fill: var(--volt); }
.tl-lanes .anno { fill: none; stroke: var(--fail); stroke-width: 1.5; }
.tl-lanes .anno-text { fill: var(--fail); font-size: 10.5px; font-weight: 500; }
.tl-lanes .end-cap { fill: var(--fail); font-size: 10px; }
.tl-caption { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: baseline; padding: 0.75rem 1rem 0.85rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--t-sm); min-height: 3.2rem; }
.tl-caption .t { color: var(--volt); font-variant-numeric: tabular-nums; }
.tl-caption .txt { color: var(--paper); min-height: 1.4em; }
.tl-caption .txt::after { content: "▍"; color: var(--volt); animation: blink 1s steps(1) infinite; }
.tl-caption.done .txt::after, .tl-caption.idle .txt::after { content: ""; }
.tl-caption .txt.q::before { content: "“"; color: var(--fog-2); }
.tl-caption .txt.q::after { content: "”"; color: var(--fog-2); animation: none; }
.tl-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.6rem 1rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.tl-foot .legend { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.tl-foot .legend span { display: inline-flex; align-items: center; gap: 0.4em; }
.tl-foot .legend i { width: 12px; height: 8px; display: inline-block; border: 1px solid var(--rule-2); background: var(--ink-4); }
.tl-foot .legend i.m { background: repeating-linear-gradient(135deg, var(--music) 0 1px, transparent 1px 4px); border-color: var(--music); }
.tl-foot .legend i.d { width: 2px; background: var(--signal); border: 0; height: 10px; }
.tl-foot .legend i.p { width: 9px; height: 9px; border-radius: 50%; background: var(--pass); border-color: var(--pass); }
.tl-foot .spacer { flex: 1; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- walkthrough ---------- */
.walk { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.stepper button { background: none; border: 0; border-right: 1px solid var(--rule); border-bottom: 2px solid transparent; padding: 0.8rem 0.6rem; text-align: left; color: var(--fog-2); font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.3; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
.stepper button:last-child { border-right: 0; }
.stepper button b { color: var(--fog-2); font-weight: 500; }
.stepper button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--signal); background: var(--ink-3); }
.stepper button[aria-selected="true"] b { color: var(--volt); }
.stepper button:hover { color: var(--paper); }
.stepper .prog { position: absolute; }
.walk-body { padding: 1.2rem; }
.walk-stage[hidden] { display: none; }
.run-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog); padding: 0.7rem 0.9rem; background: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1rem; }
.run-head .id { color: var(--paper); }
.run-head .sep { color: var(--rule-2); }
.run-head .verdict { font-weight: 600; }
.run-head .verdict.pass { color: var(--pass); }
.run-head .verdict.fail { color: var(--fail); }
.narr { font-size: var(--t-sm); color: var(--fog); max-width: 44rem; margin-bottom: 1rem; }
.narr ul { padding-left: 1.1em; }
.narr li { margin-bottom: 0.5em; }
.fails { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.fails li { border: 1px solid var(--rule); border-left: 3px solid var(--fail); background: var(--ink-3); padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.55; border-radius: var(--radius); display: grid; gap: 0.15rem; margin: 0; }
.fails li.info { border-left-color: var(--fog-2); }
.fails .row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; }
.fails .row span:first-child { color: var(--fog-2); }
.fails .row .exp { color: var(--paper); }
.fails .row .obs { color: var(--speech); }
.fails .sc { color: var(--fail); }
.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.changes li { margin: 0; }
.changes button { width: 100%; text-align: left; background: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.85rem; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: start; color: var(--fog); font-size: var(--t-xs); line-height: 1.45; transition: border-color 160ms; }
.changes button .n { font-family: var(--font-mono); color: var(--signal); }
.changes button code { font-size: 0.72rem; }
.changes button:hover { border-color: var(--fog-2); }
.changes button[aria-expanded="true"] { border-color: var(--signal); background: var(--signal-dim); color: var(--paper); }
.evidence { margin-top: 0.8rem; border: 1px solid var(--rule-2); background: var(--ink-3); border-radius: var(--radius); padding: 0.9rem 1rem; font-size: var(--t-xs); }
.evidence[hidden] { display: none; }
.evidence .k { font-family: var(--font-mono); color: var(--fog-2); display: block; margin-bottom: 0.15rem; }
.evidence .reason { color: var(--paper); margin-bottom: 0.6rem; }
.evidence .utt-q { font-family: var(--font-mono); color: var(--speech); border-left: 2px solid var(--rule-2); padding-left: 0.7rem; margin-bottom: 0.7rem; }
.slice { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.3em 0.6em; background: var(--ink-2); }
.slice .tri { color: var(--fog-2); font-size: 0.65rem; }
.slice .d { color: var(--fog-2); }
.result-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.result-chips .chip { font-size: 0.76rem; padding: 0.35em 0.75em; }
.walk-foot { border-top: 1px solid var(--rule); padding: 0.8rem 1.2rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.walk-foot b { color: var(--paper); font-weight: 500; }
.walk-foot .spacer { flex: 1; }
.autoplay-bar { height: 2px; background: var(--rule); position: relative; }
.autoplay-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--volt); width: 0; }
.autoplay-bar.run i { animation: fillbar 9s linear forwards; }
@keyframes fillbar { to { width: 100%; } }
@media (max-width: 640px) {
  .stepper { grid-template-columns: 1fr 1fr; }
  .stepper button:nth-child(2) { border-right: 0; }
  .stepper button:nth-child(1), .stepper button:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .stepper button[aria-selected="true"] { border-bottom-color: var(--signal); }
  .walk-body { padding: 0.9rem; }
}

/* ---------- terminal ---------- */
.term { background: #0A0F14; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; font-family: var(--font-mono); font-size: 0.8rem; min-width: 0; max-width: 100%; }
.term-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--rule); color: var(--fog-2); font-size: 0.72rem; }
.term-bar .copy-cmd { background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--fog); font-family: var(--font-mono); font-size: 0.7rem; padding: 0.3em 0.6em; border-radius: var(--radius); }
.term-bar .copy-cmd.done { color: var(--pass); border-color: var(--pass); }
.term pre { padding: 1rem 1.1rem 1.1rem; overflow-x: auto; line-height: 1.6; color: var(--speech); min-height: 15em; white-space: pre; }
.term .p { color: var(--signal); }
.term .ok { color: var(--pass); font-weight: 500; }
.term .bad { color: var(--fail); font-weight: 500; }
.term .dim { color: var(--fog-2); }
.term .spin { color: var(--warn); }
.term .cur { display: inline-block; width: 0.6em; height: 1.1em; background: var(--signal); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; margin-left: 1px; }

/* ---------- ROI ---------- */
.roi { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.roi-in, .roi-out { min-width: 0; }
.roi-in { padding: 1.3rem; border-bottom: 1px solid var(--rule); }
.roi-out { padding: 1.3rem; background: var(--ink-3); }
.presets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.presets button { background: var(--ink-3); border: 1px solid var(--rule-2); color: var(--fog); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.72rem; padding: 0.4em 0.7em; }
.presets button:hover, .presets button[aria-pressed="true"] { color: var(--paper); border-color: var(--signal); }
.roi-in .caption { margin-bottom: 1.2rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.8rem; align-items: center; margin-bottom: 1rem; }
.field input[type="range"] { min-width: 0; }
.field label { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--fog); }
.field input[type="range"] { width: 100%; accent-color: var(--signal); }
.field input[type="number"] { width: 6.5rem; background: var(--ink); border: 1px solid var(--rule-2); color: var(--paper); border-radius: var(--radius); padding: 0.35em 0.5em; font-family: var(--font-mono); font-size: var(--t-sm); text-align: right; }
.roi-big { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
.roi-big div { border-left: 2px solid var(--volt); padding-left: 1rem; }
.roi-big div:first-child b { color: var(--volt); }
.roi-big b { display: block; font-family: var(--font-display); font-size: var(--t-2xl); color: var(--paper); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.roi-big span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.roi-year { font-family: var(--font-mono); color: var(--fog); font-size: var(--t-sm); margin-bottom: 0.4rem; }
.roi-be { font-size: var(--t-sm); color: var(--fog); margin-bottom: 1rem; }
.roi-be b { color: var(--paper); font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.bar { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.6rem; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog-2); }
.bar i { display: block; height: 14px; background: var(--rule-2); border-radius: 2px; transition: width 250ms var(--ease); min-width: 2px; }
.bar.e i { background: var(--signal); }
.bar span:last-child { color: var(--paper); font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
.formula { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fog-2); background: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.9rem; white-space: pre; overflow-x: auto; margin-bottom: 0.6rem; }
.roi-empty { color: var(--warn); font-family: var(--font-mono); font-size: var(--t-xs); }
@media (min-width: 900px) {
  .roi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .roi-in { border-bottom: 0; border-right: 1px solid var(--rule); }
  .roi-big { grid-template-columns: 1fr 1fr; }
}

/* ---------- platform switcher ---------- */
.plat { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); }
.plat .tabs { padding: 0 1rem; margin: 0; }
.plat .constant { padding: 0.7rem 1rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); border-bottom: 1px solid var(--rule); }
.plat-grid { display: grid; grid-template-columns: 1fr; }
.plat-left { padding: 1rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.plat-right { padding: 1rem; min-width: 0; }
.plat-left .code pre { font-size: 0.76rem; }
.plat-left .ln { display: block; white-space: pre; padding: 0 0.2rem; margin: 0 -0.2rem; border-radius: 2px; }
.plat-left .ln.flash { animation: flash 600ms var(--ease) 1; }
@keyframes flash { 0% { background: var(--signal-dim); outline: 1px solid var(--signal); } 100% { background: transparent; outline: 1px solid transparent; } }
.panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-3); padding: 0.9rem 1rem; margin-bottom: 0.8rem; font-size: var(--t-xs); }
.panel h4 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); margin-bottom: 0.6rem; }
.panel pre { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; color: var(--speech); overflow-x: auto; white-space: pre; margin: 0 0 0.6rem; }
.panel .join { color: var(--paper); border-left: 2px solid var(--signal); padding-left: 0.7rem; margin: 0.6rem 0; font-size: var(--t-sm); }
.panel .fn { color: var(--fog-2); font-style: italic; }
.panel.empty { border-style: dashed; }
.plat-right.fade { animation: fadein 300ms var(--ease) 1; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.mini-journey { display: flex; gap: 3px; flex-wrap: wrap; margin: 0.5rem 0; }
.mini-journey i { width: 14px; height: 8px; background: var(--pass); border-radius: 1px; opacity: 0.85; }
@media (min-width: 900px) {
  .plat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plat-left { border-bottom: 0; border-right: 1px solid var(--rule); }
}

/* ---------- evidence report mock ---------- */
.export-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.export-row .fmt { display: inline-flex; align-items: center; padding: 0.45em 0.8em; border-radius: var(--radius); border: 1px solid var(--rule-2); background: var(--ink-2); color: var(--paper); font-family: var(--font-mono); font-size: var(--t-xs); }
.export-row .caption { flex-basis: 100%; margin: 0.2rem 0 0; }
.report { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; }
.report-chrome { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--rule); background: var(--ink-3); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog-2); }
.report-chrome .url { flex: 1; background: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.25em 0.6em; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report .tabs { padding: 0 0.9rem; margin: 0; }
.report-scroll { max-height: 560px; overflow: auto; padding: 1rem; }
.verdict-banner { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--rule); margin-bottom: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); }
.verdict-banner.pass { border-color: rgba(82, 208, 139, 0.4); background: var(--pass-dim); }
.verdict-banner.fail { border-color: rgba(240, 104, 90, 0.4); background: var(--fail-dim); }
.verdict-banner .v { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; }
.verdict-banner.pass .v { color: var(--pass); }
.verdict-banner.fail .v { color: var(--fail); }
.verdict-banner .meta { color: var(--fog); }
.journey { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0.5rem 0 0.9rem; margin-bottom: 0.6rem; }
.journey button { flex: 0 0 auto; background: var(--ink-3); border: 1px solid var(--pass); color: var(--paper); border-radius: var(--radius); padding: 0.3em 0.55em; font-family: var(--font-mono); font-size: 0.68rem; white-space: nowrap; }
.journey button.k { border-color: var(--signal); color: var(--signal); }
.journey button.fail { border-color: var(--fail); color: var(--fail); }
.journey button:hover { background: var(--ink-4); }
.journey .conn { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; width: 3.4rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--fog-2); }
.journey .conn::before { content: ""; width: 100%; height: 1px; background: var(--rule-2); margin-bottom: 2px; }
.journey .conn.blank { width: 1.2rem; }
.journey .conn.blank::before { margin: 0; }
.whatfailed { border: 1px solid rgba(240, 104, 90, 0.4); border-left: 3px solid var(--fail); background: var(--fail-dim); padding: 0.8rem 0.9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: var(--t-xs); }
.whatfailed h4 { font-size: var(--t-sm); margin-bottom: 0.4rem; color: var(--fail); }
.whatfailed code { background: rgba(0, 0, 0, 0.25); }
.ladder-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1rem; }
.ladder { min-width: 760px; font-family: var(--font-mono); font-size: 0.72rem; }
.ladder th { font-family: var(--font-mono); font-weight: 500; color: var(--fog-2); background: var(--ink-3); font-size: 0.66rem; white-space: nowrap; }
.ladder td { color: var(--fog); }
.ladder td:first-child { color: var(--signal); white-space: nowrap; }
.ladder td.exp { color: var(--paper); }
.ladder td.sc { text-align: right; }
.ladder tr.fail td { background: var(--fail-dim); }
.ladder tr.fail td:first-child { box-shadow: inset 3px 0 0 var(--fail); }
.ladder tr.flash td { animation: rowflash 900ms var(--ease) 1; }
@keyframes rowflash { 0% { background: var(--signal-dim); } 100% { background: transparent; } }
.ladder .slice { padding: 0.15em 0.45em; }
.slices { display: grid; gap: 0.5rem; }
.slice-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.5rem 0.8rem; background: var(--ink-3); font-family: var(--font-mono); font-size: 0.72rem; }
.slice-row .name { color: var(--paper); }
.slice-row .dur { color: var(--fog-2); }
.slice-row .tri { color: var(--fog-2); }
.slice-row svg { width: 100%; height: 28px; }
.slice-row svg rect { fill: var(--music); opacity: 0.8; }
.slices-note { margin-top: 0.4rem; }
.report-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog-2); margin-bottom: 1rem; }
.report-meta b { color: var(--fog); font-weight: 500; }
@media (min-width: 720px) { .report-meta { grid-template-columns: repeat(4, 1fr); } }

/* ---------- case study ---------- */
.pull { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--paper); font-weight: 600; line-height: 1.15; max-width: 30ch; margin: 2.5rem 0 0; }
.pull small { display: block; font-family: var(--font-body); font-size: var(--t-sm); color: var(--fog-2); font-weight: 400; margin-top: 0.8rem; }

/* ---------- supported platforms strip ---------- */
.plats-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0.6rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); letter-spacing: 0.02em; }
.plats-head b { color: var(--volt); font-weight: 500; }
.plats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plats li { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.5em 0.85em; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); color: var(--paper); font-size: var(--t-sm); font-weight: 500; line-height: 1.2; margin: 0; }
.plats li small { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fog-2); font-weight: 400; }
.plats li.first { border-color: var(--pass); }
.plats li.first b { font-weight: 600; }
.plats li.any { border-style: dashed; color: var(--fog); font-weight: 400; }
.plats .chip { font-size: 0.62rem; }

/* ---------- capability teasers (home) ---------- */
.teasers { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 0.5rem; }
.teaser { display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; background: var(--ink-2); padding: 1.4rem 1.4rem 1.3rem; color: var(--fog); min-width: 0; transition: background 160ms var(--ease); }
.teaser:hover { background: var(--ink-3); text-decoration: none; color: var(--fog); }
.teaser .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--volt); }
.teaser h3 { font-size: var(--t-lg); margin-bottom: 0.2rem; }
.teaser p { font-size: var(--t-sm); margin: 0; }
.teaser .go { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--signal); margin-top: 0.4rem; }
.teaser:hover .go { color: var(--volt); }
.teaser .stat { font-family: var(--font-display); font-size: var(--t-xl); color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
@media (min-width: 640px) { .teasers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .teasers { grid-template-columns: repeat(4, 1fr); } }

/* ---------- capability tour (product) ---------- */
.tour { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; }
.tour a { display: block; background: var(--ink-2); padding: 1rem 1.1rem; color: var(--fog); font-size: var(--t-sm); min-width: 0; }
.tour a:hover { background: var(--ink-3); text-decoration: none; }
.tour a b { display: block; color: var(--paper); font-weight: 600; margin-bottom: 0.2rem; }
.tour a .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--volt); display: block; margin-bottom: 0.4rem; }
@media (min-width: 640px) { .tour { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .tour { grid-template-columns: repeat(4, 1fr); } }
.horizon { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 44rem; }
.horizon li { padding: 0.7rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; }
.horizon li .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); padding-top: 0.15em; }

/* ---------- download block ---------- */
.dl { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); display: grid; grid-template-columns: 1fr; }
.dl > div { padding: 1.3rem; min-width: 0; }
.dl > div + div { border-top: 1px solid var(--rule); }
.dl h3 { font-size: var(--t-lg); margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.5rem; }
.dl .meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); margin-bottom: 1rem; }
.dl .btn { margin-right: 0.4rem; }
.dl ul { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.dl li { font-size: var(--t-xs); font-family: var(--font-mono); color: var(--fog-2); margin-bottom: 0.3rem; }
.dl h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); margin: 1.1rem 0 0.2rem; }
.dl ul { margin-top: 0.3rem; }
.dl .caption { margin-top: 1rem; }
.dl .req { border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .dl { grid-template-columns: 1fr 1fr; } .dl > div + div { border-top: 0; border-left: 1px solid var(--rule); } }

/* ---------- pricing teaser (home) ---------- */
.tease-price { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.tease-price div { background: var(--ink-2); padding: 1.2rem 1.3rem; min-width: 0; }
.tease-price h3 { font-size: var(--t-md); font-family: var(--font-body); margin-bottom: 0.3rem; }
.tease-price .price { font-family: var(--font-display); font-size: var(--t-xl); color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.tease-price p { font-size: var(--t-sm); color: var(--fog-2); margin: 0; }
@media (min-width: 720px) { .tease-price { grid-template-columns: repeat(3, 1fr); } }

/* ---------- contact CTA band ---------- */
.cta-band { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); padding: 1.6rem; display: grid; gap: 1.2rem; }
.cta-band h2 { font-size: var(--t-2xl); }
.cta-band .cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr 1fr; align-items: center; } .cta-band .cta { justify-content: flex-end; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.faq div { padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.faq h3 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; margin-bottom: 0.5rem; }
.faq p { font-size: var(--t-sm); max-width: 48rem; }
@media (min-width: 900px) { .faq { grid-template-columns: 1fr 1fr; gap: 0 3rem; } }

/* ---------- form ---------- */
.access { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.form { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); padding: 1.3rem; }
.form label { display: block; font-size: var(--t-sm); color: var(--fog); margin-bottom: 0.3rem; }
.form .f { margin-bottom: 1rem; }
.form input, .form select, .form textarea { width: 100%; background: var(--ink); border: 1px solid var(--rule-2); color: var(--paper); border-radius: var(--radius); padding: 0.6em 0.75em; font-size: var(--t-sm); }
.form textarea { min-height: 5.5em; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--fog-2); }
.form .msg { font-family: var(--font-mono); font-size: var(--t-xs); margin-top: 0.8rem; min-height: 1.2em; }
.form .msg.ok { color: var(--pass); }
.form .msg.err { color: var(--fail); }
.form .priv { margin-top: 0.8rem; }
@media (min-width: 900px) { .access { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.form .row2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .form .row2 { grid-template-columns: 1fr 1fr; } }
.form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--fail); }
.form .sent { border: 1px solid rgba(82, 208, 139, 0.4); background: var(--pass-dim); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: var(--t-sm); color: var(--paper); }
.form .sent[hidden] { display: none; }
.form .sent b { color: var(--pass); font-family: var(--font-mono); font-weight: 500; display: block; margin-bottom: 0.3rem; }
.contact-side h3 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; margin: 1.6rem 0 0.4rem; }
.contact-side h3:first-child { margin-top: 0; }
.contact-side p { font-size: var(--t-sm); }
.contact-side .big { font-family: var(--font-mono); font-size: var(--t-lg); color: var(--paper); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding: 3rem 0 2rem; background: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.foot-grid h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-xs); color: var(--fog-2); margin-bottom: 0.7rem; letter-spacing: 0.02em; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 0.35rem; font-size: var(--t-sm); }
.foot-grid a { color: var(--fog); }
.foot-grid a:hover { color: var(--volt); }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .domain { font-family: var(--font-mono); color: var(--paper); margin: 0.8rem 0 0.4rem; }
.foot-brand p { font-size: var(--t-sm); color: var(--fog-2); max-width: 32rem; font-style: italic; }
.foot-bottom { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--rule); padding-top: 1.2rem; font-size: var(--t-xs); color: var(--fog-2); font-family: var(--font-mono); }
.foot-bottom .spacer { flex: 1; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .foot-brand { grid-column: auto; } }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 0 5rem; }
.docs-nav { font-size: var(--t-sm); }
.docs-nav ul { list-style: none; padding: 0; margin: 0; }
.docs-nav li { margin: 0; }
.docs-nav a { display: block; padding: 0.35em 0; color: var(--fog); border-left: 2px solid transparent; padding-left: 0.8rem; }
.docs-nav a:hover { color: var(--paper); text-decoration: none; }
.docs-nav a.active { color: var(--paper); border-left-color: var(--signal); }
.docs-nav .sub a { font-family: var(--font-mono); font-size: var(--t-xs); padding-left: 1.6rem; color: var(--fog-2); }
.docs-nav h4 { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); font-weight: 500; margin: 0 0 0.5rem 0.8rem; }
.docs-main { min-width: 0; max-width: 52rem; }
.docs-main h1 { margin-bottom: 1rem; }
.docs-main .intro { font-size: var(--t-lg); color: var(--fog); max-width: 42rem; }
.docs-main h2 { font-size: var(--t-2xl); margin: 3.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.docs-main h3 { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 500; margin: 2.2rem 0 0.6rem; color: var(--paper); }
.docs-main h3 code { font-size: 1em; background: none; padding: 0; color: var(--signal); }
.docs-main h4 { margin: 1.4rem 0 0.5rem; }
.docs-main p { max-width: 42rem; }
.docs-main .code { margin: 0.8rem 0 1.2rem; }
.docs-main .table-wrap { margin: 0.8rem 0 1.2rem; }
.docs-main .callout { margin: 1rem 0; max-width: 42rem; }
.docs-main ol, .docs-main ul { max-width: 42rem; }
.docs-main .chip { vertical-align: middle; margin-left: 0.4em; font-size: 0.62rem; }
@media (min-width: 900px) {
  .docs { grid-template-columns: 14rem 1fr; gap: 3.5rem; }
  .docs-nav { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* ---------- pricing ---------- */
.pricing-head { padding: 3rem 0 2rem; }
.pricing-head h1 { margin-bottom: 1rem; }
.pricing-head .standfirst { font-size: var(--t-lg); max-width: 42rem; }
.tiers { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; }
.tier { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); padding: 1.4rem; display: flex; flex-direction: column; min-width: 0; }
.tier.featured { border-color: var(--signal); }
.tier h2 { font-size: var(--t-xl); margin-bottom: 0.3rem; }
.tier .price { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--paper); font-weight: 600; line-height: 1.05; margin: 0.6rem 0 0.2rem; font-variant-numeric: tabular-nums; }
.tier .price small { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); font-weight: 400; display: block; margin-top: 0.35rem; }
.tier .who { font-size: var(--t-sm); color: var(--fog-2); font-style: italic; margin-bottom: 1.2rem; }
.tier h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-xs); color: var(--fog-2); margin: 1rem 0 0.5rem; letter-spacing: 0.02em; }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li { font-size: var(--t-sm); padding: 0.35rem 0 0.35rem 1.1rem; position: relative; margin: 0; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--pass); }
.tier li.b::before { background: transparent; border: 1px solid var(--warn); }
.tier li.p::before { background: transparent; border: 1px solid var(--plan); }
.tier .chip { margin-left: 0.3em; font-size: 0.62rem; }
.tier .cta { margin-top: auto; padding-top: 1.4rem; }
.tier .cta .btn { width: 100%; justify-content: center; }
.banner { border: 1px solid var(--rule-2); border-left: 3px solid var(--warn); background: var(--ink-2); padding: 1rem 1.2rem; border-radius: var(--radius); font-size: var(--t-sm); max-width: 62rem; }
.legend-line { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0 0; }
.legend-line span { display: inline-flex; align-items: center; gap: 0.4em; }
.legend-line i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.legend-line i.s { background: var(--pass); }
.legend-line i.b { border: 1px solid var(--warn); }
.legend-line i.p { border: 1px solid var(--plan); }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier.featured { border-color: var(--volt); }
.tier .tag { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink); background: var(--volt); border-radius: 999px; padding: 0.15em 0.6em; margin-left: 0.5em; vertical-align: middle; }
.tier .price .per { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fog-2); font-weight: 400; }
.tier .seats { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; margin-top: 0.8rem; font-size: var(--t-sm); }
.tier .seats input { width: 5.5rem; background: var(--ink); border: 1px solid var(--rule-2); color: var(--paper); border-radius: var(--radius); padding: 0.35em 0.5em; font-family: var(--font-mono); text-align: right; }
.tier .seats .tot { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.tier .msg { font-family: var(--font-mono); font-size: var(--t-xs); margin-top: 0.6rem; min-height: 1.2em; }
.tier .msg.err { color: var(--fail); }
.tier .trial { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); margin-top: 0.5rem; text-align: center; }
.billing { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; margin: 1.6rem 0 0; }
.billing button { background: var(--ink-2); border: 0; padding: 0.55em 1.1em; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog); }
.billing button + button { border-left: 1px solid var(--rule-2); }
.billing button[aria-pressed="true"] { background: var(--volt); color: var(--ink); font-weight: 500; }
.billing button:hover:not([aria-pressed="true"]) { color: var(--paper); background: var(--ink-3); }
.billing-note { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); margin: 0.5rem 0 0; }
.matrix th, .matrix td { padding: 0.6em 0.75em; }
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 15%; white-space: nowrap; }
.matrix td:first-child { color: var(--fog); }
.matrix tbody th { font-family: var(--font-mono); font-weight: 500; color: var(--volt); background: var(--ink-2); font-size: var(--t-xs); padding-top: 1.1em; }
.matrix .y { color: var(--pass); font-family: var(--font-mono); }
.matrix .n { color: var(--rule-2); font-family: var(--font-mono); }
.matrix .t { color: var(--fog); font-family: var(--font-mono); font-size: var(--t-xs); }

/* ---------- 404 ---------- */
.nf { min-height: calc(100vh - 60px); display: grid; place-items: center; text-align: center; padding: 3rem var(--gutter); }
.nf h1 { font-size: clamp(4rem, 14vw, 9rem); font-family: var(--font-mono); font-weight: 500; color: var(--volt); letter-spacing: -0.04em; line-height: 1; }
.nf p { max-width: 34rem; margin: 1.2rem auto 1.6rem; }
.nf .cta { display: flex; gap: 0.6rem; justify-content: center; }
.nf .domain { font-family: var(--font-mono); color: var(--fog-2); margin-top: 1.5rem; font-size: var(--t-xs); }

/* ---------- misc ---------- */
.example-tag { font-family: var(--font-mono); font-size: 0.66rem; color: var(--fog-2); border: 1px solid var(--rule); border-radius: 999px; padding: 0.1em 0.55em; white-space: nowrap; }
.link-line { margin-top: 1.5rem; font-size: var(--t-sm); }
.link-line a { font-weight: 600; }
.modes { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; }
.modes div { background: var(--ink-2); padding: 1rem 1.2rem; font-size: var(--t-sm); }
.modes h3 { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500; color: var(--signal); margin-bottom: 0.4rem; }
@media (min-width: 640px) { .modes { grid-template-columns: 1fr 1fr; } }
.arch { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); margin: 1.5rem 0; }
.arch svg { min-width: 760px; width: 100%; height: auto; }
.arch text { font-family: var(--font-mono); font-size: 11px; fill: var(--fog); }
.arch .box { fill: var(--ink-3); stroke: var(--rule-2); }
.arch .t { fill: var(--paper); font-weight: 500; }
.arch .sm { fill: var(--fog-2); font-size: 10px; }
.arch .ar { stroke: var(--fog-2); fill: none; marker-end: url(#arr); }
.arch .lbl { fill: var(--signal); font-size: 10px; }
.stack { display: grid; gap: 1.2rem; }
.bullets-tight li { font-size: var(--t-sm); margin-bottom: 0.5em; }
.sec-note { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); margin-top: 1rem; }
.h3-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 2rem 0 0.6rem; }
.h3-row h3 { font-size: var(--t-lg); }
.dtmf-glyph { display: inline-grid; grid-template-columns: repeat(3, 3px); gap: 1px; vertical-align: middle; margin-right: 0.3em; }
.dtmf-glyph i { width: 3px; height: 3px; background: currentColor; display: block; }

/* ---------- synthetic testing loop + schedule (product) ---------- */
.loop { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.loop li { background: var(--ink-2); padding: 1.1rem 1.2rem; min-width: 0; margin: 0; }
.loop .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--volt); display: block; margin-bottom: 0.45rem; }
.loop h3 { font-family: var(--font-body); font-size: var(--t-md); font-weight: 600; margin-bottom: 0.3rem; }
.loop p { font-size: var(--t-sm); margin: 0; }
@media (min-width: 640px) { .loop { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .loop { grid-template-columns: repeat(5, 1fr); } }
.sched { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; min-width: 0; max-width: 100%; }
.inst-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--rule); background: var(--ink-3); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog-2); }
.inst-bar .url { flex: 1; min-width: 8rem; background: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.25em 0.6em; color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-bar .spacer { flex: 1; }
.inst-bar .act { background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--fog); font-family: var(--font-mono); font-size: 0.7rem; padding: 0.3em 0.6em; border-radius: var(--radius); }
.inst-bar .act:hover { color: var(--paper); border-color: var(--fog-2); }
.inst-bar .act.done { color: var(--pass); border-color: var(--pass); }
.sched-row { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1rem; padding: 0.8rem 0.9rem; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; }
.sched-row:first-of-type { border-top: 0; }
.sched-row .when { color: var(--paper); font-weight: 500; }
.sched-row .what { color: var(--fog); min-width: 0; overflow-wrap: anywhere; }
.sched-row .what b { color: var(--signal); font-weight: 500; }
.sched-row .last { color: var(--fog-2); }
.sched-row .last .chip { font-size: 0.62rem; margin-right: 0.3em; }
.sched-row .next { color: var(--fog-2); white-space: nowrap; }
.sched-row .btn { justify-self: start; }
@media (min-width: 900px) { .sched-row { grid-template-columns: 9rem minmax(0, 1fr) auto auto; align-items: center; } }

/* ---------- scenario builder mock (product) ---------- */
.builder { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.builder .inst-bar { grid-column: 1 / -1; }
.builder-main { padding: 1rem 1.1rem; min-width: 0; }
.builder-side { padding: 1rem 1.1rem; border-top: 1px solid var(--rule); min-width: 0; }
.builder-side h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-xs); color: var(--fog-2); margin: 0 0 0.5rem; letter-spacing: 0.02em; }
.builder-side h4 + p { font-size: var(--t-xs); color: var(--fog-2); margin-bottom: 0.6rem; }
@media (min-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr) 17rem; } .builder-side { border-top: 0; border-left: 1px solid var(--rule); } }
.tpls { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; list-style: none; padding: 0; }
.tpls li { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.35em 0.65em; background: var(--ink-3); }
.tpls li.on { color: var(--paper); border-color: var(--signal); }
.tpls-lbl { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); margin-bottom: 0.4rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.step { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; background: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.55rem 0.7rem; font-family: var(--font-mono); font-size: 0.74rem; margin: 0; min-width: 0; }
.step .grip { color: var(--rule-2); letter-spacing: -1px; user-select: none; }
.step .n { color: var(--fog-2); }
.step .verb { color: var(--signal); }
.step .val { color: var(--paper); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .val em { color: var(--fog-2); font-style: normal; }
.step .chip { font-size: 0.6rem; }
.step.active { border-color: var(--signal); background: var(--signal-dim); }
.step.bad { border-color: var(--fail); }
.step .forms { grid-column: 1 / -1; display: flex; gap: 0.35rem; flex-wrap: wrap; font-size: 0.66rem; color: var(--fog-2); align-items: center; }
.step .forms span { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.1em 0.45em; color: var(--speech); white-space: nowrap; }
.step .forms i { font-style: normal; }
.builder-foot { display: flex; gap: 0.6rem 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.builder-foot .ok { color: var(--pass); }
.builder-foot .err { color: var(--fail); }
.builder-foot .spacer { flex: 1; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; max-width: 13rem; margin-bottom: 0.8rem; }
.keypad button { background: var(--ink-3); border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--paper); font-family: var(--font-mono); font-size: 1rem; padding: 0.4em 0 0.35em; line-height: 1.1; }
.keypad button small { display: block; font-size: 0.5rem; color: var(--fog-2); letter-spacing: 0.12em; margin-top: 0.15em; min-height: 0.7em; }
.keypad button:hover { border-color: var(--signal); color: var(--signal); }
.keypad-out { font-family: var(--font-mono); font-size: 0.8rem; color: var(--paper); background: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.4em 0.6em; margin-bottom: 0.4rem; min-height: 2.2em; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; max-width: 13rem; }
.keypad-out b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.keypad-out button { background: none; border: 1px solid var(--rule-2); color: var(--fog-2); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.66rem; padding: 0.2em 0.5em; flex: 0 0 auto; }
.keypad-out button:hover { color: var(--paper); border-color: var(--fog-2); }
.import-cols { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0.4rem 0 0.6rem; }
.import-cols span { font-family: var(--font-mono); font-size: 0.68rem; color: var(--speech); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.15em 0.5em; }

/* ---------- bring your own AI: plan panel (product) ---------- */
.aiplan { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; min-width: 0; max-width: 100%; }
.models { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.models .chip { font-size: 0.62rem; }
.ai-goal { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.ai-goal .lbl { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); }
.ai-goal .in { background: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 0.6em 0.75em; font-size: var(--t-sm); color: var(--paper); min-height: 2.6em; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.ai-goal .in .cur { display: inline-block; width: 0.55em; height: 1.05em; background: var(--signal); vertical-align: text-bottom; margin-left: 2px; animation: blink 1s steps(1) infinite; }
.ai-goal .btn { justify-self: start; }
@media (min-width: 720px) { .ai-goal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .ai-goal .lbl { grid-column: 1 / -1; } }
.ai-status { padding: 0.45rem 1.1rem; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog-2); min-height: 2.1em; display: flex; align-items: center; gap: 0.6rem; }
.ai-status .spin { color: var(--warn); }
.ai-out { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); }
@media (min-width: 900px) { .ai-out { grid-template-columns: repeat(3, 1fr); } }
.ai-card { background: var(--ink-2); padding: 1rem 1.1rem; min-width: 0; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.ai-card.pending { opacity: 0; transform: translateY(6px); }
.ai-card .k { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--signal); display: flex; justify-content: space-between; gap: 0.5rem; }
.ai-card .k .chip { font-size: 0.6rem; }
.ai-card h4 { margin: 0.35rem 0 0.6rem; font-size: var(--t-md); }
.ai-card .code pre { font-size: 0.7rem; padding: 1.9rem 0.8rem 0.7rem; line-height: 1.5; }
.ai-card .acts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; align-items: center; }
.ai-card .acts .note { font-family: var(--font-mono); font-size: 0.66rem; color: var(--pass); flex-basis: 100%; min-height: 1.2em; }
.ai-foot { border-top: 1px solid var(--rule); padding: 0.7rem 1.1rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fog-2); display: flex; gap: 0.5rem 1.2rem; flex-wrap: wrap; }
.ai-foot b { color: var(--fog); font-weight: 500; }

/* ---------- test log with review drawer (product) ---------- */
.testlog { border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.testlog .inst-bar { grid-column: 1 / -1; }
.log-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.log { width: 100%; min-width: 640px; font-family: var(--font-mono); font-size: 0.72rem; table-layout: auto; }
.log th { font-family: var(--font-mono); font-weight: 500; color: var(--fog-2); background: var(--ink-3); font-size: 0.66rem; white-space: nowrap; }
.log td { color: var(--fog); vertical-align: middle; }
.log tr.row { cursor: pointer; }
.log tr.row:hover td { background: var(--ink-3); }
.log tr.row:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.log tr.row[aria-selected="true"] td { background: var(--signal-dim); }
.log tr.row[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
.log tr.flash td { animation: rowflash 900ms var(--ease) 1; }
.log td.t { color: var(--signal); white-space: nowrap; }
.log td.num, .log td.sc { color: var(--paper); white-space: nowrap; }
.log td.notes { color: var(--speech); max-width: 0; width: 36%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log td.reviewed { white-space: nowrap; }
.log .chip { font-size: 0.64rem; }
.log .rev { font-size: 0.62rem; color: var(--fog-2); margin-left: 0.35em; }
.log td.reviewed .chip.chip-pass, .log td.reviewed .chip.chip-fail { border-style: solid; }
.log td.reviewed .rev.o { color: var(--paper); }
.drawer { border-top: 1px solid var(--rule); padding: 1rem 1.1rem; background: var(--ink-3); min-width: 0; }
.drawer h4 { font-size: var(--t-sm); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.drawer h4 .id { font-family: var(--font-mono); font-weight: 500; color: var(--paper); }
.drawer .meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fog-2); margin: 0.4rem 0 0.9rem; line-height: 1.7; }
.drawer .meta b { color: var(--fog); font-weight: 500; }
.drawer label, .drawer .lbl { display: block; font-size: var(--t-xs); color: var(--fog-2); font-family: var(--font-mono); margin-bottom: 0.35rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.9rem; }
.seg button { background: var(--ink-2); border: 0; padding: 0.55em 0.3em; font-family: var(--font-mono); font-size: 0.7rem; color: var(--fog); border-bottom: 2px solid transparent; }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button:hover { color: var(--paper); }
.seg button[aria-pressed="true"] { color: var(--paper); background: var(--ink-4); border-bottom-color: var(--signal); }
.seg button[aria-pressed="true"].p { color: var(--pass); }
.seg button[aria-pressed="true"].f { color: var(--fail); }
.drawer textarea { width: 100%; background: var(--ink); border: 1px solid var(--rule-2); color: var(--paper); border-radius: var(--radius); padding: 0.6em 0.75em; font-size: var(--t-sm); min-height: 6em; resize: vertical; }
.drawer .acts { display: flex; gap: 0.5rem 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.drawer .saved { font-family: var(--font-mono); font-size: 0.66rem; color: var(--pass); min-height: 1.2em; flex-basis: 100%; overflow-wrap: anywhere; }
@media (min-width: 900px) { .testlog { grid-template-columns: minmax(0, 1fr) 19rem; } .drawer { border-top: 0; border-left: 1px solid var(--rule); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .tl-caption .txt::after, .term .cur, .ai-goal .in .cur { animation: none; }
  .ai-card.pending { opacity: 1; transform: none; }
}