:root{--bg: #0c0a14;--panel: #16122a;--ink: #efe9ff;--muted: #9b93c4;--accent: #ff3d9a;--line: #2a2348}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(120% 120% at 50% 0%,#1a1430 0%,var(--bg) 70%);color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px 28px}.title{font-size:26px;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,#ff3d9a,#7c5cff,#38e8ff);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.subtitle{color:var(--muted);font-size:13px;margin:-8px 0 0;text-align:center;max-width:480px}.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 12px;min-width:70px;text-align:center}.stat .k{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.stat .v{font-size:18px;font-weight:700}.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{background:var(--panel);color:var(--muted);border:0;padding:7px 14px;font-weight:600;cursor:pointer}.seg button.active{background:var(--accent);color:#15101f}button.btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 16px;font-weight:700;cursor:pointer}button.btn:hover{border-color:var(--accent)}.play{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.wellwrap{position:relative}canvas{display:block;border-radius:12px;background:#0a0816;border:1px solid var(--line)}.side{display:flex;flex-direction:column;gap:12px;min-width:132px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}.card h3{margin:0 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.beatdots{display:flex;gap:8px;align-items:center}.beatdot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}.beatdot.on{box-shadow:0 0 12px currentColor;border-color:currentColor}.beatnote{font-size:11px;color:var(--muted);margin-top:6px}.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#080612d1;border-radius:12px;text-align:center;padding:16px}.overlay.show{display:flex}.overlay h2{margin:0;font-size:24px}.overlay p{margin:0;color:var(--muted)}.controls-hint{color:var(--muted);font-size:12px;text-align:center;max-width:520px}.touch{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:360px}.touch button{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 0;font-size:18px;font-weight:700;cursor:pointer}.touch button:active{background:var(--accent);color:#15101f}