:root{--ink:#f4f1ff;--ink-dim:#a9a3c4;--night:#0a0616;--panel:#0e0920db;--line:#ffffff29;--pink:#ff4f9a;--cyan:#2fe0ff;--gold:#ffd338;--green:#6dff7a;--violet:#b47bff;--radius:14px;--font:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{background:var(--night);height:100%;color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;overscroll-behavior:none;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}#stage{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.screen{padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(5px);background:radial-gradient(120% 90% at 50% 0,#1e0c3cbd,#06030ef2);animation:.22s ease-out screen-in;position:fixed;inset:0;overflow-y:auto}.screen-center{place-items:center;display:grid}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}.masthead{text-align:center;margin:clamp(4px,3vh,32px) 0 clamp(12px,3vh,28px)}.logo{font-family:var(--mono);letter-spacing:-.04em;text-transform:uppercase;flex-wrap:wrap;justify-content:center;gap:0 .22em;margin:0;font-size:clamp(40px,10vw,96px);font-style:italic;font-weight:800;line-height:.95;display:flex}.logo span:first-child{color:var(--ink);text-shadow:0 0 28px #2fe0ffbf, 3px 3px 0 var(--cyan)}.logo span:last-child{color:var(--gold);text-shadow:0 0 28px #ff4f9acc, 3px 3px 0 var(--pink)}.tagline{color:var(--ink-dim);text-wrap:balance;margin:12px 0 0;font-size:clamp(14px,2.2vw,18px)}.section-label{max-width:1080px;font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin:0 auto 10px;font-size:12px}.song-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;max-width:1080px;margin:0 auto;padding:0;list-style:none;display:grid}.song-card{--hue:280;border:1px solid hsl(var(--hue) 90% 70% / .4);border-radius:var(--radius);background:linear-gradient(160deg, hsl(var(--hue) 70% 20% / .92), #0c081cf2 70%);box-shadow:0 0 34px hsl(var(--hue) 100% 60% / .13);flex-direction:column;gap:10px;padding:18px;display:flex}.song-title{letter-spacing:-.01em;margin:0;font-size:22px;font-weight:800}.song-artist{color:hsl(var(--hue) 100% 82%);margin:2px 0 0;font-size:14px;font-weight:600}.song-blurb{color:var(--ink-dim);flex:1;margin:0;font-size:14px;line-height:1.45}.song-meta{font-family:var(--mono);color:var(--ink-dim);gap:14px;margin:0;font-size:12px;display:flex}.difficulty-row{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.difficulty-button{border:1px solid var(--line);background:#ffffff12;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:62px;padding:8px 4px;font-size:15px;font-weight:700;transition:background-color .15s,border-color .15s,transform .1s;display:flex}.difficulty-button:hover{background:hsl(var(--hue) 90% 60% / .3);border-color:hsl(var(--hue) 100% 75%)}.difficulty-button:active{transform:scale(.96)}.difficulty-best{font-family:var(--mono);color:var(--ink-dim);letter-spacing:.04em;font-size:11px;font-weight:600}.difficulty-best.has-best{color:var(--gold)}.menu-row{flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 10px;display:flex}.hint{text-align:center;max-width:560px;color:var(--ink-dim);text-wrap:pretty;margin:8px auto 0;font-size:13px;line-height:1.5}.primary-button,.ghost-button{border-radius:999px;min-height:48px;padding:0 24px;font-size:16px;font-weight:800;transition:background-color .15s,border-color .15s,transform .1s}.primary-button{background:linear-gradient(135deg, var(--gold), var(--pink));color:#1a0716;border:0;box-shadow:0 6px 26px #ff4f9a66}.primary-button:hover{filter:brightness(1.1)}.ghost-button{border:1px solid var(--line);background:#ffffff12}.ghost-button:hover{background:#ffffff26;border-color:#fff6}.primary-button:active,.ghost-button:active{transform:scale(.97)}.icon-button{border:1px solid var(--line);width:48px;height:48px;fill:var(--ink);background:#0a061699;border-radius:50%;place-items:center;display:grid}#pause-button{top:max(14px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));position:fixed}#surge-button{background:0 0;border:0;border-radius:999px;position:fixed}#banner{text-align:center;font-family:var(--mono);letter-spacing:.06em;color:#7df9ff;text-shadow:0 0 24px #7df9ffe6;pointer-events:none;opacity:0;margin:0;font-size:clamp(20px,5vw,40px);font-style:italic;font-weight:800;position:fixed;top:36%;left:0;right:0}#banner.is-showing{animation:1.1s ease-out banner}@keyframes banner{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:scale(1.08)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.04)}}#countdown{font-family:var(--mono);color:var(--ink);text-shadow:0 0 40px var(--cyan);pointer-events:none;place-items:center;font-size:clamp(90px,24vw,200px);font-weight:800;display:grid;position:fixed;inset:0}.panel,dialog{border:1px solid var(--line);background:var(--panel);width:min(440px,100%);color:var(--ink);text-align:center;border-radius:20px;padding:28px 24px;box-shadow:0 24px 80px #0009}dialog{max-height:calc(100% - 32px);overflow-y:auto}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04020ab3}.panel-title{font-family:var(--mono);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance;margin:0;font-size:clamp(26px,6vw,36px);font-style:italic;font-weight:800}.panel-sub{color:var(--ink-dim);margin:6px 0 0;font-size:14px}.kicker{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:0 0 6px;font-size:12px}.kicker.is-fail{color:var(--pink)}.button-stack{gap:10px;margin-top:22px;display:grid}.stars{justify-content:center;gap:6px;margin:18px 0 4px;display:flex}.stars svg{fill:#ffffff21;width:40px;height:40px}.stars svg.is-earned{fill:var(--gold);filter:drop-shadow(0 0 10px #ffd338b3);animation:.4s ease-out backwards star-pop}@keyframes star-pop{0%{opacity:0;transform:scale(.2)rotate(-40deg)}}.big-score{font-family:var(--mono);letter-spacing:-.03em;margin:6px 0 0;font-size:clamp(38px,10vw,56px);font-weight:800}.best-badge{background:var(--gold);color:#241a00;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;margin:6px 0 0;padding:4px 12px;font-size:12px;font-weight:800;display:inline-block}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 0;display:grid}.stats div{background:#ffffff0f;border-radius:10px;padding:10px 4px}.stats dt{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);font-size:10px}.stats dd{font-family:var(--mono);margin:4px 0 0;font-size:18px;font-weight:800}.how-list{text-align:left;color:var(--ink);margin:18px 0 22px;padding-left:22px;font-size:15px;line-height:1.5}.how-list li+li{margin-top:8px}kbd{border:1px solid var(--line);min-width:24px;font-family:var(--mono);text-align:center;background:#ffffff14;border-bottom-width:3px;border-radius:6px;padding:1px 6px;font-size:12px;display:inline-block}.field{text-align:left;margin:20px 0}.field label{justify-content:space-between;font-size:15px;font-weight:700;display:flex}.field output{font-family:var(--mono);color:var(--cyan)}.field input[type=range]{width:100%;height:44px;accent-color:var(--pink);margin:2px 0 0}.field .hint{text-align:left;margin:0}@media (prefers-reduced-motion:reduce){.screen,.stars svg.is-earned,#banner.is-showing{animation-duration:10ms}}
