:root{--bg:#16181d;--panel:#20232a;--text:#e8e8ea;--muted:#9aa0aa;--ok:#3fb950;--bad:#f85149;--hint:#58a6ff;--accent:#d29922}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);flex-direction:column;align-items:center;gap:20px;margin:0;padding:24px 16px;font-family:system-ui,sans-serif;display:flex}.bar{background:var(--panel);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px 24px;width:100%;max-width:1100px;padding:12px 16px;display:flex}.bar label{cursor:pointer;align-items:center;gap:6px;display:flex}.bar .spacer{flex:1}select,button{color:var(--text);font:inherit;cursor:pointer;background:#2d313a;border:1px solid #3b404b;border-radius:6px;padding:6px 12px}button:hover{background:#363b46}#midiStatus,#soundStatus{color:var(--muted);font-size:.9em}#chord{letter-spacing:1px;margin-top:12px;font-size:clamp(64px,12vw,128px);font-weight:700}#chordType{color:var(--muted);margin-top:-12px}#status{text-align:center;min-height:1.6em;font-size:1.5em}#status.ok{color:var(--ok)}#status.bad{color:var(--bad)}#detail{color:var(--muted);text-align:center;min-height:1.3em}#score{color:var(--muted)}#piano{-webkit-user-select:none;user-select:none;width:100%;max-width:1100px;height:180px;margin-top:8px;position:relative}.key{border-radius:0 0 5px 5px;justify-content:center;align-items:flex-end;padding-bottom:6px;font-size:11px;font-weight:600;display:flex;position:absolute;top:0}.white{color:#333;z-index:1;background:#f4f4f4;border:1px solid #999;height:100%}.black{color:#eee;z-index:2;background:#111;border:1px solid #000;height:62%}.key.hint.white{background:#b8d7ff}.key.hint.black{background:#2f6fc4}.key.down.good{color:#fff;background:var(--ok)!important}.key.down.wrong{color:#fff;background:var(--bad)!important}.key.down.neutral{color:#000;background:var(--accent)!important}.key .c-label{color:#999;font-weight:400;position:absolute;bottom:4px}.key .n-label{position:absolute;bottom:22px}#statsBox{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:1100px;display:flex}#statsBox[hidden]{display:none}#stats{border-collapse:collapse;background:var(--panel);border-radius:8px;overflow:hidden}#stats th,#stats td{text-align:center;border-bottom:1px solid #2d313a;padding:4px 16px}#stats th{color:var(--muted);font-weight:600}#stats tbody th{text-align:left}#stats td.zero{color:#555}#stats td.current{background:var(--hint);color:#000;font-weight:700}