:root{--abyss: #010b0e;--deep: #03202a;--teal: #0a4a52;--sea: #2a9c92;--ivory: #fbf1cf;--you: #86fbd8;--lilac: #b4bcff;--mist: rgba(220, 250, 240, .66);--line: rgba(134, 251, 216, .32);--font: Seravek, "Segoe UI", "Gill Sans", "Trebuchet MS", system-ui, sans-serif}html,body{background:var(--abyss);color:var(--ivory);font-family:var(--font)}.stage{background:var(--deep)}.hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l));pointer-events:none}.ring{border-radius:50%;background:#0110148c;box-shadow:inset 0 0 0 1px var(--line),0 0 0 4px #01101440;position:relative}.ring:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(134,251,216,.22);pointer-events:none}.btn{pointer-events:auto;width:44px;height:44px;display:grid;place-items:center;border:0;color:var(--you);text-decoration:none;transition:transform .2s ease}.btn:active{transform:scale(.9)}.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:#86fbd873}.board{display:flex;flex-direction:column;align-items:center;padding-top:2px}.score{min-width:4ch;text-align:center;font:200 34px/1 var(--font);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ivory);text-shadow:0 0 16px rgba(255,223,154,.3),0 2px 8px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,1.5,.4,1)}.score.pop{transform:scale(1.08)}.meta{display:flex;gap:8px;align-items:center;margin-top:6px}.mult{min-width:34px;padding:1px 8px;text-align:center;font:400 13px/1.5 var(--font);letter-spacing:.06em;color:var(--you);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:#01101480;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}.mult.hot{color:#022;background:var(--you);box-shadow:0 0 14px #86fbd880}.mult.pop{transform:scale(1.25)}.range{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#01101480;box-shadow:inset 0 0 0 1px var(--line)}.range svg{width:18px;height:9px;fill:var(--you)}.track{position:relative;width:92px;height:14px}.track:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dotted rgba(134,251,216,.5)}.pod{position:absolute;top:50%;left:30%;display:inline-flex;align-items:center;gap:1px;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.3,.9,.3,1)}.pod svg{fill:var(--ivory)}.pod b{font:500 10px/1 var(--font);color:var(--ivory)}.range.far .pod svg{fill:#f2a77c}.range.far .pod b{color:#f2a77c}.range.shake{animation:shake .5s ease}.edge{width:6px;height:14px;background:repeating-linear-gradient(135deg,rgba(242,167,124,.8) 0 2px,transparent 2px 4px);border-radius:2px}@keyframes shake{20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.toast{position:absolute;left:0;right:0;top:19%;z-index:2;text-align:center;pointer-events:none;font:300 26px/1 var(--font);letter-spacing:.22em;color:var(--ivory);opacity:0;text-shadow:0 0 18px rgba(134,251,216,.5),0 2px 6px rgba(0,0,0,.6)}.toast small{display:block;margin-top:6px;font-size:13px;letter-spacing:.14em;color:var(--mist)}.toast.show{animation:toast 1.5s ease forwards}.toast.perfect{color:#fff4c2}.toast.close{color:#9dfde0}.toast.faint{color:#a7cbd3}.toast.lost{color:#f2a77c}@keyframes toast{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-10px)}}.title,.card,.paused{position:absolute;z-index:2;text-align:center;pointer-events:none}.title{left:0;right:0;top:calc(9% + var(--safe-t));bottom:calc(5% + var(--safe-b));display:flex;flex-direction:column;align-items:center;transition:opacity .45s ease}.title .foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;position:relative}.title .foot:before{content:"";position:absolute;z-index:-1;inset:-30px -60px;background:radial-gradient(closest-side,#010c0fb3,#010c0f00)}.title.fade{opacity:0}.title.fade .pill,.card:not(.show) .pill{pointer-events:none}.title:before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:-40px;height:300px;background:radial-gradient(closest-side,#0110149e,#01101400)}.title h1{margin:0;font:200 clamp(68px,24vw,104px)/1 var(--font);letter-spacing:.32em;padding-left:.32em;color:var(--ivory);text-shadow:0 0 30px rgba(255,223,154,.35),0 0 80px rgba(42,156,146,.5)}.legend svg{width:200px;height:96px;margin-top:10px;overflow:visible}.legend path{fill:none;stroke-linecap:round}.legend .call{stroke:var(--ivory);stroke-width:2.2;opacity:.9;stroke-dasharray:260;animation:draw 4s ease-in-out infinite}.legend .you{stroke:var(--you);stroke-width:2.6;stroke-dasharray:160;stroke-dashoffset:160;animation:sing 4s ease-in-out infinite}.legend .finger{fill:#e6fff82e;stroke:#e6fff8;stroke-width:1.4;offset-rotate:0deg;offset-path:path("M14 70C34 70 40 40 62 40S86 78 110 78");animation:glide 4s ease-in-out infinite}@keyframes draw{0%{stroke-dashoffset:260}35%,to{stroke-dashoffset:0}}@keyframes sing{0%,42%{stroke-dashoffset:160}85%,to{stroke-dashoffset:0}}@keyframes glide{0%,42%{offset-distance:0%;opacity:0}46%{opacity:1}85%{offset-distance:100%;opacity:1}95%,to{offset-distance:100%;opacity:0}}.cta{margin-top:10px;font:300 17px/1.3 var(--font);letter-spacing:.2em;color:var(--mist);animation:breathe 3.2s ease-in-out infinite}@keyframes breathe{50%{opacity:.55}}.best{margin-top:6px;font:400 13px/1 var(--font);letter-spacing:.14em;color:var(--you)}.pill{pointer-events:auto;margin-top:18px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#0110148c;box-shadow:inset 0 0 0 1px var(--line);color:var(--you);font:400 14px/1 var(--font);letter-spacing:.16em}.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.pill:active{transform:scale(.96)}.card{inset:0;display:grid;place-items:center;padding:calc(56px + var(--safe-t)) 16px calc(16px + var(--safe-b));opacity:0;transition:opacity .5s ease}.card.show{opacity:1}.glass{position:relative;width:min(312px,calc(100vw - 32px));padding:16px 18px 14px;border-radius:18px;color:var(--ivory);background:linear-gradient(180deg,#042c34e6,#010e12f0);box-shadow:inset 0 0 0 1px var(--line),0 20px 50px #00000080}.glass:before{content:"";position:absolute;left:14px;right:14px;top:8px;height:4px;background:repeating-linear-gradient(90deg,rgba(134,251,216,.4) 0 1px,transparent 1px 8px)}.kicker{margin-top:6px;font:300 13px/1.3 var(--font);letter-spacing:.18em;color:var(--mist)}.big{margin-top:4px;font:200 52px/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,223,154,.35)}.newbest{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;background:var(--you);color:#022;font:500 12px/1.3 var(--font);letter-spacing:.2em;animation:glowb 1.6s ease-in-out infinite}@keyframes glowb{50%{box-shadow:0 0 18px #86fbd8cc}}.keep{display:block;width:116px;aspect-ratio:9 / 16;margin:10px auto 4px;object-fit:cover;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line),0 0 0 1px var(--line),0 8px 20px #00000080}.rows{margin-top:6px}.row{display:flex;justify-content:space-between;padding:3px 4px;font:300 14px/1.4 var(--font);letter-spacing:.06em;border-bottom:1px dotted rgba(134,251,216,.18)}.row b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--you)}.card .cta,.card .pill{margin-top:10px}@media(max-height:700px){.keep{width:84px}.big{font-size:42px}.row{font-size:13px;padding:1px 4px}.card{padding-top:calc(52px + var(--safe-t))}}.paused{inset:0;display:grid;place-items:center;background:#010b0e80}.sheet{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));background:#010b0eb3}.glass.wide{background:linear-gradient(180deg,#04303a,#010e12);width:min(360px,calc(100vw - 32px));max-height:100%;display:flex;flex-direction:column;align-items:center}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:12px;overflow-y:auto}.grid figure{margin:0}.grid img{display:block;width:100%;aspect-ratio:9 / 16;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px var(--line)}.grid figcaption{margin-top:4px;font:400 11px/1.2 var(--font);letter-spacing:.08em;color:var(--mist);text-align:center}.grid figcaption small{display:block;font-size:10px;opacity:.8}.grid figure{cursor:pointer}.grid figure.pinned img{box-shadow:0 0 0 1.5px var(--you),0 0 12px #e4fff773}.grid figure.pinned figcaption small:after{content:" · pinned"}.postcard{display:block;width:min(180px,46vw);aspect-ratio:9 / 16;margin:12px auto 0;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line),0 8px 20px #00000080}.dcap{margin-top:8px;font:300 13px/1.2 var(--font);letter-spacing:.1em;color:var(--mist)}.dbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}.pill.ad span:after{content:"AD";margin-left:6px;padding:1px 4px;border-radius:3px;font-size:9px;letter-spacing:.08em;vertical-align:2px;background:#0000004d}.empty{color:var(--mist);letter-spacing:.12em;font-weight:300}.glass{box-shadow:inset 0 0 0 1px var(--line),inset 0 24px 40px -20px #86fbd829,0 20px 50px #00000080,0 0 60px #2a9c922e}.glass:after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:radial-gradient(120% 40% at 50% 0%,#beffec1a,#beffec00)}.card.show .big{animation:rise .7s cubic-bezier(.2,1.4,.4,1) both}@keyframes rise{0%{transform:scale(.8);opacity:0}}@media(prefers-reduced-motion:reduce){.card.show .big{animation:none}}
