:root{--bg: #0e1116;--panel: #161b22;--ink: #e6edf3;--muted: #8b949e;--accent: #f0b429;--accent2: #58a6ff;--track: #6b4f2a;--sky: #1b2735;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}#app{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;min-height:100%}header{text-align:center}header h1{margin:0;font-size:28px;letter-spacing:2px;color:var(--accent)}header p{margin:4px 0 0;color:var(--muted);font-size:13px}.events{display:flex;gap:8px}button.evt{background:var(--panel);color:var(--muted);border:1px solid #30363d;border-radius:999px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer}button.evt.on{background:var(--accent);color:#1a1300;border-color:var(--accent)}.hud{display:flex;gap:24px;font-variant-numeric:tabular-nums}.hud .stat{text-align:center}.hud .stat .v{font-size:26px;font-weight:700}.hud .stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}canvas{background:linear-gradient(var(--sky),#0e1116);border:1px solid #30363d;border-radius:8px;max-width:100%;touch-action:none}.keys{display:flex;gap:10px}.key{width:64px;height:64px;border-radius:10px;background:var(--panel);border:2px solid #30363d;color:var(--ink);font-size:22px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none}.key small{font-size:10px;color:var(--muted);font-weight:400}.key.down{background:var(--accent);color:#1a1300;border-color:var(--accent)}.controls{display:flex;gap:10px;align-items:center}button.btn{background:var(--accent2);color:#05121f;border:none;border-radius:6px;padding:8px 16px;font-weight:700;cursor:pointer}button.btn.ghost{background:transparent;color:var(--ink);border:1px solid #30363d}label.toggle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer}.banner{font-size:15px;color:var(--accent);min-height:20px}