:root{--pink:#ff5d8f;--cyan:#4fe3ff;--gold:#ffd166;--purple:#b48bff;--ink:#120826;--panel:#1e0e3acc;--panel-border:#b48bff61;--text:#fdf2ff;--text-dim:#c3aee0;--font-display:"Fredoka", "Avenir Next", system-ui, sans-serif;--font-ui:"Nunito", "Avenir Next", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--ink);height:100%;color:var(--text);font-family:var(--font-ui);-webkit-user-select:none;user-select:none;overflow:hidden}#app{position:fixed;inset:0}#stage{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hidden{display:none!important}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}kbd{font-family:var(--font-display);background:#ffffff1f;border:1.5px solid #ffffff4d;border-bottom-width:3px;border-radius:7px;padding:1px 9px;font-size:.85em}#hud{z-index:20;pointer-events:none;justify-content:space-between;align-items:flex-start;padding:14px 18px;display:flex;position:absolute;top:0;left:0;right:0}.hud-label{letter-spacing:3px;color:var(--text-dim);font-size:11px;font-weight:800}.hud-score{font-family:var(--font-display);color:#fff;text-shadow:0 0 18px #ff5d8f99;font-variant-numeric:tabular-nums;font-size:clamp(24px,4vw,34px);font-weight:700;line-height:1.05}.hud-score.bump{animation:.22s ease-out bump}@keyframes bump{40%{transform:scale(1.16)}}.hud-level{letter-spacing:2px;color:var(--text-dim);margin-top:3px;font-size:12px;font-weight:800}.hud-hearts{gap:6px;padding-top:6px;display:flex}.hud-hearts svg{filter:drop-shadow(0 0 8px #ff5d8fb3);width:26px;height:26px}.hud-hearts .lost svg{opacity:.18;filter:none}.hud-right{pointer-events:auto;gap:8px;display:flex}.icon-btn{background:var(--panel);border:1.5px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:11px;place-items:center;width:38px;height:38px;display:grid}.icon-btn svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.9px;stroke-linecap:round}.icon-btn.off{opacity:.4}#phase{z-index:24;text-align:center;font-family:var(--font-display);letter-spacing:2px;background:var(--panel);border:2px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:11px 30px;font-size:clamp(16px,2.8vw,24px);font-weight:700;position:absolute;top:12%;left:50%;transform:translate(-50%)}#phase.listen{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 26px #4fe3ff66}#phase.echo{border-color:var(--pink);color:#ffc2d6;animation:.6s ease-in-out infinite echoPulse;box-shadow:0 0 30px #ff5d8f80}#phase.good{border-color:var(--gold);color:var(--gold);box-shadow:0 0 28px #ffd16673}#phase.bad{color:#ffb3c0;border-color:#ff4f6e}@keyframes echoPulse{50%{transform:translate(-50%)scale(1.05)}}#notation{z-index:24;gap:10px;display:flex;position:absolute;bottom:16%;left:50%;transform:translate(-50%)}.note-cell{text-align:center;background:var(--panel);border:2px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;width:clamp(74px,11vw,110px);padding:10px 6px 8px;transition:all .12s}.note-cell.hot{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 0 22px #ffd16680}.note-glyph{font-size:clamp(26px,4vw,38px);line-height:1.1}.note-syll{font-family:var(--font-display);letter-spacing:1px;color:var(--text-dim);margin-top:2px;font-size:clamp(11px,1.6vw,14px);font-weight:600}.note-cell.hot .note-syll{color:var(--gold)}#menu{z-index:50;background:radial-gradient(#12082633,#120826b8);justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.menu-inner{text-align:center;width:min(540px,94vw);animation:.7s cubic-bezier(.16,1,.3,1) menuIn}@keyframes menuIn{0%{opacity:0;transform:translateY(26px)}}.logo{font-family:var(--font-display);letter-spacing:3px;color:#fff;text-shadow:0 0 30px #4fe3ff99;font-size:clamp(50px,11vw,96px);font-weight:700;line-height:1}.logo-beat{background:linear-gradient(120deg, var(--pink), var(--purple));color:#0000;filter:drop-shadow(0 0 18px #ff5d8f8c);-webkit-background-clip:text;background-clip:text}.logo-tag{letter-spacing:4px;color:var(--text-dim);margin:12px 0 22px;font-size:clamp(10.5px,1.8vw,14px);font-weight:800}.how{flex-direction:column;gap:9px;margin-bottom:22px;font-size:15.5px;font-weight:700;display:flex}.how b{color:var(--cyan);margin-right:4px}.go-btn{font-family:var(--font-display);letter-spacing:2.5px;color:#2b0a1a;background:linear-gradient(120deg, var(--pink), #ff9dbb);border-radius:999px;padding:15px 46px;font-size:19px;font-weight:700;transition:transform .14s;box-shadow:0 0 32px #ff5d8f8c,0 8px #78143c8c}.go-btn:hover{transform:scale(1.05)}.go-btn:active{transform:scale(.97)translateY(4px);box-shadow:0 0 32px #ff5d8f8c,0 4px #78143c8c}.go-btn.small{padding:11px 32px;font-size:15px}.menu-footer{flex-direction:column;align-items:center;gap:8px;margin-top:22px;display:flex}.menu-best{font-family:var(--font-display);letter-spacing:1.5px;color:var(--gold);font-size:14px}.menu-heading{letter-spacing:4px;color:var(--text-dim);margin-bottom:10px;font-size:12px;font-weight:800}.menu-credit{letter-spacing:1px;color:#c3aee099;font-size:11px;font-weight:700}.link-btn{letter-spacing:2.5px;color:var(--text-dim);padding:8px 14px;font-size:13px;font-weight:700}.link-btn:hover{color:var(--pink)}.modal{z-index:60;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#0a0418bd;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.modal-card{text-align:center;border:2px solid var(--panel-border);background:linear-gradient(165deg,#2a144ef7,#14092af7);border-radius:26px;width:min(500px,94vw);padding:30px 34px;animation:.5s cubic-bezier(.34,1.56,.64,1) cardIn;box-shadow:0 0 60px #ff5d8f26,0 30px 60px #0009}@keyframes cardIn{0%{opacity:0;transform:scale(.86)translateY(18px)}}.modal-card h2{font-family:var(--font-display);letter-spacing:3px;margin-bottom:8px;font-size:26px;font-weight:700}.rp-stars{justify-content:center;gap:10px;margin:8px 0 4px;display:flex}.rp-stars svg{width:42px;height:42px}.rp-stars .earned{filter:drop-shadow(0 0 10px #ffd166e6);animation:.5s cubic-bezier(.34,1.56,.64,1) backwards starPop}.rp-stars .earned:nth-child(2){animation-delay:.16s}.rp-stars .earned:nth-child(3){animation-delay:.32s}@keyframes starPop{0%{transform:scale(0)rotate(-40deg)}}.report-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;display:grid}.stat{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;padding:12px 6px}.stat-val{font-family:var(--font-display);color:var(--gold);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700}.stat-label{letter-spacing:2px;color:var(--text-dim);margin-top:3px;font-size:10.5px;font-weight:800}.practice-wrap{margin:8px 0 4px}.practice-chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.practice-chip{font-family:var(--font-display);color:var(--gold);letter-spacing:1px;background:#ffd1661a;border:1.5px solid #ffd16666;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600}.modal-btns{flex-direction:column;align-items:center;gap:4px;display:flex}@media (width<=560px){#notation{bottom:20%}}@media (prefers-reduced-motion:reduce){#phase.echo{animation:none}}