*{box-sizing:border-box}
:root{--bg:#000;--fg:#e8f9ff;--mut:#8a979d;--card:rgba(255,255,255,.07);--bd:rgba(255,255,255,.16);--a:#22e5ff;--b:#ff2bd6;--r:16px;--f:"Avenir Next",Futura,system-ui,sans-serif;--sh:none;--bl:blur(14px);color-scheme:dark;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[data-theme=vintage]{--bg:#2a1d12;--fg:#f3e2c3;--mut:#b49a73;--card:#3a2917;--bd:#5b4126;--a:#ffb347;--b:#d96b2b;--r:24px;--f:Georgia,"Palatino Linotype",serif;--sh:6px 6px 14px #1a1109,-4px -4px 10px #46321d;--bl:none}
[data-theme=paper]{--bg:#f4f1ea;--fg:#111;--mut:#555;--card:#fff;--bd:#111;--a:#111;--b:#ff4d2e;--r:0px;--f:"Helvetica Neue",Arial,sans-serif;--sh:4px 4px 0 #111;--bl:none;color-scheme:light}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:radial-gradient(50% 45% at 15% 5%,var(--m1,transparent),transparent),radial-gradient(45% 45% at 90% 25%,var(--m2,transparent),transparent),var(--bg);background-attachment:fixed;color:var(--fg);font:16px/1.5 var(--f)}
[data-theme=vintage] body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background:repeating-radial-gradient(circle at 30% 30%,#000 0 1px,transparent 1px 3px)}
a{color:inherit}h1{font-size:clamp(2rem,6vw,4.2rem);line-height:1;margin:.3em 0}h2{margin:1.6em 0 .5em}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:10px 4vw;background:var(--bg);border-bottom:1px solid var(--bd)}
.logo{font-weight:800;text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:4px 14px;flex:1}nav a{text-decoration:none;color:var(--mut);padding:2px 0;border-bottom:2px solid transparent}nav a.on{color:var(--fg);border-color:var(--b)}
.ctl{display:flex;gap:6px;align-items:center}main{padding:0 4vw 60px;max-width:1200px;margin:auto}
button,input,select,textarea{font:inherit;color:inherit}
.btn,.chip,.ic{background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r)/2);padding:6px 12px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.btn:hover,.chip:hover{background:var(--a);color:var(--bg)}.chip.on,.ic.on{background:var(--b);color:#fff;border-color:var(--b)}.ic{padding:2px 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
input[type=text],input:not([type]),select,textarea{background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:6px 10px;min-width:0}textarea{width:100%;margin:8px 0}
:focus-visible{outline:2px solid var(--b);outline-offset:2px}.mut,small{color:var(--mut)}
.hero{padding:7vh 0 2vh}.kin em{font-style:normal;background:linear-gradient(90deg,var(--a),var(--b),var(--a));background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 5s linear infinite}@keyframes sh{to{background-position:200%}}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:12px;backdrop-filter:var(--bl);transition:transform .3s cubic-bezier(.2,.8,.2,1)}.card:hover{transform:translateY(-5px)}
.card b{display:block;margin-top:8px}.card .row{justify-content:space-between}
.cv{aspect-ratio:1;border-radius:calc(var(--r)/2);position:relative;overflow:hidden}.cv.sm{width:84px;height:84px}
.disc{position:absolute;right:-30%;top:10%;width:80%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(#111 0 2px,#262626 3px 4px);transition:transform .7s}.card:hover .disc{transform:translateX(-30%) rotate(360deg)}
.shelf{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 18px;scroll-snap-type:x mandatory}.shelf .card{flex:0 0 200px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.slot{display:flex;align-items:center;gap:20px;padding:16px;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);width:fit-content;max-width:100%}.reels{display:flex;gap:10px}
.lever{width:16px;height:90px;border:0;border-radius:8px;background:var(--b);cursor:pointer;transform-origin:50% 10%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.lever.pl{transform:rotate(-35deg) scaleY(.8)}
#sw{width:100%;height:auto}#sw circle{cursor:pointer;transition:opacity .3s,r .2s}#sw circle:hover{r:12}#sw line{stroke:var(--bd)}
details{margin:14px 0}summary{cursor:pointer;font-weight:700}label{display:inline-flex;gap:6px;align-items:center;margin:4px 12px 4px 0}
.alb{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:28px;padding-top:20px}@media(max-width:700px){.alb{grid-template-columns:1fr}}
.tilt{transition:transform .15s;box-shadow:var(--sh)}.gl{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 55%)}
.tl{padding-left:1.2em}.tl li{padding:4px 0;border-bottom:1px solid var(--bd)}.tl small{margin-left:10px}
.tt{position:relative;width:300px;height:300px;max-width:100%;border:1px solid var(--bd);border-radius:var(--r);background:var(--card);box-shadow:var(--sh);touch-action:none}
.plat{position:absolute;left:15px;top:35px;width:250px;height:250px;border-radius:50%;background:#1a1a1a;display:grid;place-items:center}
.vinyl{width:230px;height:230px;border-radius:50%;background:repeating-radial-gradient(#0c0c0c 0 2px,#242424 3px 4px);display:grid;place-items:center}.vinyl i{width:80px;height:80px;border-radius:50%;display:block}
.vinyl.spin{animation:sp calc(1.8s/var(--p,1)) linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.arm{position:absolute;right:18px;top:18px;width:10px;height:190px;border-radius:6px;background:var(--fg);transform-origin:50% 8px;transform:rotate(var(--ang,-5deg));cursor:grab;transition:transform .3s}.arm:active{transition:none}.arm b{position:absolute;bottom:-6px;left:-6px;width:22px;height:18px;background:var(--b);border-radius:4px}
.meter{height:12px;background:var(--card);border:1px solid var(--bd);position:relative;margin:4px 0 12px}.meter i{position:absolute;inset:0 auto 0 0;background:var(--a)}.meter s{position:absolute;top:-4px;bottom:-4px;left:50%;width:2px;background:var(--b)}
canvas{width:100%;height:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--card)}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px}.pads button{height:64px}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:grid;place-items:start center;padding-top:14vh}#ov[hidden]{display:none}.md{background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:16px;width:min(560px,92vw)}.md input{width:100%}
.ri{padding:8px;border-radius:6px;cursor:pointer}.ri.on,.ri:hover{background:var(--b);color:#fff}
footer{padding:20px 4vw 40px;color:var(--mut);display:flex;gap:14px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--bd)}
#cur{position:fixed;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid var(--a);pointer-events:none;z-index:99;mix-blend-mode:difference;transition:width .2s,height .2s,margin .2s}#cur.big{width:42px;height:42px;margin:-12px 0 0 -12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.logo{white-space:nowrap;letter-spacing:.2em;font-size:14px}.logo i{font-style:normal;color:var(--b);margin:0 .5em;display:inline-block;animation:sp 6s linear infinite}
header{justify-content:space-between}nav{flex:1 1 340px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:4px 20px}.ctl{margin-left:auto;gap:10px}
select.btn{padding:6px 10px}
.vol{display:flex;align-items:center;gap:8px;padding:3px 14px 3px 6px;border:1px solid var(--bd);border-radius:999px;background:var(--card)}.vol .ic{border:0;background:none;padding:4px;display:grid;place-items:center;border-radius:50%}
.vol input{-webkit-appearance:none;appearance:none;width:88px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--b) var(--v,60%),var(--bd) var(--v,60%));cursor:pointer}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--b)}.vol input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--fg);border:2px solid var(--b)}
.mu .x{display:none}.mu.off .w{display:none}.mu.off .x{display:block}
.hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}@media(max-width:760px){.hero{grid-template-columns:1fr}}
.sqg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:min(270px,72vw)}.sqg span{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--bd);border-radius:calc(var(--r)/4);font-weight:800;animation:pz 5s var(--d) infinite}@keyframes pz{45%,55%{background:var(--b);color:#fff}}
.mq{display:flex;gap:8px;flex-wrap:wrap}.mq input{flex:1 1 260px;font-size:1.05rem;padding:10px 14px}
.hint{color:var(--mut);max-width:64ch;margin:.3em 0 1em}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pads{grid-template-columns:repeat(5,1fr);max-width:340px}.pads .btn{height:54px;font-weight:800}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.card{border-radius:calc(var(--r)*1.6) calc(var(--r)*.4) calc(var(--r)*1.6) calc(var(--r)*.4)}.grid{align-items:start}.grid>div:nth-child(2n){margin-top:12px}
.logo svg{vertical-align:middle;margin-right:8px;animation:sp 8s linear infinite}
.vinyl{background:none;border-radius:0}.vinyl svg{display:block;max-width:100%;height:auto}.plat{border-radius:26%}
.sv{display:grid;place-items:center}.sv.spin svg{animation:sp .6s linear infinite}
.gstat{gap:26px}.tbar{height:8px;background:var(--card);border:1px solid var(--bd);margin:12px 0}.tbar i{display:block;height:100%;width:100%;background:var(--b)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.opts .btn{text-align:left;padding:12px}.btn.ok{background:#1faa59;color:#fff;border-color:#1faa59}.btn.no{background:#d33;color:#fff;border-color:#d33}
.gm{padding:18px;max-width:760px}.gm.win{animation:wn .6s}.gm.lose{animation:ls .45s}@keyframes wn{50%{box-shadow:0 0 0 8px var(--a)}}@keyframes ls{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.mqe{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--bd);font-size:11px;letter-spacing:.3em;color:var(--mut);padding:4px 0}.mqe div{display:inline-block;animation:mqs 40s linear infinite}@keyframes mqs{to{transform:translateX(-50%)}}
:root{--on:#fff}
body{font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
header{padding:12px clamp(16px,5vw,56px);gap:12px 28px}
.logo{display:flex;align-items:center;gap:12px;letter-spacing:.38em;font-size:15px}.logo svg{margin:0;animation:sp 10s linear infinite}
nav{gap:6px 26px}nav a{padding:6px 0;font-size:14px;letter-spacing:.04em}
main{padding:0 clamp(16px,5vw,56px) 96px;max-width:1240px}
h1{font-size:clamp(2.2rem,5.6vw,4rem);margin:.45em 0 .35em;letter-spacing:-.02em}
h2{font-size:1.25rem;margin:3.2rem 0 .5rem;letter-spacing:.02em}
.hint{margin:.2rem 0 1.5rem;font-size:15px}
.hero{padding:7vh 0 2rem;gap:56px}.hero .hint{margin-bottom:1.6rem}
.chips{gap:10px;margin:18px 0}.row{gap:12px;margin:12px 0}
.btn,.chip,.ic{padding:8px 16px;font-size:14px}.chip{padding:6px 14px;font-size:13px}.ic{padding:6px 10px}
.chip.on,.ic.on,.ri.on,.ri:hover{color:var(--on)}
.card{padding:18px}.card b{margin-top:10px}
.grid{gap:22px}.shelf{gap:20px;padding:10px 4px 22px}.cols{gap:20px}.steps{gap:18px}
.slot{padding:22px 26px;gap:28px}.tl li{padding:8px 0}.alb{gap:44px;padding-top:28px}
footer{padding:28px clamp(16px,5vw,56px) 44px;margin-top:40px}
.mq input{padding:12px 18px}label{margin:6px 16px 6px 0}.meter{margin:6px 0 18px}
.pads{grid-template-columns:repeat(4,1fr);max-width:380px}
.dd{position:relative}.ddb{display:flex;align-items:center;gap:8px}
.ddm{position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:210px;padding:6px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh),0 20px 40px rgba(0,0,0,.35)}.ddm[hidden]{display:none}
.ddm button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:9px 10px;border-radius:calc(var(--r)/2);cursor:pointer;text-align:left}.ddm button:hover,.ddm button.on{background:var(--card)}
.ddm i{width:22px;height:22px;border-radius:50%;border:1px solid var(--bd);flex:none}
@media(max-width:700px){#thn{display:none}}
.orbit{position:relative;width:min(320px,76vw);aspect-ratio:1;display:grid;place-items:center;margin:auto}.orbit::before{content:"";position:absolute;inset:7%;border:1px dashed var(--bd);border-radius:50%}
.hub{animation:sp 9s linear infinite;filter:drop-shadow(0 0 28px var(--b))}.hub svg{display:block}
.ring{position:absolute;inset:0;animation:sp 60s linear infinite}.ring i{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(min(150px,36vw))}
.ring b{position:absolute;display:block;transform:rotate(calc(-1*var(--a)));margin:-16px 0 0 -30px}.ring button{animation:sp 60s linear infinite reverse;white-space:nowrap;background:var(--bg)}
.arch{font-size:1.6rem;font-weight:800;margin:.3em 0 .6em}.tg div{display:flex;align-items:center;gap:10px;font-size:12px;margin:5px 0}.tg span{width:58px}.tg i{display:block;height:8px;background:var(--b);border-radius:4px}
[data-theme=neon]{--bg:#0a0418;--fg:#f5e9ff;--mut:#a08bc4;--card:rgba(255,255,255,.06);--bd:rgba(255,64,200,.35);--a:#00f0ff;--b:#ff2bd6;--r:18px;--sh:0 0 26px rgba(255,43,214,.22);--bl:blur(14px)}
[data-theme=forest]{--bg:#0e1712;--fg:#e8efdc;--mut:#8fa38a;--card:#16241b;--bd:#2c4535;--a:#b7d36a;--b:#e0a458;--r:30px;--f:Georgia,"Palatino Linotype",serif;--sh:0 14px 30px rgba(0,0,0,.35);--bl:none;--on:#0e1712}
[data-theme=terminal]{--bg:#020a04;--fg:#9dff9d;--mut:#4fa84f;--card:#04140a;--bd:#1d6b2c;--a:#39ff14;--b:#00ffa3;--r:0px;--f:"SF Mono",Menlo,Consolas,monospace;--sh:none;--bl:none;--on:#021}
[data-theme=terminal] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:59;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
[data-theme=sunset]{--bg:#25103a;--fg:#ffe9d6;--mut:#d19aa6;--card:rgba(255,255,255,.09);--bd:rgba(255,170,120,.32);--a:#ffb26b;--b:#ff5e7e;--r:22px;--sh:0 12px 34px rgba(20,0,30,.4);--bl:blur(12px);--on:#2a0f3a}
[data-theme=sunset] body{background:radial-gradient(50% 45% at 15% 5%,var(--m1,transparent),transparent),radial-gradient(45% 45% at 90% 25%,var(--m2,transparent),transparent),linear-gradient(180deg,#25103a,#6b2759 60%,#c4506a);background-attachment:fixed}
[data-theme=blueprint]{--bg:#0b2a5b;--fg:#eaf3ff;--mut:#9db9e6;--card:rgba(255,255,255,.05);--bd:rgba(255,255,255,.35);--a:#fff;--b:#ffd24a;--r:2px;--f:"IBM Plex Mono",Menlo,Consolas,monospace;--sh:none;--bl:none;--on:#0b2a5b}
[data-theme=blueprint] body{background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/32px 32px,#0b2a5b;background-attachment:fixed}
[data-theme=lavender]{--bg:#efe9ff;--fg:#2a1f4d;--mut:#6f6396;--card:#fff;--bd:#cdbff2;--a:#6c4cf5;--b:#ff7ab8;--r:26px;--sh:0 10px 28px rgba(108,76,245,.15);--bl:none;--on:#2a1f4d;color-scheme:light}
/* room */
#pc{position:fixed;inset:0;z-index:-1;pointer-events:none}
#lamp{position:fixed;inset:0;z-index:55;pointer-events:none;background:radial-gradient(ellipse at 50% 15%,rgba(255,190,110,calc(var(--lamp,.25)*.3)),transparent 60%),radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,calc(var(--lamp,.25)*.6)) 100%)}
html.crt::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:58;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.clk{font:600 13px "SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;color:#ffb347;text-shadow:0 0 8px rgba(255,179,71,.7);background:#0b0805;border:1px solid var(--bd);border-radius:6px;padding:6px 10px;cursor:pointer;min-width:78px;text-align:center}
.dock{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;background:var(--bg);color:var(--fg);border:1px solid var(--bd);box-shadow:var(--sh),0 8px 24px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center}
.room{position:fixed;left:18px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:40;width:min(330px,calc(100vw - 36px));max-height:68vh;overflow:auto;padding:18px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh),0 20px 40px rgba(0,0,0,.4)}.room[hidden]{display:none}
.room b{display:block;margin:10px 0 4px}.rr{display:flex;align-items:center;gap:12px;margin:10px 0}.rr input{flex:1;min-width:0}.rr .chip{min-width:132px;text-align:left}
.note{position:fixed;z-index:70;width:240px;background:#ffe98a;color:#3b2f00;border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.45);transform:rotate(-1.5deg)}.note[hidden]{display:none}
.nh{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;font-weight:700;font-size:13px;cursor:grab;border-bottom:1px dashed rgba(59,47,0,.35);touch-action:none}
.note textarea{width:100%;height:170px;margin:0;background:transparent;border:0;resize:none;color:#3b2f00;padding:10px 12px;font:14px/1.5 "Bradley Hand","Segoe Print",cursive}.note .ic{background:none;border:0;color:#3b2f00;padding:2px 6px}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:80;background:var(--bg);color:var(--fg);border:1px solid var(--bd);padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.4)}#toast.show{opacity:1;transform:translate(-50%,0)}
kbd{font:12px "SF Mono",Menlo,monospace;border:1px solid var(--bd);border-bottom-width:2px;border-radius:4px;padding:0 5px;margin:0 2px}
.bpm{position:absolute;left:8px;top:8px;z-index:2;font-style:normal;font-size:11px;padding:2px 9px;background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:99px}
.sl{aspect-ratio:1;position:relative;perspective:900px}.sl-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}.sl-in.f{transform:rotateY(180deg)}
.sl .front,.sl .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.sl .back{transform:rotateY(180deg);background:var(--card);border:1px solid var(--bd);border-radius:calc(var(--r)/2);padding:20px;overflow:auto}.bk{padding-left:1.1em;margin:.6em 0}
.gm{position:relative;overflow:hidden}.gwrap{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:26px;align-items:start}@media(max-width:640px){.gwrap{grid-template-columns:1fr}}.gcv{width:100%;transition:filter .1s linear}
.cf{position:absolute;left:30%;top:40%;width:8px;height:12px;animation:cf 1.2s ease-out forwards;pointer-events:none}@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(540deg);opacity:0}}
li[draggable=true]{cursor:grab}.sl3{gap:18px}
/* retro */
h1,h2,.arch,.logo{font-family:var(--fh,var(--f))}
[data-theme=retro]{--bg:#f2e9d6;--fg:#2a2118;--mut:#7b6b57;--card:#fbf6ea;--bd:rgba(42,33,24,.3);--a:#2f6f6a;--b:#d4572f;--r:22px;--f:"Avenir Next","Helvetica Neue",system-ui,sans-serif;--fh:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sh:0 1px 0 rgba(255,255,255,.8) inset,0 14px 30px rgba(90,60,20,.14);--bl:none;--on:#fff;color-scheme:light}
[data-theme=retro] h1{font-weight:700;letter-spacing:-.03em}[data-theme=retro] .chip{text-transform:uppercase;letter-spacing:.09em;font-size:11px}[data-theme=retro] .card{border-width:1.5px}
/* motion */
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.kin{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}.kin em{display:inline-block;animation:rise .9s .3s cubic-bezier(.2,.8,.2,1) both,sh 5s linear infinite}
.rv{opacity:0;translate:0 22px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;translate:0 0}
h2::after{content:"";display:block;width:64px;height:2px;background:var(--b);margin-top:8px;transform-origin:left;transition:transform .8s .2s}h2.rv:not(.in)::after{transform:scaleX(0)}
.pg{animation:pg .5s cubic-bezier(.2,.8,.2,1)}@keyframes pg{from{opacity:0;transform:translateY(14px)}}
#sp{position:fixed;top:0;left:0;height:3px;width:calc(var(--sp,0)*100%);background:linear-gradient(90deg,var(--a),var(--b));z-index:95;pointer-events:none}
#aur{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}#aur i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(80px);opacity:.55;animation:dr1 30s ease-in-out infinite alternate}
#aur i:first-child{left:-12vmax;top:-12vmax;background:var(--m1,transparent)}#aur i:last-child{right:-16vmax;bottom:-16vmax;background:var(--m2,transparent);animation-duration:38s;animation-delay:-12s}@keyframes dr1{to{transform:translate(14vmax,9vmax) scale(1.25)}}
.orbit{translate:0 calc(var(--sy,0)*-.12px)}.orbit::after{content:"";position:absolute;inset:14%;z-index:-1;background:linear-gradient(135deg,var(--a),var(--b));opacity:.22;filter:blur(24px);animation:mb 10s ease-in-out infinite alternate}
@keyframes mb{0%{border-radius:42% 58% 63% 37%/45% 40% 60% 55%}50%{border-radius:61% 39% 35% 65%/58% 62% 38% 42%}100%{border-radius:38% 62% 55% 45%/40% 55% 45% 60%}}
.hub{filter:drop-shadow(0 0 calc(24px + var(--pu,0)*70px) var(--b));scale:calc(1 + var(--pu,0)*.08)}
.gr{stroke-dasharray:1;stroke-dashoffset:1;animation:dr 1.5s ease forwards}@keyframes dr{to{stroke-dashoffset:0}}
.btn,.chip,.ic{position:relative;overflow:hidden}.rp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;opacity:.35;animation:rpl .6s ease-out forwards;pointer-events:none}@keyframes rpl{to{transform:scale(18);opacity:0}}
.pop{animation:pp .45s}@keyframes pp{40%{transform:scale(1.6)}}
.mu.pl .w{animation:wv .9s ease-in-out infinite alternate}@keyframes wv{from{opacity:.2}to{opacity:1}}
nav a{position:relative;border-bottom:0}nav a.on{border:0}nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .35s}nav a:hover::after,nav a.on::after{transform:scaleX(1)}
.sk{height:12px;border-radius:6px;margin:9px 0;background:linear-gradient(90deg,var(--card),var(--bd),var(--card));background-size:200%;animation:sh 1.2s linear infinite}
#splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s,visibility .6s}#splash.out{opacity:0;visibility:hidden}#splash svg{animation:sp 3s linear infinite}#splash b{letter-spacing:.55em;font-family:var(--fh,var(--f))}
@media(prefers-reduced-motion:reduce){.gr{stroke-dashoffset:0!important}.rv{opacity:1!important;translate:none!important}}
/* fixes */
h1{line-height:1.1}.kin em{padding-bottom:.16em;margin-bottom:-.16em}
[data-theme=retro] body{background:radial-gradient(50% 45% at 15% 5%,var(--m1,transparent),transparent),radial-gradient(45% 45% at 90% 25%,var(--m2,transparent),transparent),radial-gradient(70% 50% at 100% 0%,#f6d5d5,transparent 70%),radial-gradient(60% 45% at 0% 40%,#ffd9b0,transparent 70%),linear-gradient(180deg,#f9efe4,#f5dfcc 50%,#ecc9c0 80%,#d7cbe6);background-attachment:fixed}
[data-theme=retro] .card{background:rgba(251,246,234,.78);backdrop-filter:blur(6px)}
#aur{filter:hue-rotate(calc(var(--sp,0)*80deg))}
/* page art */
#art{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ar{position:absolute;translate:0 calc(var(--sy,0)*var(--k,0)*1px);rotate:calc(var(--sy,0)*var(--r,0)*1deg);will-change:translate}
.sun{width:44vmin;height:44vmin;border-radius:50%;background:linear-gradient(180deg,#ffb88a,#ff7f9e 70%,#e48ad0);opacity:.5}
.wv{left:0;right:0;height:90px;background:repeating-radial-gradient(circle at 50% 100%,transparent 0 14px,var(--bd) 14px 15px);opacity:.5}
.dots{width:240px;height:240px;background:radial-gradient(var(--b) 1.5px,transparent 2px) 0 0/20px 20px;opacity:.25}
.ck{width:var(--w,180px);height:var(--w,180px);background:conic-gradient(var(--b) 25%,transparent 0 50%,var(--b) 0 75%,transparent 0) 0 0/30px 30px;opacity:.15}
.beam{width:2px;height:70vh;background:linear-gradient(var(--b),transparent);opacity:.35}
.tab{width:90px;height:230px;border-radius:14px 14px 0 0;opacity:.16}
.osc{inset:0;background:linear-gradient(var(--bd) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--bd) 1px,transparent 1px) 0 0/48px 48px;opacity:.5}
.sine{left:0;top:40vh;width:100%;height:160px;opacity:.28}
.big{font:800 34vw/1 var(--fh,var(--f));-webkit-text-stroke:2px var(--bd);color:transparent;white-space:nowrap}
/* footer */
footer{display:block;margin-top:96px;padding:0 0 28px;background:#2a2722;color:#efe6d3;border:0;position:relative}
footer::before{content:"";display:block;height:12px;background:repeating-linear-gradient(-45deg,#efe6d3 0 1px,transparent 1px 8px);opacity:.3}
.fw{padding:48px clamp(16px,5vw,56px) 20px;display:grid;grid-template-columns:minmax(150px,.8fr) 1.4fr 1.1fr 1.2fr 1fr;gap:36px 28px;max-width:1400px;margin:auto}
@media(max-width:1000px){.fw{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fw{grid-template-columns:1fr}}
footer h4{margin:0 0 12px;font:400 14px var(--f);letter-spacing:.08em;text-transform:uppercase;color:#b9b0a0}
footer a,.fb2,.fl2{display:block;color:#fff;text-decoration:none;margin:7px 0;font-size:15px}footer a:hover,.fb2:hover{text-decoration:underline}
footer small{color:#9f968a;margin-left:8px;font-size:12px}.fn small{margin:0;display:block}.fn b{font:700 1.4rem var(--fh,var(--f));display:block;margin:2px 0 10px}
.fb2{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.fy{padding:0 clamp(16px,5vw,56px);color:#9f968a;font-size:13px;max-width:1400px;margin:auto;display:flex;flex-wrap:wrap;gap:6px 20px}.fy b{color:#efe6d3}
/* windows */
.win{padding:0;overflow:hidden}.wt{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1.5px solid var(--bd);background:linear-gradient(var(--card),var(--bd));font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.wt i{width:10px;height:10px;border-radius:50%;background:var(--b)}.wt i:nth-child(2){background:#e9b84a}.wt i:nth-child(3){background:var(--a)}.wt span{margin-left:8px;color:var(--mut)}.wb{padding:16px}
.gm::before,.room::before{content:"● ● ●   " attr(data-t);display:block;margin:-18px -18px 16px;padding:8px 14px;border-bottom:1.5px solid var(--bd);font-size:11px;letter-spacing:.12em;color:var(--mut);background:linear-gradient(var(--card),var(--bd))}
.gm::before{content:"● ● ●   SONG GUESSER"}.room::before{content:"● ● ●   SOUNDSCAPE"}
/* story */
.sc{display:grid;grid-template-columns:minmax(120px,.5fr) 1.1fr 1.2fr;gap:28px;align-items:center;margin:0 0 6rem}.sc.r{grid-template-columns:1.2fr 1.1fr minmax(120px,.5fr)}.sc.r .cn{order:3;text-align:right}.sc.r .sw{order:2}.sc.r .card{order:1}
@media(max-width:820px){.sc,.sc.r{grid-template-columns:1fr}.sc.r .cn,.sc.r .sw,.sc.r .card{order:unset;text-align:left}}
.cn{font:800 clamp(4rem,12vw,9rem)/.9 var(--fh,var(--f));-webkit-text-stroke:2px var(--bd);color:transparent}.sw h3,.ch h3{font:700 clamp(1.6rem,3.4vw,2.6rem)/1.1 var(--fh,var(--f));margin:.1em 0 .3em}
.dm{font:15px "SF Mono",Menlo,monospace;min-height:1.6em;margin-bottom:12px}.dm u{display:inline-block;width:8px;height:1.1em;background:var(--b);vertical-align:-2px;animation:bk 1s steps(1) infinite}@keyframes bk{50%{opacity:0}}
.eq{display:flex;gap:4px;align-items:flex-end;height:70px}.eq i{flex:1;background:var(--b);border-radius:3px;animation:eq 1s ease-in-out infinite alternate}.eq i:nth-child(2n){animation-duration:.7s;background:var(--a)}.eq i:nth-child(3n){animation-duration:1.3s}@keyframes eq{from{height:12%}to{height:100%}}
.lst div{padding:8px 0;border-bottom:1px dashed var(--bd);animation:sl 4s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}@keyframes sl{0%{opacity:0;translate:-16px 0}12%,80%{opacity:1;translate:0 0}100%{opacity:0}}
.spin{display:grid;place-items:center}.spin svg{animation:sp 2.4s linear infinite}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}.nums b{display:block;font:800 clamp(2.6rem,6vw,4.4rem)/1 var(--fh,var(--f))}.nums span{color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.meter i.rv,.tlx.rv{translate:none;opacity:1}.meter i{transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
/* deep dive */
.st{font:700 clamp(2rem,5vw,3.6rem)/1.05 var(--fh,var(--f));letter-spacing:-.02em;margin:.2em 0}
.story2{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:56px}.stick{position:sticky;top:120px;align-self:start;text-align:center}.ch{margin:0 0 8rem;min-height:36vh}
@media(max-width:820px){.story2{grid-template-columns:1fr}.stick{position:relative;top:0}}
.pp .chip{opacity:0;scale:.6;transition:opacity .5s,scale .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i)*90ms)}.ch.in .pp .chip{opacity:1;scale:1}
.tlx{position:relative;height:56px;margin:18px 0}.tlx::before{content:"";position:absolute;left:0;right:0;top:26px;height:2px;background:var(--bd)}
.tlx i{position:absolute;left:0;top:26px;height:2px;width:var(--p);background:var(--b);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}.tlx.in i{transform:scaleX(1)}
.tlx b{position:absolute;top:10px;left:var(--p);transform:translateX(-50%);background:var(--b);color:var(--on);padding:2px 10px;border-radius:99px;font-size:12px;opacity:0;transition:opacity .6s 1.1s}.tlx.in b{opacity:1}
/* enter */
#splash p{color:var(--mut);margin:0}
/* art 2 */
:root{--c3:#ffd24a;--c4:#ff7ab8}
[data-theme=retro]{--c3:#e4a93a;--c4:#f2a7b8;--rf:var(--b);--gs:#fff6e6}
[data-theme=retro] body{background:radial-gradient(50% 45% at 15% 5%,var(--m1,transparent),transparent),radial-gradient(45% 45% at 90% 25%,var(--m2,transparent),transparent),radial-gradient(65% 45% at 100% 0%,#f4b9c4,transparent 70%),radial-gradient(60% 50% at 0% 45%,#ffcf9e,transparent 70%),radial-gradient(55% 40% at 70% 100%,#b9d9d0,transparent 70%),linear-gradient(180deg,#faefe0,#f6dcc6 45%,#eec1b8 78%,#cfc3e6);background-attachment:fixed}
#art svg>rect:first-child{fill:var(--rf,#0c0c0c)}#art .gr{stroke:var(--gs,#4a4a4a)}
.sun{width:42vmin;height:42vmin;border-radius:50%;background:linear-gradient(180deg,var(--c3),var(--b) 70%,var(--c4));opacity:.38}
.rbow{width:46vmin;height:23vmin;border:16px solid var(--c3);border-bottom:0;border-radius:46vmin 46vmin 0 0;box-shadow:0 0 0 16px var(--b),0 0 0 32px var(--c4);clip-path:inset(-60px -60px 0 -60px);opacity:.3}
.halft{width:230px;height:230px;background:radial-gradient(var(--b) 2px,transparent 2.6px) 0 0/14px 14px;-webkit-mask:radial-gradient(circle at 40% 40%,#000,transparent 70%);mask:radial-gradient(circle at 40% 40%,#000,transparent 70%);opacity:.35}
.spk{font:400 56px/1 serif;color:var(--b);opacity:.4}
.stripe{width:210px;height:90px;border-radius:50px;background:repeating-linear-gradient(45deg,var(--c3) 0 10px,transparent 10px 20px);opacity:.3}
.dring{width:240px;height:240px;border-radius:50%;border:2px dashed var(--a);opacity:.3}
.qm{font:800 220px/1 var(--fh,var(--f));color:transparent;-webkit-text-stroke:3px var(--b);opacity:.15}
.radar{width:44vmin;height:44vmin;border-radius:50%;background:conic-gradient(from 0deg,var(--a),transparent 28%);-webkit-mask:radial-gradient(circle,transparent 18%,#000 19%);mask:radial-gradient(circle,transparent 18%,#000 19%);opacity:.18;animation:sp 9s linear infinite}
.osc{-webkit-mask:radial-gradient(circle at 50% 40%,#000,transparent 85%);mask:radial-gradient(circle at 50% 40%,#000,transparent 85%)}
.sine{width:100%;height:120px;opacity:.18}.sine path{animation:swv 8s linear infinite}@keyframes swv{to{transform:translateX(-300px)}}
.floor{position:absolute;left:-20%;right:-20%;bottom:0;height:46vh;background:linear-gradient(var(--b) 1px,transparent 1px) 0 0/100% 44px,linear-gradient(90deg,var(--b) 1px,transparent 1px) 0 0/64px 100%;transform:perspective(380px) rotateX(64deg);transform-origin:50% 100%;opacity:.35;animation:fl 1.6s linear infinite;-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000)}@keyframes fl{to{background-position:0 44px,0 0}}
/* deep dive 2 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.tiles b{display:block;font:800 2rem/1.1 var(--fh,var(--f))}.tiles span{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.rd{transform-origin:110px 110px;transform:scale(0);transition:transform 1.2s cubic-bezier(.3,1.4,.5,1)}.sc.in .rd{transform:scale(1)}
.pal{height:84px;border-radius:calc(var(--r)/2);margin-bottom:14px}
.rl{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--bd);text-decoration:none}.rl small{color:var(--mut)}
.ssl{display:flex;align-items:center;gap:12px;margin:14px 0}.ssl span{width:90px;font-size:13px}.ssl i{flex:1;height:4px;background:var(--bd);border-radius:2px;position:relative}.ssl i::after{content:"";position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--b);animation:ts 3s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes ts{from{left:5%}to{left:90%}}
.lw{animation:lw 2s linear infinite}@keyframes lw{to{transform:translateX(-75px)}}
#gh div{padding:7px 0;border-bottom:1px dashed var(--bd)}
.card{background:linear-gradient(var(--card),var(--card)),color-mix(in srgb,var(--bg) 70%,transparent)}[data-theme=retro] .card{background:rgba(251,246,234,.88)}.card p b,.card small b{display:inline;margin:0}
.osc{background-position:0 calc(var(--sy,0)*-.4px),0 calc(var(--sy,0)*-.4px)}