.harmony-app [hidden]{display:none!important}.harmony-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:24px 0}.harmony-controls label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}.harmony-controls select{min-height:44px;max-width:100%;font-size:1rem}.harmony-controls .score{margin-left:auto}.harmony-direction{color:var(--muted);line-height:1.65}.harmony-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:12px;margin:22px 0}.harmony-card{display:flex;min-width:0;min-height:120px;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px;border:1px solid #a8b9aa;border-radius:14px;background:#f2f5ec;text-align:center}.harmony-card strong{font-size:1.35rem;line-height:1.2}.harmony-card span,.harmony-card small{line-height:1.45;overflow-wrap:anywhere}.harmony-card.is-focus{background:#e8edff;border:2px solid #6676b7}.harmony-card.is-playing{background:#263d91;color:#fff;border-color:#263d91}.harmony-arrow{align-self:center;font-size:1.35rem;color:var(--muted)}.harmony-explanation{min-height:3.4em;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#edf5d3;line-height:1.7}.harmony-app .harmony-answers{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));max-width:none}.harmony-app .harmony-answers button{font-size:1rem;line-height:1.4;overflow-wrap:anywhere}.harmony-app .answer-feedback,.harmony-app [data-status]{min-height:1.7em;line-height:1.6}.harmony-app button:focus-visible{outline:3px solid #354aab;outline-offset:3px}
@media(max-width:650px){.harmony-controls label{width:100%}.harmony-controls select{flex:1 1 150px;width:0}.harmony-controls .score{margin-left:0}.harmony-board{grid-template-columns:repeat(2,minmax(0,1fr))}.harmony-app .harmony-answers{grid-template-columns:1fr}.harmony-app .practice-actions>.button{flex:1 1 180px}.harmony-app .volume{flex-wrap:wrap}}