:root{--bg:#f5f6f8;--surface:#fff;--border:#d9dce1;--text:#1c1f24;--text-muted:#6b7280;--accent:#aa3bff;--accent-contrast:#fff;--error-bg:#fdeceb;--error-border:#e5534b;--error-text:#8a1f16;--key-white-bg:#fff;--key-white-border:#c7cad1;--key-black-bg:#1c1f24;--key-black-border:#000;--key-label:#6b7280;--key-correct:#22c55e;--key-incorrect:#ef4444;--key-target:#aa3bff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#14161a;--surface:#1b1e24;--border:#2e333c;--text:#e6e8eb;--text-muted:#9aa1ac;--accent:#c084fc;--accent-contrast:#0b1220;--error-bg:#3a1c1c;--error-border:#e5534b;--error-text:#ffb4ac;--key-white-bg:#e6e8eb;--key-white-border:#9aa1ac;--key-black-bg:#0b0d10;--key-black-border:#000;--key-label:#4b5563;--key-correct:#4ade80;--key-incorrect:#f87171;--key-target:#c084fc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}.site-header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.site-header__brand{color:var(--accent);white-space:nowrap;font-size:15px;font-weight:700;text-decoration:none}.site-header__brand:hover{text-decoration:underline}.site-header__divider{color:var(--text-muted);font-weight:400}.site-header__title{color:var(--text-muted);white-space:nowrap;font-size:15px;font-weight:600}.toolbar-spacer{flex:1}.btn,.toggle-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}.btn:hover,.toggle-btn:hover{border-color:var(--accent)}.icon-btn{padding:6px 10px}.app{max-width:1000px;margin:0 auto;padding:20px 20px 48px}.piano-app{text-align:center}.piano-app h1{color:var(--text);margin:8px 0 4px;font-size:32px}.piano-app__intro{color:var(--text-muted);margin:0 0 24px}.piano-app__prompt{min-height:27px;margin:20px 0;font-size:18px;font-weight:600}.mode-selector{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:16px;display:flex}.mode-selector__btn{border:1px solid var(--border);background:var(--surface);min-width:150px;color:var(--text);cursor:pointer;text-align:left;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;display:flex}.mode-selector__btn:hover:not(:disabled){border-color:var(--accent)}.mode-selector__btn:disabled{opacity:.5;cursor:not-allowed}.mode-selector__btn--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.mode-selector__label{font-size:14px;font-weight:600}.mode-selector__description{color:var(--text-muted);font-size:12px}.stats-bar{color:var(--text-muted);justify-content:center;gap:18px;margin-bottom:12px;font-size:14px;display:flex}.stats-bar__item--correct{color:var(--key-correct)}.stats-bar__item--incorrect{color:var(--key-incorrect)}.choice-buttons{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:24px;display:flex}.choice-buttons__btn{border:1px solid var(--border);background:var(--surface);min-width:72px;color:var(--text);cursor:pointer;border-radius:8px;padding:10px 16px;font-size:16px;font-weight:600}.choice-buttons__btn:hover:not(:disabled){border-color:var(--accent)}.choice-buttons__btn:disabled{cursor:default}.choice-buttons__btn--correct{border-color:var(--key-correct);background:color-mix(in srgb, var(--key-correct) 18%, var(--surface))}.choice-buttons__btn--incorrect{border-color:var(--key-incorrect);background:color-mix(in srgb, var(--key-incorrect) 18%, var(--surface))}.piano-keyboard-wrapper{padding:8px 0 24px;overflow-x:auto}.piano-keyboard{-webkit-user-select:none;user-select:none;touch-action:none;min-width:620px;height:190px;margin:0 auto;display:flex;position:relative}.piano-key{cursor:pointer;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;padding:0 0 10px;display:flex}.piano-key:disabled{cursor:default}.piano-key--white{background:var(--key-white-bg);border:1px solid var(--key-white-border);z-index:1;flex:1 0 auto;height:100%;position:relative}.piano-key--black{background:var(--key-black-bg);border:1px solid var(--key-black-border);z-index:2;height:60%;position:absolute;top:0}.piano-key__label{pointer-events:none;font-size:11px;font-weight:600}.piano-key--white .piano-key__label{color:var(--key-label)}.piano-key--black .piano-key__label{color:var(--key-white-bg)}.piano-key--sounding.piano-key--white{background:color-mix(in srgb, var(--accent) 25%, var(--key-white-bg))}.piano-key--sounding.piano-key--black{background:color-mix(in srgb, var(--accent) 45%, var(--key-black-bg))}.piano-key--target{box-shadow:inset 0 0 0 3px var(--key-target)}.piano-key--found,.piano-key--correct{box-shadow:inset 0 0 0 3px var(--key-correct)}.piano-key--incorrect{box-shadow:inset 0 0 0 3px var(--key-incorrect)}.piano-key:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.results-panel{border:1px solid var(--border);background:var(--surface);border-radius:12px;max-width:480px;margin:0 auto;padding:28px}.results-panel h2{margin-top:0}.results-panel__grid{justify-content:center;gap:32px;margin:20px 0;display:flex}.results-panel__stat{flex-direction:column;align-items:center;display:flex}.results-panel__value{font-size:28px;font-weight:700}.results-panel__label{color:var(--text-muted);font-size:13px}.results-panel__mistakes{text-align:left;margin:20px 0}.results-panel__mistakes h3{color:var(--text-muted);margin-bottom:8px;font-size:14px}.results-panel__mistakes ul{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.results-panel__mistakes li{border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:14px}.results-panel__mistake-count{color:var(--text-muted)}.results-panel__flawless{color:var(--key-correct);font-weight:600}.results-panel__actions{justify-content:center;gap:12px;margin-top:20px;display:flex}