:root{--bg:#0e0f14;--surface:#171922;--surface-2:#20232f;--line:#2a2d3a;--text:#f2f3f7;--muted:#9aa0b4;--accent:#ff5d73;--accent-2:#ffb547;--teal:#3ee0b5;--perfect:#3ee0b5;--good:#7cc4ff;--off:#ffb547;--miss:#ff5d73;--radius:16px;--tap:48px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);overscroll-behavior:none;margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{max-width:560px;min-height:100dvh;padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);margin:0 auto}.hidden{display:none!important}h1,h2{margin:0;line-height:1.2}h2{margin-bottom:12px;font-size:1.1rem}p{margin:0 0 10px}button{font:inherit;color:inherit;cursor:pointer}.btn{min-height:var(--tap);border:1px solid var(--line);background:var(--surface-2);touch-action:manipulation;border-radius:999px;padding:0 18px;font-weight:600}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a0b0f}.btn.ghost{background:0 0}.btn.big{flex:1;min-height:56px;font-size:1.1rem}.btn.small{min-height:40px;padding:0 12px;font-size:.9rem}.btn.danger{color:var(--miss);border-color:color-mix(in srgb, var(--miss) 40%, transparent);width:100%}.icon-btn{width:var(--tap);height:var(--tap);background:0 0;border:0;font-size:2rem;line-height:1}.icon-btn-spacer{width:var(--tap)}.screen{flex-direction:column;gap:14px;padding-bottom:12px;display:flex}.topbar{justify-content:space-between;align-items:center;min-height:56px;display:flex}.topbar h1{font-size:1.15rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;padding:16px;display:flex}.controls{padding:10px 0 calc(env(safe-area-inset-bottom) + 6px);background:linear-gradient(transparent, var(--bg) 30%);gap:10px;display:flex;position:sticky;bottom:0}.status{text-align:center;min-height:1.4em;color:var(--muted)}.tip{color:var(--muted);margin:0;font-size:.92rem}.tip b{color:var(--accent-2)}.hint{text-align:center;color:var(--muted);font-size:.85rem}.home{gap:18px;padding-top:24px}.hero{text-align:center;padding:16px 0 4px}.hero h1{letter-spacing:-.02em;font-size:2.3rem}.hero em{color:var(--accent);font-style:normal}.tagline{color:var(--muted);margin-top:6px}.logo{justify-content:center;align-items:center;gap:10px;margin-bottom:18px;display:flex}.logo span{background:var(--accent-2);border-radius:50%;width:18px;height:18px;animation:1.6s infinite bounce}.logo span:first-child{background:var(--accent);width:24px;height:24px}.logo span:nth-child(2){animation-delay:.4s}.logo span:nth-child(3){animation-delay:.8s}.logo span:nth-child(4){background:var(--teal);width:24px;height:24px;animation-delay:1.2s}@keyframes bounce{0%,70%,to{opacity:.7;transform:scale(1)}10%{opacity:1;transform:scale(1.35)}}.banner{text-align:left;border:1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);background:color-mix(in srgb, var(--accent-2) 10%, var(--surface));border-radius:var(--radius);padding:12px 14px;font-size:.92rem}.menu{gap:12px;display:grid}.mode-card{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:20px;flex-direction:column;gap:4px;padding:20px;display:flex;position:relative;overflow:hidden}.mode-card:after{content:"›";color:var(--muted);font-size:2rem;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.mode-card.challenge{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 70%)}.mode-card.freedom{background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 18%, var(--surface)), var(--surface) 70%)}.mode-title{font-size:1.4rem;font-weight:700}.mode-sub{color:var(--muted);padding-right:28px}.mode-meta{color:var(--accent-2);margin-top:4px;font-size:.85rem}.menu-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.hud{justify-content:space-between;align-items:stretch;gap:6px;display:flex}.stat{background:var(--surface);border:1px solid var(--line);text-align:center;border-radius:12px;flex-direction:column;flex:1;min-width:0;padding:6px 4px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.68rem}.stat-value{font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.lives{color:var(--accent);letter-spacing:2px;align-items:center;padding:0 4px;font-size:1.1rem;display:flex}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;display:grid}.stat-grid .stat{padding:12px 6px}.stat-grid .stat-value{font-size:1.4rem}.stage{background:var(--surface);border:1px solid var(--line);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:20px;flex-direction:column;align-items:center;gap:12px;padding:14px 12px;display:flex}.stage.tap-mode{cursor:pointer}.stage.hit-flash{animation:.18s ease-out flash}@keyframes flash{0%{box-shadow:inset 0 0 0 3px var(--teal)}to{box-shadow:inset 0 0 #0000}}.phases{gap:4px;width:100%;margin:0;padding:0;list-style:none;display:flex}.pill{text-align:center;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:var(--surface-2);color:var(--muted);border-radius:999px;flex:1;padding:6px 2px;font-size:.66rem;font-weight:700;transition:background .15s,color .15s}.pill.done{color:var(--text);opacity:.6}.pill.active{background:var(--accent);color:#1a0b0f}.beat-light{background:radial-gradient(circle, var(--surface-2), var(--bg));border:3px solid var(--line);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;width:132px;height:132px;font-size:1.7rem;font-weight:800;transition:border-color .2s;display:grid}.beat-light.pulse{animation:.22s ease-out pulse}.beat-light.pulse.accent{animation-name:pulse-accent}.beat-light.pass{border-color:var(--teal);color:var(--teal)}.beat-light.fail{border-color:var(--miss);color:var(--miss)}@keyframes pulse{0%{border-color:var(--accent-2);box-shadow:0 0 26px color-mix(in srgb, var(--accent-2) 55%, transparent);transform:scale(1.08)}}@keyframes pulse-accent{0%{border-color:var(--accent);box-shadow:0 0 34px color-mix(in srgb, var(--accent) 70%, transparent);transform:scale(1.12)}}.grid-wrap{width:100%}.grid{width:100%;height:auto;display:block}.grid .row-label{fill:var(--muted);letter-spacing:.1em;font-size:18px;font-weight:700}.grid .barline{stroke:var(--muted);stroke-width:3px;opacity:.6}.grid .beatline{stroke:var(--line);stroke-width:2px}.grid .note{fill:var(--accent-2);transform-box:fill-box;transform-origin:50%;transition:transform .1s}.grid .note.role-low{fill:var(--accent)}.grid .note.lit{fill:#fff;transform:scale(1.35)}.grid.hidden-notes .note{opacity:.15}.grid .target{fill:none;stroke:var(--muted);stroke-width:3px;stroke-dasharray:5 4}.grid .target.graded{stroke-dasharray:none;stroke-width:4px}.grid .playhead{stroke:var(--text);stroke-width:3px;stroke-linecap:round}.grid .hit{stroke:var(--bg);stroke-width:2px}.grid .extra line{stroke:var(--miss);stroke-width:4px;stroke-linecap:round}.grid .grade-perfect{fill:var(--perfect);stroke:var(--perfect)}.grid .grade-good{fill:var(--good);stroke:var(--good)}.grid .grade-off{fill:var(--off);stroke:var(--off)}.grid .grade-miss{fill:var(--miss);stroke:var(--miss)}.grid .target.grade-perfect,.grid .target.grade-good,.grid .target.grade-off,.grid .target.grade-miss{fill:none}.result-card{text-align:center;width:100%}.feedback{font-weight:600}.grade-counts{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:0;padding:0;font-size:.88rem;list-style:none;display:flex}.grade-counts b{font-size:1rem}li.grade-perfect b{color:var(--perfect)}li.grade-good b{color:var(--good)}li.grade-off b{color:var(--off)}li.grade-miss b,li.grade-extra b{color:var(--miss)}.game-over{color:var(--text);font-size:1.4rem;font-weight:800}.new-best{color:var(--accent-2);font-weight:700}.play-area{flex-direction:column;gap:12px;display:flex}.field{flex-direction:column;gap:8px;display:flex}.field-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.field-label{margin:0;font-size:.95rem;font-weight:600}.field-value{font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:800}.field-hint{color:var(--muted);margin:0;font-size:.82rem;display:block}.segmented{flex-wrap:wrap;gap:6px;display:flex}.seg{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;flex:1 0 auto;min-height:42px;padding:0 12px;font-size:.92rem;font-weight:600}.seg[aria-checked=true]{background:var(--teal);border-color:var(--teal);color:#062019}input[type=range]{width:100%;accent-color:var(--accent);height:32px}.tempo-row{gap:6px;display:flex}.tempo-row .tap-tempo{flex:1;min-height:40px;padding:0 8px;font-size:.9rem}.toggle-field{flex-direction:row;justify-content:space-between;align-items:center}.switch{appearance:none;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;flex-shrink:0;width:52px;height:30px;transition:background .15s;position:relative}.switch:after{content:"";background:var(--text);border-radius:50%;width:22px;height:22px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch:checked{background:var(--teal)}.switch:checked:after{transform:translate(22px)}.meter{background:var(--surface-2);border-radius:999px;height:14px;position:relative;overflow:hidden}.meter-fill{background:var(--good);width:0;height:100%;transition:width 50ms linear}.meter.over .meter-fill{background:var(--teal)}.meter-mark{background:var(--accent);width:3px;position:absolute;top:0;bottom:0}.cal-pad{border-radius:var(--radius);background:var(--surface-2);touch-action:manipulation;-webkit-user-select:none;user-select:none;grid-template-columns:repeat(6,1fr);gap:10px;padding:18px;display:grid}.cal-dot{aspect-ratio:1;border:2px solid var(--line);border-radius:50%}.cal-dot.lead{border-style:dashed}.cal-dot.on{background:var(--accent-2);border-color:var(--accent-2)}.cal-dot.got{box-shadow:inset 0 0 0 6px var(--teal)}.cal-current{color:var(--muted);margin:0;font-size:.88rem}.modal-overlay{z-index:10;background:#0009;place-items:end center;padding:16px;animation:.15s fade;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--line);width:100%;max-width:480px;margin-bottom:env(safe-area-inset-bottom);border-radius:20px;padding:20px}.modal p{color:var(--muted)}.modal-actions{gap:10px;margin-top:16px;display:flex}.modal-actions .btn{flex:1}@keyframes fade{0%{opacity:0}}@media (width>=600px){.modal-overlay{place-items:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}