
/* Layout: the page is the floor. Limestone field, black double fillet around each figure, the way the mosaic frames its portrait. Single look on purpose. */
:root{--room:#F7F5F4;--panel:#EEEBE8;--panel2:#E6E2DE;--stone:#F7F5F4;--stone2:#EEEBE8;--stone3:#E6E2DE;--line:#D9D5D1;--ink:#121212;--mute:#6B6866;--dim:#8A8785;--black:#121212;--phosphor:#D74B3B;--phos-deep:#F3D3CE;--amber:#D74B3B;--walnut:#D74B3B;--bad:#D74B3B;--terra:#D74B3B;--ochre:#D74B3B;--verd:#121212;--bg:#F7F5F4;--fg:#121212;--muted:#6B6866;--rule:#D9D5D1;--accent:#D74B3B;--plate:#121212;--display:var(--sans);--body:var(--sans);--mono:var(--sans);color-scheme:light}
*{box-sizing:border-box}html{background:var(--stone);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stone);color:var(--ink);font:19px/1.62 var(--body);padding-inline:max(16px,env(safe-area-inset-left,0px));padding-block:0 96px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.col{max-width:700px;margin-inline:auto}.wide{max-width:1160px;margin-inline:auto}
p{margin:0 0 1.05em}a{color:var(--terra)}em{font-style:italic}b,strong{font-weight:600}
code{font-family:var(--mono);font-size:.8em;color:var(--terra)}button,input{font:inherit}
button:focus-visible,input:focus-visible,a:focus-visible,video:focus-visible,canvas:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.mast{display:flex;justify-content:space-between;gap:12px;padding-block:22px 0;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mast b{color:var(--ink);font-weight:600}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding-block:44px 26px}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr);gap:26px}}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--terra)}
h1{font:900 clamp(46px,7.2vw,92px)/.98 var(--display);margin:18px 0 22px;letter-spacing:.005em;text-wrap:balance}
h1 span{color:var(--terra)}
.dek{font-size:clamp(19px,2vw,22px);line-height:1.5;margin:0}
.film{border:3px solid var(--black);outline:3px solid var(--black);outline-offset:5px;margin:8px;background:#000}
.film video{display:block;width:100%;height:auto;aspect-ratio:4/5}
.stats{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px;font:600 13px/1.3 var(--mono);color:var(--mute)}.stats b{color:var(--ink);font-weight:600}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin-top:30px}
.toc a{font:600 12px/1 var(--mono);color:var(--ink);text-decoration:none;border:1px solid var(--line);padding:9px 11px;background:var(--stone2)}.toc a:hover{border-color:var(--ink)}.toc small{color:var(--terra);margin-right:7px;font:inherit}
.ch{margin-top:112px}.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:end;margin-bottom:20px}
.ch-num{font:900 70px/.82 var(--display);color:var(--terra);grid-row:span 2}.ch-kick{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
h2{font:700 clamp(30px,4.2vw,46px)/1.04 var(--display);margin:0;text-wrap:balance}
h3{font:700 23px/1.15 var(--display);margin:42px 0 10px}
figure{margin:32px auto 36px}
.fig{background:var(--stone2);border:2px solid var(--black);outline:2px solid var(--black);outline-offset:4px;padding:18px;margin-inline:auto}
.fig-t{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:600 12px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}.fig-t b{color:var(--terra);font-weight:600}
figcaption{font:13px/1.55 var(--mono);color:var(--mute);margin-top:12px;max-width:820px}
.btn{font:600 12px/1 var(--mono);letter-spacing:.05em;background:var(--stone3);color:var(--ink);border:1px solid var(--line);padding:10px 12px;cursor:pointer;touch-action:manipulation}
.btn:hover{border-color:var(--ink)}.btn[aria-pressed="true"]{background:var(--black);color:var(--stone2);border-color:var(--black)}.btn.hot{background:var(--terra);border-color:var(--terra);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}input[type=range]{accent-color:var(--terra);width:100%}
.lbl{font:600 11px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}.num{font-variant-numeric:tabular-nums}
.pix{image-rendering:pixelated}.media img,.media video{display:block;width:100%;height:auto;border:1px solid var(--line)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media (max-width:640px){.three{grid-template-columns:minmax(0,1fr)}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font:13px/1.3 var(--mono);color:var(--mute)}.kv dt{text-transform:uppercase;letter-spacing:.06em;font-size:11px;align-self:center}.kv dd{margin:0;color:var(--ink);text-align:right;font-weight:600}
/* live floor */
.live{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}@media (max-width:900px){.live{grid-template-columns:minmax(0,1fr)}}
.liveb{position:relative;aspect-ratio:4/5;background:#14110e;max-height:82vh;margin-inline:auto;width:100%;max-width:calc(82vh*.8)}
.liveb canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;display:block}
.hint{position:absolute;left:12px;bottom:12px;background:rgba(20,17,14,.84);color:#f2ecdf;font:600 12px/1.3 var(--mono);padding:7px 10px;pointer-events:none;transition:opacity .4s}
.side{display:grid;gap:16px;align-content:start}.grp{display:grid;gap:8px}
.fallback{padding:18px;font:14px/1.5 var(--mono);color:var(--mute)}
/* cell */
.cellg{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}@media (max-width:760px){.cellg{grid-template-columns:minmax(0,1fr)}}
.cellg .pick{position:relative;width:100%;max-width:240px;aspect-ratio:4/5}.cellg .pick canvas{width:100%;height:100%;display:block;cursor:crosshair;border:1px solid var(--line)}
.rowb{margin-bottom:13px}.rowb canvas{display:block;width:100%;height:30px;border:1px solid var(--line)}.rowb .lbl{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}
.atlas canvas{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:crosshair}
.atk{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font:13px/1.3 var(--mono);color:var(--mute)}.atk b{color:var(--ink)}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.proof canvas{width:100%;height:auto;display:block;border:1px solid var(--line);background:#14110e}.proof .lbl{display:block;margin-bottom:6px;min-height:2.4em}
.verdict{margin-top:12px;font:600 14px/1.45 var(--mono);padding:11px 13px;background:var(--black);color:var(--stone2)}
.layers{position:relative;aspect-ratio:4/5;max-width:620px;margin-inline:auto;overflow:hidden;background:#14110e}
.layers img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}.layers .top{clip-path:inset(0 0 0 var(--w,50%))}
.layers i{position:absolute;top:0;bottom:0;left:var(--w,50%);width:2px;background:#fff;box-shadow:0 0 0 1px #000}
.pal{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;margin-top:8px}.pal span{aspect-ratio:1;border:1px solid rgba(0,0,0,.2)}
.tbl{width:100%;border-collapse:collapse;font:13px/1.35 var(--mono)}.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.tbl th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}.tbl td.g{color:var(--verd);font-weight:600}.tbl td.b{color:var(--terra);font-weight:600}.tbl .pick td{background:var(--stone3)}
.scroll{overflow-x:auto}
.erase{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;align-items:start}@media (max-width:760px){.erase{grid-template-columns:minmax(0,1fr)}}.erase canvas{width:100%;height:auto;display:block;border:1px solid var(--line)}
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}@media (max-width:760px){.ledger{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ledger div{background:var(--stone2);padding:15px 14px}.ledger b{display:block;font:700 28px/1.05 var(--display);margin-bottom:6px}.ledger span{font:12px/1.35 var(--mono);color:var(--mute)}
.lightm{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}@media (max-width:800px){.lightm{grid-template-columns:minmax(0,1fr)}}.lights{position:relative;aspect-ratio:4/5;background:#000;isolation:isolate;overflow:hidden}.lights img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:plus-lighter}
.strip3 img{display:block;width:100%;height:auto;margin-bottom:6px;border:1px solid var(--line)}
footer{margin-top:90px;font:13px/1.6 var(--mono);color:var(--mute)}
