:root{font-family:system-ui,sans-serif;color:#e8eae5;background:#141b1b;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:32px}header,footer,.instrument-top,.controls,.readout{display:flex;align-items:center;justify-content:space-between;gap:20px}header{font-size:11px;letter-spacing:2px;color:#9daaa5}.brand{font-size:18px;color:#dfe8d8;text-decoration:none;font-weight:700}.intro{padding:55px 0 32px}.eyebrow{font-size:10px;letter-spacing:2px;color:#b4c7a1;text-transform:uppercase}h1{font-size:clamp(42px,6vw,68px);line-height:1.05;letter-spacing:-3px;margin:16px 0}p{color:#aab8b2;line-height:1.6}.instrument{background:#202a29;border:1px solid #394542;border-radius:16px;padding:28px;box-shadow:0 25px 60px #0003}h2{font-size:23px;margin:8px 0}.instrument-top p{margin:0;font-size:12px}button,select{font:inherit;border:1px solid #53615a;border-radius:6px;background:#303d37;color:#e8eae5;padding:10px 14px;cursor:pointer}button:hover{background:#45564a}button:focus-visible,a:focus-visible{outline:3px solid #c5e394;outline-offset:3px}button:disabled{opacity:.4;cursor:default}#start{background:#c4db9d;color:#1e2a20;font-weight:650}#status{font-size:12px;min-height:20px;margin:16px 0}.controls{justify-content:flex-start;flex-wrap:wrap;margin:22px 0;gap:16px;font-size:12px}.octave{display:flex;gap:12px;align-items:center}.octave button{padding:5px 12px}.controls label{display:flex;align-items:center;gap:8px}input{accent-color:#c4db9d;width:100px}select{padding:6px}kbd{font:10px system-ui;opacity:.65;margin-left:6px}button[aria-pressed=true]{background:#b6cd92;color:#172019}.keyboard-scroll{overflow-x:auto;padding:4px 2px 12px}#keyboard{position:relative;display:flex;height:238px;min-width:680px;user-select:none;touch-action:none}.key{border-radius:0 0 6px 6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:0 0 15px;touch-action:none}.key.white{flex:1;background:linear-gradient(#e2e4da,#fafbf1 85%,#d1d6c8);color:#34423b;border:1px solid #8b9488;height:100%;box-shadow:inset 0 -5px #bcc3b6}.key.black{position:absolute;top:0;width:6%;height:62%;z-index:2;background:linear-gradient(100deg,#111817,#303a36);color:#d2dbd0;border:1px solid #0a1110;box-shadow:0 6px 5px #0005,inset 0 -5px #0d1511}.key.active{background:#bfd98b!important;box-shadow:inset 0 -3px #81995c!important}.key .pitch{font-size:10px;opacity:.6}.key .binding{font-size:14px;font-weight:650}.readout{font-size:10px;letter-spacing:1px;color:#91a39a;margin-top:12px;min-height:20px}#notes{color:#c5dfa3;font-size:13px;letter-spacing:0}.help{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:32px 0}h3{font-size:15px;font-weight:500}.help p{font-size:13px}b{font-weight:550;color:#d2dcd1}footer{border-top:1px solid #35423c;padding-top:20px;font-size:11px;color:#84988c}footer a{color:#b2c79a}@media(max-width:650px){main{padding:20px}.intro{padding-top:35px}.instrument{padding:16px}.help{grid-template-columns:1fr;gap:8px}.readout span:last-child,header>span{display:none}footer{align-items:flex-start;flex-direction:column}.instrument-top{gap:10px}h1{letter-spacing:-2px}}
/* Shared site and reference instrument */
[hidden]{display:none!important}nav{display:flex;gap:24px;font-size:13px;letter-spacing:0}nav a{color:#aab8b2;text-decoration:none}nav a[aria-current],nav a:hover{color:#d3e9ac}body{padding-bottom:70px}body.piano-open{padding-bottom:340px}.utility-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 48px}.utility-card{display:block;padding:30px;border:1px solid #3c4b42;background:#202a29;border-radius:14px;color:#dbe8d2;text-decoration:none}.utility-card:hover{border-color:#b5ce94}.utility-card h2{display:flex;justify-content:space-between;margin:20px 0}.utility-card p{font-size:14px;min-height:70px}.utility-card>span:last-child{font-size:13px}.keyboard{position:relative;display:flex;height:238px;min-width:680px;user-select:none;touch-action:none}.piano-dock{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#192220;border-top:1px solid #61705c;box-shadow:0 -8px 32px #0005}.dock-bar{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:8px 20px;font-size:12px;gap:12px}.dock-bar small{color:#a5b698}.dock-bar button{padding:6px 12px;font-size:12px}#dock-piano{max-width:900px;margin:auto;padding:0 20px 12px}#dock-piano h2,#dock-piano .eyebrow,#dock-piano .readout>span:last-child{display:none}#dock-piano .instrument-top{float:right}#dock-piano .instrument-top button{padding:5px 12px;font-size:11px}#dock-piano [data-control=status]{font-size:11px;margin:4px 0;min-height:18px}#dock-piano .controls{margin:8px 0;gap:12px;font-size:11px}#dock-piano .controls button{padding:4px 8px}#dock-piano .keyboard{height:115px;min-width:520px}#dock-piano .key{padding-bottom:7px;gap:3px}#dock-piano .key .pitch{font-size:9px}#dock-piano .key .binding{font-size:11px}#dock-piano .readout{margin:0;min-height:17px}#dock-piano .keyboard-scroll{padding-bottom:5px}#dock-piano .readout span{font-size:11px}.trainer-intro{padding:36px 0 24px}.trainer-intro h1{font-size:48px}.trainer-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;margin-bottom:36px;align-items:start}.settings h2{font-size:18px;margin-top:0}.settings p{font-size:12px}.range-fields{display:flex;gap:12px;margin:20px 0}.range-fields label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:12px}.range-fields select{width:100%}.check{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:13px}.check input{width:17px;height:17px;margin:0}.hint{color:#94a79c}.trainer-volume{display:flex;flex-direction:column;gap:10px;font-size:12px;margin-top:24px}.trainer-volume input{width:100%}#settings-message{color:#efc28e}.exercise-heading{display:flex;justify-content:space-between;gap:12px}#score{font-size:12px;color:#bfd597}.listen{text-align:center;padding:25px 0}.sound-icon{font-size:36px;color:#c4db9d}.listen h2{font-size:24px}.listen p{font-size:13px;min-height:22px}.actions{display:flex;gap:10px;flex-wrap:wrap}.listen .actions{justify-content:center}.primary{background:#c4db9d;color:#1e2a20;font-weight:600}.primary:hover{background:#d4e9b4}fieldset{border:0;padding:0;margin:0 0 24px}legend{font-size:12px;color:#b1c3a5;margin-bottom:12px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-grid label{display:flex;align-items:center;gap:8px;padding:12px;background:#293630;border:1px solid #4b5b4e;border-radius:6px;font-size:13px;cursor:pointer}.answer-grid label:has(:checked){border-color:#c4db9d;background:#40523a}.answer-grid input{width:15px;margin:0}.answer-grid label:has(:disabled){opacity:.55;cursor:default}#feedback:not(:empty){padding:18px;margin-top:20px;background:#29392d;border-left:3px solid #b9d196;border-radius:4px}#feedback.incorrect{border-color:#e4ad7e}#feedback p{font-size:13px;margin:8px 0 0}.text-button{border:0;background:none;padding:0;margin-top:24px;color:#a5b698;font-size:12px;text-decoration:underline}@media(max-width:800px){.trainer-layout{grid-template-columns:1fr}.settings .hint{max-width:620px}.trainer-intro h1{font-size:40px}}@media(max-width:650px){.utility-grid{grid-template-columns:1fr}.dock-bar small{display:none}#dock-piano .controls{gap:8px}#dock-piano .controls label{font-size:10px}#dock-piano input[type=range]{width:65px}#dock-piano .controls kbd{display:none}#dock-piano .instrument-top{float:none;position:absolute;right:20px;top:52px}body.piano-open{padding-bottom:370px}.exercise-heading{flex-wrap:wrap}}
/* Melodic dictation */
.dictation-settings{margin-bottom:24px;padding:20px 28px}.dictation-settings .range-fields{flex-wrap:wrap;margin:0;gap:16px}.dictation-settings .range-fields label{min-width:110px}.dictation-settings input[type=number]{width:100%;padding:10px;border:1px solid #53615a;border-radius:6px;background:#303d37;color:#e8eae5;font:inherit}.dictation-settings .hint{font-size:12px;margin-bottom:0}.dictation-exercise{margin-bottom:28px}.dictation-playback{margin-top:24px}.volume-inline{display:flex;align-items:center;gap:10px;font-size:12px}.entry-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:24px 0 10px}.entry-toolbar fieldset{display:flex;gap:12px;flex-wrap:wrap;margin:0}.entry-toolbar label{display:flex;align-items:center;gap:5px;font-size:13px}.entry-toolbar input{width:15px;margin:0}.entry-toolbar legend{margin-bottom:8px}.entry-toolbar button{font-size:12px}.dictation-exercise .hint{font-size:12px}.staff-scroll{overflow-x:auto;border-radius:8px;margin-top:16px}.staff-scroll svg{width:100%;height:auto;display:block;cursor:crosshair;touch-action:pan-x pan-y}.note-slots{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.note-slots button{min-width:42px;padding:7px 10px;font-size:12px}.note-slots button[aria-pressed=true]{outline:2px solid #c4db9d;outline-offset:2px}#entry-status{font-size:13px;min-height:20px}#solution-toggle{margin-top:16px;font-size:12px}nav{flex-wrap:wrap}@media(max-width:650px){header{align-items:flex-start;gap:16px}nav{gap:12px;font-size:11px}.brand{font-size:15px;white-space:nowrap}.dictation-settings{padding:16px}.dictation-exercise{padding:16px}.dictation-playback button{font-size:12px;padding:9px}.entry-toolbar{gap:10px}.entry-toolbar fieldset{width:100%}}
/* Endless sight reading */
.reading-main{max-width:1380px}.reading-settings{padding:20px 26px;margin-bottom:24px}.reading-settings .range-fields{margin:0;flex-wrap:wrap;gap:16px}.reading-settings .range-fields label{min-width:130px}.reading-settings input[type=number]{width:100%;font:inherit;padding:10px;background:#303d37;border:1px solid #53615a;border-radius:6px;color:#e8eae5}.reading-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:10px}.reading-settings p{font-size:12px}.reading-sheet{border-radius:10px;background:#f2f1e8;color:#27322b;box-shadow:0 18px 40px #0003;margin-bottom:30px;padding:20px 16px 10px}.reading-sheet-head{display:flex;justify-content:space-between;gap:15px;padding:4px 12px 0;font-size:13px}.reading-sheet-head span{color:#697269}.reading-scroll{overflow-x:auto}.reading-scroll svg{display:block;width:100%;min-width:1220px;height:auto}.reading-main .intro h1{font-size:clamp(36px,5vw,52px)}@media(min-width:1250px){.reading-scroll svg{min-width:0}}@media(max-width:650px){.reading-sheet{padding:12px 0}.reading-sheet-head{flex-direction:column;font-size:12px}.reading-settings{padding:16px}.reading-actions{gap:12px}}