:root {
  color-scheme: dark;
  --ink: #f2eee2;
  --muted: #a9a99f;
  --faint: #727973;
  --bg: #0d1112;
  --panel: #151b1d;
  --panel-2: #1c2426;
  --line: #344044;
  --signal: #d8ff45;
  --danger: #ff786e;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
  font-family: "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: var(--signal); color: #111; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 68px; padding: 0 clamp(20px, 4vw, 72px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; background: rgba(13,17,18,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; text-decoration: none; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--signal); color: #111; font-size: 12px; }
.topbar nav { display: flex; justify-content: center; gap: 24px; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.topbar nav a:hover { color: var(--ink); }
.status-badge { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.status-badge span { width: 7px; height: 7px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 12px var(--signal); }

.section-shell { width: min(1480px, calc(100% - 48px)); margin-inline: auto; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: clamp(40px, 8vw, 120px); padding-block: 96px; }
.hero-copy { max-width: 860px; }
.kicker, .step, .panel-label { margin: 0 0 16px; color: var(--signal); font: 700 12px/1.2 Consolas, monospace; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(58px, 8vw, 124px); line-height: .87; letter-spacing: -.055em; text-transform: uppercase; }
.lede { max-width: 720px; margin: 32px 0 0; color: #c9c8bd; font-size: clamp(18px, 2vw, 25px); }
.hero-actions, .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font-weight: 700; }
.button.primary { background: var(--signal); border-color: var(--signal); color: #101313; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.fairness-panel { border: 1px solid var(--line); background: var(--panel); padding: 28px; box-shadow: var(--shadow); }
.fairness-panel dl { margin: 0; }
.fairness-panel dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.fairness-panel dt { color: var(--muted); }
.fairness-panel dd { margin: 0; font-weight: 700; }
.mockup-disclaimer { display: inline-flex; align-items: center; min-height: 26px; margin: 16px 0 0; padding: 5px 8px; border: 1px solid currentColor; color: #f6d78e; background: rgba(13,17,18,.88); font: 700 10px/1.2 Consolas, monospace; letter-spacing: .08em; }

.test-section, .protocol { padding-block: 86px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 480px); gap: 40px; align-items: end; margin-bottom: 34px; }
.section-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 70px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 17px; }
.locked { position: relative; }
.locked::after { content: "MAKE A CLICK CHOICE TO UNLOCK"; position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(13,17,18,.92); color: var(--signal); font: 700 14px Consolas, monospace; letter-spacing: .14em; border-top: 1px solid var(--line); }
.gate-message { margin: 18px 0 0; color: var(--muted); }

.comparison-grid, .concept-pages-grid, .storyboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.concept-card, .store-page, .storyboard { --concept: #f3a62f; --concept-2: #89d7c5; --concept-dark: #172025; border: 1px solid var(--line); background: var(--panel); }
.concept-card { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.concept-card.selected { border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.capsule-art { position: relative; min-height: 330px; overflow: hidden; background: var(--concept-dark); isolation: isolate; }
.capsule-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.15), transparent 50%, rgba(255,255,255,.04)); }
.capsule-copy { position: absolute; inset: 28px; z-index: 5; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.capsule-eyebrow { color: var(--concept-2); font: 700 11px Consolas, monospace; letter-spacing: .12em; }
.capsule-title { max-width: 70%; font-size: clamp(42px, 5vw, 76px); line-height: .82; letter-spacing: -.05em; text-transform: uppercase; text-shadow: 0 3px 18px rgba(0,0,0,.5); }
.capsule-subline { max-width: 62%; font-weight: 700; }
.concept-card-body { padding: 24px 26px 12px; }
.concept-name-row { display: flex; justify-content: space-between; align-items: start; gap: 18px; }
.concept-name-row h3 { margin: 0; font-size: 34px; letter-spacing: -.03em; }
.concept-name-row .position-label { flex: 0 0 auto; color: var(--faint); font: 700 11px Consolas, monospace; }
.hook { margin: 12px 0; color: var(--concept-2); font-size: 18px; font-weight: 700; }
.short-description { margin: 0; color: #c7c6bc; }
.choice-button { width: calc(100% - 52px); min-height: 52px; margin: 18px 26px 26px; border: 1px solid var(--concept); background: var(--concept); color: #111; cursor: pointer; font-weight: 800; }
.choice-button[aria-pressed="true"]::before { content: "✓ "; }

.scene { position: absolute; inset: 0; overflow: hidden; }
.grid-board { position: absolute; width: 292px; aspect-ratio: 1; right: -18px; bottom: -34px; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 3px; transform: rotate(-8deg) skewY(4deg); }
.grid-board i { display: block; border: 1px solid color-mix(in srgb, var(--concept) 44%, #59656a); background: color-mix(in srgb, var(--concept-dark) 78%, #fff); }
.grid-board i:nth-child(3n), .grid-board i:nth-child(7n) { background: var(--concept); }
.grid-board i:nth-child(5n) { background: var(--concept-2); }
.grid-board i:nth-child(11n)::after { content: ""; display: block; width: 45%; height: 45%; margin: 27%; background: #111; }
.belt { position: absolute; height: 44px; background: repeating-linear-gradient(90deg, #243035 0 23px, #516066 24px 27px); border: 2px solid #738086; transform-origin: left center; }
.belt::after { content: ""; position: absolute; inset: 9px; border-top: 2px dashed var(--concept-2); animation: flow 1.8s linear infinite; }
.belt.one { width: 78%; left: 24%; top: 44%; transform: rotate(-8deg); }
.belt.two { width: 52%; left: 55%; top: 66%; transform: rotate(18deg); }
.waste-item { position: absolute; z-index: 3; width: 54px; height: 54px; border: 4px solid #16191c; background: var(--concept); box-shadow: 0 0 0 2px var(--concept-2); transform: rotate(10deg); }
.waste-item.a { left: 54%; top: 35%; border-radius: 48% 52% 41% 59%; }
.waste-item.b { left: 72%; top: 55%; background: var(--concept-2); border-radius: 50%; }
.waste-item.c { left: 86%; top: 29%; clip-path: polygon(50% 0, 100% 25%, 78% 100%, 13% 84%, 0 23%); }
.scanner-ring { position: absolute; z-index: 4; width: 160px; height: 160px; right: 7%; top: 20%; border: 10px double var(--concept-2); border-radius: 50%; box-shadow: 0 0 36px color-mix(in srgb, var(--concept-2) 60%, transparent); }
.scanner-ring::after { content: "SCAN"; position: absolute; inset: 0; display: grid; place-items: end center; color: var(--concept-2); font: 700 11px Consolas, monospace; }
@keyframes flow { to { transform: translateX(27px); } }

/* Ten scene-specific compositions: shared finish, distinct visual evidence. */
.scene-empty-grid .grid-board { width: 270px; right: 9%; bottom: 7%; transform: rotate(0); }
.scene-empty-grid .grid-board i { background: transparent !important; }
.boundary-callout { position: absolute; left: 7%; top: 25%; z-index: 5; display: grid; gap: 4px; }
.boundary-callout b { color: var(--concept); font-size: 72px; line-height: .8; }
.boundary-callout span { color: var(--concept-2); font: 700 10px Consolas, monospace; }

.scene-first-chain .grid-board { opacity: .35; width: 245px; right: 3%; bottom: -45px; }
.linear-chain { position: absolute; z-index: 5; left: 9%; right: 8%; top: 38%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.linear-chain i { min-height: 78px; display: grid; place-items: center; border: 3px solid #111; background: var(--concept); color: #111; font: 900 11px Consolas, monospace; font-style: normal; box-shadow: 0 0 0 2px var(--concept-2); }
.linear-chain i:nth-child(even) { background: var(--concept-2); }
.belt.chain-belt { left: 10%; top: 58%; width: 80%; height: 28px; transform: none; }

.compression-panel { position: absolute; top: 26%; width: 33%; height: 48%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.compression-panel.before { left: 7%; }
.compression-panel.after { right: 7%; }
.compression-panel span { position: absolute; top: 10px; color: var(--concept-2); font: 700 9px Consolas, monospace; }
.compression-panel i { width: 60px; height: 60px; border: 4px solid #111; background: var(--concept); box-shadow: 0 0 0 2px var(--concept-2); }
.compression-panel.after i { width: 86px; height: 86px; background: repeating-linear-gradient(45deg,var(--concept) 0 18px,var(--concept-2) 19px 36px); }
.merge-arrow { position: absolute; left: 45%; top: 39%; color: var(--concept-2); font-size: 52px; }
.tile-saved { position: absolute; right: 10%; bottom: 13%; color: var(--concept-2); font: 700 11px Consolas, monospace; }

.scene-reroute .grid-board { width: 270px; right: 6%; bottom: -18px; opacity: .7; }
.route { position: absolute; z-index: 4; left: 8%; width: 75%; height: 110px; border: 8px solid transparent; border-top-color: currentColor; border-right-color: currentColor; }
.route-old { top: 30%; color: var(--danger); transform: rotate(7deg); }
.route-new { top: 49%; color: var(--concept-2); transform: rotate(-8deg); }
.bottleneck-node { position: absolute; z-index: 6; left: 54%; top: 39%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #111; font-size: 30px; font-weight: 900; }
.throughput { position: absolute; z-index: 6; padding: 6px 8px; background: #111; font: 700 11px Consolas, monospace; }
.before-rate { left: 8%; top: 18%; color: var(--danger); }
.after-rate { right: 8%; bottom: 15%; color: var(--concept-2); }

.scene-dense-grid .grid-board { width: 330px; right: -10px; bottom: -80px; }
.dense-meter { position: absolute; z-index: 6; left: 6%; bottom: 12%; width: 40%; }
.dense-meter i { display: block; height: 8px; background: linear-gradient(90deg,var(--concept-2) 94%,#394347 94%); }
.dense-meter span { color: var(--concept-2); font: 700 10px Consolas, monospace; }

.scene-scanner { background: radial-gradient(circle at 72% 49%, color-mix(in srgb,var(--concept) 24%,transparent), transparent 32%); }
.scan-console { position: absolute; z-index: 5; left: 7%; top: 21%; width: 38%; display: grid; gap: 12px; color: var(--concept-2); font: 700 10px Consolas, monospace; }
.scan-console i { height: 9px; width: var(--p); background: var(--concept-2); box-shadow: 0 0 12px var(--concept-2); }
.specimen.egg { position: absolute; z-index: 3; right: 15%; top: 23%; width: 110px; height: 150px; border: 6px solid #17131d; border-radius: 55% 45% 49% 51% / 63% 62% 38% 37%; background: repeating-linear-gradient(120deg,var(--concept) 0 22px,color-mix(in srgb,var(--concept) 45%,#241c2b) 23px 36px); transform: rotate(9deg); }
.scanner-ring.solo { width: 205px; height: 205px; right: 8%; top: 13%; }

.belt.sort-main { width: 92%; left: 4%; top: 24%; transform: none; }
.sort-gate { position: absolute; z-index: 4; top: 47%; width: 70px; height: 118px; display: grid; place-items: center; border: 4px solid currentColor; color: var(--concept-2); background: rgba(10,10,12,.6); font-weight: 900; }
.sort-gate::before { content: ""; position: absolute; width: 4px; height: 60px; top: -62px; background: currentColor; }
.sort-gate.g1 { left: 18%; }
.sort-gate.g2 { left: 43%; color: var(--concept); }
.sort-gate.g3 { right: 18%; }
.sort-item { top: 17%; width: 40px; height: 40px; }
.sort-item.i1 { left: 9%; }.sort-item.i2 { left: 27%; }.sort-item.i3 { left: 46%; }.sort-item.i4 { left: 65%; }.sort-item.i5 { left: 82%; }

.processor { position: absolute; z-index: 4; display: grid; place-items: center; border: 4px solid #151218; background: var(--concept); color: #111; font: 900 11px Consolas, monospace; }
.input-hopper { left: 8%; top: 33%; width: 88px; height: 100px; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); }
.process-core { position: absolute; z-index: 4; left: 39%; top: 27%; width: 145px; height: 145px; display: grid; place-items: center; border: 10px double var(--concept-2); border-radius: 50%; color: var(--concept-2); font: 700 10px Consolas, monospace; }
.process-core i { position: absolute; width: 54px; height: 54px; background: var(--concept); transform: rotate(45deg); animation: process-spin 3s linear infinite; }
.process-core span { z-index: 2; background: #151218; padding: 4px; }
.output-bin { right: 8%; width: 82px; height: 62px; }
.output-bin.b1 { top: 20%; }.output-bin.b2 { bottom: 19%; background: var(--concept-2); }
.flow-arrow { position: absolute; color: var(--concept-2); font-size: 45px; }.flow-arrow.a1 { left: 25%; top: 39%; }.flow-arrow.a2 { right: 25%; top: 36%; }
@keyframes process-spin { to { transform: rotate(405deg); } }

.belt.replicate-belt { left: 4%; top: 54%; width: 92%; transform: none; }
.replica { position: absolute; z-index: 4; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid #151218; background: var(--concept); color: #111; font: 900 9px Consolas, monospace; transform: rotate(5deg); }
.replica.r1 { left: 8%; top: 39%; }.replica.r2 { left: 20%; top: 39%; }.replica.r3 { left: 32%; top: 39%; }.replica.r4 { left: 44%; top: 39%; }.replica.r5 { left: 56%; top: 39%; }.replica.r6 { left: 68%; top: 39%; }.replica.r7 { left: 80%; top: 39%; }.replica.r8 { left: 72%; top: 20%; background: var(--concept-2); }
.capacity-alert { position: absolute; left: 7%; bottom: 15%; color: var(--danger); font: 900 16px Consolas, monospace; animation: alert-pulse .8s steps(2) infinite; }
@keyframes alert-pulse { 50% { opacity: .35; } }

.containment-door { position: absolute; z-index: 3; top: 0; bottom: 0; width: 31%; background: repeating-linear-gradient(135deg,#26212d 0 18px,#3c3244 19px 36px); border-color: var(--concept-2); }
.containment-door.left { left: 0; border-right: 5px solid var(--concept-2); }
.containment-door.right { right: 0; border-left: 5px solid var(--concept-2); }
.specimen.hatchling { position: absolute; z-index: 5; left: 43%; top: 31%; width: 90px; height: 105px; border-radius: 48% 52% 40% 60%; background: var(--concept); border: 5px solid #151218; }
.specimen.hatchling i { position: absolute; top: 28%; width: 13px; height: 13px; border-radius: 50%; background: #111; box-shadow: 0 0 0 4px var(--concept-2); }
.specimen.hatchling i:first-child { left: 22%; }.specimen.hatchling i:last-child { right: 22%; }
.hazard-orbit { position: absolute; z-index: 4; left: 37%; top: 18%; width: 210px; height: 210px; border: 6px dashed var(--concept-2); border-radius: 50%; }
.recovery-status { position: absolute; z-index: 6; left: 50%; bottom: 10%; transform: translateX(-50%); color: var(--concept-2); white-space: nowrap; font: 700 10px Consolas, monospace; }
.capsule-art .dense-meter, .capsule-art .recovery-status { display: none; }

.store-page { overflow: hidden; }
.store-head { padding: 26px; border-bottom: 1px solid var(--line); }
.store-logo { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.store-logo h3 { margin: 0; font-size: 42px; letter-spacing: -.04em; text-transform: uppercase; }
.store-logo .logo-box { width: 64px; height: 64px; display: grid; place-items: center; border: 5px solid var(--concept); color: var(--concept-2); font-size: 24px; font-weight: 900; }
.logo-direction { color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.store-page .capsule-art { min-height: 270px; }
.store-description { min-height: 142px; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.store-description strong { display: block; color: var(--concept-2); margin-bottom: 9px; }
.screenshot-list { display: grid; gap: 1px; background: var(--line); }
.screenshot-card { background: var(--panel); }
.mockup-scene { position: relative; min-height: 250px; overflow: hidden; background: var(--concept-dark); }
.mockup-scene .scene { transform: scale(.82); transform-origin: center; }
.mockup-scene .mockup-disclaimer { position: absolute; left: 16px; bottom: 14px; z-index: 7; margin: 0; }
.scene-labels { position: absolute; z-index: 6; top: 16px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.scene-labels span { padding: 5px 7px; color: var(--concept-2); border: 1px solid color-mix(in srgb, var(--concept-2) 50%, transparent); background: rgba(10,12,13,.8); font: 700 10px Consolas, monospace; }
.screenshot-copy { padding: 18px 20px 20px; }
.screenshot-copy h4 { margin: 0 0 6px; font-size: 22px; }
.screenshot-copy p { margin: 5px 0; color: #c8c6ba; }
.screenshot-copy .test-question { color: var(--concept-2); font: 700 12px/1.5 Consolas, monospace; }

.storyboard { padding: 22px; }
.storyboard h3 { margin: 0 0 18px; font-size: 30px; }
.story-beats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.story-beat { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid var(--line); background: var(--concept-dark); }
.story-beat .time { color: var(--concept-2); font: 700 11px Consolas, monospace; }
.story-beat .beat-no { color: color-mix(in srgb, var(--concept) 35%, transparent); font-size: 60px; font-weight: 900; line-height: 1; }
.story-beat .visual { color: #d1cec1; font-size: 12px; }
.story-beat .overlay { color: var(--concept-2); font: 700 11px/1.3 Consolas, monospace; }

form { border: 1px solid var(--line); background: var(--panel); padding: clamp(22px, 4vw, 46px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field > span, .field legend { font-weight: 700; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 12px 13px; border: 1px solid #4a585c; background: #0f1415; color: var(--ink); }
.field textarea { resize: vertical; }
.field small { color: var(--faint); }
.field small.error { color: var(--danger); min-height: 18px; }
.choice-field { margin: 0; padding: 0; border: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-row label { flex: 1; min-width: 160px; min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #4a585c; background: #0f1415; }
.choice-row label:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.optional-ratings { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.optional-ratings summary { cursor: pointer; font-weight: 700; }
.rating-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.rating-grid label { display: grid; gap: 8px; }
.rating-grid input { width: 100%; }
.text-button { min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-decoration: underline; }
.text-button.danger { color: var(--danger); }
#record-status { margin-left: auto; color: var(--muted); }

.protocol-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.protocol-grid article { min-height: 250px; padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.protocol-grid article > span { color: var(--signal); font: 700 32px Consolas, monospace; }
.protocol-grid h3 { margin: 52px 0 8px; text-transform: uppercase; }
.protocol-grid p { margin: 0; color: var(--muted); }
.protocol-note { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--signal); color: #d9d8cc; }
.footer { min-height: 110px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--faint); border-top: 1px solid var(--line); font: 700 11px Consolas, monospace; letter-spacing: .08em; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { display: none; }
  .story-beats { grid-template-columns: 1fr; }
  .story-beat { min-height: 150px; }
  .protocol-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .section-shell { width: min(100% - 28px, 720px); }
  .hero, .section-heading, .comparison-grid, .concept-pages-grid, .storyboard-grid { grid-template-columns: 1fr; }
  .hero { padding-block: 64px; }
  .capsule-art { min-height: 300px; }
  .form-grid, .rating-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  #record-status { width: 100%; margin-left: 0; }
}

@media (max-width: 560px) {
  .topbar { padding-inline: 14px; }
  .status-badge { display: none; }
  h1 { font-size: 50px; }
  .capsule-title { font-size: 42px; }
  .grid-board { width: 230px; }
  .protocol-grid { grid-template-columns: 1fr; }
  .footer { align-items: start; flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  :root { color-scheme: light; --ink: #111; --muted: #444; --bg: #fff; --panel: #fff; --line: #bbb; }
  .topbar, .hero, #comparison, #concept-pages, #storyboards, #questionnaire, .footer { display: none !important; }
  .protocol { border: 0; padding: 0; }
  .protocol-grid { grid-template-columns: repeat(2, 1fr); }
  .protocol-grid article { min-height: 0; break-inside: avoid; }
}