:root{--bg: #0a0712;--panel: #160f24;--ink: #ece6ff;--muted: #9a8fc0;--accent: #ff3d9a;--accent2: #36e2ff;--good: #6ee7b7;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(120% 100% at 50% 0%,#1a0f2e 0%,var(--bg) 60%);color:var(--ink);min-height:100%;-webkit-user-select:none;user-select:none}#app{max-width:560px;margin:0 auto;padding:14px;display:flex;flex-direction:column;gap:12px}.title{font-size:26px;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0 0}.subtitle{color:var(--muted);font-size:14px;margin:0;line-height:1.4}.card{background:var(--panel);border:1px solid #2a2040;border-radius:14px;padding:16px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.spread{justify-content:space-between}button{font:inherit;font-weight:700;color:var(--ink);background:#241a3a;border:1px solid #3a2c58;border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .05s ease,background .15s ease}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(90deg,var(--accent),#ff7ac0);border:none;color:#16021a}button.ghost{background:transparent}button.sel{outline:2px solid var(--accent2)}.hud{display:flex;gap:14px;align-items:baseline}.hud .score{font-size:30px;font-weight:800}.hud .lbl{color:var(--muted);font-size:13px}.hud .grade{font-size:15px;font-weight:800;min-width:64px}.grade.perfect{color:var(--accent2)}.grade.good{color:var(--good)}.grade.late{color:var(--muted)}.grade.miss{color:var(--accent)}canvas{width:100%;display:block;border-radius:14px;background:#0c0818;border:1px solid #2a2040;touch-action:none}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pads button{padding:16px 6px;font-size:15px}.diffs button{flex:1}.overlay{position:relative;text-align:center}.overlay .big{font-size:22px;font-weight:800;margin-bottom:6px}.stat{text-align:center}.stat .v{font-size:22px;font-weight:800}.stat .k{color:var(--muted);font-size:12px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%);background:#241a3a;border:1px solid #3a2c58;padding:10px 16px;border-radius:10px;font-size:14px}.hint{color:var(--muted);font-size:13px;line-height:1.5}