:root{--ink: #0c0619;--ink2: #170d2c;--glass: rgba(18, 10, 36, .78);--hair: rgba(214, 196, 255, .34);--cream: #fff3dc;--lilac: #d9b8ff;--amber: #ffc46a;--rose: #ff7f8f;--cyan: #6ec6ff;--mint: #7af0b6;--static: #9a96a6;--serif: "Didot", "Bodoni 72", "Bodoni MT", "Big Caslon", "Noto Serif Display", "Times New Roman", serif;--mono: "Menlo", "Andale Mono", "Lucida Console", "DejaVu Sans Mono", ui-monospace, monospace}html,body{background:#05030b;color:var(--cream);font-family:var(--mono)}.stage{background:var(--ink)}.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none}.btn{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;border:0;color:var(--cream);text-decoration:none;background:var(--glass);border-radius:3px;box-shadow:inset 0 0 0 1px var(--hair);transition:transform .12s ease,box-shadow .2s ease}.btn:active{transform:scale(.92);box-shadow:inset 0 0 0 1px var(--lilac)}.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mute .spk{fill:currentColor;stroke:none}.mute .off,.mute[aria-pressed=true] .wav{display:none}.mute[aria-pressed=true] .off{display:inline}.mute[aria-pressed=true]{color:#fff3dc80}.board{display:flex;flex-direction:column;align-items:center}.score{min-width:4ch;padding:0 14px;text-align:center;font:italic 400 34px/1 var(--serif);letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--cream);text-shadow:0 0 14px rgba(217,184,255,.45);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}.score.pop{transform:scale(1.1)}.meta{display:flex;gap:8px;margin-top:5px;align-items:center}.mult{min-width:3.2ch;padding:2px 6px;text-align:center;font:600 12px/1.3 var(--mono);color:var(--lilac);background:var(--glass);border-radius:2px;box-shadow:inset 0 0 0 1px var(--hair);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}.mult.hot{color:#1a0f2c;background:linear-gradient(90deg,var(--amber),var(--rose),#c48cff);box-shadow:none}.mult.pop{transform:scale(1.3)}.meter{position:relative;width:112px;height:12px;background:var(--glass);border-radius:1px;box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}.meter:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 27px,rgba(214,196,255,.35) 27px 28px)}.meter .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:repeating-linear-gradient(-45deg,#c8c4d2 0 2px,#6e6a7c 2px 4px);transition:width .15s linear}.meter .warn{position:absolute;right:3px;top:-1px;font:700 11px/14px var(--mono);color:#fff;opacity:0}.meter.high{box-shadow:inset 0 0 0 1px #fff;animation:hum .5s ease-in-out infinite alternate}.meter.high .warn{opacity:1}@keyframes hum{to{box-shadow:inset 0 0 0 1px var(--rose)}}.title,.card,.paused,.sheet{position:absolute;z-index:2;text-align:center}.title,.card,.paused{pointer-events:none}.sheet{inset:0;z-index:4;display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));background:#05030b99}.plate{position:relative;width:min(316px,calc(100vw - 40px));margin:0 auto;padding:20px 20px 16px;color:var(--cream);background:linear-gradient(180deg,#1c1036e6,#0a0616eb);border-radius:2px;box-shadow:inset 0 0 0 1px var(--hair),0 24px 60px #0000008c,0 0 40px #9d8dff14}.plate:before,.plate:after{content:"";position:absolute;width:14px;height:14px;border-color:var(--lilac);border-style:solid;pointer-events:none}.plate:before{left:-5px;top:-5px;border-width:1px 0 0 1px}.plate:after{right:-5px;bottom:-5px;border-width:0 1px 1px 0}.plate.wide{width:min(380px,calc(100vw - 28px));max-height:calc(100vh - 60px);overflow:auto}.kicker{font:500 10px/1.3 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:#d9b8ffbf}.title{inset:0;display:flex;align-items:flex-start;justify-content:center;padding:calc(70px + var(--safe-t)) 20px calc(40px + var(--safe-b))}.title.fade{animation:fadeOut .45s ease forwards}@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}h1{margin:4px 0 2px;font:italic 400 58px/1 var(--serif);letter-spacing:.01em;background:linear-gradient(90deg,#fff3dc,#ffc46a 35%,#ff7f8f 60%,#c48cff 80%,#6ec6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.legend svg{width:100%;max-width:250px;height:auto;margin:6px auto 2px;display:block}.legend .grid{stroke:#d6c4ff1f;stroke-width:1}.legend .noise{fill:#9a96a68c;stroke:#dcd8e699;stroke-dasharray:2 2;animation:shimmer .2s steps(2) infinite}@keyframes shimmer{to{fill:#827e8c99}}.legend .r1,.legend .r2,.legend .r3{fill:none;stroke-linecap:round}.legend .r1{stroke:var(--cream);stroke-width:2.6}.legend .r2{stroke:var(--amber);stroke-width:1.6;opacity:.8}.legend .r3{stroke:var(--rose);stroke-width:1.1;opacity:.7}.legend .ph{stroke:#fff3dc59;stroke-width:1}.legend .mote{fill:#fff3dc;filter:drop-shadow(0 0 3px #ffc46a);animation:drift 3.2s linear infinite}.legend .motefar{fill:#fff3dc;opacity:.7;animation:drift 3.2s linear infinite;animation-delay:-1.2s}@keyframes drift{0%{transform:translate(40px);opacity:0}15%{opacity:1}70%{transform:translate(-70px);opacity:1}78%{transform:translate(-72px) scale(2);opacity:0}to{opacity:0}}.legend .hand{animation:slide 3.2s ease-in-out infinite}.legend .hand rect{fill:#fff3dcd9}.legend .voice{fill:#fff;filter:drop-shadow(0 0 4px #fff3dc)}@keyframes slide{0%,20%{transform:translateY(0)}50%,75%{transform:translateY(-36px)}to{transform:translateY(0)}}.cta{margin-top:10px;font:italic 400 18px/1.3 var(--serif);color:var(--cream);animation:breathe 2.4s ease-in-out infinite}@keyframes breathe{50%{opacity:.55}}.best{margin-top:6px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;color:#fff3dcb3}.row2{display:flex;gap:10px;justify-content:center;margin-top:14px}.pill{pointer-events:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:0;border-radius:2px;background:#d9b8ff14;box-shadow:inset 0 0 0 1px var(--hair);color:var(--cream);font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.pill:active{background:#d9b8ff33}.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.card{inset:0;display:flex;align-items:center;justify-content:center;padding:calc(64px + var(--safe-t)) 16px calc(16px + var(--safe-b));opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.2,.4,1)}.card.show{opacity:1;transform:none}.card .plate{max-height:100%;overflow:hidden;display:flex;flex-direction:column}.big{margin-top:2px;font:italic 400 60px/1 var(--serif);font-variant-numeric:lining-nums;color:var(--cream);text-shadow:0 0 20px rgba(255,196,106,.35)}.newbest{margin:4px auto 0;padding:3px 10px;font:600 10px/1.3 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#1a0f2c;background:linear-gradient(90deg,var(--amber),var(--rose),#c48cff,var(--cyan));border-radius:1px;animation:pop .7s cubic-bezier(.2,1.8,.4,1)}@keyframes pop{0%{transform:scale(.4);opacity:0}}.keep{display:block;width:100%;min-height:0;max-height:34vh;object-fit:contain;margin:10px 0 2px;border-radius:1px;box-shadow:0 0 0 1px var(--hair);background:#07040f}.rows{margin-top:8px}.row{display:flex;justify-content:space-between;padding:4px 2px;font:500 11px/1.25 var(--mono);letter-spacing:.08em;color:#fff3dcb8;border-bottom:1px solid rgba(214,196,255,.1)}.row b{font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}@media(max-height:700px){.big{font-size:46px}.keep{max-height:28vh}.row{padding:2px}}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:12px 0 14px}.grid figure{margin:0}.grid img{width:100%;display:block;border-radius:1px;box-shadow:0 0 0 1px var(--hair);background:#07040f}.grid figcaption{margin-top:4px;font:italic 400 14px/1.2 var(--serif);color:var(--cream)}.empty{font:italic 400 16px/1.4 var(--serif);color:#fff3dcb3}.paused{inset:0;display:grid;place-items:center;background:#05030b8c}@media(prefers-reduced-motion:reduce){.cta,.legend .noise,.meter.high{animation:none}}.grid figure[role=button]{cursor:pointer;position:relative}.grid figure .pin{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--cream);box-shadow:0 0 8px #d9b8ffe6}.grid.one{display:flex;flex-direction:column;align-items:center;gap:10px}.grid.one figure.large{position:relative;width:min(80vw,320px)}.grid.one figure.large img{max-height:56vh;object-fit:contain}.grid.one .grow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.grid.one .grow .pill small{font-size:10px;opacity:.7}
