.scales-room{--scales-ink:#263d49;--scales-accent:#126b61;max-width:1080px;min-width:0;margin:0 auto;color:var(--scales-ink)}.scales-heading{margin:20px 0 26px}.scales-heading h1{margin:0;font:400 clamp(36px,5vw,48px)/1.1 Georgia,serif;letter-spacing:-.7px}.scales-heading p{margin:12px 0 0;color:#5b6d75;font-size:15px}.scales-selectors{display:flex;gap:16px;margin-bottom:26px}.scales-selectors label{display:grid;gap:8px;min-width:180px;font-size:13px;color:#536770}.scales-selectors select{width:100%;padding:12px 36px 12px 12px;border:1px solid #c5d1d8;border-radius:8px;background:#fffdfa;color:var(--scales-ink);font:inherit;min-height:46px}.scales-summary h2{margin:0;font:400 28px/1.25 Georgia,serif}.scales-summary>span{display:block;margin:8px 0 14px;color:#60717a;font-size:14px}.scales-staff-scroll{max-width:100%;border:1px solid #dce3e5;border-radius:10px;background:#fffdf7;overflow-x:auto}.scales-staff-scroll svg{display:block;width:100%;min-width:664px;height:auto}.scales-small{font-size:12px;line-height:1.6;color:#60717a;margin:14px 0}.scales-signature{font-size:14px;margin:0 0 16px}.scales-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}.scales-actions .primary,.scales-actions .secondary{min-height:44px}.scales-tempo{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:#60717a}.scales-tempo input{width:70px;padding:10px;border:1px solid #c5d1d8;border-radius:7px;font:inherit;background:#fffdfa;color:var(--scales-ink)}.scales-practice-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.scales-progress{display:flex;justify-content:space-between;font-size:12px;color:#60717a;margin:0 0 10px}.scales-next{display:flex;align-items:center;gap:16px;margin-top:16px}.scales-next strong{font:400 30px/1.1 Georgia,serif;color:var(--scales-accent)}.scales-next>span{font-size:14px;color:#536d74;border-left:1px solid #c8d8d8;padding-left:16px}.scales-status{font-size:14px;line-height:1.5;min-height:23px;color:var(--scales-accent);margin:10px 0 14px}.scales-keyboard{overflow-x:auto;padding:2px 0 5px}.scales-keyboard .keyboard{margin:0 auto}.scales-guidance{margin-top:18px}.scales-result{display:flex;align-items:center;gap:26px;padding:28px 0}.scales-result>strong{font:400 68px/1 Georgia,serif;color:var(--scales-accent);white-space:nowrap}.scales-result>strong>span{font-size:26px;color:#61777b}.scales-result h2{font:400 30px/1.2 Georgia,serif;margin:0}.scales-result p{color:#60717a;font-size:14px;margin:9px 0}.scales-room button:focus-visible,.scales-room input:focus-visible,.scales-room select:focus-visible,.scales-staff-scroll:focus-visible{outline:3px solid #529e98;outline-offset:3px}
@media(max-width:650px){.scales-heading{margin:10px 0 22px}.scales-selectors{gap:10px;margin-bottom:22px}.scales-selectors label{min-width:0;flex:1}.scales-summary h2{font-size:25px}.scales-actions{gap:10px}.scales-actions>button{flex:1 1 auto}.scales-tempo{margin-left:0}.scales-result{gap:18px}.scales-result>strong{font-size:54px}.scales-result h2{font-size:26px}.scales-exercise .scales-heading{margin:10px 0 20px}.scales-next{margin-top:12px}.scales-keyboard .keyboard{min-width:540px}.scales-exercise .scales-actions .scales-small{flex-basis:100%;margin:0}}
@media(orientation:landscape) and (max-height:600px){.scales-exercise .scales-heading{display:none}.scales-exercise .scales-summary h2{font-size:21px}.scales-exercise .scales-summary>span{font-size:12px;margin:4px 0 8px}.scales-exercise .scales-progress{margin-bottom:4px}.scales-exercise .scales-staff-scroll svg{height:108px;width:auto;min-width:0;margin:auto}.scales-exercise .scales-next{margin-top:6px}.scales-exercise .scales-next strong{font-size:23px}.scales-exercise .scales-status{margin:5px 0 7px;font-size:12px;min-height:18px}.scales-exercise .scales-keyboard .keyboard,.scales-exercise .scales-keyboard .piano-key.white{height:108px}.scales-exercise .scales-keyboard .piano-key.black{height:70px}.scales-exercise .scales-actions{margin-top:8px}.scales-exercise .scales-actions>button{min-height:36px;padding:8px 14px}.scales-exercise .scales-guidance{margin-top:8px}.phone-practice:not(.practice-options-open) .scales-exercise .scales-actions,.phone-practice:not(.practice-options-open) .scales-exercise .scales-guidance{display:none}}

/* Keep notes at a readable size without stretching the score vertically. */
main[data-view="scales"]>.practice-help{display:none}.scales-staff-scroll svg{height:162px}.scales-exercise .scales-heading{margin:12px 0 20px}.scales-exercise .scales-heading p{display:none}
@media(orientation:landscape) and (max-height:600px){
 .phone-practice main[data-view="scales"]{padding-top:4px;padding-bottom:4px}
 .phone-practice main[data-view="scales"]>.practice-toolbar{min-height:38px;padding:3px 0;margin-bottom:3px}
 .phone-practice main[data-view="scales"]>.practice-toolbar button{min-height:34px;padding:6px 12px}
 .phone-practice main[data-view="scales"]>.studio-sound-check{min-height:36px;margin-bottom:4px}
 .phone-practice main[data-view="scales"]>.studio-sound-check .quiet-button{min-height:34px;padding-top:3px;padding-bottom:3px}
 .phone-practice .scales-exercise{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"summary progress" "score score" "next status" "keys keys";column-gap:16px;row-gap:4px}
 .phone-practice .scales-exercise .scales-practice-top{grid-area:summary;min-width:0;min-height:27px}
 .phone-practice .scales-exercise .scales-summary{display:flex;align-items:baseline;gap:12px;min-width:0}
 .phone-practice .scales-exercise .scales-summary h2{font-size:20px;white-space:nowrap}
 .phone-practice .scales-exercise .scales-summary>span{font-size:11px;margin:0;white-space:nowrap}
 .phone-practice .scales-exercise .scales-progress{grid-area:progress;gap:16px;align-items:center;font-size:11px;margin:0}
 .phone-practice .scales-exercise .scales-staff-scroll{grid-area:score}
 .phone-practice .scales-exercise .scales-staff-scroll svg{height:104px}
 .phone-practice .scales-exercise .scales-next{grid-area:next;gap:10px;margin:0;min-height:27px}
 .phone-practice .scales-exercise .scales-next strong{font-size:22px}
 .phone-practice .scales-exercise .scales-next>span{font-size:12px;padding-left:10px}
 .phone-practice .scales-exercise .scales-status{grid-area:status;text-align:right;font-size:12px;align-self:center;margin:0;min-height:0;max-width:380px}
 .phone-practice .scales-exercise .scales-keyboard{grid-area:keys;padding-bottom:0}
 .phone-practice .scales-exercise .scales-keyboard .keyboard,.phone-practice .scales-exercise .scales-keyboard .piano-key.white{height:106px}
 .phone-practice:not(.practice-options-open) .scales-exercise .scales-practice-top>.quiet-button{display:none}
 .phone-practice.practice-options-open .scales-exercise .scales-actions,.phone-practice.practice-options-open .scales-exercise .scales-guidance{grid-column:1/-1}
}

.scales-selectors{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(130px,1fr) minmax(130px,1fr)}.scales-selectors label{min-width:0}.scales-family-note{margin-top:-6px}.scales-staff-scroll svg{min-width:100%;width:auto}
@media(max-width:650px){.scales-selectors{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.scales-family-selector{grid-column:1/-1}.scales-staff-scroll svg{min-width:700px}}
@media(orientation:landscape) and (max-height:600px){.scales-exercise .scales-staff-scroll svg{min-width:0;max-width:100%;width:auto}.phone-practice .scales-exercise .scales-summary{flex-wrap:wrap;gap:2px 10px}.phone-practice .scales-exercise .scales-summary h2{font-size:18px}}

@media(orientation:landscape) and (max-height:600px){.scales-exercise .scale-note>text{font-size:16px}}

.scales-setup .scales-actions{margin:0 0 24px}