/* Antpad - ZX Spectrum school. 15 colours, ROM font at 8 px multiples, zero radius, no shadows/glow/blur/gradients-as-light. */
@font-face { font-family: "AntROM"; src: url("/assets/fonts/AntROM.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url("/assets/fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/assets/fonts/plex-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --k: #000000; --b: #0000D7; --B: #0000FF; --r: #FF0000; --m: #FF00FF; --g: #00FF00; --c: #00FFFF; --w: #FFFFFF; --w7: #D7D7D7; --c7: #00D7D7; --m7: #D700D7; --g7: #00D700;
  /* no yellow anywhere (Anton 10-28: yellow + blue reads as a flag, not as a Spectrum) */
  --rom: "AntROM", ui-monospace, monospace; --num: "Plex", ui-monospace, "SFMono-Regular", monospace;
  --lowfs: 16px; --sw: min(100%, 768px);
  --cur: url("/assets/cur.png") 0 0, auto; --curk: url("/assets/cur-k.png") 0 0, pointer;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--k); cursor: var(--cur); -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; color: var(--w); font: 400 16px/1.5 var(--num); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
.zx-border { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; pointer-events: none; }
img { image-rendering: pixelated; }
a { color: inherit; }
a, button, [role=button], summary, label[for], .ca, [data-copy] { cursor: var(--curk); }
input, textarea { cursor: text; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.rom, h1, h2, .k, .lower, .bar { font-family: var(--rom); font-weight: 400; -webkit-font-smoothing: none; font-smooth: never; letter-spacing: 0; }
.ant { background: var(--c); color: var(--k); font-weight: 500; padding: 0 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--c); color: var(--k); }
:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* ---------- keys: ZX inverse video. Paper + ink, hover/press = swap (FLASH), disabled = normal (0xD7) colours */
.k { --p: var(--w); --i: var(--k); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; margin: 0;
  background: var(--p); color: var(--i); box-shadow: inset 0 0 0 2px var(--p); font: 16px/16px var(--rom); text-decoration: none; white-space: nowrap; border-radius: 0; }
.k:hover, .k:focus-visible { background: var(--i); color: var(--p); outline: none; }
.k:active { background: var(--p); color: var(--i); transform: translateY(2px); }
.k:disabled, .k[aria-disabled=true] { --p: var(--w7); background: var(--w7); color: var(--k); cursor: default; transform: none; }
.k { min-width: 32px; }
.k-g { --p: var(--g); } .k-w { --p: var(--w); } .k-c { --p: var(--c); }
.k-big { height: 48px; padding: 0 24px; }
.k-sm { height: 32px; padding: 0 8px; }
.k-ic { width: 32px; height: 32px; padding: 0; }
.k .ic, .ic { width: 16px; height: 16px; display: block; shape-rendering: crispEdges; }
.k .q { letter-spacing: 0; }
.k[aria-pressed=true] { background: var(--i); color: var(--p); }
.k-x .ic { width: 16px; height: 16px; }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 20; height: 48px; display: flex; align-items: center; gap: 24px; padding: 0 16px; background: var(--k); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 16px/16px var(--rom); -webkit-font-smoothing: none; height: 40px; }
.brand img { width: 32px; height: 32px; display: block; }
.nav { display: flex; gap: 16px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.nav a, .nav button { color: var(--w7); text-decoration: none; background: none; border: 0; padding: 12px 0; font: inherit; }
.nav a:hover, .nav button:hover { color: var(--k); background: var(--w); box-shadow: 0 0 0 4px var(--w); }
.keys { margin-left: auto; display: flex; gap: 8px; }

/* ---------- hero: the TV. Border shows around the screen; the screen is the paper */
.hero { min-height: calc(100svh - 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 40px; }
.scr-host { width: 100%; max-width: 1024px; display: flex; justify-content: center; }
.scr { margin: 0; position: relative; line-height: 0; background: var(--k); cursor: var(--curk); }
.scr img { display: block; width: min(100%, 768px); height: auto; aspect-ratio: 4 / 3; }
.scr canvas { position: absolute; left: 0; top: 0; display: none; image-rendering: pixelated; }
.scr.is-js canvas { display: block; }
.lower { width: var(--sw); max-width: 100%; background: var(--k); padding: 16px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start; }
.listing { font-size: var(--lowfs); line-height: 1; min-width: 0; }
.ln { margin: 0; padding: 4px 0; min-height: calc(var(--lowfs) + 8px); color: var(--w); overflow-wrap: anywhere; }
.ln .rem { color: var(--w7); }
.ln.rep { color: var(--k); background: var(--w7); display: inline-block; padding: 4px 8px; margin-top: 8px; }
.lower.is-typing .ln:not(.done) [data-notype], .ut { visibility: hidden; }
.lower.is-typing .ln.rep:not(.done) { background: transparent; }
.ln .ca { vertical-align: middle; }
.keys-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lower .keys-row { grid-column: 1 / -1; }
.trio { display: grid; gap: 8px; margin: 0; }
.trio div { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; }
.trio dt { font: 400 13px/1.3 var(--num); color: var(--w7); order: 2; width: 136px; }
.trio dd { margin: 0; font: 500 24px/1.1 var(--num); color: var(--w); order: 1; text-align: right; }
.pool-n div, .sgrid div, .tc-n div { display: flex; flex-direction: column-reverse; }
.pool-n dt, .sgrid dt, .tc-n dt { font: 400 13px/1.3 var(--num); color: var(--w7); }
.pool-n dd, .tc-n dd { margin: 0; font: 500 32px/1.1 var(--num); color: var(--w); }

/* CA chip: CA label (normal white paper) + full CA (Plex) + "ant" on cyan paper; copy -> 0 OK */
.ca { min-height: 32px; display: inline-flex; align-items: stretch; gap: 0; padding: 0; margin: 0; border: 0; background: none; color: var(--w); text-align: left; max-width: 100%; font: 500 15px/1.35 var(--num); }
.ca-k { background: var(--w7); color: var(--k); font: 16px/16px var(--rom); padding: 4px 8px; display: flex; align-items: center; -webkit-font-smoothing: none; }
.ca-v { font: inherit; padding: 4px 0 4px 8px; overflow-wrap: anywhere; word-break: break-all; font-variant-numeric: tabular-nums; }
.ca-t { background: var(--c); color: var(--k); font-weight: 500; padding: 0 1px; white-space: nowrap; display: inline-block; }
.ca-ok { font: 16px/16px var(--rom); align-self: center; padding: 0 8px; color: var(--g); min-width: 0; -webkit-font-smoothing: none; }
.ca:hover .ca-v { background: var(--w); color: var(--k); }
.ca:hover .ca-t { background: var(--c7); }
.ca.is-err .ca-ok { color: var(--r); }
.ca-pend { display: inline-flex; align-items: stretch; }
.ca-pend .ca-v { color: var(--w7); font: 16px/16px var(--rom); padding: 4px 8px; }

/* ---------- scenes: one continuous black paper; the border shows in the gutters */
.sc { padding: 0 16px; }
.paper { max-width: 1104px; margin: 0 auto; background: var(--k); padding: 96px 32px; }
.sc-h { margin-bottom: 48px; max-width: 720px; }
.bar { display: inline-block; margin: 0; background: var(--m7); color: var(--w); font-size: 32px; line-height: 32px; padding: 8px 16px; }
.sc-h p { margin: 16px 0 0; color: var(--w7); font-size: 16px; max-width: 60ch; }
.lbl { margin: 0; font: 400 13px/1.3 var(--num); color: var(--w7); }

/* pool */
.pool-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; align-items: start; }
.tries { margin: 4px 0 0; font: 500 48px/1 var(--num); color: var(--w); }
.odds { margin: 8px 0 24px; color: var(--w7); font-size: 14px; }
.feed { list-style: none; margin: 0; padding: 0; min-height: 224px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.feed li { display: flex; align-items: center; gap: 8px; height: 32px; color: var(--w7); }
.feed .f-n { font: 400 12px/1 var(--num); color: var(--w7); width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.feed .f-a { color: var(--w); }
.feed .f-t { background: var(--k); color: var(--k); padding: 0 2px; }
.feed li.ok .f-t { background: var(--c); color: var(--k); }
.feed li:first-child .f-n { color: var(--w); }
.mode { margin: 16px 0 24px; font-size: 13px; color: var(--w7); min-height: 40px; }
.pool-n { display: flex; gap: 32px; margin: 0; }
.attr { margin: 0; }
.attr canvas { display: block; margin: 0 auto; image-rendering: pixelated; touch-action: pan-y; }
.attr figcaption { margin-top: 16px; font-size: 13px; color: var(--w7); min-height: 40px; }

/* tape + console */
.tape-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.deck { position: relative; }
.cass { width: 384px; height: 224px; display: block; max-width: 100%; }
.blocks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.blk p { margin: 8px 0 4px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.blk small { display: block; color: var(--w7); font-size: 13px; line-height: 1.4; }
.ant-t { background: var(--c); color: var(--k); }
.blk-bar { display: block; height: 16px; background: var(--k); box-shadow: inset 0 0 0 2px var(--b); }
.blk[data-s=load][data-blk="1"] .blk-bar { background: repeating-linear-gradient(90deg, #D70000 0 20px, var(--c7) 20px 40px); background-size: 40px 16px; animation: tape 0.2s steps(5) infinite; box-shadow: none; }
.blk[data-s=load][data-blk="2"] .blk-bar { background: repeating-linear-gradient(90deg, var(--m7) 0 4px, var(--g7) 4px 6px, var(--m7) 6px 12px, var(--g7) 12px 16px); background-size: 16px 16px; animation: tape 0.1s steps(4) infinite; box-shadow: none; }
.blk[data-s=done] .blk-bar { background: var(--c); box-shadow: none; }
.blk[data-s=err] .blk-bar { background: var(--w7); box-shadow: none; }
@keyframes tape { to { background-position: 40px 0; } }
.demo-tag { position: absolute; top: 8px; right: 0; margin: 0; background: var(--m); color: var(--k); font: 16px/16px var(--rom); padding: 4px 8px; -webkit-font-smoothing: none; }
.demo-tag[hidden] { display: none; }

.console { background: var(--k); box-shadow: inset 0 0 0 4px var(--b); padding: 32px; display: grid; gap: 8px; }
.c-wallet { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.c-wallet code { font: 500 13px/1.3 var(--num); color: var(--w7); overflow-wrap: anywhere; word-break: break-all; }
.c-wallet code.on { color: var(--w); }
.c-wallet .bal { font-size: 13px; color: var(--c); }
.c-wallet .k { margin-left: auto; }
.pr { color: var(--w); white-space: nowrap; }
.in { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; min-height: 40px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; cursor: text; }
.fld { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; --cw: 16px; }
.fld input:not([type=file]) { width: 100%; height: 40px; background: transparent; border: 0; padding: 0; margin: 0; color: var(--w); font: 16px/16px var(--rom); caret-color: transparent; outline: none; -webkit-font-smoothing: none; border-radius: 0; }
.fld input::placeholder { color: var(--b); opacity: 1; }
.in .fld { box-shadow: inset 0 -2px 0 var(--b); }
.in-file .fld { box-shadow: none; }
.fld .cur { position: absolute; left: calc(var(--col, 0) * var(--cw)); top: 12px; width: 16px; height: 16px; font: normal 16px/16px var(--rom); display: none; pointer-events: none; animation: flash 0.64s steps(1) infinite; }
.in-num .fld { --cw: 9.6px; }
.in-num .fld input { font: 500 16px/16px var(--num); color: var(--w); }
.fld:focus-within .cur { display: block; }
.in:hover .fld, .fld:focus-within { box-shadow: inset 0 -2px 0 var(--w); }
@keyframes flash { 0% { background: var(--w); color: var(--k); } 50% { background: var(--k); color: var(--w); } }
.in-file .fld img { width: 32px; height: 32px; }
.in-file code { font: 400 13px/1.3 var(--num); color: var(--w7); }
.more { justify-self: start; background: none; border: 0; padding: 8px 0; color: var(--w7); font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.more b { font-weight: 400; color: var(--c); }
.more:hover { color: var(--w); }
.more-box { display: grid; gap: 8px; }
.more-box[hidden] { display: none; }
.fine { margin: 8px 0; font-size: 13px; line-height: 1.5; color: var(--w7); }
.go { justify-self: start; margin-top: 8px; }
.console.is-busy .go { --p: var(--w7); }
.report { margin: 16px 0 0; display: grid; gap: 8px; }
.report b { justify-self: start; font: 16px/16px var(--rom); font-weight: 400; background: var(--w7); color: var(--k); padding: 4px 8px; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.report span { font-size: 14px; color: var(--w); min-height: 21px; }
.report[data-kind=run] b { background: var(--k); color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.report[data-kind=ok] b { background: var(--w); color: var(--k); }
.report:is([data-kind=nonsense], [data-kind=busy], [data-kind=limit], [data-kind=funds], [data-kind=brk], [data-kind=tape], [data-kind=param]) b { background: var(--w); color: var(--r); }
.result { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-top: 16px; padding-top: 16px; box-shadow: inset 0 2px 0 var(--b); }
.result[hidden] { display: none; }
.res-pic img { width: 64px; height: 64px; display: block; }
.res-name { margin: 0 0 8px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.res-name span { color: var(--w7); margin-left: 8px; }
.res-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* how it works video slot */
/* how it works: own player. Keys = Spectrum keys, timeline = tape-loading strip (data stripes = played, blue = loaded) */
.vp { position: relative; background: var(--k); box-shadow: 0 0 0 4px var(--b); outline: none; }
.vp:focus-visible { box-shadow: 0 0 0 4px var(--c); }
.vp-scr { position: relative; line-height: 0; }
.vp video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--k); }
.vp-scr { cursor: var(--curk); }
.vp-big { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); } /* below the cassette label: never cover the 'ant' mark */
.vp-big:active { transform: translate(-50%, 2px); }
@media (max-width: 600px) { .vp-big { bottom: 8px; } }
.vp.is-started .vp-big { display: none; }
.vp-bar { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--k); box-shadow: inset 0 4px 0 var(--b); padding-top: 12px; }
.vp .k-ic .ic { width: 16px; height: 16px; fill: currentColor; }
.vp-i-pause, .vp.is-on .vp-i-play, .vp-i-off, .vp.is-muted .vp-i-snd, .vp-i-ex, .vp.is-fs .vp-i-fs { display: none; }
.vp.is-on .vp-i-pause, .vp.is-muted .vp-i-off, .vp.is-fs .vp-i-ex { display: block; }
.vp-tl { position: relative; flex: 1 1 auto; min-width: 48px; height: 32px; cursor: var(--curk); touch-action: none; outline: none; }
.vp-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 16px; box-shadow: inset 0 0 0 2px var(--b); pointer-events: none; z-index: 1; }
.vp-tl:focus-visible::before { box-shadow: inset 0 0 0 2px var(--c); }
.vp-buf, .vp-done { position: absolute; left: 0; top: 8px; height: 16px; width: 0; pointer-events: none; }
.vp-buf { background: var(--b); }
.vp-done { background: repeating-linear-gradient(90deg, var(--g7) 0 2px, var(--m7) 2px 3px, var(--g7) 3px 4px, var(--m7) 4px 7px, var(--g7) 7px 8px, var(--m7) 8px 10px); }
.vp.is-on .vp-done { animation: vpData 0.12s steps(1) infinite; }
@keyframes vpData { 50% { background-position: 3px 0; } }
.vp-head { position: absolute; left: 0; top: 4px; width: 8px; height: 24px; background: var(--w); pointer-events: none; z-index: 2; }
.vp.is-drag .vp-head, .vp-tl:hover .vp-head { background: var(--c); }
.vp-time { flex: none; font-size: 13px; color: var(--w); min-width: 84px; text-align: center; }
.vp-vol { display: flex; gap: 2px; align-items: center; height: 32px; padding: 0 2px; cursor: var(--curk); touch-action: none; outline: none; }
.vp-vol:focus-visible { box-shadow: inset 0 0 0 2px var(--c); }
.vp-vol i { width: 6px; height: 16px; background: var(--b); display: block; }
.vp-vol i.on { background: var(--c); }
.vp.is-fs { display: flex; flex-direction: column; width: 100%; height: 100%; box-shadow: none; }
.vp.is-fs .vp-scr { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.vp.is-fs video { height: 100%; aspect-ratio: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .vp.is-on .vp-done { animation: none; } }

/* board: CAT listing */
.sorts { display: flex; gap: 8px; margin-bottom: 24px; }
.cat-head, .row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 112px 96px 140px 152px; grid-template-areas: "pic id cv mc st lk"; gap: 16px; align-items: center; }
.cat-head { padding: 0 8px 8px; font: 12px/1 var(--num); color: var(--w7); box-shadow: inset 0 -2px 0 var(--b); }

.cat { list-style: none; margin: 0; padding: 0; }
.row { padding: 12px 8px; box-shadow: inset 0 -2px 0 var(--b); }
.row:hover { background: var(--b); }
.row-pic { grid-area: pic; } .row-id { grid-area: id; } .row-curve { grid-area: cv; } .row-mc { grid-area: mc; } .row-st { grid-area: st; } .row-lk { grid-area: lk; }
.row-pic { position: relative; width: 64px; height: 64px; display: block; background: var(--k); }
.row-img { width: 64px; height: 64px; display: block; }
.row-noimg { background: var(--b); }
.row-mask { position: absolute; inset: 0; width: 64px; height: 64px; image-rendering: pixelated; }
.row-id { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.row-nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.row-name { font: 16px/16px var(--rom); font-weight: 400; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.row-sym { font: 500 12px/1 var(--num); color: var(--w7); }
.ca-row { font-size: 13px; }
.ca-row .ca-k { display: none; }
.row-curve { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
.curve { display: inline-flex; gap: 2px; }
.curve i { width: 12px; height: 12px; background: var(--b); display: block; }
.row:hover .curve i:not(.on) { background: var(--k); }
.curve i.on { background: var(--w); }
.row-mc { font-size: 14px; white-space: nowrap; } .row-mc small { color: var(--w7); }
.st { font: 16px/16px var(--rom); -webkit-font-smoothing: none; padding: 4px 6px; color: var(--w7); white-space: nowrap; }
.st-done { color: var(--g); }
.st-mig { background: var(--g); color: var(--k); animation: flashG 0.64s steps(1) infinite; }
@keyframes flashG { 50% { background: var(--k); color: var(--g); } }
.row-lk { display: flex; gap: 8px; justify-content: flex-end; }
.cat-empty { padding: 48px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.cat-empty p { margin: 0; }
.cat-empty[hidden] { display: none; }

/* end */
.sc-end { padding: 64px 16px 96px; display: flex; justify-content: center; }
.end-key { display: inline-flex; align-items: center; font: 128px/128px var(--rom); -webkit-font-smoothing: none; color: var(--k); background: var(--c); padding: 24px 32px; text-decoration: none; }
.end-key:hover, .end-key:focus-visible { background: var(--k); color: var(--c); box-shadow: inset 0 0 0 8px var(--c); outline: none; }
.end-key .cur { font-style: normal; width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; margin-left: 0.125em; animation: flashK 0.64s steps(1) infinite; }
@keyframes flashK { 0% { background: var(--k); color: var(--c); } 50% { background: var(--c); color: var(--k); } }

/* marquee + footer */
.mq { overflow: hidden; background: var(--k); box-shadow: inset 0 2px 0 var(--b), inset 0 -2px 0 var(--b); height: 48px; display: flex; align-items: center; }
.mq[hidden] { display: none; }
.mq-track { display: flex; gap: 48px; white-space: nowrap; will-change: transform; padding-left: 16px; }
.mq-it { height: 48px; display: inline-flex; gap: 12px; align-items: center; text-decoration: none; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.mq-it code { font: 500 13px/1 var(--num); color: var(--w7); }
.mq-it code b { background: var(--c); color: var(--k); font-weight: 500; }
.mq-it:hover span { background: var(--w); color: var(--k); }
.foot { max-width: 1104px; margin: 0 auto; padding: 48px 32px 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; background: var(--k); }
.foot-rep { margin: 0; font: 16px/16px var(--rom); background: var(--w7); color: var(--k); padding: 4px 8px; -webkit-font-smoothing: none; }
.foot-ca { flex: 1 1 360px; min-width: 0; }
.foot-nav { display: flex; gap: 24px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.foot-nav a { text-decoration: none; color: var(--w7); padding: 12px 0; min-width: 32px; text-align: center; }
.foot-nav a:hover { color: var(--k); background: var(--w); box-shadow: 0 0 0 4px var(--w); }

/* grid cursor (21st Custom Cursor, no springs): a block snapping to the 8 px grid */
.gcur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; background: var(--w); mix-blend-mode: difference; display: none; }
.gcur.on { display: block; }

/* dialogs (mine + wallet picker) */
dialog { color: var(--w); }
.dlg { background: var(--k); border: 0; box-shadow: inset 0 0 0 4px var(--b); padding: 32px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border-radius: 0; }
.dlg::backdrop { background: rgba(0, 0, 0, 0.8); }
.dlg h2 { margin: 0 0 24px; font: 32px/32px var(--rom); }
.dlg-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; background: var(--w); color: var(--k); border: 0; font: 16px/16px var(--rom); }
.dlg-x:hover { background: var(--k); color: var(--w); box-shadow: inset 0 0 0 2px var(--w); }
.wp-list { display: grid; gap: 8px; }
.wp-item { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 12px; background: var(--k); color: var(--w); border: 0; box-shadow: inset 0 0 0 2px var(--w7); font: 16px/16px var(--rom); text-align: left; -webkit-font-smoothing: none; }
.wp-item:hover { background: var(--w); color: var(--k); }
.wp-item img { width: 32px; height: 32px; image-rendering: auto; }
.wp-dot { width: 32px; height: 32px; background: var(--c); display: block; }
.wp-get { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; font-size: 13px; }
.wp-get a { color: var(--w7); padding: 8px 0; }
.wp-cur, .wp-none, .wp-err { font-size: 14px; color: var(--w7); }
.wp-err { color: var(--r); }
.btn.ghost, .wp-off { margin-top: 16px; height: 40px; padding: 0 16px; background: var(--w7); color: var(--k); border: 0; font: 16px/16px var(--rom); }
.mine-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.mine-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; font: 16px/16px var(--rom); }
.mine-list img { width: 32px; height: 32px; }
.mine-list .ca { margin-top: 8px; font-size: 12px; }
.mine-list .num { font-size: 14px; }
.k-wide { width: 100%; }
.mine-empty code { font: 500 12px/1.4 var(--num); word-break: break-all; }

/* docs / stats / card */
.doc { max-width: 960px; margin: 0 auto; background: var(--k); padding: 64px 32px 96px; }
.doc-h h1 { margin: 0; font-size: 64px; line-height: 64px; }
.doc-h p { color: var(--w7); margin: 16px 0 24px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 64px; font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.toc a { text-decoration: none; color: var(--w7); padding: 12px 0; }
.toc a:hover { background: var(--w); color: var(--k); box-shadow: 0 0 0 4px var(--w); }
.dsec { margin-bottom: 64px; }
.dsec .bar { font-size: 16px; line-height: 16px; margin-bottom: 24px; }
.steps { margin: 0; padding: 0 0 0 0; list-style: none; counter-reset: s; display: grid; gap: 16px; }
.steps li { counter-increment: s; position: relative; padding-left: 56px; color: var(--w7); }
.steps li::before { position: absolute; left: 0; top: 0; content: counter(s) "0"; font: 16px/24px var(--rom); color: var(--w); -webkit-font-smoothing: none; }
.steps b, .trust b { color: var(--w); font-weight: 500; }
.steps code, .trust code { font-family: var(--num); color: var(--c); }
.trust { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; color: var(--w7); }
.trust li { padding-left: 24px; position: relative; }
.trust li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--c); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font: 16px/16px var(--rom); background: var(--b); padding: 8px; font-weight: 400; -webkit-font-smoothing: none; }
.tbl td { padding: 10px 8px; vertical-align: top; color: var(--w7); box-shadow: inset 0 -2px 0 var(--b); }
.tbl td:first-child { color: var(--w); white-space: nowrap; }
.tbl-p td:nth-child(2) { color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-p code { font: inherit; }
.sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.sw-c { background: var(--c); } .sw-g { background: var(--g); } .sw-f { background: var(--c); animation: flashC 0.64s steps(1) infinite; }
@keyframes flashC { 50% { background: var(--k); box-shadow: inset 0 0 0 2px var(--c); } }
.doc-end { margin: 48px 0 0; }
.killer { font: 32px/40px var(--rom); color: var(--w); -webkit-font-smoothing: none; }
.killer .num { font: 500 32px/1 var(--num); color: var(--c); }
.wall { list-style: none; margin: 0 0 64px; padding: 0; display: grid; gap: 4px; }
.wall li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; box-shadow: inset 0 -2px 0 var(--b); }
.w-name { font: 16px/16px var(--rom); -webkit-font-smoothing: none; }
.ca-wall { font-size: 14px; }
.ca-wall .ca-k { display: none; }
.w-empty { color: var(--w7); }
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
.sgrid dd { margin: 0; font: 500 40px/1.1 var(--num); }
.tcard { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 48px; align-items: start; }
.tc-pic { box-shadow: 0 0 0 8px var(--b); background: var(--k); line-height: 0; max-width: 384px; width: fit-content; margin: 8px; }
.tc-pic img { display: block; width: 256px; height: 256px; max-width: 100%; }
.tc-load { margin: 0 0 16px; font: 16px/16px var(--rom); color: var(--w7); -webkit-font-smoothing: none; }
.tcard h1 { margin: 0 0 24px; font-size: 48px; line-height: 48px; overflow-wrap: anywhere; }
.tc-curve { margin: 24px 0 16px; } .tc-curve .curve i { width: 24px; height: 24px; }
.tc-n { display: flex; flex-wrap: wrap; gap: 32px; margin: 0 0 24px; }
.tc-n dd { font-size: 24px; }
.tc-own { color: var(--w7); font-size: 14px; margin: 24px 0 16px; }
.doc-ca { margin-top: 8px; }

/* 404 */
.nf-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px; text-align: center; }
.nf-scr { margin: 0; line-height: 0; }
.nf-scr img { display: block; width: min(100%, 768px); height: auto; aspect-ratio: 4 / 3; }
.nf-line { margin: 0; background: var(--k); padding: 4px 8px; color: var(--w7); }

/* ---------- responsive */
@media (max-width: 1100px) {
  .cat-head { display: none; }
  .row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "pic id id" "cv cv mc" "st st lk"; gap: 12px 16px; padding: 16px 8px; }
  .row-curve { flex-direction: row; align-items: center; }
  .row-mc { justify-self: end; } .row-lk { justify-content: flex-end; }
}
@media (max-width: 960px) {
  .pool-grid, .tape-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .end-key { font-size: 64px; line-height: 64px; padding: 16px 24px; }
  .tcard { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .nav, .brand span { display: none; }
  .top { gap: 8px; padding: 0 8px; }
  .keys { gap: 4px; }
  .keys .k { padding: 0 8px; }
  .hero { min-height: 0; padding: 16px 12px 32px; justify-content: flex-start; }
  .lower { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .trio div { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  .trio dt { width: auto; font-size: 11px; }
  .trio dd { font-size: 24px; text-align: left; }
  .paper { padding: 48px 16px; }
  .lower .keys-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
  .lower .keys-row .k-c { grid-column: 1 / -1; }
  .lower .keys-row .k { padding: 0 8px; }
  .sc { padding: 0 8px; }
  .bar { font-size: 24px; line-height: 24px; }
  .console { padding: 20px 16px; }
  .in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .cass { width: 288px; height: 168px; }
  .end-key { font-size: 48px; line-height: 48px; padding: 16px; }
  .doc { padding: 40px 16px 64px; }
  .doc-h h1 { font-size: 48px; line-height: 48px; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sgrid dd { font-size: 28px; }
  .killer, .killer .num { font-size: 24px; line-height: 32px; }
  .wall li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tcard h1 { font-size: 32px; line-height: 32px; }
  .foot { padding: 40px 16px 48px; }
  .mq-it { font-size: 16px; }
}
@media (max-width: 700px) and (min-resolution: 2.5dppx) {
  .cass { width: 256px; height: 149.333px; }   /* 4 device px per ZX px at 3x */
}
@media (max-width: 400px) {
  .end-key { font-size: 32px; line-height: 32px; padding: 16px; }
  .feed .f-n { width: 48px; }
}
@media (max-width: 360px) {
  .keys .k { padding: 0 6px; }
  .keys .k-load .q { display: none; }
  .trio dd { font-size: 20px; }
}

/* narrow phones: board rows, grind feed, live captions keep their box */
@media (max-width: 700px) {
  .mode, .attr figcaption { min-height: 60px; }
  .vp-vol { display: none; }
  .vp-bar { gap: 6px; padding: 12px 6px 6px; }
  .vp-time { min-width: 0; font-size: 12px; }
}
@media (max-width: 420px) {
  .row-curve { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .row { grid-template-areas: "pic id id" "cv cv mc" "st st st" "lk lk lk"; }
  .row-lk { justify-content: flex-start; }
  .feed .f-n { display: none; }
  .vp-time { font-size: 11px; }
}
.trust code[data-treasury] { word-break: break-all; }
/* SOON (prelaunch without the svc): honest static states */
.grind { position: relative; }
.demo-pool { top: 0; }
.report[data-kind=soon] b { background: var(--c); color: var(--k); }
.soon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.cat-empty .k { flex: none; }
.ca-soon { align-items: center; }
.ca-soon .ca-v { padding: 0 8px; }
.k-follow { max-width: 100%; }
@media (max-width: 480px) { .k-follow .k-fw { display: none; } }
.foot-nav { flex-wrap: wrap; row-gap: 0; max-width: 100%; }
@media (max-width: 360px) { .k-follow .ic { display: none; } .k-follow { padding: 0 8px; } }