.keys-app [hidden]{display:none!important}.keys-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:24px 0}.keys-controls label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;font-size:1rem}.keys-controls select{min-height:44px;max-width:100%;font-size:1rem}.keys-controls .score{margin-left:auto}.keys-staff{max-width:610px;margin:20px auto}.keys-staff svg{display:block;width:100%;height:auto}.keys-app .keys-answers{grid-template-columns:repeat(2,minmax(0,1fr))}.keys-app .keys-answers button{line-height:1.5;padding:14px;text-align:left}.keys-answer-minor{display:block;font-size:.9rem;font-weight:400}.keys-explanation{padding:16px 20px;background:#edf5d3;border:1px solid var(--line);border-radius:14px;margin:22px 0;line-height:1.7}.keys-explanation h3{margin-top:0}.keys-scales{display:grid;gap:18px;margin:24px 0}.keys-scales section{min-width:0;border:1px solid var(--line);border-radius:12px;padding:18px}.keys-scales h3{font-size:1.1rem;margin:0 0 16px}.keys-notes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;list-style:none;margin:0 0 18px;padding:0}.keys-notes li{padding:10px 3px;text-align:center;font-size:1rem;border:1px solid #aab5b1;border-radius:6px;background:#fff}.keys-notes .is-altered{background:#e5ebff;border-color:#6473bb;font-weight:700}.keys-notes .is-playing{outline:3px solid #3647b6;outline-offset:1px}.keys-app [data-status]{min-height:1.7em}.keys-app [data-feedback]{line-height:1.7}
@media(max-width:650px){.keys-controls label{width:100%}.keys-controls select{flex:1 1 170px;width:0}.keys-controls .score{margin-left:0}.keys-app .keys-answers{grid-template-columns:1fr}.keys-notes{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.keys-scales section,.keys-explanation{padding:14px}.keys-app .volume{flex-wrap:wrap}.keys-app .practice-actions>.button{flex:1 1 180px}}