*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
/* `hidden` has to actually hide. Any author rule that sets `display` on a class
(.sec, .badges, .tgl ...) beats the UA stylesheet's [hidden]{display:none},
so the signed-out gating via `data-needs-auth hidden` needs this to bite. */
[hidden]{display:none!important}
/* ---- layout, theme-agnostic ---- */
.wrap{max-width:900px;margin:0 auto;padding:14px 14px 60px}
.hdr{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0;border-radius:0}
.bug{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;font-size:24px}
.brand{flex:1;min-width:0}
.brand h1{margin:0;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:2px}
.xp{display:flex;align-items:center;gap:8px;margin-top:6px}
.xp-bar{display:block;width:150px;height:12px;position:relative;overflow:hidden}
.xp-bar i{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--accent)}
.lvl{font-size:10px}
.sw{display:flex;gap:7px}
.sw button{width:30px;height:30px;border:0;cursor:pointer;padding:0}
.tgl,.cta,.btn{cursor:pointer;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.sec{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.sec h2{margin:0;font-size:20px}
.rule{flex:1;height:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.card{display:block}
.cov{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center}
.cov-img{width:100%;height:100%;object-fit:cover}
.cov-empty{font-size:12px;opacity:.6;text-align:center;padding:8px}
/* A character sheet is a whole page of paper, bio and all - crop it like a book
cover and the handwriting is the first thing lost, so show it entire. */
.cov-sheet .cov-img{object-fit:contain;background:#fff}
.card-t{margin-top:8px;font-size:14px}
.card-m{font-size:12px;opacity:.75}
.hero{display:flex;gap:16px;padding:16px;position:relative;margin-top:14px}
.hero-cov{width:200px;flex:0 0 200px;aspect-ratio:3/4}
.hero-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.hero-title{margin:0;font-size:30px;line-height:1.05}
.hero-title .num{opacity:.85}
.hero-meta{margin:0;font-size:15px}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:auto;flex-wrap:wrap}
.hero-count{font-size:12px}
.chip{display:inline-flex;align-items:center;padding:6px 10px;font-size:12px;align-self:flex-start}
.sticker{position:absolute;top:-14px;right:-8px;padding:6px 12px;font-size:16px}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.vid{margin:0}
.vid-cov{aspect-ratio:16/9}
.vid figcaption{margin-top:8px;font-size:14px}
.empty{opacity:.7}
@media(max-width:560px){
.hero{flex-direction:column}.hero-cov{width:100%;flex:none}
/* Phone: left of the header is just the "S" and the level. Scoped to
.brand-site so other pages keep their heading ("MY STUFF", "COMICS WE'RE
MAKING") - those are the point of those pages. Only once signed in, though:
a signed-out visitor has no level, so dropping the title too would leave the
header empty. */
[data-auth=in] .brand-site h1,[data-auth=in] .brand-site .sub{display:none}
.xp{margin-top:0}
.xp-bar{width:120px;height:16px}
.lvl{font-size:13px}
.hdr{gap:9px;padding:10px 12px}
.bug{width:44px;height:44px;flex:0 0 44px;font-size:20px}
}
/* ---- reader, theme-agnostic ---- */
body.reading{overflow:hidden}
.rd{position:fixed;inset:0;display:flex;flex-direction:column}
.rd-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;flex:0 0 auto}
.rd-title{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* minmax(0,1fr) rather than the implicit auto track: an auto row is sized by its
content, so the page's own height became the row height and max-height:100%
then measured against the page itself - a cap that can never bite. Bounding
the track to the stage is what makes fit-to-page actually fit. */
.rd-stage{flex:1;min-height:0;position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:0 12px}
.rd-page{max-width:100%;max-height:100%;object-fit:contain}
/* Fit-width: the page is deliberately taller than the screen, so the stage
scrolls rather than shrinking the art to illegibility - the row goes back to
growing with the image, and the stage scrolls it. */
.rd[data-fit=width] .rd-stage{overflow-y:auto;place-items:start center;overscroll-behavior:contain;grid-template-rows:auto}
.rd[data-fit=width] .rd-page{width:100%;max-width:900px;max-height:none;object-fit:fill}
.rd-zone{position:absolute;top:0;bottom:0;width:84px;border:0;background:transparent;cursor:pointer;opacity:0}
.rd-zone.prev{left:0}.rd-zone.next{right:0}
.rd-zone:disabled{cursor:default}
.rd-thumbs{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:10px 14px 14px}
.rd-thumbs button{flex:0 0 46px;width:46px;aspect-ratio:3/4;border:0;padding:0;cursor:pointer;overflow:hidden}
.rd-thumbs img{width:100%;height:100%;object-fit:cover}
/* badges + live XP */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{padding:8px 11px;font-size:11px;display:inline-flex;align-items:center}
.badge.off{opacity:.32}
.rd-dls{display:flex;gap:8px}
.rd-dl{padding:8px 11px;min-height:0;font-size:11px}
@media(max-width:560px){.rd-dls{display:none}}
[data-theme=hud] .badge{background:var(--panel);border-radius:5px;box-shadow:inset 0 3px 0 rgba(255,255,255,.09),inset 0 -3px 0 rgba(0,0,0,.35)}
[data-theme=hud] .badge:not(.off){background:var(--accent);color:var(--onaccent);text-shadow:none}
[data-theme=ink] .badge{background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-family:"Bangers",cursive;font-size:15px}
[data-theme=ink] .badge:not(.off){background:var(--accent);color:var(--onaccent)}
[data-theme=ink] .badge.off{box-shadow:none}
/* video tiles + youtube overlay */
.vid-cov.yt{border:0;padding:0;cursor:pointer;position:relative;width:100%}
.vid-cov.yt img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:10px;bottom:10px;width:38px;height:38px;display:grid;place-items:center;font-size:13px}
.ytwrap{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column}
/* MUST come after the rule above: `display:flex` on a class beats the UA
stylesheet's [hidden]{display:none}, so without this the overlay is permanently
on screen and covers the whole page. */
.ytwrap[hidden]{display:none}
.ytframe{flex:1;min-height:0;display:grid;place-items:center;padding:0 12px 14px}
.ytframe iframe{width:100%;max-width:1100px;aspect-ratio:16/9;border:0}
[data-theme=hud] .ytwrap{background:#14181d}
[data-theme=hud] .play{background:var(--accent);color:var(--onaccent);border-radius:5px;text-shadow:none}
[data-theme=hud] .ytframe iframe{border-radius:6px;box-shadow:0 0 0 4px rgba(0,0,0,.45)}
[data-theme=ink] .ytwrap{background:var(--ink)}
[data-theme=ink] .ytwrap .rd-title,[data-theme=ink] .ytwrap .btn{color:#fff}
[data-theme=ink] .ytwrap .btn{background:transparent;border:3px solid #fff;box-shadow:none}
[data-theme=ink] .play{background:var(--accent);color:#fff;border:3px solid var(--ink);border-radius:8px}
[data-theme=ink] .ytframe iframe{border:5px solid var(--paper);border-radius:6px}
/* sketch pad */
body.sketching{overflow:hidden}
.sk{position:fixed;top:76px;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px}
.sk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.sk-tools .btn,.sk-tools .cta{padding:9px 12px;min-height:44px;font-size:11px}
.sk-colors,.sk-sizes{display:flex;gap:6px}
.sk-col{width:34px;height:34px;border:0;cursor:pointer;padding:0;border-radius:6px}
.sk-col[aria-current=true]{outline:3px solid var(--accent);outline-offset:2px}
.sk-size{width:38px;height:34px;border:0;cursor:pointer;display:grid;place-items:center;border-radius:6px}
.sk-size i{display:block;border-radius:50%;background:currentColor}
.sk-size[aria-current=true]{outline:3px solid var(--accent);outline-offset:2px}
.sk-stage{flex:1;min-height:0;display:grid;place-items:center}
#skcanvas{touch-action:none;background:#fff;cursor:crosshair;max-width:100%;max-height:100%}
[data-theme=hud] .sk-size{background:var(--panel);color:var(--fg);box-shadow:inset 0 3px 0 rgba(255,255,255,.09),inset 0 -3px 0 rgba(0,0,0,.35)}
[data-theme=hud] #skcanvas{border-radius:6px;box-shadow:0 0 0 4px rgba(0,0,0,.45)}
[data-theme=hud] .btn[aria-current=true],[data-theme=hud] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent)}
[data-theme=ink] .sk-size{background:#fff;color:var(--ink);border:3px solid var(--ink)}
[data-theme=ink] .sk-col{border:3px solid var(--ink)}
[data-theme=ink] #skcanvas{border:5px solid var(--ink);border-radius:8px}
[data-theme=ink] .btn[aria-current=true],[data-theme=ink] .sk-size[aria-current=true]{background:var(--accent);color:#fff}
/* reading progress */
.prog{display:flex;flex-direction:column;gap:4px;margin-top:7px}
.prog-bar{display:block;height:10px;position:relative;overflow:hidden}
.prog-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent)}
.prog-txt{font-size:11px;opacity:.8}
.hero-prog{max-width:340px}
.jingle{font-size:12px}
[data-theme=hud] .prog-bar{background:var(--deep);border-radius:5px;box-shadow:inset 0 3px 0 rgba(0,0,0,.5)}
[data-theme=hud] .jingle{color:var(--accent);text-shadow:none}
[data-theme=ink] .prog-bar{background:var(--well);border:3px solid var(--ink);border-radius:999px;height:14px}
[data-theme=ink] .jingle{font-family:"Bangers",cursive;font-size:18px;color:var(--accent)}
/* library actions */
.lib-acts{display:flex;gap:6px;margin-top:7px}
.lib-acts .btn{padding:7px 9px;min-height:0;font-size:10px;flex:1;justify-content:center}
/* preview banner */
.pvbar{display:flex;align-items:center;gap:12px;justify-content:center;padding:9px 12px;font-size:11px}
.pvbar button{border:0;cursor:pointer;padding:6px 10px;font:inherit}
[data-theme=hud] .pvbar{background:#ffb43c;color:#1b1f25;text-shadow:none}
[data-theme=hud] .pvbar button{background:#1b1f25;color:#fff;border-radius:5px}
[data-theme=ink] .pvbar{background:#ffc32b;color:#111015;border-bottom:5px solid #111015;font-family:"Bangers",cursive;font-size:16px}
[data-theme=ink] .pvbar button{background:#111015;color:#fff;border-radius:999px}
/* settings popover: a terminal readout in 8-bit, a sticker note in comic */
.setwrap{position:relative}
.setbtn{cursor:pointer;padding:8px;min-height:44px;min-width:44px;display:inline-flex;
align-items:center;justify-content:center}
.setbtn .ico{width:22px;height:22px;display:block}
.setpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:210px;
max-width:min(340px,calc(100vw - 20px));
/* Ten skins one-per-row can outgrow a phone screen, so the panel
scrolls rather than running off the bottom. */
max-height:calc(100vh - 84px);overflow-y:auto;
padding:12px;display:flex;flex-direction:column;gap:12px}
/* The gear sits at the far right, so right:0 keeps its panel on screen. The
sketch tools sit mid-ribbon, where right:0 makes the panel grow leftwards and
run off the edge - so those anchor from the left instead. */
.setwrap.tool .setpanel{left:0;right:auto}
.setpanel[hidden]{display:none}
.setrow{display:flex;flex-direction:column;gap:7px}
.setlabel{font-size:10px;letter-spacing:.12em}
/* One name per row, for skins and for the colouring MODE row alike. The label IS
the button - packing them four across meant "NOTEBOOK" and "LAYERED" arrived as
"NOTEB..." and "LA...", which is a guessing game, not a choice. A grid rather
than a flex row because flex items refuse to shrink below their min-content
width and shoved the panel off the edge of the screen. */
.skins{display:grid;grid-template-columns:1fr;gap:6px}
.skin{cursor:pointer;padding:10px 11px;font-size:11px;text-align:left;min-width:0}
.whobtn{cursor:pointer;padding:9px 10px;min-height:40px;font-size:11px;text-align:center;width:100%}
[data-theme=hud] .setbtn{background:#0b0f0b;color:#7dff5a;border:2px solid #7dff5a;border-radius:4px;font-size:10px;text-shadow:none}
[data-theme=hud] .setpanel{background:#0b0f0b;border:2px solid #7dff5a;border-radius:4px;box-shadow:0 0 0 2px #000,0 8px 0 rgba(0,0,0,.45)}
[data-theme=hud] .setlabel{color:#7dff5a;text-shadow:none}
[data-theme=hud] .setlabel::after{content:" _";opacity:.7}
[data-theme=hud] .skin{background:#0b0f0b;color:#7dff5a;border:2px solid #2f6b22;border-radius:3px;text-shadow:none}
[data-theme=hud] .skin[aria-current=true]{background:#7dff5a;color:#07120a;border-color:#7dff5a}
[data-theme=hud] .whobtn{background:#0b0f0b;color:#7dff5a;border:2px solid #2f6b22;border-radius:3px;text-shadow:none}
[data-theme=hud] .setpanel .sw button{border-radius:3px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.5)}
[data-theme=hud] .setpanel .sw button[aria-current=true]{outline:2px solid #7dff5a;outline-offset:2px}
[data-theme=ink] .setbtn{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);font-family:"Bangers",cursive;font-size:17px}
[data-theme=ink] .setpanel{background:#fff;border:5px solid var(--ink);border-radius:16px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1deg)}
[data-theme=ink] .setlabel{color:var(--ink);font-family:"Bangers",cursive;font-size:15px}
[data-theme=ink] .skin{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;font-family:"Bangers",cursive;font-size:15px}
[data-theme=ink] .skin[aria-current=true]{background:var(--accent);color:#fff}
[data-theme=ink] .whobtn{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;font-family:"Bangers",cursive;font-size:16px}
/* projects list: one comic per row, its pages wrapping in a grid */
.pj-list{display:flex;flex-direction:column;gap:14px}
.pj-list .card{width:100%}
.viewopts{display:flex;align-items:center;gap:7px}
.vsel{cursor:pointer;padding:7px 9px;min-height:38px;font-size:10px}
.pj-strip{display:grid;gap:8px;margin-top:9px;grid-template-columns:repeat(4,1fr)}
body[data-per="2"] .pj-strip{grid-template-columns:repeat(2,1fr)}
body[data-per="3"] .pj-strip{grid-template-columns:repeat(3,1fr)}
body[data-per="4"] .pj-strip{grid-template-columns:repeat(4,1fr)}
body[data-per="6"] .pj-strip{grid-template-columns:repeat(6,1fr)}
body[data-per="8"] .pj-strip{grid-template-columns:repeat(8,1fr)}
.pj-page{margin:0;min-width:0}
.pj-page img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:rgba(128,128,128,.2)}
.pj-page figcaption{font-size:10px;opacity:.75;text-align:center;margin-top:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme=hud] .pj-page img{border-radius:4px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.45)}
[data-theme=hud] .vsel{background:#0b0f0b;color:#7dff5a;border:2px solid #2f6b22;border-radius:3px;text-shadow:none}
[data-theme=ink] .pj-page img{border:3px solid var(--ink);border-radius:6px}
[data-theme=ink] .vsel{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:8px;font-family:"Bangers",cursive;font-size:15px}
/* Narrow screens can't honour 6 or 8 sensibly, so cap what they try to do. */
@media(max-width:560px){
body[data-per="6"] .pj-strip,body[data-per="8"] .pj-strip{grid-template-columns:repeat(4,1fr)}
.pj-page figcaption{font-size:9px}
}
/* sketch: tools live in the header, canvas gets the rest */
.tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.swatch-dot{display:block;width:20px;height:20px;border-radius:50%;background:#111015;
box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}
.sklock{margin:24px auto;max-width:30ch;text-align:center;font-size:12px;line-height:1.7}
.nowrap{white-space:nowrap}
.sk{position:fixed;top:76px;left:0;right:0;bottom:0;display:flex;flex-direction:column;
gap:0;padding:10px 14px 14px}
.setpanel .sk-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.setpanel .sk-sizes{display:flex;gap:6px}
/* Fullscreen sketching: the header collapses to a thin ribbon so the page is
almost all canvas. Chrome shrinks rather than disappearing - losing the tools
entirely mid-drawing would be worse than losing a few pixels. */
:fullscreen .sketching .hdr,
.sketching:fullscreen .hdr{padding:3px 8px;gap:5px;min-height:0;
/* Tablets float their own exit-fullscreen control over the top-right corner,
which sat on top of the SAVE and settings buttons. Reserve room for it, plus
any notch inset, so nothing of ours hides underneath it. */
padding-right:calc(92px + env(safe-area-inset-right, 0px));
padding-left:calc(8px + env(safe-area-inset-left, 0px))}
:fullscreen .sketching .hdr .brand,
.sketching:fullscreen .hdr .brand{display:none}
:fullscreen .sketching .hdr .btn,
.sketching:fullscreen .hdr .btn{padding:4px 8px;min-height:0;font-size:9px}
:fullscreen .sketching .setbtn,
.sketching:fullscreen .setbtn{padding:4px 7px;min-height:0;min-width:0;font-size:9px}
:fullscreen .sketching .swatch-dot,
.sketching:fullscreen .swatch-dot{width:15px;height:15px}
:fullscreen .sketching .setbtn .ico,
.sketching:fullscreen .setbtn .ico{width:15px;height:15px}
:fullscreen .sketching .sk,
.sketching:fullscreen .sk{top:34px;padding:5px 8px 8px}
/* shape palette */
.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.shape{cursor:pointer;padding:8px 4px;font-size:9px;text-align:center}
[data-theme=hud] .shape{background:#0b0f0b;color:#7dff5a;border:2px solid #2f6b22;border-radius:3px;text-shadow:none}
[data-theme=hud] .shape[aria-current=true]{background:#7dff5a;color:#07120a}
[data-theme=ink] .shape{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:8px;font-family:"Bangers",cursive;font-size:13px}
[data-theme=ink] .shape[aria-current=true]{background:var(--accent);color:#fff}
/* colouring page pickers */
.ckpages{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* ================= HUD (default) ================= */
[data-theme=hud]{--field:#262b33;--bar:#1b1f25;--panel:#323942;--well:#1b1f25;--deep:#0f1216;--fg:#fff;--body:#b6c0cc;--muted:#8b95a3;--accent:#6ec83c;--onaccent:#1b1f25}
[data-theme=hud] body{background:var(--field);background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:20px 20px;color:var(--body);font-family:"Nunito",system-ui,sans-serif;font-weight:700}
[data-theme=hud] .px{font-family:"Press Start 2P",ui-monospace,monospace;color:var(--fg);text-shadow:3px 3px 0 rgba(0,0,0,.5);line-height:1.35}
[data-theme=hud] .brand h1{font-size:13px}
[data-theme=hud] .sec h2{font-size:16px}
[data-theme=hud] .hero-title{font-family:"Press Start 2P",ui-monospace,monospace;font-size:24px;line-height:1.35;text-shadow:3px 3px 0 rgba(0,0,0,.5);color:var(--fg)}
/* .hdr.panel, not .hdr: the header carries both classes and the .panel rule is
defined later, so a single-class .hdr loses the background to it. In ink that
made white title text sit on a white panel - invisible. */
[data-theme=hud] .hdr.panel{background:var(--bar);border-radius:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.4)}
[data-theme=hud] .panel{background:var(--panel);border-radius:12px;box-shadow:inset 0 5px 0 rgba(255,255,255,.09),inset 0 -5px 0 rgba(0,0,0,.35)}
[data-theme=hud] .bug{background:var(--accent);color:var(--onaccent);border-radius:6px;box-shadow:inset 0 4px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.3);text-shadow:none}
[data-theme=hud] .cov,[data-theme=hud] .vid-cov{background:var(--deep);border-radius:6px;box-shadow:inset 0 0 0 4px rgba(0,0,0,.45)}
[data-theme=hud] .xp-bar{background:var(--deep);border-radius:5px;box-shadow:inset 0 3px 0 rgba(0,0,0,.5)}
[data-theme=hud] .sw button{border-radius:5px;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.3)}
[data-theme=hud] .tgl,[data-theme=hud] .btn{background:var(--panel);color:var(--fg);border-radius:6px;font-size:11px;box-shadow:inset 0 4px 0 rgba(255,255,255,.09),inset 0 -4px 0 rgba(0,0,0,.35)}
[data-theme=hud] .cta{background:var(--accent);color:var(--onaccent);border-radius:6px;font-size:11px;text-shadow:none;box-shadow:inset 0 4px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(0,0,0,.3)}
[data-theme=hud] .chip{background:var(--accent);color:var(--onaccent);border-radius:5px;text-shadow:none}
[data-theme=hud] .card-t{font-size:12px}
[data-theme=hud] .ink-only{display:none}
[data-theme=hud] .rd{background:#14181d}
[data-theme=hud] .rd-page{border-radius:6px;box-shadow:0 0 0 4px rgba(0,0,0,.45)}
[data-theme=hud] .rd-thumbs button{background:var(--deep);border-radius:5px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.5)}
[data-theme=hud] .rd-thumbs button[aria-current=true]{box-shadow:0 0 0 3px var(--accent)}
[data-theme=hud] .tgl:active,[data-theme=hud] .cta:active,[data-theme=hud] .btn:active{transform:translateY(2px)}
[data-theme=hud] .card:hover .cov{filter:brightness(1.08)}
/* ================= INK ================= */
[data-theme=ink]{--paper:#fffdf3;--ink:#111015;--panelbg:#fff;--well:#f0ece0;--fg:#111015;--body:#4a4740;--muted:#8a8578;--accent:#ff3b30;--onaccent:#fff}
[data-theme=ink] body{background:var(--paper);background-image:radial-gradient(#ffd9c9 1.6px,transparent 1.7px);background-size:14px 14px;color:var(--body);font-family:"Nunito",system-ui,sans-serif;font-weight:600}
[data-theme=ink] .px{font-family:"Bangers",cursive;letter-spacing:.04em;color:var(--ink);text-shadow:none}
[data-theme=ink] .brand h1{font-family:"Bangers",cursive;font-size:22px;color:var(--ink);opacity:.85}
/* Header keeps the paper panel look. The original bug was only the text colour:
white on a white panel. Dark ink text on paper is the fix - not a black bar. */
[data-theme=ink] .hdr.panel{color:var(--ink)}
[data-theme=ink] .hdr .sub{color:var(--accent)}
[data-theme=ink] .panel{background:var(--panelbg);border:5px solid var(--ink);border-radius:18px;box-shadow:8px 8px 0 var(--ink)}
[data-theme=ink] .bug{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--accent)}
[data-theme=ink] .cov,[data-theme=ink] .vid-cov{background:var(--well);border:4px solid var(--ink);border-radius:10px}
[data-theme=ink] .card:hover{transform:translate(-2px,-2px)}
[data-theme=ink] .sw button{border:3px solid var(--ink);border-radius:8px}
[data-theme=ink] .hero-title{font-family:"Archivo Black",system-ui,sans-serif;text-transform:uppercase;font-size:34px;line-height:.98;letter-spacing:-.02em;color:var(--ink)}
[data-theme=ink] .sec h2{font-family:"Bangers",cursive;font-size:34px}
[data-theme=ink] .rule{height:5px;background:var(--ink)}
[data-theme=ink] .tgl,[data-theme=ink] .btn{background:#fff;border:4px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);font-family:"Bangers",cursive;font-size:18px}
[data-theme=ink] .cta{background:var(--accent);color:var(--onaccent);border:4px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);font-family:"Bangers",cursive;font-size:18px;text-shadow:none}
[data-theme=ink] .chip{background:var(--accent);color:var(--onaccent);border:3px solid var(--ink);border-radius:999px;transform:rotate(-3deg);font-family:"Bangers",cursive;font-size:15px}
[data-theme=ink] .sticker{background:var(--ink);color:#fff;transform:rotate(8deg);border-radius:8px;font-family:"Bangers",cursive}
[data-theme=ink] .hud-only{display:none}
[data-theme=ink] .card-t{font-family:"Bangers",cursive;font-size:19px}
[data-theme=ink] .rd{background:var(--ink)}
[data-theme=ink] .rd-title,[data-theme=ink] .rd-close{color:#fff}
[data-theme=ink] .rd-page{border:5px solid var(--paper);border-radius:6px;background:#26242c}
[data-theme=ink] .rd-close{background:transparent;border:3px solid #fff;border-radius:999px;box-shadow:none;color:#fff}
[data-theme=ink] .rd-thumbs button{background:#26242c;border:3px solid #fff;border-radius:8px}
[data-theme=ink] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=ink] .tgl:active,[data-theme=ink] .cta:active,[data-theme=ink] .btn:active{transform:scale(.97)}
/* ================= ARCADE CABINET ================= */
[data-theme=arcade]{--field:#140b2b;--bar:#0d0620;--panel:rgba(255,255,255,.05);--well:#1e1140;
--deep:#0d0620;--fg:#fff;--body:#bdb2e0;--muted:#8f83b8;--accent:#ff2fd0;--onaccent:#140b2b;--ink:#140b2b}
[data-theme=arcade] body{background:var(--field);
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
color:var(--body);font-family:"Nunito",system-ui,sans-serif;font-weight:700}
[data-theme=arcade] .px{font-family:"Bungee",cursive;color:var(--fg);
text-shadow:0 0 18px rgba(255,255,255,.38);letter-spacing:.02em}
[data-theme=arcade] .brand h1{font-size:20px}
[data-theme=arcade] .sec h2{font-size:22px}
[data-theme=arcade] .rule{height:2px;background:rgba(255,255,255,.16)}
[data-theme=arcade] .hero-title{font-family:"Bungee",cursive;font-size:34px;line-height:1.1;color:var(--fg);text-shadow:0 0 20px rgba(255,255,255,.4)}
[data-theme=arcade] .hdr.panel{background:var(--bar);border-radius:0;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
[data-theme=arcade] .panel{background:var(--panel);border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
[data-theme=arcade] .bug{background:var(--accent);color:var(--onaccent);border-radius:10px;box-shadow:0 0 20px var(--accent);text-shadow:none}
[data-theme=arcade] .cov,[data-theme=arcade] .vid-cov{background:var(--well);border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
[data-theme=arcade] .xp-bar,[data-theme=arcade] .prog-bar{background:rgba(255,255,255,.12);border-radius:999px}
[data-theme=arcade] .xp-bar i,[data-theme=arcade] .prog-bar i{background:var(--accent);box-shadow:0 0 14px var(--accent)}
[data-theme=arcade] .sw button{border-radius:8px;box-shadow:0 0 12px currentColor}
[data-theme=arcade] .tgl,[data-theme=arcade] .btn,[data-theme=arcade] .vsel,[data-theme=arcade] .whobtn,
[data-theme=arcade] .skin,[data-theme=arcade] .shape,[data-theme=arcade] .sk-size{background:rgba(255,255,255,.05);color:var(--fg);
border:0;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.16);font-size:11px}
[data-theme=arcade] .cta,[data-theme=arcade] .chip,[data-theme=arcade] .badge:not(.off),
[data-theme=arcade] .skin[aria-current=true],[data-theme=arcade] .shape[aria-current=true],
[data-theme=arcade] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);
border-radius:10px;text-shadow:none;box-shadow:0 0 18px var(--accent)}
[data-theme=arcade] .badge{background:rgba(255,255,255,.05);border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.14);font-size:11px}
[data-theme=arcade] .setbtn{background:rgba(255,255,255,.05);color:var(--fg);border:0;border-radius:10px;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
[data-theme=arcade] .setpanel{background:#0d0620;border-radius:16px;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 30px rgba(255,47,208,.25)}
[data-theme=arcade] .setlabel{color:var(--accent);text-shadow:none}
[data-theme=arcade] .card:hover{transform:translateY(-4px)}
[data-theme=arcade] .card-t{font-size:15px}
[data-theme=arcade] .rd,[data-theme=arcade] .ytwrap{background:#0d0620}
[data-theme=arcade] .rd-page{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
[data-theme=arcade] .rd-thumbs button,[data-theme=arcade] .pj-page img{background:var(--well);border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
[data-theme=arcade] .rd-thumbs button[aria-current=true]{box-shadow:0 0 0 3px var(--accent),0 0 14px var(--accent)}
[data-theme=arcade] .play{background:var(--accent);color:var(--onaccent);border-radius:8px;box-shadow:0 0 16px var(--accent);text-shadow:none}
[data-theme=arcade] .ytframe iframe{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
[data-theme=arcade] #skcanvas{border-radius:12px;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
[data-theme=arcade] .pvbar{background:var(--accent);color:var(--onaccent);text-shadow:none}
[data-theme=arcade] .pvbar button{background:#0d0620;color:#fff;border-radius:8px}
[data-theme=arcade] .ink-only,[data-theme=arcade] .sticker{display:none}
[data-theme=arcade] .tgl:active,[data-theme=arcade] .cta:active,[data-theme=arcade] .btn:active{transform:scale(.98)}
/* ================= NOTEBOOK ================= */
[data-theme=notebook]{--paper:#fbfaf6;--ink:#2b3a55;--panelbg:#fff;--well:#f1efe8;--fg:#2b3a55;
--body:#55617a;--muted:#98a4ba;--accent:#ffd93b;--onaccent:#2b3a55}
[data-theme=notebook] body{background:var(--paper);
background-image:repeating-linear-gradient(180deg,transparent 0 33px,#dfe8f2 33px 34px);
color:var(--body);font-family:"Patrick Hand",system-ui,sans-serif;font-weight:400;font-size:17px}
[data-theme=notebook] .px{font-family:"Caveat",cursive;font-weight:700;color:var(--ink);text-shadow:none}
[data-theme=notebook] .brand h1{font-family:"Caveat",cursive;font-size:34px;color:var(--ink)}
[data-theme=notebook] .sec h2{font-family:"Caveat",cursive;font-size:34px}
[data-theme=notebook] .rule{height:2.5px;background:var(--ink)}
[data-theme=notebook] .hero-title{font-family:"Caveat",cursive;font-size:44px;line-height:1;color:var(--ink)}
[data-theme=notebook] .hdr.panel{background:var(--panelbg);color:var(--ink);border:2.5px solid var(--ink);border-radius:0;box-shadow:none}
[data-theme=notebook] .panel{background:var(--panelbg);border:2.5px solid var(--ink);border-radius:14px;box-shadow:none}
[data-theme=notebook] .bug{background:var(--accent);color:var(--onaccent);border:2.5px solid var(--ink);border-radius:12px;box-shadow:none}
[data-theme=notebook] .cov,[data-theme=notebook] .vid-cov{background:var(--well);border:2.5px solid var(--ink);border-radius:12px;box-shadow:none}
[data-theme=notebook] .xp-bar,[data-theme=notebook] .prog-bar{background:var(--well);border:2.5px solid var(--ink);border-radius:999px;height:14px}
[data-theme=notebook] .xp-bar i,[data-theme=notebook] .prog-bar i{background:var(--accent)}
[data-theme=notebook] .sw button{border-radius:50%;box-shadow:0 0 0 2px var(--paper),0 0 0 4px rgba(43,58,85,.15)}
[data-theme=notebook] .tgl,[data-theme=notebook] .btn,[data-theme=notebook] .vsel,[data-theme=notebook] .whobtn,
[data-theme=notebook] .skin,[data-theme=notebook] .shape,[data-theme=notebook] .sk-size,
[data-theme=notebook] .setbtn{background:#fff;color:var(--ink);border:2.5px solid var(--ink);
border-radius:999px;box-shadow:none;font-family:"Patrick Hand",sans-serif;font-size:16px}
[data-theme=notebook] .cta,[data-theme=notebook] .skin[aria-current=true],[data-theme=notebook] .shape[aria-current=true],
[data-theme=notebook] .sk-size[aria-current=true],[data-theme=notebook] .badge:not(.off){background:var(--accent);color:var(--onaccent)}
[data-theme=notebook] .chip{background:var(--accent);color:var(--onaccent);border:0;border-radius:0;padding:3px 10px;
font-family:"Patrick Hand",sans-serif;font-size:16px;transform:none}
[data-theme=notebook] .badge{background:#fff;border:2.5px solid var(--ink);border-radius:999px;
font-family:"Patrick Hand",sans-serif;font-size:15px;box-shadow:none}
[data-theme=notebook] .setpanel{background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:none;transform:none}
[data-theme=notebook] .setlabel{font-family:"Caveat",cursive;font-size:18px;color:var(--ink)}
[data-theme=notebook] .card:hover{transform:translateY(-2px)}
[data-theme=notebook] .card-t{font-family:"Caveat",cursive;font-size:26px}
[data-theme=notebook] .rd,[data-theme=notebook] .ytwrap{background:var(--ink)}
[data-theme=notebook] .rd-title,[data-theme=notebook] .rd-close,[data-theme=notebook] .ytwrap .btn{color:var(--paper)}
[data-theme=notebook] .rd-page{background:#3a4a68;border:2.5px solid var(--paper);border-radius:10px}
[data-theme=notebook] .rd-close{background:transparent;border:2.5px solid var(--paper);border-radius:999px}
[data-theme=notebook] .rd-thumbs button{background:#3a4a68;border:2.5px solid var(--paper);border-radius:8px}
[data-theme=notebook] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=notebook] .pj-page img{border:2.5px solid var(--ink);border-radius:8px}
[data-theme=notebook] .play{background:var(--accent);color:var(--onaccent);border:2.5px solid var(--ink);border-radius:10px}
[data-theme=notebook] .ytframe iframe{border:2.5px solid var(--paper);border-radius:10px}
[data-theme=notebook] #skcanvas{border:2.5px solid var(--ink);border-radius:10px}
[data-theme=notebook] .pvbar{background:var(--accent);color:var(--ink);border-bottom:2.5px solid var(--ink);font-family:"Caveat",cursive;font-size:20px}
[data-theme=notebook] .pvbar button{background:var(--ink);color:#fff;border-radius:999px}
[data-theme=notebook] .hud-only,[data-theme=notebook] .sticker{display:none}
/* ================= SUNDAY PAPER ================= */
[data-theme=paper]{--news:#f2ece0;--ink:#1f1d1a;--panelbg:transparent;--well:#e6dfd0;--fg:#1f1d1a;
--body:#3d3a34;--muted:#57534a;--accent:#d4342a;--onaccent:#f2ece0}
[data-theme=paper] body{background:var(--news);
background-image:radial-gradient(rgba(31,29,26,.07) 1px,transparent 1.2px);background-size:5px 5px;
color:var(--body);font-family:"Nunito",system-ui,sans-serif;font-weight:600}
[data-theme=paper] .px{font-family:"Special Elite",ui-monospace,monospace;color:var(--ink);
text-shadow:none;letter-spacing:.08em;text-transform:uppercase}
[data-theme=paper] .brand h1{font-family:"Ultra",serif;font-size:26px;letter-spacing:0;text-transform:none}
[data-theme=paper] .sec h2{font-family:"Ultra",serif;font-size:24px;letter-spacing:0}
[data-theme=paper] .rule{height:2px;background:var(--ink)}
[data-theme=paper] .hero-title{font-family:"Ultra",serif;font-size:38px;line-height:1.02;color:var(--ink);letter-spacing:0}
/* Rules do the work here, not boxes: a double rule under the masthead, hard
rules elsewhere, and no fills or shadows anywhere. */
[data-theme=paper] .hdr.panel{background:transparent;border:0;border-bottom:4px double var(--ink);border-radius:0;box-shadow:none;color:var(--ink)}
[data-theme=paper] .panel{background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;box-shadow:none}
[data-theme=paper] .bug{background:var(--accent);color:var(--onaccent);border-radius:3px;box-shadow:none;font-family:"Ultra",serif}
[data-theme=paper] .cov,[data-theme=paper] .vid-cov{background:var(--well);border:2px solid var(--ink);border-radius:3px;box-shadow:none}
[data-theme=paper] .xp-bar,[data-theme=paper] .prog-bar{background:var(--well);border:1px solid var(--ink);border-radius:0}
[data-theme=paper] .xp-bar i,[data-theme=paper] .prog-bar i{background:var(--ink)}
[data-theme=paper] .sw button{border-radius:3px;box-shadow:0 0 0 1px var(--ink)}
[data-theme=paper] .tgl,[data-theme=paper] .btn,[data-theme=paper] .vsel,[data-theme=paper] .whobtn,
[data-theme=paper] .skin,[data-theme=paper] .shape,[data-theme=paper] .sk-size,
[data-theme=paper] .setbtn{background:transparent;color:var(--ink);border:2px solid var(--ink);
border-radius:3px;box-shadow:none;font-family:"Special Elite",monospace;font-size:12px;letter-spacing:.06em}
[data-theme=paper] .cta{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
[data-theme=paper] .chip,[data-theme=paper] .badge:not(.off),[data-theme=paper] .skin[aria-current=true],
[data-theme=paper] .shape[aria-current=true],[data-theme=paper] .sk-size[aria-current=true]{background:var(--ink);color:var(--news);border-radius:3px}
[data-theme=paper] .badge{background:transparent;border:2px solid var(--ink);border-radius:3px;
font-family:"Special Elite",monospace;font-size:12px;box-shadow:none}
[data-theme=paper] .setpanel{background:var(--news);border:2px solid var(--ink);border-radius:3px;box-shadow:none;transform:none}
[data-theme=paper] .setlabel{color:var(--muted)}
[data-theme=paper] .card:hover{opacity:.82}
[data-theme=paper] .card-t{font-family:"Ultra",serif;font-size:17px;letter-spacing:0;text-transform:none}
[data-theme=paper] .rd,[data-theme=paper] .ytwrap{background:var(--ink)}
[data-theme=paper] .rd-title,[data-theme=paper] .rd-close,[data-theme=paper] .ytwrap .btn{color:var(--news)}
[data-theme=paper] .rd-page{background:#2c2926;border:2px solid var(--news);border-radius:3px}
[data-theme=paper] .rd-close{background:transparent;border:2px solid var(--news);border-radius:3px}
[data-theme=paper] .rd-thumbs button{background:#2c2926;border:2px solid var(--news);border-radius:3px}
[data-theme=paper] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=paper] .pj-page img{border:2px solid var(--ink);border-radius:3px}
[data-theme=paper] .play{background:var(--accent);color:var(--onaccent);border-radius:3px}
[data-theme=paper] .ytframe iframe{border:2px solid var(--news);border-radius:3px}
[data-theme=paper] #skcanvas{border:2px solid var(--ink);border-radius:3px}
[data-theme=paper] .pvbar{background:var(--accent);color:var(--onaccent);font-family:"Special Elite",monospace}
[data-theme=paper] .pvbar button{background:var(--ink);color:var(--news);border-radius:3px}
[data-theme=paper] .hud-only,[data-theme=paper] .sticker{display:none}
/* ================= ORBITAL STATION ================= */
[data-theme=station]{--space:#070b18;--panel:rgba(255,255,255,.045);--well:#101733;--fg:#fff;
--body:#9aa6c4;--muted:#6d7a9c;--accent:#5ce1ff;--onaccent:#070b18;--ink:#070b18;
--hair:rgba(255,255,255,.14)}
/* Eight single-star layers at mutually non-dividing tile sizes, so the repeat
never lines up into a visible grid - one or two tiled dot gradients read as
fabric rather than sky. Plus two very faint nebulae. */
[data-theme=station] body{background:var(--space);color:var(--body);
font-family:"Nunito",system-ui,sans-serif;font-weight:600;
background-image:
radial-gradient(circle at 18% 32%, rgba(255,255,255,.9) 1.1px, transparent 1.2px),
radial-gradient(circle at 72% 12%, rgba(198,222,255,.8) .9px, transparent 1px),
radial-gradient(circle at 41% 78%, rgba(255,238,214,.75) 1.3px, transparent 1.4px),
radial-gradient(circle at 88% 61%, rgba(255,255,255,.7) .8px, transparent .9px),
radial-gradient(circle at 9% 87%, rgba(198,222,255,.85) 1.5px, transparent 1.6px),
radial-gradient(circle at 57% 44%, rgba(255,255,255,.6) .9px, transparent 1px),
radial-gradient(circle at 33% 8%, rgba(255,238,214,.7) 1.2px, transparent 1.3px),
radial-gradient(circle at 79% 91%, rgba(255,255,255,.8) 1px, transparent 1.1px),
radial-gradient(ellipse 60% 40% at 20% 20%, rgba(92,225,255,.07), transparent 70%),
radial-gradient(ellipse 50% 45% at 80% 75%, rgba(166,140,255,.06), transparent 70%);
background-size:341px 289px,233px 197px,179px 263px,419px 331px,151px 173px,
271px 211px,127px 149px,307px 241px,100% 100%,100% 100%}
[data-theme=station] .px{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
color:var(--fg);text-shadow:none}
[data-theme=station] .brand h1{font-size:22px;letter-spacing:-.02em}
[data-theme=station] .sec h2{font-size:12px;text-transform:uppercase;letter-spacing:.22em;font-weight:500}
[data-theme=station] .rule{height:1px;background:var(--hair)}
[data-theme=station] .hero-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;
font-size:36px;line-height:1.06;letter-spacing:-.02em;color:var(--fg)}
/* Hairlines only - 1px, never a shadow. */
[data-theme=station] .hdr.panel{background:rgba(255,255,255,.045);border:0;border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none}
[data-theme=station] .panel{background:var(--panel);border:1px solid var(--hair);border-radius:20px;box-shadow:none}
[data-theme=station] .bug{background:var(--accent);color:var(--onaccent);border-radius:999px;box-shadow:none}
[data-theme=station] .cov,[data-theme=station] .vid-cov{background:var(--well);border:1px solid var(--hair);border-radius:14px;box-shadow:none}
[data-theme=station] .card:hover .cov{border-color:rgba(255,255,255,.3)}
[data-theme=station] .card:hover{transform:translateY(-4px)}
/* A bare 3px line - no track rounding, no glow. */
[data-theme=station] .xp-bar,[data-theme=station] .prog-bar{background:rgba(255,255,255,.12);border-radius:0;height:3px}
[data-theme=station] .xp-bar i,[data-theme=station] .prog-bar i{background:var(--accent)}
[data-theme=station] .sw button{border-radius:999px;box-shadow:none}
[data-theme=station] .tgl,[data-theme=station] .btn,[data-theme=station] .vsel,[data-theme=station] .whobtn,
[data-theme=station] .skin,[data-theme=station] .shape,[data-theme=station] .sk-size,
[data-theme=station] .setbtn{background:var(--panel);color:var(--fg);border:1px solid var(--hair);
border-radius:999px;box-shadow:none;font-family:"Space Grotesk",sans-serif;font-weight:500;
font-size:11px;letter-spacing:.1em}
[data-theme=station] .cta,[data-theme=station] .chip,[data-theme=station] .badge:not(.off),
[data-theme=station] .skin[aria-current=true],[data-theme=station] .shape[aria-current=true],
[data-theme=station] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);
border-color:var(--accent);border-radius:999px;text-shadow:none}
[data-theme=station] .badge{background:var(--panel);border:1px solid var(--hair);border-radius:999px;
font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11px;letter-spacing:.1em;box-shadow:none}
[data-theme=station] .setpanel{background:#0b1120;border:1px solid var(--hair);border-radius:20px;box-shadow:none;transform:none}
[data-theme=station] .setlabel{color:var(--muted);letter-spacing:.24em}
[data-theme=station] .card-t{font-size:17px;letter-spacing:-.01em}
[data-theme=station] .rd,[data-theme=station] .ytwrap{background:#050812}
[data-theme=station] .rd-page{background:var(--well);border:1px solid var(--hair);border-radius:14px}
[data-theme=station] .rd-close{background:var(--panel);border:1px solid var(--hair);border-radius:999px;color:var(--fg)}
[data-theme=station] .rd-thumbs button,[data-theme=station] .pj-page img{background:var(--well);border:1px solid var(--hair);border-radius:8px}
[data-theme=station] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=station] .play{background:var(--accent);color:var(--onaccent);border-radius:999px}
[data-theme=station] .ytframe iframe{border:1px solid var(--hair);border-radius:14px}
[data-theme=station] #skcanvas{border:1px solid var(--hair);border-radius:14px}
[data-theme=station] .pvbar{background:var(--accent);color:var(--onaccent);text-shadow:none}
[data-theme=station] .pvbar button{background:#050812;color:#fff;border-radius:999px}
[data-theme=station] .hud-only,[data-theme=station] .sticker{display:none}
[data-theme=station] .tgl:active,[data-theme=station] .cta:active,[data-theme=station] .btn:active{transform:scale(.98)}
/* ================= ZONE RUSH ================= */
[data-theme=zone]{--field:#e9f3ff;--band:#1470d6;--ink:#0c2f5c;--panelbg:#fff;--well:#dcecfb;
--fg:#0c2f5c;--body:#4a6a92;--muted:#7f9ab8;--accent:#ffc400;--onaccent:#0c2f5c}
[data-theme=zone] body{background:var(--field);
background-image:repeating-linear-gradient(-16deg,rgba(18,58,112,.05) 0 2px,transparent 2px 40px);
color:var(--body);font-family:"Nunito",system-ui,sans-serif;font-weight:700}
/* Skew is the motif - on chrome only. Body copy and images are never skewed. */
[data-theme=zone] .px{font-family:"Archivo Black",system-ui,sans-serif;text-transform:uppercase;
letter-spacing:-.01em;color:var(--fg);text-shadow:none}
[data-theme=zone] .brand h1{font-size:24px;transform:skewX(-8deg);color:#fff}
[data-theme=zone] .sec h2{font-size:24px;transform:skewX(-8deg)}
[data-theme=zone] .rule{height:12px;border-radius:999px;
background:repeating-conic-gradient(var(--ink) 0 25%,#cfe4f8 0 50%);background-size:24px 24px}
[data-theme=zone] .hero-title{font-family:"Archivo Black",sans-serif;text-transform:uppercase;
font-size:36px;line-height:1.04;letter-spacing:-.02em;color:var(--fg);transform:skewX(-6deg)}
[data-theme=zone] .hdr.panel{background:var(--band);color:#fff;border:0;border-bottom:5px solid var(--ink);border-radius:0;box-shadow:none}
/* Speed edge: one thick accent side, ink on the rest. */
[data-theme=zone] .panel{background:var(--panelbg);border:5px solid var(--ink);
border-left:10px solid var(--accent);border-radius:20px;box-shadow:none}
[data-theme=zone] .bug{background:var(--accent);color:var(--onaccent);border:4px solid var(--ink);
border-radius:8px;transform:skewX(-8deg);box-shadow:none}
[data-theme=zone] .cov,[data-theme=zone] .vid-cov{background:var(--well);border:4px solid var(--ink);
border-bottom-width:8px;border-bottom-color:var(--accent);border-radius:12px;box-shadow:none}
[data-theme=zone] .card:hover{transform:translateX(5px)}
[data-theme=zone] .xp-bar,[data-theme=zone] .prog-bar{background:var(--well);border:3px solid var(--ink);border-radius:999px}
[data-theme=zone] .xp-bar i,[data-theme=zone] .prog-bar i{background:var(--accent)}
[data-theme=zone] .sw button{border:3px solid var(--ink);border-radius:6px}
[data-theme=zone] .tgl,[data-theme=zone] .btn,[data-theme=zone] .vsel,[data-theme=zone] .whobtn,
[data-theme=zone] .skin,[data-theme=zone] .shape,[data-theme=zone] .sk-size,
[data-theme=zone] .setbtn{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:8px;
box-shadow:none;font-family:"Archivo Black",sans-serif;font-size:11px;text-transform:uppercase;transform:skewX(-8deg)}
[data-theme=zone] .cta,[data-theme=zone] .chip,[data-theme=zone] .badge:not(.off),
[data-theme=zone] .skin[aria-current=true],[data-theme=zone] .shape[aria-current=true],
[data-theme=zone] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);border-color:var(--ink)}
[data-theme=zone] .badge{background:#fff;border:4px solid var(--ink);border-radius:8px;
font-family:"Archivo Black",sans-serif;font-size:10px;transform:skewX(-8deg);box-shadow:none}
[data-theme=zone] .setpanel{background:#fff;border:5px solid var(--ink);border-radius:16px;box-shadow:none;transform:none}
[data-theme=zone] .setlabel{color:var(--muted)}
[data-theme=zone] .card-t{font-size:16px}
[data-theme=zone] .rd,[data-theme=zone] .ytwrap{background:var(--ink)}
[data-theme=zone] .rd-title,[data-theme=zone] .rd-close{color:#fff}
[data-theme=zone] .rd-page{background:#164a86;border:5px solid #fff;border-radius:12px}
[data-theme=zone] .rd-close{background:transparent;border:4px solid #fff;border-radius:8px;transform:skewX(-8deg)}
[data-theme=zone] .rd-thumbs button{background:#164a86;border:4px solid #fff;border-radius:8px}
[data-theme=zone] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=zone] .pj-page img{border:4px solid var(--ink);border-radius:8px}
[data-theme=zone] .play{background:var(--accent);color:var(--onaccent);border:4px solid var(--ink);border-radius:8px}
[data-theme=zone] .ytframe iframe{border:5px solid #fff;border-radius:12px}
[data-theme=zone] #skcanvas{border:5px solid var(--ink);border-radius:12px}
[data-theme=zone] .pvbar{background:var(--accent);color:var(--onaccent)}
[data-theme=zone] .pvbar button{background:var(--ink);color:#fff;border-radius:8px}
[data-theme=zone] .hud-only,[data-theme=zone] .sticker{display:none}
[data-theme=zone] .tgl:active,[data-theme=zone] .cta:active,[data-theme=zone] .btn:active{transform:skewX(-8deg) translateY(2px)}
/* ================= BLOCK PARTY ================= */
[data-theme=blocks]{--sky:#6ec0ff;--brick:#c1521f;--ink:#4a2410;--panelbg:#fff;--well:#ffeccd;
--fg:#4a2410;--body:#7a5a44;--muted:#a68a72;--accent:#f8b300;--onaccent:#4a2410}
[data-theme=blocks] body{background:var(--sky);color:var(--body);
font-family:"Nunito",system-ui,sans-serif;font-weight:700}
[data-theme=blocks] .px{font-family:"Baloo 2",cursive;font-weight:800;color:var(--fg);text-shadow:none}
[data-theme=blocks] .brand h1{font-size:26px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
[data-theme=blocks] .sec h2{font-size:26px;text-shadow:0 2px 0 rgba(255,255,255,.55)}
/* Brick bands instead of rules. */
[data-theme=blocks] .rule{height:14px;border:3px solid var(--ink);border-radius:6px;background:var(--brick);
background-image:linear-gradient(90deg,rgba(0,0,0,.18) 2px,transparent 2px),
linear-gradient(rgba(0,0,0,.18) 2px,transparent 2px);
background-size:30px 30px}
[data-theme=blocks] .hero-title{font-family:"Baloo 2",cursive;font-weight:800;font-size:38px;
line-height:1.02;color:var(--fg)}
[data-theme=blocks] .hdr.panel{background:var(--brick);
background-image:linear-gradient(90deg,rgba(0,0,0,.18) 2px,transparent 2px),
linear-gradient(rgba(0,0,0,.18) 2px,transparent 2px);
background-size:60px 30px;color:#fff;border:0;border-bottom:5px solid var(--ink);border-radius:0;box-shadow:none}
/* Everything is a block: thick outline, hard bottom shadow, never blurred. */
[data-theme=blocks] .panel{background:var(--panelbg);border:5px solid var(--ink);border-radius:18px;
box-shadow:0 6px 0 rgba(74,36,16,.35)}
[data-theme=blocks] .bug{background:var(--accent);color:var(--onaccent);border:4px solid var(--ink);
border-radius:12px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
[data-theme=blocks] .cov,[data-theme=blocks] .vid-cov{background:var(--well);border:4px solid var(--ink);
border-radius:12px;box-shadow:0 5px 0 rgba(74,36,16,.35)}
[data-theme=blocks] .card:hover{transform:translateY(-4px)}
[data-theme=blocks] .xp-bar,[data-theme=blocks] .prog-bar{background:var(--well);border:3px solid var(--ink);border-radius:999px}
[data-theme=blocks] .xp-bar i,[data-theme=blocks] .prog-bar i{background:var(--accent)}
[data-theme=blocks] .sw button{border:3px solid var(--ink);border-radius:8px;box-shadow:0 3px 0 rgba(74,36,16,.35)}
[data-theme=blocks] .tgl,[data-theme=blocks] .btn,[data-theme=blocks] .vsel,[data-theme=blocks] .whobtn,
[data-theme=blocks] .skin,[data-theme=blocks] .shape,[data-theme=blocks] .sk-size,
[data-theme=blocks] .setbtn{background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:12px;
box-shadow:0 4px 0 rgba(74,36,16,.35);font-family:"Baloo 2",cursive;font-weight:800;font-size:12px}
[data-theme=blocks] .cta,[data-theme=blocks] .chip,[data-theme=blocks] .badge:not(.off),
[data-theme=blocks] .skin[aria-current=true],[data-theme=blocks] .shape[aria-current=true],
[data-theme=blocks] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);
box-shadow:0 4px 0 rgba(74,36,16,.35),inset 0 -5px 0 rgba(0,0,0,.18)}
[data-theme=blocks] .badge{background:#fff;border:4px solid var(--ink);border-radius:12px;
font-family:"Baloo 2",cursive;font-weight:800;font-size:12px;box-shadow:0 3px 0 rgba(74,36,16,.35)}
[data-theme=blocks] .setpanel{background:#fff;border:5px solid var(--ink);border-radius:16px;
box-shadow:0 6px 0 rgba(74,36,16,.35);transform:none}
[data-theme=blocks] .setlabel{color:var(--muted)}
[data-theme=blocks] .card-t{font-size:20px}
[data-theme=blocks] .rd,[data-theme=blocks] .ytwrap{background:var(--ink)}
[data-theme=blocks] .rd-title,[data-theme=blocks] .rd-close{color:var(--well)}
[data-theme=blocks] .rd-page{background:#5d3218;border:5px solid var(--well);border-radius:12px}
[data-theme=blocks] .rd-close{background:transparent;border:4px solid var(--well);border-radius:12px;box-shadow:none}
[data-theme=blocks] .rd-thumbs button{background:#5d3218;border:4px solid var(--well);border-radius:10px}
[data-theme=blocks] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=blocks] .pj-page img{border:4px solid var(--ink);border-radius:10px}
[data-theme=blocks] .play{background:var(--accent);color:var(--onaccent);border:4px solid var(--ink);border-radius:12px}
[data-theme=blocks] .ytframe iframe{border:5px solid var(--well);border-radius:12px}
[data-theme=blocks] #skcanvas{border:5px solid var(--ink);border-radius:12px}
[data-theme=blocks] .pvbar{background:var(--accent);color:var(--onaccent)}
[data-theme=blocks] .pvbar button{background:var(--ink);color:#fff;border-radius:12px}
[data-theme=blocks] .hud-only,[data-theme=blocks] .sticker{display:none}
[data-theme=blocks] .tgl:active,[data-theme=blocks] .cta:active,[data-theme=blocks] .btn:active{transform:translateY(2px)}
/* ================= SALVAGE HULL ================= */
/* These last two skins rearrange rather than only repaint. The rearrangement is
done with per-skin geometry and pseudo-elements over the SAME markup, so the
content model stays shared and the other skins are untouched - covers become
portholes here and arched windows in "house" without either skin forking HTML. */
[data-theme=hull]{--hull:#0c1013;--rail:#070a0c;--panel:rgba(255,255,255,.035);--well:#11171b;
--bezel:#1c252b;--fg:#e6eef3;--body:#8d9aa4;--muted:#5f6d77;--accent:#ff6a3d;--onaccent:#0c1013;--ink:#0c1013}
[data-theme=hull] body{background:var(--hull);color:var(--body);
font-family:"Nunito",system-ui,sans-serif;font-weight:600;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
linear-gradient(90deg,rgba(0,0,0,.5),transparent 22%)}
/* The 62px instrument rail, as a fixed pseudo-element with matching page inset -
no extra markup, and it can't be scrolled away from. */
[data-theme=hull] body::before{content:"";position:fixed;left:0;top:0;bottom:0;width:62px;z-index:5;
background:var(--rail);border-right:1px solid rgba(255,255,255,.09);pointer-events:none}
[data-theme=hull] body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:26px;z-index:5;
background:var(--rail);border-top:1px solid rgba(255,255,255,.09);pointer-events:none}
[data-theme=hull] .hdr,[data-theme=hull] .wrap{padding-left:76px}
[data-theme=hull] .px{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;color:var(--fg);text-shadow:none}
[data-theme=hull] .brand h1{font-size:22px}
[data-theme=hull] .sec h2{font-size:11px;text-transform:uppercase;letter-spacing:.3em;font-weight:500;color:var(--muted)}
[data-theme=hull] .rule{height:1px;background:rgba(255,255,255,.12)}
[data-theme=hull] .hero-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:32px;line-height:1.1;color:var(--fg)}
[data-theme=hull] .hdr.panel{background:var(--rail);border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;box-shadow:none}
/* Hero as a bezelled quarantine viewport, with scan bars and a SEALED stamp. */
[data-theme=hull] .panel{background:var(--panel);border:1px solid rgba(255,255,255,.09);border-radius:20px;box-shadow:none}
[data-theme=hull] .hero{position:relative;box-shadow:inset 0 0 0 8px var(--bezel),inset 0 0 0 10px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.9)}
[data-theme=hull] .hero::after{content:"SEALED";position:absolute;top:14px;right:14px;transform:rotate(-9deg);
font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;
color:var(--accent);border:2px solid var(--accent);border-radius:4px;padding:4px 9px;opacity:.85}
[data-theme=hull] .hero-cov::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 9px)}
/* The library reads as circular portholes rather than cards. */
[data-theme=hull] .grid .cov{border-radius:50%;background:var(--well);
box-shadow:inset 0 0 0 6px var(--bezel),inset 0 0 0 8px rgba(0,0,0,.6),inset 0 0 26px rgba(0,0,0,.85)}
[data-theme=hull] .grid .cov-img{border-radius:50%;padding:14px}
[data-theme=hull] .card-t{text-align:center;font-size:14px}
[data-theme=hull] .card-m{text-align:center;color:var(--accent)}
[data-theme=hull] .cov,[data-theme=hull] .vid-cov{background:var(--well);border:1px solid rgba(255,255,255,.09);border-radius:8px;box-shadow:none}
/* Videos as audio intercepts: a waveform strip under each title. */
[data-theme=hull] .vid figcaption::after{content:"";display:block;height:14px;margin-top:6px;
background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 8px);opacity:.55}
[data-theme=hull] .xp-bar,[data-theme=hull] .prog-bar{background:rgba(255,255,255,.1);border-radius:0;height:5px}
[data-theme=hull] .xp-bar i,[data-theme=hull] .prog-bar i{background:var(--accent)}
[data-theme=hull] .bug{background:var(--accent);color:var(--onaccent);border-radius:999px;box-shadow:none}
[data-theme=hull] .sw button{border-radius:999px;box-shadow:none}
[data-theme=hull] .tgl,[data-theme=hull] .btn,[data-theme=hull] .vsel,[data-theme=hull] .whobtn,
[data-theme=hull] .skin,[data-theme=hull] .shape,[data-theme=hull] .sk-size,
[data-theme=hull] .setbtn{background:var(--panel);color:var(--fg);border:1px solid rgba(255,255,255,.14);
border-radius:5px;box-shadow:none;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:11px;letter-spacing:.14em}
[data-theme=hull] .cta,[data-theme=hull] .chip,[data-theme=hull] .badge:not(.off),
[data-theme=hull] .skin[aria-current=true],[data-theme=hull] .shape[aria-current=true],
[data-theme=hull] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
[data-theme=hull] .badge{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:5px;
font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;box-shadow:none}
[data-theme=hull] .setpanel{background:#0a0f12;border:1px solid rgba(255,255,255,.16);border-radius:10px;box-shadow:none;transform:none}
[data-theme=hull] .setlabel{color:var(--muted);letter-spacing:.3em}
[data-theme=hull] .rd,[data-theme=hull] .ytwrap{background:#070a0c}
[data-theme=hull] .rd-page{background:var(--well);box-shadow:inset 0 0 0 8px var(--bezel),inset 0 0 0 10px rgba(0,0,0,.6);border-radius:8px}
[data-theme=hull] .rd-close{background:var(--panel);border:1px solid rgba(255,255,255,.16);border-radius:5px;color:var(--fg)}
[data-theme=hull] .rd-thumbs button,[data-theme=hull] .pj-page img{background:var(--well);border:1px solid rgba(255,255,255,.12);border-radius:999px}
[data-theme=hull] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=hull] .play{background:var(--accent);color:var(--onaccent);border-radius:999px}
[data-theme=hull] .ytframe iframe{border:1px solid rgba(255,255,255,.16);border-radius:8px}
[data-theme=hull] #skcanvas{border:1px solid rgba(255,255,255,.16);border-radius:8px}
[data-theme=hull] .pvbar{background:var(--accent);color:var(--onaccent)}
[data-theme=hull] .pvbar button{background:#070a0c;color:#fff;border-radius:5px}
[data-theme=hull] .hud-only,[data-theme=hull] .sticker{display:none}
/* ================= THE HOUSE ================= */
[data-theme=house]{--night:#10121f;--wall:#1a1526;--wood:#2d2140;--wood2:#3b2b52;--glass:#0b0d16;
--fg:#f2ecff;--body:#a99cc7;--muted:#7a6d9c;--accent:#ffb545;--onaccent:#241a2e;--ink:#241a2e}
[data-theme=house] body{background:var(--night);color:var(--body);
font-family:"Nunito",system-ui,sans-serif;font-weight:600;
background-image:linear-gradient(0deg,rgba(255,181,69,.10),transparent 42%)}
/* A picket band closes the bottom of the frame. */
[data-theme=house] body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:26px;z-index:5;
background:repeating-linear-gradient(90deg,var(--wood) 0 14px,transparent 14px 30px);pointer-events:none}
[data-theme=house] .px{font-family:"Creepster",cursive;color:var(--fg);text-shadow:none;letter-spacing:.04em}
[data-theme=house] .brand h1{font-family:"Creepster",cursive;font-size:30px;color:var(--fg)}
[data-theme=house] .sec h2{font-family:"Creepster",cursive;font-size:26px}
[data-theme=house] .rule{height:6px;background:repeating-linear-gradient(90deg,var(--wood) 0 14px,transparent 14px 30px)}
[data-theme=house] .hero-title{font-family:"Creepster",cursive;font-size:42px;line-height:1.04;letter-spacing:.03em;color:var(--fg)}
/* The roof: a clip-path gable behind the header, no extra markup. */
[data-theme=house] .hdr.panel{position:relative;background:transparent;border:0;border-bottom:6px solid var(--wood);
border-radius:0;box-shadow:none;padding-top:26px}
[data-theme=house] .hdr.panel::before{content:"";position:absolute;inset:0;background:#241a2e;
clip-path:polygon(0 100%,50% 0,100% 100%);z-index:-1}
[data-theme=house] .panel{background:var(--wall);border:0;border-radius:14px;box-shadow:none}
/* Every image frame is an arch - that is the motif. */
[data-theme=house] .hero-cov{background:var(--glass);border:8px solid var(--wood);
border-radius:123px 123px 10px 10px;box-shadow:0 0 44px rgba(255,181,69,.28)}
[data-theme=house] .grid .cov{background:var(--glass);border:6px solid var(--wood);
border-radius:90px 90px 8px 8px;box-shadow:0 0 26px rgba(255,181,69,.22)}
[data-theme=house] .grid .cov::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;
margin-left:-1.5px;background:var(--wood);opacity:.85;pointer-events:none}
[data-theme=house] .card-t{text-align:center;font-family:"Creepster",cursive;font-size:22px}
[data-theme=house] .card-m{text-align:center}
/* Videos hang as framed portraits. */
[data-theme=house] .vid{transform:rotate(-1.3deg)}
[data-theme=house] .vid:nth-child(even){transform:rotate(1.3deg)}
[data-theme=house] .vid-cov{background:var(--glass);border:10px solid var(--wood2);border-radius:6px;
box-shadow:0 10px 22px rgba(0,0,0,.55)}
[data-theme=house] .cov{background:var(--glass);border:6px solid var(--wood);border-radius:8px}
[data-theme=house] .xp-bar,[data-theme=house] .prog-bar{background:var(--glass);border:2px solid var(--wood);border-radius:999px}
[data-theme=house] .xp-bar i,[data-theme=house] .prog-bar i{background:var(--accent)}
[data-theme=house] .bug{background:var(--accent);color:var(--onaccent);border-radius:999px;box-shadow:0 0 26px rgba(255,181,69,.5)}
[data-theme=house] .sw button{border-radius:999px;box-shadow:0 0 14px currentColor}
[data-theme=house] .tgl,[data-theme=house] .btn,[data-theme=house] .vsel,[data-theme=house] .whobtn,
[data-theme=house] .skin,[data-theme=house] .shape,[data-theme=house] .sk-size,
[data-theme=house] .setbtn{background:var(--wall);color:var(--fg);border:3px solid var(--wood);
border-radius:999px;box-shadow:none;font-family:"Nunito",sans-serif;font-weight:800;font-size:11px}
[data-theme=house] .cta,[data-theme=house] .chip,[data-theme=house] .badge:not(.off),
[data-theme=house] .skin[aria-current=true],[data-theme=house] .shape[aria-current=true],
[data-theme=house] .sk-size[aria-current=true]{background:var(--accent);color:var(--onaccent);
border-color:var(--accent);box-shadow:0 0 22px rgba(255,181,69,.35)}
[data-theme=house] .badge{background:var(--wall);border:3px solid var(--wood);border-radius:999px;font-size:11px;box-shadow:none}
[data-theme=house] .setpanel{background:var(--wall);border:3px solid var(--wood);border-radius:14px;box-shadow:none;transform:none}
[data-theme=house] .setlabel{color:var(--muted)}
[data-theme=house] .rd,[data-theme=house] .ytwrap{background:#0b0d16}
/* Arched page frame, and tap zones start below the arch so the curve shows. */
[data-theme=house] .rd-page{background:var(--glass);border:8px solid var(--wood);border-radius:120px 120px 12px 12px}
[data-theme=house] .rd-zone{top:140px}
[data-theme=house] .rd-close{background:var(--wall);border:3px solid var(--wood);border-radius:999px;color:var(--fg)}
[data-theme=house] .rd-thumbs button{background:var(--glass);border:3px solid var(--wood);border-radius:26px 26px 6px 6px}
[data-theme=house] .rd-thumbs button[aria-current=true]{border-color:var(--accent)}
[data-theme=house] .pj-page img{border:3px solid var(--wood);border-radius:26px 26px 6px 6px}
[data-theme=house] .play{background:var(--accent);color:var(--onaccent);border-radius:999px}
[data-theme=house] .ytframe iframe{border:8px solid var(--wood);border-radius:12px}
[data-theme=house] #skcanvas{border:6px solid var(--wood);border-radius:12px}
[data-theme=house] .pvbar{background:var(--accent);color:var(--onaccent)}
[data-theme=house] .pvbar button{background:var(--ink);color:#fff;border-radius:999px}
[data-theme=house] .hud-only,[data-theme=house] .sticker{display:none}
/* ---- live tool state, after every skin ----
A tool that is switched on says so from the closed toolbar, so "am I holding
the bucket?" is answerable without opening anything. This has to sit after the
theme blocks: each one styles .setbtn at the same specificity, so only source
order decides, and an armed tool must win. */
.setbtn[aria-current=true]{background:var(--accent);color:var(--onaccent);
border-color:var(--accent);text-shadow:none}
.tb-inline{display:inline-block;vertical-align:middle;margin-left:7px;
box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
/* --- animation ------------------------------------------------------------ */
/* Layout only. The buttons keep .whobtn / .skin so every theme's own styling
for them applies here without a per-theme rule being written twice. */
.anim-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.anim-speed{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.anim-speed .skin{text-align:center;padding:10px 6px}
.whobtn[disabled]{opacity:.4;cursor:not-allowed}
/* Marks a library card as an animation, so a GIF sitting still on its first
frame is not mistaken for a drawing. Deliberately theme-neutral: it sits on
top of artwork, not on panel furniture. */
.card-badge{position:absolute;left:6px;top:6px;z-index:2;padding:3px 7px;
font-size:10px;letter-spacing:.1em;border-radius:3px;
background:rgba(0,0,0,.72);color:#fff;pointer-events:none}
.lib-add{display:flex;gap:8px;align-items:center;margin:0 0 14px}
/* --- colour mixer --------------------------------------------------------- */
/* Ten swatches at a fixed 34px overflowed a phone-width panel in one flex row;
wrapping gives five per row and costs nothing on a wide one. */
.sk-colors{flex-wrap:wrap}
.mix-field,.mix-hue{display:block;width:100%;height:auto;cursor:crosshair;
touch-action:none;border-radius:4px}
.mix-field{aspect-ratio:8/5}
.mix-hue{aspect-ratio:12/1}
.mix-foot{display:flex;align-items:center;gap:8px}
.mix-hex{font-size:10px;flex:1;min-width:0}
.mix-eye{width:auto;flex:0 0 auto;padding:8px 10px;min-height:36px}
/* --- filmstrip ------------------------------------------------------------ */
/* flex:0 0 auto so it takes its own height out of .sk and the stage re-fits
around it rather than the canvas overflowing the viewport. */
.sk-strip{flex:0 0 auto;display:flex;gap:6px;align-items:center;
overflow-x:auto;overflow-y:hidden;padding:4px 2px;scrollbar-width:thin;
-webkit-overflow-scrolling:touch}
.sk-strip[hidden]{display:none}
.sk-frame{flex:0 0 auto;position:relative;padding:0;border:0;background:none;
cursor:pointer;line-height:0;border-radius:4px}
.sk-frame canvas{display:block;width:48px;height:64px;background:#fff;border-radius:3px}
.sk-frame .sk-fno{position:absolute;left:2px;bottom:2px;font-size:9px;padding:1px 4px;
border-radius:2px;background:rgba(0,0,0,.7);color:#fff;line-height:1.4;pointer-events:none}
.sk-frame[aria-current=true]{outline:3px solid var(--accent);outline-offset:2px}
.sk-add{flex:0 0 auto;width:48px;height:64px;cursor:pointer;padding:0;
display:grid;place-items:center;font-size:18px;border-radius:4px}
/* The strip is a luxury on a short screen - the canvas matters more. */
@media (max-height:560px){.sk-frame canvas,.sk-add{width:38px;height:50px}}
/* --- zoom ----------------------------------------------------------------- */
/* The stage becomes the scroll container once the canvas is bigger than it.
"safe center" rather than plain centring: a centred grid item that outgrows
its box gets clipped at the top-left with no way to scroll back to it, which
is exactly what zooming in does. */
.sk-stage{overflow:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* Centred is right until the canvas outgrows the stage, at which point a
centred grid item is clipped at the top-left with no way to scroll back to
it. Start alignment for the duration is deterministic; "safe center" would
lean on an alignment keyword not every browser here honours. */
.sk-stage.zoomed{place-items:start}
/* Panning and pinching are handled in script, so the browser must not also try
to scroll or zoom from the same fingers. */
#skcanvas{touch-action:none}
/* --- copied frames -------------------------------------------------------- */
/* Theme-neutral on purpose: both of these sit over artwork, not over panel
furniture, so they use their own contrast rather than the skin's. */
.sk-copytag{position:absolute;left:50%;transform:translateX(-50%);top:2px;z-index:5;
padding:3px 9px;font-size:10px;border-radius:3px;pointer-events:none;
background:rgba(0,0,0,.72);color:#fff;white-space:nowrap}
.sk-copytag[hidden]{display:none}
.sk-frame .sk-copy{position:absolute;right:2px;top:2px;font-size:9px;padding:1px 4px;
border-radius:2px;background:rgba(0,0,0,.72);color:#fff;line-height:1.4;pointer-events:none}
/* A dashed edge reads as "same as the one before" at thumbnail size, where a
corner tag alone is easy to miss. */
.sk-frame.is-copy canvas{outline:2px dashed rgba(255,255,255,.55);outline-offset:-2px}
/* --- one panel at a time -------------------------------------------------- */
.sk-paneltag{position:absolute;left:8px;top:2px;z-index:5;padding:3px 9px;
font-size:10px;border-radius:3px;pointer-events:none;
background:rgba(0,0,0,.72);color:#fff;white-space:nowrap}
.sk-paneltag[hidden]{display:none}