/* Hallmark · shape: Bento Grid · genre: atmospheric · theme: brand · redesign: full
 * paper: oklch(13% 0.01 240) · accent: oklch(90% 0.17 155) · display: Space Grotesk · body: Space Grotesk · hero: Ledge · nav: slab · footer: letter close · signature: the mussel mark closing over a live lane of agent inputs · finish-review: subagent · 8 findings · 7 resolved 1 partial · gap: one bento section only
 * axes: dark/grotesk-sans/chromatic-green · posture: Restrained · contrast: pass · fold: pass · draw: e0e851 · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the plankton canvas and the glow on the mark both stay because they are the brand; cut the halo, the glass panels and every other glow */
/* Hallmark · dropped "where the idea comes from", "how it decides", "try it", "for developers", "enforcement", "roadmap", "intake" · 54 names each as an eyebrow over a heading that already says it */
/* Hallmark · reworded "input firewall for AI agents" to "An input firewall for AI agents." · 54 names the eyebrow, the fact moves into the hero sentence */
/* Hallmark · reworded "built for crypto inputs" to "Built for crypto inputs." · 54 names the eyebrow, it becomes the line under its heading */
/* Hallmark · reworded "closed · 5 of 6" to "closed, 5 of 6" · 63 names the middle dot */
/* Hallmark · reworded "Nov – Dec 2026" to "Nov to Dec 2026", "Jan – Mar 2027" to "Jan to Mar 2027", "Q4 2027 →" to "From Q4 2027" · 19 names the dashes and the arrow in the hidden roadmap */
/* Hallmark · dropped .halo · 29 names the radial spotlight behind the hero mark */
/* Hallmark · reworded "Eight mussels guard a city's water." to "Eight mussels guard a city’s water." · F1 names the straight apostrophe */
/* Hallmark · waive 77 · the API section pairs its heading with a ten-line code sample 320px tall on six columns · the SDK call is the picture here and a pre is not counted as a visual */
/* Hallmark · answered F2 · the three-period runs are the Morse code the demo decodes, never an ellipsis */
/* Hallmark · answered F25 · main.js pins the quorum at every width, so its notes hide on a phone to fit one screen */
@import url("./tokens.css");
@import url("./base.css");

/* base, on the brand */
body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }
code, .mono { font-family: var(--font-outlier); }
code { font-size: 0.9em; }
.muted { color: var(--color-muted); }
.hl-cy { color: var(--color-cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: 8px; background: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-400%); }
.skip:focus-visible { transform: none; }
#sea { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .foot { position: relative; z-index: var(--z-base); }
main > section { padding-top: var(--section-gap); }
main > .hero { padding-top: 0; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--color-accent) 80%, var(--color-ink)); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.btn-ghost:hover { border-color: var(--color-ink); }
.text-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-xs); border: 0; background: none; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.text-btn:hover { color: var(--color-ink); }
.text-btn:active { transform: translateY(1px); }
html:not(.js) [data-loop-toggle] { display: none; }

/* the mark and its states */
.mark line { stroke-linecap: round; }
.mark-sm { width: 30px; height: 28px; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot-open { background: var(--color-accent); }
.dot-narrow { background: var(--color-narrow); }
.dot-closed { background: var(--color-closed); }
.pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-sm); white-space: nowrap; }
.pill-closed { color: var(--color-closed); }

/* nav: a slab */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); background: var(--color-paper-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--color-ink); text-decoration: none; }
.wordmark { font: 700 1.125rem/1 var(--font-body); letter-spacing: 0.12em; }
.nav nav { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav nav a:hover { color: var(--color-ink); }

/* hero: a ledge. The lane and the mark above, the head resting at the base */
.hero { display: flex; min-height: calc(100svh - var(--nav-h)); }
.hero > .container { display: grid; grid-template-rows: 1fr auto; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.lane { --mark-w: clamp(150px, 34svh, 360px); display: grid; gap: var(--space-md); align-self: end; margin: 0; }
.hero-mark { position: relative; width: var(--mark-w); margin-left: calc(64% - var(--mark-w) / 2); }
#heroMark { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 16px var(--glow-open)); }
.hero-mark.is-narrow #heroMark { filter: drop-shadow(0 0 16px var(--glow-narrow)); }
.hero-mark.is-closed #heroMark { filter: drop-shadow(0 0 20px var(--glow-closed)); }
.hero-state { position: absolute; left: calc(100% + var(--space-lg)); top: 50%; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); white-space: nowrap; transform: translateY(-50%); }
.intake { display: grid; gap: var(--space-2xs); }
.intake-track { position: relative; height: 56px; overflow: hidden; border-block: 1px solid var(--color-rule); }
.gate { position: absolute; top: 0; bottom: 0; left: 64%; z-index: 2; width: 2px; background: var(--color-accent); transition: background-color var(--dur-short) var(--ease-out); }
.gate.hit { background: var(--color-closed); }
.ichip { position: absolute; top: 50%; left: 0; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1; white-space: nowrap; transform: translate3d(0, -50%, 0); }
.ichip .src { color: var(--color-cyan); }
.ichip .v { display: none; font-weight: 700; }
.ichip.open { border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-rule)); }
.ichip.narrow { border-color: color-mix(in oklab, var(--color-narrow) 60%, var(--color-rule)); }
.ichip.closed { border-color: var(--color-closed); }
.ichip.open .v { display: inline; color: var(--color-accent); }
.ichip.narrow .v { display: inline; color: var(--color-narrow); }
.ichip.closed .v { display: inline; color: var(--color-closed); }
.intake-meta .text-btn { padding: 0; }
.intake-meta { display: flex; align-items: center; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.intake-count { display: inline-flex; gap: var(--space-md); margin-left: auto; font-variant-numeric: tabular-nums; }
.hero-base { align-items: end; }
.hero-base h1 { grid-column: 1 / 9; line-height: 1; letter-spacing: -0.04em; }
.hero-side { grid-column: 9 / 13; display: grid; gap: var(--space-lg); }
.hero-side .lead { color: var(--color-ink-2); }
.hero-side .lead b { color: var(--color-ink); font-weight: 700; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.char { display: inline-block; }
.wordwrap { display: inline-block; white-space: nowrap; }

/* a section's head: the heading left, its one paragraph right */
.sec-head { align-items: end; margin-bottom: var(--space-2xl); }
.sec-head h2 { grid-column: 1 / 7; }
.sec-head p { grid-column: 8 / 13; }
.sec-head .lead { color: var(--color-ink-2); }

/* playground */
.console { align-items: start; }
.console-in { grid-column: 1 / 7; position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: flex; flex-direction: column; gap: var(--space-md); }
.console-out { grid-column: 7 / 13; display: grid; gap: var(--space-lg); min-width: 0; }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip-btn { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chip-btn:hover, .chip-btn[aria-pressed="true"] { border-color: var(--color-cyan); color: var(--color-cyan); }
.chip-btn:active { transform: translateY(1px); }
.field-label { color: var(--color-muted); font-size: var(--text-sm); }
textarea { width: 100%; min-height: 150px; padding: var(--space-md); border: 1px solid var(--color-muted); border-radius: 12px; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-sm)/1.6 var(--font-outlier); resize: vertical; outline: 2px solid transparent; outline-offset: -3px; }
textarea:focus-visible { outline-color: var(--color-focus); }
textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.console-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.console-row .btn { margin-left: auto; }
.seg { display: inline-flex; padding: var(--space-3xs); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); }
.seg label { display: inline-flex; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); cursor: pointer; }
.seg input:checked + span { background: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.out-top { display: flex; align-items: center; gap: var(--space-lg); }
#tryMark { flex: none; width: 96px; height: auto; }
.out-state { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.out-state.s-open { color: var(--color-accent); }
.out-state.s-narrow { color: var(--color-narrow); }
.out-state.s-closed { color: var(--color-closed); }
.out-votes { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.out-votes span { width: 26px; height: 6px; border-radius: 3px; background: var(--color-rule); }
.out-votes span.c { background: var(--color-closed); }
.out-votes span.o { background: var(--color-accent); }
.code { margin: 0; padding: var(--space-lg); border-radius: 12px; background: var(--color-paper-2); color: var(--color-ink); font: 400 var(--text-xs)/1.7 var(--font-outlier); white-space: pre; overflow: auto; }
#outJson { white-space: pre-wrap; overflow-wrap: break-word; }
.c-mut { color: var(--color-muted); }
.c-str { color: var(--color-accent); }
.c-key { color: var(--color-cyan); }
.c-fn { color: var(--color-narrow); }
.c-red { color: var(--color-closed); }

/* story: eight mussels in one row */
.tank { position: relative; margin-top: var(--space-2xl); padding: var(--space-2xl) var(--space-xl) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); overflow: hidden; }
.tank-water { position: absolute; inset: 0; pointer-events: none; }
.tank-water i { position: absolute; left: -10%; width: 30%; height: 1px; background: color-mix(in oklab, var(--color-cyan) 35%, transparent); }
.js .tank-water i { animation: current 4.5s linear infinite; }
.tank-water i:nth-child(1) { top: 14%; animation-delay: -1s; }
.tank-water i:nth-child(2) { top: 30%; animation-delay: -3s; }
.tank-water i:nth-child(3) { top: 46%; animation-delay: -2s; }
.tank-water i:nth-child(4) { top: 62%; animation-delay: -4s; }
.tank-water i:nth-child(5) { top: 78%; animation-delay: -0.5s; }
.tank-water i:nth-child(6) { top: 90%; animation-delay: -2.5s; }
.tank.toxic .tank-water i { background: color-mix(in oklab, var(--color-closed) 45%, transparent); }
.tank.stopped .tank-water i { animation-play-state: paused; opacity: 0.15; }
@keyframes current { to { transform: translateX(450%); } }
.tank-grid { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-lg); }
.tank-grid svg { width: 100%; height: auto; filter: drop-shadow(0 0 10px var(--glow-open)); transition: filter var(--dur-short) var(--ease-out); }
.tank-grid svg.shut { filter: drop-shadow(0 0 12px var(--glow-closed)); }
.tank-readout { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); color: var(--color-ink); font-size: var(--text-sm); }
.tank-readout b { color: var(--color-closed); font-variant-numeric: tabular-nums; }
.supply { display: inline-flex; align-items: center; gap: var(--space-xs); }
.replay { position: absolute; top: var(--space-xs); right: var(--space-md); }
.story-copy { margin-top: var(--space-2xl); row-gap: var(--space-md); }
.story-copy p { font-size: var(--text-lg); }
.story-copy p:nth-child(1) { grid-column: 1 / 7; }
.story-copy p:nth-child(2) { grid-column: 7 / 13; }

/* quorum: pinned by main.js, so it fits one screen */
main > .quorum { padding-top: 0; margin-top: var(--space-2xl); }
main > .states { padding-top: var(--space-xl); }
.sources .sec-head p { grid-column: 1 / 7; margin-top: var(--space-md); }
.quorum-inner { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: calc(var(--nav-h) + var(--space-lg)) var(--space-lg); }
.quorum h2 { font-size: clamp(1.875rem, 3.2vw, 3rem); }
.q-head { align-items: end; margin-bottom: var(--space-lg); }
.q-head h2 { grid-column: 1 / 7; }
.q-head p { grid-column: 7 / 13; }
.q-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); column-gap: var(--gap-columns); align-items: center; }
.q-input { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.q-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }
.q-meta span:first-child { color: var(--color-cyan); }
.q-meta .act { color: var(--color-narrow); }
.q-text { margin: 0; color: var(--color-ink); font-size: var(--text-lg); line-height: 1.55; }
.morse { padding: 0 var(--space-3xs); border-radius: 4px; color: var(--color-ink-2); font-family: var(--font-outlier); font-size: 0.9em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.morse.found { background: color-mix(in oklab, var(--color-closed) 16%, transparent); color: var(--color-closed); }
.q-decoded { display: flex; align-items: baseline; gap: var(--space-sm); min-height: 40px; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-rule); color: var(--color-closed); font-size: var(--text-sm); }
.q-tag { color: var(--color-muted); font-family: var(--font-body); }
.q-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
#qMark { width: clamp(140px, 16vw, 220px); height: auto; filter: drop-shadow(0 0 16px var(--glow-open)); transition: filter var(--dur-short) var(--ease-out); }
#qMark.shut { filter: drop-shadow(0 0 20px var(--glow-closed)); }
.q-meter { width: 180px; color: var(--color-muted); font-size: var(--text-sm); text-align: center; }
.q-num { margin-bottom: var(--space-xs); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.q-num b { font: 700 3rem/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.q-bar { position: relative; height: 4px; border-radius: 4px; background: var(--color-rule); }
.q-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px; background: var(--color-closed); }
.q-thr { position: absolute; top: -6px; bottom: -6px; left: 33.33%; width: 2px; background: var(--color-ink); }
.q-thr-label { margin-top: var(--space-sm); }
.q-detectors { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.q-detectors li { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; column-gap: var(--space-sm); row-gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border: 1px solid transparent; border-radius: 12px; transition: opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.js .q-detectors li { opacity: 0.35; }
.js .q-detectors li.lit { opacity: 1; }
.q-detectors b { color: var(--color-ink); font-weight: 500; }
.d-note { grid-column: 2; color: var(--color-muted); font-size: var(--text-sm); }
.lamp { grid-row: 1; width: 10px; height: 10px; border: 1px solid var(--color-muted); border-radius: 50%; }
.q-detectors li.lit[data-v="closed"] { border-color: color-mix(in oklab, var(--color-closed) 35%, transparent); background: color-mix(in oklab, var(--color-closed) 6%, transparent); }
.q-detectors li.lit[data-v="closed"] .lamp { border-color: var(--color-closed); background: var(--color-closed); }
.q-detectors li.lit[data-v="open"] { border-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
.q-detectors li.lit[data-v="open"] .lamp { border-color: var(--color-accent); background: var(--color-accent); }
.q-verdict { display: flex; align-items: center; gap: var(--space-lg); min-height: 60px; margin-top: var(--space-lg); }
.q-verdict p { max-width: 70ch; color: var(--color-ink); }

/* three verdicts, as rows */
.state { align-items: center; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.state:last-child { border-bottom: 1px solid var(--color-rule); }
.state svg { grid-column: 1 / 2; width: 100%; max-width: 84px; height: auto; }
.state[data-state="open"] svg { filter: drop-shadow(0 0 10px var(--glow-open)); }
.state[data-state="narrow"] svg { filter: drop-shadow(0 0 10px var(--glow-narrow)); }
.state[data-state="closed"] svg { filter: drop-shadow(0 0 12px var(--glow-closed)); }
.state h3 { grid-column: 2 / 7; font-size: var(--text-section); line-height: 1.05; font-variant-numeric: tabular-nums; }
.state p { grid-column: 7 / 13; font-size: var(--text-lead); }

/* sources */
.src-table { border-top: 1px solid var(--color-rule); }
.src-row { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.src-row > :nth-child(1) { grid-column: 1 / 3; }
.src-row > :nth-child(2) { grid-column: 3 / 8; color: var(--color-ink); }
.src-row > :nth-child(3) { grid-column: 8 / 13; }
.src-headrow { padding-block: var(--space-sm); font-size: var(--text-sm); }
.src-headrow > :nth-child(n) { color: var(--color-muted); }
.src-key { color: var(--color-cyan); font-weight: 700; font-size: var(--text-sm); }
.decoders { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chips li { padding: var(--space-2xs) var(--space-sm); border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent); border-radius: var(--radius-pill); color: var(--color-accent); font-size: var(--text-sm); }

/* api */
.api > .container { align-items: center; }
.api-copy { grid-column: 1 / 6; }
.api-copy p { margin-top: var(--space-lg); }
.code-req { grid-column: 7 / 13; padding: var(--space-xl); font-size: var(--text-md); }

/* receipts */
.flow { position: relative; height: 180px; margin-top: var(--space-lg); }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-svg path { fill: none; stroke: var(--color-rule); stroke-width: 2; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; }
.flow-node { position: absolute; top: 50%; left: var(--x); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); min-width: 120px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-paper); text-align: center; transform: translate(-50%, -50%); }
.flow-node span { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.flow-node b { color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.flow-node.n-first { left: 0; transform: translate(0, -50%); }
.flow-node.n-last { left: 100%; transform: translate(-100%, -50%); }
.node-bv { border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }
#walletState.ok { color: var(--color-accent); }
#walletState.no { color: var(--color-closed); }
.packet { position: absolute; top: 50%; left: 0; z-index: 2; width: 12px; height: 12px; margin: calc(var(--space-sm) / -2) 0 0 calc(var(--space-sm) / -2); border-radius: 50%; background: var(--color-accent); }
html:not(.js) .packet { display: none; }
.loop-row { display: flex; justify-content: flex-end; }
.facts { row-gap: var(--gap-columns); margin-top: var(--space-xl); }
.facts > div { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.facts > div:nth-child(1) { grid-column: 1 / 6; grid-row: 1; }
.facts > div:nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 3; }
.facts > div:nth-child(3) { grid-column: 1 / 6; grid-row: 2; }
.facts h3 { margin-bottom: var(--space-sm); }
.facts > div:nth-child(2) p { font-size: var(--text-lg); }

/* roadmap (hidden in the markup for now) */
.phases { position: relative; display: grid; margin: 0; padding: 0 0 0 var(--space-xl); list-style: none; }
.phases::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: var(--color-rule); }
.phases .depth { position: absolute; top: 8px; left: 7px; width: 2px; height: 0; background: var(--color-accent); }
.phase { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2xs) var(--space-xl); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.phase::before { content: ""; position: absolute; top: 32px; left: calc(var(--space-xl) * -1); width: 16px; height: 16px; border: 2px solid var(--color-rule); border-radius: 50%; background: var(--color-paper); transition: border-color var(--dur-short) var(--ease-out); }
.phase.reached::before { border-color: var(--color-accent); }
.ph-when { grid-row: span 3; color: var(--color-muted); font-size: var(--text-sm); }
.phase h3 { display: flex; align-items: baseline; gap: var(--space-sm); }
.ph-exit { color: var(--color-narrow); font-size: var(--text-sm); }

/* footer: a letter close */
.foot { margin-top: var(--section-gap-l); background: var(--color-paper-2); }
.foot > .container { padding-block: var(--section-gap-s) var(--space-2xl); }
.final { display: grid; justify-items: start; gap: var(--space-xl); }
#finalMark { width: 120px; height: auto; filter: drop-shadow(0 0 16px var(--glow-open)); }
.final h2 { max-width: 16ch; font-size: var(--text-display); line-height: 1; letter-spacing: -0.04em; }
.beta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.foot-sign { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.foot-sign p { font-size: var(--text-sm); }
.foot-sign a { color: var(--color-cyan); }

/* No scroll-behavior: smooth. GSAP ScrollTrigger measures the pinned quorum wrong under it. */
@media (prefers-reduced-motion: reduce) { .packet, .gate, [data-loop-toggle] { display: none; } }

@media (max-width: 60rem) {
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; }
  .hero { min-height: 0; }
  .lane { --mark-w: 200px; }
  .console-in { position: static; }
  .hero-state { right: calc(100% + var(--space-md)); left: auto; }
  .hero-base h1, .hero-side, .sec-head h2, .sec-head p, .sources .sec-head p, .console-in, .console-out, .story-copy p:nth-child(n), .q-head h2, .q-head p, .api-copy, .code-req, .facts > div:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .hero-base, .sec-head, .console, .api > .container, .facts { row-gap: var(--space-lg); }
  .tank { padding: var(--space-2xl) var(--space-md) var(--space-md); }
  .tank-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quorum-inner { padding-block: calc(var(--nav-h) + var(--space-xs)) var(--space-sm); }
  .q-head { margin-bottom: var(--space-md); }
  .q-head p { display: none; }
  .q-stage { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .q-input { padding: var(--space-md); }
  .q-text { font-size: var(--text-md); line-height: 1.45; }
  .morse { font-size: 0.75em; }
  .q-meta { margin-bottom: var(--space-xs); }
  .q-decoded { min-height: 0; margin-top: var(--space-sm); padding-top: var(--space-sm); }
  .q-verdict p { font-size: var(--text-sm); }
  .q-detectors li { padding: var(--space-2xs) var(--space-xs); }
  .q-center { flex-direction: row; justify-content: flex-start; }
  #qMark { width: 84px; }
  .q-meter { text-align: left; }
  .q-num b { font-size: 2.25rem; }
  .q-detectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-note { display: none; }
  .q-verdict { flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-md); }
  .state svg { grid-column: 1 / 3; }
  .state h3 { grid-column: 3 / 13; }
  .state p { grid-column: 1 / 13; margin-top: var(--space-sm); }
  .src-row { row-gap: var(--space-2xs); }
  .src-row > :nth-child(n) { grid-column: 1 / -1; }
  .src-headrow { display: none; }
  .console-row .btn { width: 100%; margin-left: 0; }
  .facts > div:nth-child(2) p { font-size: var(--text-md); }
  .facts > div { padding: var(--space-lg); }
  .code-req { padding: var(--space-lg); font-size: var(--text-xs); white-space: pre-wrap; }
  textarea { font-size: var(--text-md); }
  .flow { height: 440px; }
  .flow-svg { display: none; }
  .flow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--color-rule); }
  .flow-node, .flow-node.n-first, .flow-node.n-last { top: calc(var(--i) * 25% + 12%); left: 50%; transform: translate(-50%, -50%); }
  .flow-node:nth-child(2) { --i: 0; } .flow-node:nth-child(3) { --i: 1; }
  .flow-node:nth-child(4) { --i: 2; } .flow-node:nth-child(5) { --i: 3; }
  .packet { left: 50%; }
  .phase { grid-template-columns: minmax(0, 1fr); }
  .ph-when { grid-row: auto; }
}