@font-face{font-family:Bravura;src:url('./assets/Bravura.woff2') format('woff2');font-display:block}*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#183039;background:#f2f5f6;font-synthesis:none;--ink:#183039;--muted:#697c83;--teal:#176b5b;--line:#dfe6e8}body{margin:0}button,select,input{font:inherit}button,a,select,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #39a78e;outline-offset:4px}button:disabled{cursor:default;opacity:.5}.topbar{height:88px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%}.brand{font-size:28px;letter-spacing:-1.5px;font-weight:750;display:flex;align-items:center;color:var(--ink);text-decoration:none}.brand-symbol{display:grid;place-items:center;background:var(--ink);color:#b8ead7;width:38px;height:38px;border-radius:10px;margin-right:12px;font-size:27px;letter-spacing:0}.brand-dot{color:#218671}.header-caption,.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px}.header-caption{color:#7e8d94}.quiet{border:0;background:none;font-size:13px;color:#6c7d84;display:inline-flex;gap:9px;align-items:center;padding:8px}.quiet:hover{color:var(--teal)}.circle-question{border:1px solid #94a2a7;border-radius:50%;width:17px;height:17px;font-size:12px}main{max-width:1380px;margin:auto;padding:42px 4.5% 0}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{color:#427c70;font-size:10px;letter-spacing:2px}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:42px;letter-spacing:-1.8px;margin:10px 0 9px}p{line-height:1.6}.page-heading p{font-size:14px;color:var(--muted);margin:0}.midi-button{background:#fff;border:1px solid #d7e0e3;border-radius:8px;display:flex;align-items:center;gap:10px;padding:13px 17px;font-size:13px;font-weight:600}.midi-button>span:first-child{font-size:23px;line-height:1}.connection-dot{width:7px;height:7px;border-radius:50%;background:#bdc8cd}.midi-button.connected .connection-dot{background:#2c9a74}.midi-status{font-size:13px;margin:0 0 14px;color:var(--teal)}.midi-status:empty{display:none}.workspace{display:grid;grid-template-columns:262px 1fr;gap:26px}.settings{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;display:flex;flex-direction:column}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.panel-title h2,.keyboard-toolbar h2{font-size:15px;margin:0;font-weight:650}.panel-title>span{color:#9aabb1;font-size:11px}fieldset{padding:0;border:0;margin:0 0 22px;min-width:0}legend,.field-label{font-size:12px;font-weight:650;margin-bottom:10px;display:block}.segmented{display:flex;background:#f1f5f5;border:1px solid #e7edee;border-radius:7px;padding:3px}.segmented button{flex:1;border:0;background:transparent;border-radius:5px;padding:9px 10px;font-size:12px;color:#75878e;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.segmented button.selected{background:white;color:#244b45;box-shadow:0 1px 4px #14332d15;font-weight:600}.music{font-family:Bravura}.clef-icon{font-size:27px;height:24px;line-height:30px}.field-label{margin-bottom:9px}select{font-size:12px;padding:12px 8px;width:100%;border:1px solid #dfe6e9;border-radius:6px;background:#fff;color:#3d5158;margin-bottom:22px}.range-visual{display:flex;justify-content:space-between;font-size:10px;margin-top:-11px;color:#8b989c}.range-visual>span:first-child{font-weight:600;color:#557068}.settings-divider{height:1px;background:#e9eef0;margin:23px 0}.toggle-row{font-size:12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:6px;cursor:pointer}.toggle-row input{position:absolute;opacity:0}.switch{width:30px;height:18px;border-radius:20px;background:#dce5e6;padding:3px;transition:.2s}.switch:after{content:"";display:block;width:12px;height:12px;border-radius:100%;background:white;box-shadow:0 1px 3px #0002;transition:.2s}input:checked+.switch{background:#367d6c}input:checked+.switch:after{transform:translateX(12px)}input:focus-visible+.switch{outline:3px solid #39a78e;outline-offset:3px}.setting-note{font-size:11px;line-height:1.8;color:#8a999e;margin:5px 0 23px}.reset-button{border:0;background:#f7f9f9;border-radius:6px;padding:11px;color:#6b7f86;font-size:12px;display:flex;gap:8px;justify-content:center;margin-top:auto}.practice{min-width:0}.scoreboard{display:flex;align-items:center;gap:44px;padding:1px 10px 24px}.metric-label{font-size:9px;letter-spacing:1.5px;font-weight:650;color:#7e8f96;display:block;margin-bottom:9px}.scoreboard strong{font-weight:450;font-size:29px;letter-spacing:-.8px}.scoreboard small{font-size:11px;color:#829098;margin-left:5px;letter-spacing:0}.session-count{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;color:#829098;font-size:11px;gap:5px}.session-count>span:first-child{font-size:18px;color:#4e6871}.sheet{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:440px;box-shadow:0 5px 18px #1c394405;position:relative;overflow:hidden}.sheet-top{display:flex;justify-content:space-between;padding:22px 26px;font-size:10px;color:#859399}.practice-tag{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#4b786c;display:flex;gap:6px;align-items:center}.practice-tag>span,.mini-dot{width:5px;height:5px;background:#4c9784;border-radius:50%;display:inline-block}.prompt{text-align:center;margin-top:11px}.prompt h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.5px;margin:0 0 8px}.prompt p{font-size:12px;color:#8b989e;margin:0}.staff{height:223px;display:flex;justify-content:center;align-items:center;padding:0 30px}.staff svg{width:100%;max-width:570px;height:220px;overflow:visible}.feedback{font-size:12px;color:#89999e;display:flex;align-items:center;justify-content:center;gap:9px;min-height:27px}.feedback-mark{color:#547f73;font-size:16px}.feedback.correct{color:#26775d}.feedback.wrong{color:#a9573d}.sheet-bottom{border-top:1px solid #edf1f2;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;margin-top:25px}.sheet-bottom .quiet{font-size:11px}.progress-dots{display:flex;gap:6px}.progress-dots span{width:5px;height:5px;border-radius:50%;background:#e2e9e9}.progress-dots .hit{background:#67a890}.progress-dots .miss{background:#d3967d}.keyboard-panel{margin-top:25px;padding:22px 25px 15px;border-radius:12px;background:#15313c;color:#e9f2f5;box-shadow:0 6px 14px #0b273c0e}.keyboard-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:10px}.keyboard-toolbar>div:first-child{display:flex;align-items:center;gap:15px}.keyboard-toolbar h2{font-size:13px}.keyboard-toolbar>div>span{font-size:11px;color:#98acb4}.keyboard-controls{display:flex;align-items:center;gap:15px}.keyboard-controls .segmented{background:#213e49;border-color:#34505a}.keyboard-controls .segmented button{color:#adbdc3;font-size:11px;padding:7px 12px}.keyboard-controls .segmented button.selected{background:#42605f;color:#f0fffa}.octave-control{display:flex;align-items:center;gap:8px;font-size:11px;color:#bdccd1}.octave-control button{border:1px solid #3b5660;background:transparent;color:#b8cbd1;border-radius:4px;font-size:16px;width:23px;height:24px}.piano{position:relative;height:151px;display:flex;gap:3px;user-select:none;touch-action:manipulation}.piano-key{position:relative;border:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:8px;touch-action:manipulation}.piano-key.white{background:linear-gradient(#fff 0%,#fcfdfd 85%,#e8eded 86%,#edf1f0 98%);color:#71838b;flex:1;height:151px;border-radius:3px 3px 6px 6px;padding-bottom:18px;box-shadow:0 3px 0 #0b222b;font-size:11px}.piano-key.black{position:absolute;width:4.1%;height:93px;background:linear-gradient(90deg,#13212a,#243640 75%,#14242b);color:#9eafb5;z-index:2;border:1px solid #0b1d26;border-bottom:5px solid #0a1a22;border-radius:0 0 4px 4px;transform:translateX(-50%);padding-bottom:11px;box-shadow:2px 3px 4px #001a2b40;font-size:10px}.piano-key.white.active{background:#b2e2cc;box-shadow:0 1px 0 #0b222b;transform:translateY(2px);height:149px}.piano-key.black.active{background:#43846e;border-bottom-color:#245644}.piano-key.hint{box-shadow:inset 0 0 0 3px #67b591}.key-shortcut{font-size:10px;border:1px solid currentColor;border-radius:3px;padding:1px 4px;opacity:.7}.key-name{height:12px}.middle-c{color:#37806b!important;font-weight:700}.keyboard-footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;font-size:10px;color:#98afb8}.keyboard-footer .mini-dot{background:#91c6b6;margin-right:6px}.page-footer{display:flex;align-items:center;justify-content:space-between;color:#93a0a6;font-size:10px;padding:25px 0 26px}.page-footer>span:last-child{font-size:8px;letter-spacing:1.8px}.footer-note{font-size:15px;margin-left:9px;color:#538173}dialog{border:1px solid #d7e5e2;border-radius:16px;padding:35px;max-width:550px;color:var(--ink);width:calc(100% - 32px);box-shadow:0 25px 100px #102c3440}dialog::backdrop{background:#102c3477;backdrop-filter:blur(5px)}dialog h2{font:30px Georgia,serif;margin:15px 0}dialog h3{font-size:16px;margin-top:25px}dialog p{font-size:14px;color:#647a81}kbd{font-family:inherit;background:#edf3f2;border-radius:3px;padding:2px 4px;font-size:12px}.dialog-close{position:absolute;right:12px;top:8px;font-size:28px;border:0;background:none;color:#71868b}.primary-button{background:var(--teal);color:white;border:0;border-radius:6px;padding:12px 22px;margin-top:12px;font-size:14px}button{transition:background .15s,color .15s}#sheet.correct{border-color:#94c6af}#sheet.wrong{border-color:#d8af9d}@media(min-width:1450px){main{padding-top:48px}.sheet{min-height:480px}.staff{height:260px}.staff svg{height:245px}.piano,.piano-key.white{height:170px}.piano-key.black{height:108px}}@media(max-width:950px){main{padding:30px 4% 0}.workspace{grid-template-columns:230px 1fr;gap:18px}.settings{padding:20px 17px}.scoreboard{gap:20px}.session-count{display:none}.keyboard-toolbar>div:first-child{display:block}.keyboard-toolbar>div:first-child>span{display:block;margin-top:6px}.sheet-top{padding:20px 16px}.staff{padding:0 10px}.header-caption{display:none}}@media(max-width:680px){.topbar{height:72px;padding:0 5%}.brand{font-size:25px}.page-heading{align-items:flex-start;gap:18px;flex-direction:column;margin-bottom:20px}h1{font-size:36px}.page-heading p{font-size:13px}.midi-button{padding:10px 13px}.workspace{display:flex;flex-direction:column-reverse}.scoreboard{gap:25px;padding:5px 5px 22px}.metric-label{font-size:8px;letter-spacing:1px}.scoreboard strong{font-size:25px}.sheet{min-height:400px}.sheet-top{font-size:9px}.prompt h2{font-size:26px}.prompt p{font-size:11px}.staff{height:190px}.staff svg{height:auto;max-height:200px}.sheet-bottom{margin-top:18px;padding:12px 6px}.settings{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;order:-1}.panel-title{grid-column:1/-1;margin-bottom:18px}.panel-title>span{display:none}fieldset{grid-column:1/-1;margin-bottom:18px}.field-label{font-size:12px}label[for="key-signature"]{grid-column:1;grid-row:3}#key-signature{grid-column:1;grid-row:4}label[for="range"]{grid-column:2;grid-row:3}#range{grid-column:2;grid-row:4}.range-visual{grid-column:1/-1;margin-bottom:18px}.settings-divider,.setting-note{display:none}.toggle-row{font-size:11px}.reset-button{padding:6px}.keyboard-panel{padding:17px 12px 12px;margin-top:18px}.keyboard-toolbar{flex-wrap:wrap}.keyboard-toolbar>div:first-child{display:flex;width:100%;justify-content:space-between}.keyboard-controls{justify-content:space-between;width:100%}.piano,.piano-key.white{height:140px}.piano-key.white{font-size:9px}.piano-key.black{height:87px;font-size:8px;width:4.7%}.key-shortcut{font-size:9px;padding:1px 2px}.keyboard-footer{font-size:9px;gap:10px;line-height:1.5}.page-footer>span:last-child{display:none}.prompt{margin-top:16px}.progress-dots{gap:4px}.progress-dots span{width:4px;height:4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Readable controls, including at browser text zoom. */
.page-heading p{font-size:16px}.header-caption,.eyebrow,.metric-label,.practice-tag,.sheet-top,.panel-title>span,.page-footer,.page-footer>span:last-child{font-size:12px}.quiet,.midi-button,legend,.field-label,.segmented button,select,.toggle-row,.reset-button,.sheet-bottom .quiet,.feedback,.prompt p,.keyboard-toolbar h2,.keyboard-controls .segmented button,.octave-control{font-size:14px}.range-visual,.setting-note,.scoreboard small,.session-count,.keyboard-toolbar>div>span,.keyboard-footer{font-size:12px}.piano-key.white,.piano-key.black,.key-shortcut{font-size:12px}.settings{padding:21px}.panel-title{margin-bottom:20px}fieldset{margin-bottom:19px}.settings-divider{margin:20px 0}.setting-note{margin:2px 0 18px}.keyboard-toolbar{flex-wrap:wrap}.clef-icon{font-size:25px}dialog p{font-size:16px}.key-shortcut{line-height:1.1}.page-footer>span:last-child{letter-spacing:1px}.staff svg{flex-shrink:1}
@media(max-width:950px){.workspace{grid-template-columns:248px 1fr}.scoreboard{gap:18px}.metric-label{font-size:12px;letter-spacing:.4px}.sheet-top{gap:10px;flex-wrap:wrap}.keyboard-toolbar>div:first-child{display:block}.octave-control{white-space:nowrap}.settings{padding:17px}}
@media(max-width:680px){.page-heading p{font-size:16px}.scoreboard{gap:20px}.metric-label{font-size:12px;letter-spacing:0}.scoreboard strong{font-size:25px}.sheet-top{font-size:12px}.prompt p{font-size:14px;padding:0 16px}.feedback{padding:0 12px;text-align:center}.sheet-bottom .quiet{font-size:14px;gap:4px}.progress-dots{display:none}.settings{padding:18px}.toggle-row{font-size:14px}.keyboard-toolbar>div:first-child{display:flex;gap:8px}.keyboard-toolbar>div>span{font-size:12px}.keyboard-controls{gap:8px}.keyboard-controls .segmented button{font-size:14px;padding:7px 9px}.keyboard-footer{font-size:12px;flex-wrap:wrap}.piano-scroll{overflow-x:auto;padding-bottom:4px}.piano{min-width:590px}.piano-key.black{width:4.1%}.field-label{font-size:14px}.range-visual{font-size:12px;gap:6px}.page-footer{font-size:12px}.clef-icon{font-size:25px}.session-count{display:none}}
@media(max-width:680px){main{display:flex;flex-direction:column}.workspace{display:contents}.page-heading{order:0}.midi-status{order:1}.practice{order:2}.keyboard-panel{order:3}.settings{order:4;margin-top:18px}.page-footer{order:5}.keyboard-panel{min-width:0}.switch{flex-shrink:0}}
/* Keep the practice surface focused on notation and controls. */
.header-actions{display:flex;align-items:center;gap:20px}
main{padding-top:30px;padding-bottom:30px}
.practice{display:flex;flex-direction:column}
.sheet{display:flex;flex-direction:column;flex:1;min-height:350px}
.staff{flex:1;min-height:clamp(220px,24vw,330px);height:auto}
.staff svg{width:100%;max-width:860px;height:auto;max-height:none}
.sheet-bottom{margin-top:16px;flex-wrap:wrap;gap:12px}
.practice-toggles{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.sheet-bottom .note-actions{margin-left:auto}
.note-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.note-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:38px;padding:9px 14px;border:1px solid #d8e3df;border-radius:6px;background:#f4f8f6;color:#355e52;font-size:14px;font-weight:500;white-space:nowrap}
.note-action:hover:not(:disabled){background:#e5f0ea;border-color:#adcbbb}
.note-action:disabled{background:#f7f9f8;color:#899991}
.practice-toggle{margin:0;gap:9px;min-height:32px;font-size:13px;color:#6c7d84;white-space:nowrap}
.practice-toggle .switch{flex-shrink:0}
.staff-note{cursor:pointer}
.staff-note:focus-visible{outline:none}
.staff-note:focus-visible .note-hit-area{stroke:#39a78e;stroke-width:2}
.staff-note.sounding ellipse{fill:#27846b}
.staff-note.sounding path{stroke:#27846b}
@media(max-width:680px){.sheet-bottom{flex-wrap:wrap;gap:8px 12px}.sheet-bottom .note-actions{margin-left:auto}}
.keyboard-footer:has(#keyboard-hint:empty){justify-content:flex-end}
@media(max-width:680px){.topbar{height:auto;min-height:72px;padding:16px 5%;gap:16px;flex-wrap:wrap}.header-actions{gap:12px;flex-wrap:wrap}.header-actions .midi-button{font-size:12px;padding:10px}.sheet{min-height:320px}.staff{min-height:190px}main{padding-top:20px}.scoreboard{flex-wrap:wrap}}

/* Visible settings bar keeps the staff and piano on the same centerline. */
.workspace{display:flex;flex-direction:column;gap:24px}
.settings{display:block;order:0;margin:0;padding:0;overflow:hidden}
.settings-disclosure{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:12px 24px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:#526c75}
.settings-disclosure::-webkit-details-marker{display:none}
.settings-disclosure:hover{background:#f5f8f7;color:var(--teal)}
.settings-disclosure:focus-visible{outline:3px solid #39a78e;outline-offset:-3px;border-radius:10px}
.settings-disclosure svg{flex-shrink:0}
.settings[open]>.settings-disclosure{border-bottom:1px solid #e9eef0}
.settings[open]>.settings-disclosure svg{transform:rotate(180deg)}
.settings:not([open])>.settings-body{display:none}
.settings-primary{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.2fr) minmax(0,1fr);gap:28px;padding:20px 24px}
.setting-group{min-width:0}
.settings fieldset,.settings select{margin:0}
.settings legend,.settings .field-label{margin-bottom:9px}
.settings .segmented{min-height:45px}
.settings .segmented button{padding:7px 12px}
.settings select{height:45px;padding:10px 12px}
.settings-secondary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;border-top:1px solid #e9eef0;background:#fbfcfc;flex-wrap:wrap}
.settings-switches{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.settings .toggle-row{margin:0;gap:12px;min-height:32px}
.settings-summary{display:flex;align-items:center;gap:22px;margin-left:auto}
.settings .range-visual{margin:0;gap:12px;white-space:nowrap}
.settings .reset-button{margin:0;padding:8px 12px;min-height:36px;white-space:nowrap;background:transparent;border:1px solid #dfe6e8}
.settings .reset-button:hover{background:#edf3f1}
@media(max-width:950px){.settings-primary{gap:18px;grid-template-columns:minmax(190px,1fr) minmax(0,1fr) minmax(0,1fr);padding:18px}.settings-secondary{padding:12px 18px}.settings-switches{gap:18px}.settings-summary{gap:16px}}
@media(max-width:680px){.workspace{display:flex;order:2;gap:20px;min-width:0}.settings{order:0;margin:0}.settings-primary{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px}.setting-clef{grid-column:1/-1}.settings-secondary{padding:12px 16px;gap:12px}.settings-switches{width:100%;gap:8px 20px}.settings .toggle-row{font-size:13px;gap:8px}.settings-summary{width:100%;justify-content:space-between;margin:0}.settings select{padding:8px;font-size:13px}.settings .range-visual{gap:8px}.settings .reset-button{font-size:13px}.practice{order:1}}

/* Keep session actions accessible while practice options are collapsed. */
.session-actions{display:flex;align-items:center;gap:20px;margin-left:auto}
.scoreboard{flex-wrap:wrap;gap:18px 28px}
.answer-metric{padding:8px 10px;margin:-8px -10px;border-radius:8px;min-width:74px}
.correct-metric strong{color:#26775d}
.wrong-metric strong{color:#a9573d}
.note-choices{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;max-width:820px;margin:0 auto}
.note-choices[hidden],.piano-scroll[hidden]{display:none}
.note-choice{min-height:54px;border:1px solid #4c6770;border-radius:8px;background:#24434e;color:#e9f2f5;font-size:23px;font-weight:500}
.note-choice:nth-child(-n+7){background:#edf4f1;border-color:#edf4f1;color:#244b45}
.note-choice:hover{border-color:#a0d4c2}
.note-choice:active,.note-choice.hint{background:#b2e2cc;color:#183039;border-color:#83c6a9}
.notes-mode .keyboard-label-toggle,.notes-mode .octave-control{display:none}
.keyboard-controls{flex-wrap:wrap}
.typing-keyboard{--key-gap:8px;--key-width:calc((100% - 11 * var(--key-gap)) / 12);min-width:650px;max-width:1060px;margin:0 auto;padding:12px 24px 8px;user-select:none;touch-action:manipulation}
.typing-row{display:flex;justify-content:center;gap:var(--key-gap)}
.typing-row.home-row{margin-top:12px}
.typing-key{flex:0 0 var(--key-width);height:76px;padding:12px;border-radius:9px;border:1px solid #536d78;border-bottom:4px solid #0e2630;box-shadow:0 3px 0 #0b222b;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;background:#294854;color:#e1f0ed;text-align:left}
.typing-letter{font-size:11px;font-weight:500;line-height:1;opacity:.65}
.typing-note{font-size:23px;font-weight:650;letter-spacing:-.5px;align-self:center;flex:1;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.typing-key.natural-key{background:#f1f5f3;color:#294a43;border-color:#d5e0de;border-bottom-color:#b8cac4}
.typing-key.unused{background:#193640;border-color:#2c4650;border-bottom-color:#102c36;color:#647d87;box-shadow:none}
.typing-key.active{background:#b2e2cc;color:#183039;border-color:#83c6a9;transform:translateY(2px);box-shadow:0 1px 0 #0b222b}
.typing-key.hint{outline:3px solid #67b591;outline-offset:-3px}
.typing-mode .piano-scroll{overflow-x:auto;padding-bottom:6px}
@media(max-width:680px){.typing-keyboard{--key-gap:6px;min-width:650px}.typing-key{height:66px;padding:9px}.typing-note{font-size:19px}}
@media(max-width:680px){.input-switch{width:100%}.note-choices{gap:6px}.note-choice{font-size:19px;min-height:48px}.keyboard-controls .input-switch button{padding:9px 8px}}
.keyboard-label-toggle{margin:0;gap:10px;min-height:32px;color:#cfdee2;font-size:14px;white-space:nowrap}
.keyboard-toolbar>div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.keyboard-label-toggle .switch{background:#536d76;flex-shrink:0}
.keyboard-label-toggle input:checked+.switch{background:#5caa8f}
.sheet-top{align-items:center}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}
.mode-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.mode-bar>.segmented{background:#e8eeec}
.mode-bar>.segmented button{min-width:98px;padding:10px 16px;font-size:14px}
.timed-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.run-clock{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--teal);min-width:72px;text-align:center}
.run-overlay{position:absolute;inset:72px 16px 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;z-index:3;text-align:center}
.run-overlay>span{color:#697c83;font-size:14px}
.run-overlay>strong{font-size:clamp(28px,5vw,52px);font-weight:500;letter-spacing:-1px;color:var(--ink)}
.run-overlay .primary-button{margin:0}
.timed-waiting #staff,.timed-waiting #feedback{visibility:hidden}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.setup-grid label{font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:8px}
.setup-grid select,.setup-grid input{margin:0;width:100%;height:42px;border:1px solid #dfe6e9;border-radius:6px;padding:9px 10px;font-size:14px;color:var(--ink);background:#fff}
.setup-description{font-size:13px!important;margin:20px 0 8px}
.setup-error{color:#a9573d;font-size:14px!important}
.setup-error:empty{display:none}
.dialog-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.dialog-actions .primary-button{margin:0}
.leaderboard-dialog{max-width:820px}
.board-settings{font-size:13px!important;margin-top:0}
.run-result{padding:20px;background:#eaf5ef;border-radius:10px;color:#256a55;font-size:20px;font-weight:600;line-height:1.5}
.board-order{width:fit-content;margin:20px 0 12px}
.board-table-wrap{overflow-x:auto;max-height:340px}
.board-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.board-table th,.board-table td{text-align:right;padding:12px 10px;border-bottom:1px solid #e1e9e6}
.board-table th{font-size:11px;color:#6b7f86;position:sticky;top:0;background:#fff}
.board-table th:nth-child(2),.board-table td:nth-child(2){text-align:left}
.latest-result{background:#eef7f2}
.board-footnote,#board-storage{font-size:12px!important;color:#697c83}
#board-storage:empty{display:none}
@media(max-width:680px){.mode-bar{order:0;margin-bottom:20px}.timed-actions{width:100%}.timed-actions .note-action{font-size:13px}.run-clock{margin-right:auto}.run-overlay{inset:150px 12px 110px}.setup-grid{gap:12px}#timed-setup,.leaderboard-dialog{padding:24px}.run-result{font-size:17px}.board-table th,.board-table td{padding:10px 8px}}
.sheet-top{gap:16px;flex-wrap:wrap;padding:16px 20px}
.compact-settings{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-left:auto;color:#526c75}
.compact-settings .segmented{padding:2px;background:#f4f7f6}
.compact-settings .segmented button{min-height:32px;padding:5px 10px;font-size:12px;gap:6px}
.compact-settings .clef-icon{font-size:23px;height:22px;line-height:26px}
.compact-settings select{width:auto;max-width:160px;height:38px;margin:0;padding:6px 26px 6px 10px;font-size:12px;background-color:#f8faf9}
.compact-sound{margin:0;gap:8px;min-height:38px;font-size:12px}
.compact-sound .switch{flex-shrink:0}
.compact-settings select option{color:var(--ink);text-shadow:none}
@media(max-width:800px){.compact-settings{gap:8px}.sheet-top{padding:14px 16px}.compact-settings select{max-width:145px}}
@media(max-width:600px){.compact-settings{width:100%;margin:0;justify-content:flex-start}.compact-settings .compact-clef{flex:1 0 100%}.compact-settings select{flex:1;min-width:0;max-width:none}.compact-settings .segmented button{min-height:36px}.compact-sound{padding-left:4px}}
.key-signature-header{display:flex;align-items:center;gap:8px}
.key-name-reveal{display:grid;align-items:center;min-width:96px;min-height:32px;border-radius:4px;cursor:default}
.key-name-reveal:focus-visible{outline:2px solid #39a78e;outline-offset:3px}
.key-name-reveal>*{grid-area:1/1}
.key-name-hidden .key-name-reveal:not(:hover):not(:focus) #current-key{filter:blur(5px);user-select:none}
.key-name-toggle{display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:6px;background:transparent;color:#82969c}
.key-name-toggle:hover{background:#eef4f2;color:var(--teal)}
.key-name-toggle[aria-pressed="true"]{background:#edf5f1;border-color:#d8e8df;color:var(--teal)}
.key-name-toggle .eye-slash{display:none}
.key-name-toggle[aria-pressed="true"] .eye-slash{display:block}
.session-actions .session-count{display:flex;margin-left:0}
.session-actions .reset-button{margin:0;padding:10px 14px;min-height:40px;white-space:nowrap;background:#fff;border:1px solid var(--line)}
.session-actions .reset-button:hover{background:#e9f2ee;color:var(--teal)}
@media(max-width:950px){.scoreboard{flex-wrap:wrap;row-gap:18px}}
@media(max-width:680px){.session-actions{width:100%;justify-content:flex-end;gap:16px}.session-actions .reset-button{font-size:13px;padding:9px 12px}}