:root{--bg: #070a12;--panel: #121828;--accent: #37e0d8;--warn: #f0625a;--text: #e8edf6;--muted: #8a94a8}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#14213a 0%,var(--bg) 60%);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}#app{max-width:720px;margin:0 auto;padding:18px 16px 40px}header h1{margin:0;font-size:30px;letter-spacing:1px;background:linear-gradient(90deg,var(--accent),#b06cf0);-webkit-background-clip:text;background-clip:text;color:transparent}.sub{color:var(--muted);margin:4px 0 14px;font-size:14px}.sub b{color:var(--text)}.bar{display:flex;gap:10px;align-items:center;margin-bottom:12px}.seg{display:inline-flex;background:var(--panel);border-radius:8px;overflow:hidden}.seg button{border:0;background:transparent;color:var(--muted);padding:7px 14px;cursor:pointer;font-size:14px}.seg button.active{background:var(--accent);color:#061018;font-weight:600}.btn{border:0;border-radius:8px;cursor:pointer;background:#1d2740;color:var(--text);padding:8px 14px;font-size:14px}.btn:hover{background:#27355a}.btn:disabled{opacity:.4;cursor:not-allowed}.scoreboard{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.stat{background:var(--panel);border-radius:8px;padding:8px 14px;min-width:72px}.stat label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}.stat span{font-size:20px;font-weight:700}.stat.best span{color:var(--accent)}.play{display:flex;gap:16px;align-items:flex-start}#well{background:#0a0e18;border-radius:8px;box-shadow:0 0 0 2px #1b2540,0 20px 60px #00000080}.side{display:flex;flex-direction:column;gap:12px;flex:1;min-width:150px}.panel{background:var(--panel);border-radius:8px;padding:8px}.panel label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.panel canvas{display:block;width:100%;height:80px}.btn.rewind{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(135deg,#2a1840,#3a1f2a);border:1px solid #5a2f4a;padding:12px}.btn.rewind:hover:not(:disabled){background:linear-gradient(135deg,#371f55,#4a2734)}.rw-title{font-size:16px;font-weight:700;letter-spacing:1px}.rw-count{font-size:13px;color:var(--accent)}.rw-warn{font-size:11px;color:var(--warn)}.speedmeter{background:var(--panel);border-radius:8px;padding:8px}.speedmeter label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.meter{height:10px;background:#0a0e18;border-radius:6px;overflow:hidden}.meter .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--warn));transition:width .2s ease}.speednum{display:block;margin-top:5px;font-size:12px;color:var(--warn)}.controls{color:var(--muted);font-size:13px;margin-top:14px}.controls b{color:var(--accent)}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#04070ec7;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.card{background:var(--panel);border-radius:14px;padding:28px 34px;text-align:center;box-shadow:0 24px 80px #0009;border:1px solid #233055}.card h2{margin:0 0 8px;font-size:26px}.card p{color:var(--muted);margin:0 0 18px}