:root{--bg: #0e1116;--panel: #181d25;--line: #2a323d;--ink: #eef3f7;--dim: #93a4b3;--accent: #4a8cc0;--staff: #aab6c4;--good: #5fd089;--bad-ink: #ef6b6b;--paper: #f5f1e6}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#16202a,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:560px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:26px;letter-spacing:4px;font-weight:800;color:var(--accent)}.sub{margin:3px 0 0;color:var(--dim);font-size:13px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#04121c}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#04121c;border-color:var(--accent)}.btn.big{display:block;width:100%;padding:12px;font-size:16px;margin-top:10px}.scoreboard{display:flex;gap:10px;justify-content:center;margin:8px 0}.readout{background:#0a0e13;border:1px solid var(--line);border-radius:8px;padding:5px 16px;font:800 18px ui-monospace,monospace;color:var(--accent);min-width:84px;text-align:center}.readout span{color:var(--dim);font-size:11px;display:block;font-weight:600;letter-spacing:.5px}.timewrap{height:8px;background:#0a0e13;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:6px 0 10px}.timebar{height:100%;width:100%;background:var(--accent);transition:width .08s linear}.timebar.low{background:var(--bad-ink)}.stage{position:relative}.staffwrap{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 4px;transition:box-shadow .15s,background .15s}.staffwrap.good{box-shadow:0 0 0 3px var(--good) inset}.staffwrap.bad{box-shadow:0 0 0 3px var(--bad-ink) inset}.staffwrap svg{display:block}.hands{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.hand{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px}.handlabel{font:700 11px system-ui;color:var(--dim);letter-spacing:.5px;text-align:center;margin-bottom:6px}.handlabel .pick{display:inline-block;min-width:18px;margin-left:4px;color:var(--accent);font-size:15px}.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pad button{background:#0a0e13;border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:9px 0;font:800 16px ui-monospace,monospace;cursor:pointer}.pad button:hover{border-color:var(--accent)}.pad button.on{background:var(--accent);color:#04121c;border-color:var(--accent)}#hand-bass .pad button.on{background:#c08a4a;border-color:#c08a4a}.hint{color:var(--dim);font-size:11px;text-align:center;margin:10px 0 0;line-height:1.5}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080b0fd1;border-radius:10px}.overlay.hidden{display:none}.card{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 30px}.card h2{margin:0 0 6px;color:var(--accent)}.card .big{font:900 44px ui-monospace,monospace;color:var(--ink);margin:6px 0}.card p{color:var(--dim);margin:4px 0}.card .btn{margin-top:12px}@media(max-width:420px){.pad button{font-size:14px;padding:8px 0}}