.scales-page h1 em{color:var(--green)}.scales-page .lead{max-width:780px}.scales-panel{background:#fcfcf8;border:1px solid var(--line);border-top:4px solid var(--gold);padding:26px;border-radius:5px}.scales-panel h2{font-size:32px}.scales-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:24px 0}.scales-controls select,.scales-page button{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:4px;padding:10px 15px;color:var(--ink);background:var(--paper)}.scales-page button{cursor:pointer}.scales-page button:disabled{opacity:.45;cursor:default}.scales-hint{font-size:13px;color:var(--muted)}#scales-progress{display:flex;gap:8px;padding:0;list-style:none;flex-wrap:wrap}#scales-progress li{min-width:55px;padding:12px;text-align:center;border:1px solid var(--line);border-radius:4px}.scales-page .done{background:#e8ecdf;color:var(--green)}#scales-status{min-height:48px}.scales-page .correct{color:#205b35}.scales-page .wrong{color:#942828}.scales-keyboard-scroll{overflow-x:auto;padding:8px 3px 18px}#scales-keyboard{position:relative;width:840px;height:210px}#scales-keyboard button{position:absolute;top:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:0 0 5px 5px;font-size:12px;line-height:1.4;padding:8px 3px}#scales-keyboard .white{width:56px;height:200px;background:#fffef9;border-color:#8b968f}#scales-keyboard .black{z-index:2;width:36px;height:126px;background:#173b34;color:#fffef9;font-size:10px}#scales-keyboard b{font-size:10px;background:#e3c281;color:#173b34;padding:2px}#scales-keyboard .played{background:#b4d5ac;color:#173b34}#scales-keyboard .wrong{background:#f2b6ac;color:#78251c}#scales-keyboard button:focus-visible{outline:3px solid var(--gold);outline-offset:1px;z-index:3}.scales-help{max-width:800px;margin-top:42px}.scales-help h2{font-size:30px}.scales-help p{color:var(--muted)}@media(max-width:600px){.scales-panel{padding:16px 12px}#scales-progress{gap:5px}#scales-progress li{min-width:48px;padding:8px}.scales-controls{gap:10px}}