:root{--bg:#fafaf7;--fg:#222;--muted:#777;--line:#ddd;--accent:#2f80ed;--ok:#27ae60;--err:#e74c3c;--warn:#f2994a;--panel:#fff}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-user-select:none;user-select:none;flex-direction:column;font:16px/1.4 -apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;display:flex;overflow:hidden}#toolbar{padding:6px 12px;padding-top:max(6px, env(safe-area-inset-top));border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn,#toolbar select,.seg button{border:1px solid var(--line);min-width:44px;min-height:44px;font:inherit;color:inherit;cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.seg{display:inline-flex}.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0}.seg button.active{background:var(--accent);color:#fff;border-color:var(--accent)}#progress,#wrong{font-variant-numeric:tabular-nums;color:var(--muted)}#wrong.has{color:var(--err)}#note-hint{color:var(--accent);min-width:2em;font-size:22px;font-weight:600}#note-hint.octave{color:var(--warn);font-size:16px}.spacer{flex:1}.status{background:#eee;border-radius:999px;padding:4px 10px;font-size:15px}.status.connected{color:var(--ok);background:#e3f6ea}.status.unsupported{color:var(--err);background:#fdecea}#settings{position:relative}#settings summary{list-style:none}#settings summary::-webkit-details-marker{display:none}#settings .panel{z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:10px;width:340px;padding:14px;display:flex;position:absolute;top:52px;right:0;box-shadow:0 8px 24px #0000001f}#settings .panel label{flex-wrap:wrap;align-items:center;gap:6px;display:flex}#settings input[type=number]{width:56px;min-height:36px;font:inherit}#settings input[type=checkbox]{width:22px;height:22px}#settings hr{border:0;border-top:1px solid var(--line);width:100%}.tip{color:var(--muted);margin:0;font-size:13px}#score-wrap{-webkit-overflow-scrolling:touch;flex:1;position:relative;overflow-y:auto}#score{padding:0 8px 40vh}#message{text-align:center;color:var(--err);background:var(--bg);justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}#keyboard{border-top:1px solid var(--line);height:120px;padding-bottom:env(safe-area-inset-bottom);background:#333;flex-shrink:0;position:relative}#keyboard.hidden{display:none}.keys{height:100%;display:flex;position:relative}.key.white{background:#fff;border:1px solid #999;border-top:0;border-radius:0 0 4px 4px;flex:1;position:relative}.key.black{z-index:2;background:#222;border-radius:0 0 3px 3px;height:62%;position:absolute;top:0}.key .label{text-align:center;color:#999;font-size:11px;position:absolute;bottom:4px;left:0;right:0}.key.target.white{background:#cfe2ff}.key.target.black{background:#3d6fb8}.key.down.white{background:#bbb}.key.down.black{background:#666}.key.ok.white,.key.ok.black{background:var(--ok);transition:none}.key.err.white,.key.err.black{background:var(--err);transition:none}.key{transition:background .25s}#stats{z-index:20;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#stats[hidden],#message[hidden]{display:none}#stats .card{background:#fff;border-radius:16px;min-width:320px;padding:24px 28px}#stats h2{margin-top:0}#stats-worst{flex-direction:column;gap:8px;margin:12px 0 20px;display:flex}