:root { --bg:#0d0e11; --panel:#16181d; --fg:#e6e6e1; --muted:#8a8f98; --err:#ffbe28; --div:#ff5050; --gold:#ffd65c; --ok:#3fbf7f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; }
body > header, body > section, body > footer { max-width:1200px; margin:0 auto; padding:0 24px; }
section { margin-top:56px !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
a { color:#8fb8ff; }
code, pre { font-family: ui-monospace, Menlo, monospace; font-size:.9em; }

.top { padding-top:40px !important; }
.kicker { margin:0 0 8px; color:var(--gold); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.85rem; }
h1 { margin:0; font-size:clamp(1.8rem, 4.2vw, 3rem); line-height:1.1; letter-spacing:-.01em; }
h2 { font-size:1.5rem; margin:0 0 8px; letter-spacing:-.01em; }
h3 { font-size:1rem; margin:16px 0 6px; }
.sub { color:var(--muted); max-width:52rem; }

.hero { display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:32px; align-items:start; }
.hero video { width:100%; border-radius:12px; background:#000; display:block; }
.fp { background:var(--panel); border-radius:12px; padding:20px 24px; }
.fn-list { padding-left:1.6em; margin:8px 0; }
.fn-list li { margin:10px 0; }
.fn-list li::marker { color:var(--gold); font-weight:700; }
.fn-list a b { color:var(--fg); }
.fp-more { color:var(--muted); font-size:.9rem; margin-bottom:0; }
.fnn { display:inline-grid; place-items:center; width:1.5em; height:1.5em; margin-right:.4em; border-radius:50%;
  background:var(--gold); color:#111; font-size:.75em; vertical-align:.15em; }

.limits { border:1px solid var(--err); border-radius:12px; padding:20px 24px !important; max-width:1152px !important; }
.limits ul { margin:0; padding-left:1.2em; }
.limits li { margin:8px 0; }

.pick { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; }
.pick button[aria-checked="true"] { border-color:var(--fg); background:#3a3f4b; }
.warn { margin:10px 0 12px; padding:6px 10px; display:inline-block; border:1px solid var(--err); color:var(--err); border-radius:6px; }
.warn.live { border-color:var(--ok); color:var(--ok); }
.replay { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; }
.stage { background:var(--panel); padding:12px; border-radius:10px; }
canvas#spacetime { width:100%; image-rendering:pixelated; background:#000; border-radius:4px; cursor:crosshair; }
.controls { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
button { background:#262a33; color:var(--fg); border:1px solid #3a3f4b; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; font-size:.9rem; }
button.linkish { background:none; border:0; padding:0; color:#8fb8ff; text-decoration:underline; font-size:inherit; }
.legend { color:var(--muted); font-size:.85rem; }
.hint { margin:4px 0 0; color:var(--ok); font-size:.9rem; }
.sw { display:inline-block; width:10px; height:10px; margin:0 4px 0 10px; vertical-align:middle; }
.sw.on { background:#e6e6e1; } .sw.off { background:#111114; border:1px solid #444; }
.sw.div { background:var(--div); } .sw.err { background:var(--err); } .sw.dim { background:#5a5a5f; }
aside { background:var(--panel); padding:12px 16px; border-radius:10px; min-width:0; }
.receipt { background:#0f1115; padding:12px; border-radius:8px; margin-bottom:12px; border:1px solid #2a2e37; }
.receipt p { margin:6px 0 0; font-size:.9rem; }
.r-where { color:var(--muted); }
.r-line { display:grid; grid-template-columns:7.5em 1fr; gap:6px; align-items:baseline; }
.r-line .k { margin:0; }
.ok-text { color:var(--ok); }
.receipt details { margin-top:8px; font-size:.85rem; }
.receipt pre { white-space:pre-wrap; word-break:break-word; font-size:.75rem; background:#0a0b0e; padding:8px; border-radius:6px; max-height:260px; overflow:auto; }
.arrow { color:var(--muted); margin:0 4px; }
.counters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.counters div { background:#0f1115; padding:8px; border-radius:6px; }
.k { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.v { font:600 1.3rem ui-monospace, Menlo, monospace; }
.err-text { color:var(--err); }
.lcr { display:flex; gap:4px; margin-top:8px; align-items:center; }
.cell { display:inline-block; width:22px; height:22px; border:1px solid #444; vertical-align:middle; }
.cell.on { background:#e6e6e1; } .cell.off { background:#111114; }
.meta { color:var(--muted); font-size:.78rem; word-break:break-word; }
#log { font:12px ui-monospace, Menlo, monospace; max-height:240px; overflow:auto; padding-left:3.6em; margin:0; }
#log li.bad { color:var(--err); }

.ev-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:12px 0; }
figure { margin:0; background:var(--panel); border-radius:10px; padding:10px; }
figure img, figure canvas { width:100%; height:auto; display:block; border-radius:6px; }
figure.wide { max-width:900px; }
figcaption { color:var(--muted); font-size:.9rem; margin-top:6px; }

blockquote { margin:12px 0; padding:14px 18px; border-left:4px solid var(--gold); background:var(--panel); border-radius:0 10px 10px 0; font-size:1.05rem; }
.crit { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; color:var(--muted); }
.crit dd { margin:0; color:var(--fg); }
.verbatim { color:var(--muted); font-size:.85rem; max-width:60rem; background:var(--panel); padding:16px 20px; border-radius:10px; }

footer { color:var(--muted); font-size:.85rem; padding-top:24px !important; padding-bottom:48px !important; margin-top:56px; border-top:1px solid #23262d; }

@media (max-width: 900px) {
  .hero, .replay, .ev-grid { grid-template-columns:1fr; }
  .hero video { max-width:440px; }
}