/* Layout: a living seascape. Sunlit sky over waves that swell under the cursor; TZERØ floats on the water in red. Below, the shore: light yellow sand with blue cards. Single bright look by choice. */
:root{
  --sun:#fff6cf; --sand:#fdf0bf; --sky:#cfeaff; --b1:#8cc8f2; --b2:#3d8fd6; --b3:#1a5aa6; --abyss:#13224b; --red:#d7182a; --ink:#13224b; --soft:#47648c;
  --display:"Geist",system-ui,sans-serif; --body:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  color-scheme:light;
}
:root[data-skin=thread]{--sun:#fbf8f1; --sand:#f4efe4; --sky:#e8eef8; --b1:#c9d6ea; --b2:#3d5c8c; --b3:#13224b; --abyss:#13224b; --ink:#13224b; --soft:#4f5f7a}
[data-skin=thread] .sea{background:radial-gradient(120% 90% at 78% 0%,#eaf0fb 0%,transparent 60%),linear-gradient(180deg,#fbf8f1 0%,#f6f1e6 100%)}
[data-skin=thread] .sunball{opacity:0}
[data-skin=thread] .shore{background:none}
:root[data-skin=autumn]{--sun:#fff0d2; --sand:#fbe3bd; --sky:#f7b98a; --b1:#e8896a; --b2:#c4652b; --b3:#8c3d1c; --abyss:#2f1a12; --ink:#2f1a12; --soft:#7b5338}
:root[data-skin=winter]{--sun:#eef4fa; --sand:#e3ecf5; --sky:#a9c6e4; --b1:#86aed6; --b2:#4a7fb3; --b3:#2b5a8a; --abyss:#13243d; --ink:#13243d; --soft:#4b6585}
:root[data-skin=spring]{--sun:#fffaf2; --sand:#eef7e4; --sky:#cfe8f6; --b1:#a9dba9; --b2:#4c9f66; --b3:#2f7a4c; --abyss:#1b3a29; --ink:#1b3a29; --soft:#587262}
[data-skin=winter] .sea{background:linear-gradient(180deg,#d3e2f1 0%,#a9c6e4 55%,#86aed6 100%)}
body,.sea,.shore,.sec,footer,header{transition:background .8s,color .8s}
.skin{font-family:var(--mono);font-size:13px;padding:6px 12px;border-radius:99px;border:1px solid var(--b2);background:transparent;color:var(--ink);cursor:pointer}
.skin:hover{background:color-mix(in srgb,var(--b1) 30%,transparent)}
[data-skin=autumn] .sunball,[data-skin=winter] .sunball{opacity:0}
.sunball{transition:opacity .8s,left 1.6s cubic-bezier(.2,.7,.2,1),top 1.6s cubic-bezier(.2,.7,.2,1)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
h1,.brand{user-select:none;-webkit-user-select:none}
body{user-select:none;-webkit-user-select:none}a,button{cursor:pointer}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sea,.shore,footer{position:relative;z-index:1}
.card,.sec,.cover{background-image:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 70%)}
*{box-sizing:border-box}
body{background:var(--sun);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{position:relative;max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--sun) 65%,transparent);border-bottom:1px solid color-mix(in srgb,var(--b1) 50%,transparent)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sun)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;letter-spacing:.02em}
.brand b{color:var(--red)}
.star{width:22px;height:22px;fill:var(--red);animation:spin 9s linear infinite}
nav{display:flex;gap:6px;flex-wrap:wrap;font-family:var(--mono);font-size:13px}
nav a{padding:6px 12px;border-radius:99px;border:1px solid transparent;transition:.2s}
nav a:hover{border-color:var(--b2);background:color-mix(in srgb,var(--b1) 25%,transparent)}
@media (min-width:900px){nav{gap:4px}nav a{padding:6px 9px}nav .skin{padding:6px 10px}}

.sea{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sun) 0%,var(--sky) 62%,var(--b1) 100%)}
.sunball{position:absolute;width:520px;height:520px;max-width:120vw;border-radius:50%;left:var(--sx,62%);top:var(--sy,-10%);transform:translate(-50%,-30%);background:radial-gradient(circle,#fffbe6 0%,#ffe9a0 30%,transparent 68%);transition:left 1.6s cubic-bezier(.2,.7,.2,1),top 1.6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
#waves{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none}
.hero{position:relative;z-index:1;padding-block:80px 230px}
.kicker{font-family:var(--mono);font-size:13px;color:var(--soft)}
h1 .o{color:var(--red)}
h1{font-family:var(--display);font-weight:800;color:var(--ink);font-size:clamp(70px,18vw,230px);line-height:.88;margin:16px 0 8px;letter-spacing:-.055em;display:flex;animation:bob 6s ease-in-out infinite;text-shadow:0 18px 40px rgba(26,90,166,.18)}
h1 span{display:inline-block;animation:bob 6s ease-in-out infinite}
h1 span:nth-child(2){animation-delay:-.6s}h1 span:nth-child(3){animation-delay:-1.2s}h1 span:nth-child(4){animation-delay:-1.8s}h1 span:nth-child(5){animation-delay:-2.4s}
.sub{font-size:clamp(18px,2.4vw,26px);margin:0;color:var(--ink)}
.motto{display:inline-flex;margin-top:24px;padding:12px 22px;border-radius:99px;background:var(--abyss);color:var(--sun);font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.motto:hover{transform:scale(1.07)}

.shore{background:linear-gradient(180deg,var(--b1) 0,color-mix(in srgb,var(--sand) 60%,transparent) 160px,transparent 320px)}
section{padding-block:56px}
h2{font-family:var(--display);font-size:clamp(26px,4vw,42px);margin:0 0 22px;text-wrap:balance;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h2 small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--soft);display:inline-flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--b2);animation:pulse 1.8s infinite}
.tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center;background:#fff;color:var(--ink);border-radius:14px;padding:22px;box-shadow:0 24px 50px -30px rgba(26,90,166,.5)}
.cover img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;max-width:100%}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--b2)}

.cover h3{font-family:var(--display);font-size:clamp(28px,4vw,48px);margin:8px 0 4px;line-height:1.05}
.cover p{color:var(--soft);max-width:46ch}
.btn{display:inline-flex;gap:8px;margin-top:12px;padding:12px 20px;border-radius:99px;background:var(--abyss);color:var(--sun);font-weight:600;transition:gap .2s}
.btn[hidden]{display:none}
.btn:hover{gap:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background-color:#fff;border:1px solid rgba(26,90,166,.12);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 14px 34px -22px rgba(26,90,166,.5)}
.card h4{font-family:var(--display);font-size:20px;line-height:1.2;margin:0;text-wrap:balance}
.card p{margin:0;color:var(--soft);font-size:15px}
.card-pic{display:block;margin:-24px -24px 6px;width:calc(100% + 48px);max-width:none;aspect-ratio:16/9;object-fit:cover;border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--b2) 18%,#fff);transition:transform .5s}
.card.has-pic{overflow:hidden}
.card.has-pic:hover .card-pic{transform:scale(1.03)}
.meta{font-family:var(--mono);font-size:12px;color:var(--soft);margin-top:auto}
.note{font-family:var(--mono);font-size:12px;color:var(--soft);margin-top:14px}
.sec{border-radius:12px;padding:30px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;color:#fff}
.sec h3{font-family:var(--display);font-size:32px;margin:0}
.sec p{margin:0}
.s1{background:var(--b2)} .s2{background:var(--b3)} .s3{background:var(--abyss)}
.arrow{font-family:var(--mono);font-size:14px}
footer{background:var(--abyss);color:var(--sky);padding-block:44px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer strong{color:var(--sun);font-family:var(--display)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-.06em)}}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:700px){.cover{grid-template-columns:minmax(0,1fr)}.hero{padding-block:56px 170px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:root[data-motion="2"] *{animation:none!important;transition:none!important}

.hero2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:center}
.coverlink{display:block;margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--ink);opacity:.8}
.coverlink:hover{opacity:1;color:var(--red)}
.board{position:relative;min-height:360px}
.polaroid{position:absolute;margin:0;background:#fffdf6;padding:12px 12px 44px;width:min(240px,58vw);box-shadow:0 1px 2px rgba(0,0,0,.12),0 20px 36px -18px rgba(19,34,75,.45);cursor:grab;touch-action:none}
.polaroid:active{cursor:grabbing}
.polaroid img,.polaroid .ph2{display:block;width:100%;aspect-ratio:1;object-fit:cover;pointer-events:none}
.polaroid .ph2{background:linear-gradient(160deg,var(--sky),var(--b2));display:grid;place-items:center;color:#fff;font:800 56px var(--display)}
.polaroid figcaption{position:absolute;left:10px;right:10px;bottom:8px;text-align:center;font-family:"Caveat",cursive;font-size:24px;line-height:1.1;color:var(--ink)}
.tape{position:absolute;width:86px;height:24px;top:-11px;left:50%;transform:translateX(-50%) rotate(-4deg);background:rgba(255,246,207,.8)}
.cassette{border-radius:12px;padding:16px;color:#fff;display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 30px -18px rgba(19,34,75,.6)}
.cassette .lbl{background:var(--sun);color:var(--ink);border-radius:4px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;border-top:5px solid var(--red)}
.cassette .lbl b{font-family:"Caveat",cursive;font-size:30px}
.cassette .lbl span{font-family:var(--mono);font-size:12px}
.reels{display:flex;justify-content:center;gap:56px;padding:14px 0 4px}
.reel{width:42px;height:42px;border-radius:50%;border:4px dotted rgba(255,255,255,.85);animation:spin 5s linear infinite;animation-play-state:paused}
.cassette:hover .reel{animation-play-state:running}
.cassette p{margin:4px 2px 0;font-size:14px;opacity:.85}
#thread{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.memory{position:fixed;z-index:25;pointer-events:none;font-family:"Caveat",cursive;font-size:28px;color:var(--ink);white-space:nowrap;animation:float 3.6s ease-out forwards}
@keyframes float{0%{opacity:0;transform:translate(-50%,0) rotate(-3deg)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) rotate(2deg)}}
@media (max-width:760px){.hero2{grid-template-columns:minmax(0,1fr)}.board{min-height:320px}}
.say{position:fixed;z-index:26;pointer-events:none;transform:translate(-50%,-100%) scale(.6);opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1);background:#fff;color:var(--ink);font-family:"Caveat",cursive;font-size:21px;line-height:1.1;padding:6px 12px;border-radius:12px;box-shadow:0 8px 20px -10px rgba(19,34,75,.5);white-space:normal;max-width:min(320px,calc(100vw - 16px));width:max-content;text-align:center}
.say::after{content:"";position:absolute;left:clamp(14px,calc(50% + var(--tail,0px)),calc(100% - 14px));bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.say.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
.say.below{transform:translate(-50%,0) scale(.6)}.say.below.on{transform:translate(-50%,0) scale(1)}.say.below::after{bottom:auto;top:-6px}
.chat{position:fixed;z-index:27;width:min(290px,calc(100vw - 32px));background:#fff;border-radius:14px;padding:14px;box-shadow:0 20px 40px -18px rgba(19,34,75,.55);border:1px solid rgba(26,90,166,.15);animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
.chat p{margin:0 0 10px;font-family:"Caveat",cursive;font-size:22px;line-height:1.15;color:var(--ink)}
.chat .opts{display:flex;flex-wrap:wrap;gap:6px}
.chat button{font-family:var(--mono);font-size:12px;padding:6px 10px;border-radius:99px;border:1px solid var(--b1);background:var(--sun);color:var(--ink);cursor:pointer}
.chat button:hover{border-color:var(--red);color:var(--red)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
#arena{position:fixed;inset:0;width:100%;height:100%;z-index:28}
body.fighting .say{z-index:31}
.fhud{position:fixed;inset:0;z-index:30;pointer-events:none;font-family:var(--mono);color:#fff6cf}
.fhud .boss{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.fhud .boss b,.fhud .you b{letter-spacing:.2em;font-size:12px}
.fhud .fdiff{justify-self:end;font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.15em}
.fhud .hp{grid-column:1/-1;height:8px;background:rgba(255,246,207,.18);border:1px solid rgba(255,246,207,.5)}
.fhud .hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#d7182a,#ff6b6b);transition:width .2s}
.fhud .you{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:12px}
.fhud .hearts{color:#ff6b6b;font-size:18px;letter-spacing:2px}
.fhud button{pointer-events:auto;font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:99px;border:1px solid rgba(255,246,207,.6);background:rgba(19,34,75,.6);color:#fff6cf;cursor:pointer}
.fhud button:hover{border-color:#d7182a}
.fhud .fend{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;background:rgba(19,34,75,.92);border:1px solid rgba(255,246,207,.4);border-radius:14px;padding:22px 26px;text-align:center;width:min(360px,calc(100vw - 32px))}
.fhud .fend h3{margin:0 0 6px;font-family:var(--display);font-size:26px}
.fhud .fend p{margin:0 0 14px;font-size:13px;opacity:.85}
.fhud .fend .opts{display:flex;gap:8px;justify-content:center}
.slot{position:relative;width:34px;height:30px;border:0;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center}
.slot svg{width:22px;height:22px;overflow:visible}
.slot svg path:first-child{fill:transparent;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:3 2;transition:fill .4s}
.slot .lid{fill:none;stroke:transparent;stroke-width:1.4;stroke-linecap:round}
.slot:hover svg path:first-child{stroke:var(--red)}
.slot.full svg path:first-child{fill:var(--red);stroke:var(--red);stroke-dasharray:none;animation:breathe 3s ease-in-out infinite;transform-origin:12px 12px}
.slot.full .lid{stroke:#fff}
.slot .zz{position:absolute;right:-2px;top:-6px;font-family:"Caveat",cursive;font-size:16px;color:var(--ink);opacity:0}
.slot.full .zz{animation:zz 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.88)}}
@keyframes zz{0%{opacity:0;transform:translate(0,4px)}40%{opacity:1}100%{opacity:0;transform:translate(6px,-10px)}}
.fhud .buffs{font-size:11px;letter-spacing:.12em;color:#8cc8f2}
.fhud .php{width:min(200px,40vw);height:8px;background:rgba(255,246,207,.18);border:1px solid rgba(255,246,207,.5)}.fhud .php i{display:block;height:100%;width:100%;transition:width .2s}
#dim{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity 1.2s;background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),transparent 0,rgba(6,12,28,.5) 60%,rgba(6,12,28,.66))}
#dim.on{opacity:1}#dim.dark{background:radial-gradient(170px circle at var(--sx,50%) var(--sy,50%),transparent 0,rgba(3,6,14,.94) 72%)}
#dim.flicker{animation:flick 1.8s steps(1) 1}
@keyframes flick{0%{opacity:1}10%{opacity:.15}20%{opacity:1}34%{opacity:.35}44%{opacity:1}58%{opacity:.05}68%{opacity:1}}
body.scene #thread{z-index:7}body.scene .say{z-index:28}
body.glitch .sea,body.glitch .shore,body.glitch header{animation:glitch .22s steps(2) infinite}
@keyframes glitch{0%{transform:none;filter:none}25%{transform:translate(-4px,1px) skewX(2deg);filter:hue-rotate(50deg) saturate(1.8)}50%{transform:translate(4px,-2px);filter:invert(.12) hue-rotate(-40deg)}75%{transform:translate(-1px,3px) skewX(-3deg);filter:contrast(1.4)}}
.sob{animation:sob .45s ease-in-out infinite}
@keyframes sob{50%{translate:0 3px;rotate:-1deg}}
#dim.block{pointer-events:auto}
#dim.dim2{background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),transparent 0,rgba(6,12,28,.62) 60%,rgba(6,12,28,.78))}
.unplug{position:fixed;z-index:29;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#fff6cf;background:rgba(19,34,75,.85);border:1px dashed rgba(255,246,207,.6);border-radius:99px;padding:3px 8px}
body.scene,body.scene *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath d='M2 2v17l4.5-4.2 3 6.6 2.6-1.2-3-6.4H15z' fill='%23000' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E") 2 2,default!important}
.unplug.buzz{animation:buzz .35s;color:#fff;background:#d7182a;border-color:#fff}
@keyframes buzz{20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}}
body.glitch2 .sea,body.glitch2 .shore{animation:glitch .12s steps(2) infinite;filter:url(#none) drop-shadow(3px 0 0 rgba(255,0,60,.6)) drop-shadow(-3px 0 0 rgba(0,200,255,.6))}
body.tear .shore{animation:tear .18s steps(1) infinite}
@keyframes tear{0%{clip-path:inset(0 0 60% 0);transform:translateX(-18px)}33%{clip-path:inset(30% 0 30% 0);transform:translateX(22px)}66%{clip-path:inset(60% 0 0 0);transform:translateX(-10px)}}
.err{position:fixed;z-index:8;width:270px;background:#f3f3f3;border:1px solid #888;box-shadow:4px 4px 0 rgba(0,0,0,.35);font-family:var(--mono);font-size:12px;color:#111;animation:errpop .18s ease-out}
.err b{display:block;background:linear-gradient(90deg,#13224b,#3d8fd6);color:#fff;padding:4px 8px;font-weight:500}
.err p{margin:0;padding:12px 10px 6px}
.err span{display:inline-block;margin:0 0 10px 10px;border:1px solid #888;padding:2px 14px;background:#e6e6e6}
@keyframes errpop{from{transform:scale(.6);opacity:0}}
#crt{position:fixed;inset:0;z-index:9;pointer-events:none;background:#fff;opacity:0;transform-origin:center}
#crt.on{animation:crt .7s ease-in forwards}
@keyframes crt{0%{opacity:0;transform:scale(1,1)}15%{opacity:.95;transform:scale(1,1)}55%{opacity:.95;transform:scale(1,.004)}85%{opacity:.9;transform:scale(.25,.004)}100%{opacity:0;transform:scale(0,.004)}}
body.lowbat,body.lowbat *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24'%3E%3Cpath d='M2 2v17l4.5-4.2 3 6.6 2.6-1.2-3-6.4H15z' fill='%23b9bec8' fill-opacity='.7' stroke='%23686e7a' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E") 2 2,default!important}
/* the arrow-power gag is for mouse users only */
.unplug.touch{display:none!important}
/* soundtrack corner */
.deck{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:24;font-family:var(--mono);font-size:12px}
.deck-tab{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;border:1px solid var(--b2);background:color-mix(in srgb,var(--sun) 82%,transparent);backdrop-filter:blur(10px);color:var(--ink);font:inherit;box-shadow:0 10px 24px -14px rgba(19,34,75,.5)}
.eq{display:flex;gap:2px;align-items:flex-end;height:12px}.eq i{width:3px;height:4px;background:var(--b2);border-radius:1px}
.deck.on .eq i{animation:eq .9s ease-in-out infinite}.deck.on .eq i:nth-child(2){animation-delay:-.3s}.deck.on .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.deck-list{position:absolute;left:0;bottom:calc(100% + 8px);width:min(270px,calc(100vw - 28px));background:#fff;border-radius:12px;padding:10px;box-shadow:0 20px 40px -18px rgba(19,34,75,.55);border:1px solid color-mix(in srgb,var(--b2) 25%,transparent)}
.deck-list[hidden]{display:none}
.deck-h{margin:2px 8px 8px;font-weight:600;color:var(--ink)}.deck-h small{display:block;font-weight:400;color:var(--soft)}
.deck-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit}
.deck-row small{color:var(--soft);font-size:11px}
.deck-row:hover{background:color-mix(in srgb,var(--b1) 22%,transparent)}
.deck-row.cur{background:color-mix(in srgb,var(--b1) 35%,transparent)}.deck-row.cur b::before{content:"▶ ";color:#d7182a}
.deck-row.soon{opacity:.55;cursor:default}.deck-row.soon:hover{background:transparent}
@media (prefers-reduced-motion:reduce){.deck.on .eq i{animation:none;height:8px}}

/* the settings menu: Thread first, the old season skins under it */
.skin-set{display:flex;flex-direction:column;gap:6px}
.skin-set small{font:11px var(--mono);letter-spacing:.04em;opacity:.75}
.skin-row{display:flex;flex-wrap:wrap;gap:6px}
.skin-opt{font:13px var(--mono);padding:6px 11px;border-radius:99px;border:1px solid var(--b2);background:transparent;color:inherit;cursor:pointer}
.skin-opt.main{align-self:flex-start;padding:7px 14px}
.skin-opt[aria-pressed=true]{background:#13224b;color:#fff;border-color:#13224b}
.skin-opt.main[aria-pressed=true]{background:#d7182a;border-color:#d7182a}

/* Site desk (assets/js/site.js): the notice bar and the "resting" card of a page that was taken down */
.tz-notice{position:relative;z-index:60;display:flex;gap:10px 14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 46px 9px 16px;font:600 14px/1.35 Geist,system-ui,sans-serif;color:#fff;background:var(--red,#d7182a);text-align:center}
.tz-notice.tone-navy{background:var(--ink,#13224b)}
.tz-notice.tone-sun{background:#ffd23f;color:#13224b}
.tz-notice-star{flex:none;width:14px;height:14px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.tz-notice a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tz-notice button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:15px;cursor:pointer}
.tz-notice button:hover,.tz-notice button:focus-visible{background:rgba(255,255,255,.22);outline:none}
.tz-rest{position:relative;z-index:2;max-width:560px;margin:14vh auto;padding:34px 28px;border:2px solid var(--ink,#13224b);border-radius:18px;background:#fff;box-shadow:8px 8px 0 var(--red,#d7182a);text-align:center;font-family:Geist,system-ui,sans-serif;color:var(--ink,#13224b)}
.tz-rest h1{margin:6px 0 10px;font-size:clamp(24px,5vw,34px);line-height:1.1}
.tz-rest p{margin:0 0 18px}
.tz-rest .tz-rest-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red,#d7182a)}
@media (max-width:640px){.tz-rest{margin:8vh 16px}}