.harmony-page{gap:1.25rem;min-width:0;display:grid}.harmony-page p{max-width:none}.harmony-page h1,.harmony-page h2,.harmony-page h3{margin-top:0}.harmony-eyebrow{color:var(--muted);letter-spacing:.04em;font-size:.8rem}.harmony-workspace{--voice-0:#236354;--voice-1:#a44729;--voice-2:#5e4aa0;--voice-3:#215c92;gap:.9rem;min-width:0;scroll-margin-top:1rem;display:grid}html[data-mode=dark] .harmony-workspace{--voice-0:#9cdecb;--voice-1:#ffb79e;--voice-2:#cfbaff;--voice-3:#9acbff}.harmony-workspace [hidden],.harmony-workspace [data-hidden=true]{display:none!important}.harmony-workspace button,.harmony-reading button{border:1px solid var(--control-edge);min-height:2.75rem;color:var(--text);background:var(--panel);font:inherit;cursor:pointer;border-radius:.45rem;padding:.55rem .75rem;font-size:.85rem}.harmony-workspace button:hover,.harmony-reading button:hover{background:var(--accent-soft);border-color:var(--accent)}.harmony-workspace button:disabled,.harmony-reading button:disabled{cursor:default;opacity:.55}.harmony-workspace button[aria-pressed=true],.harmony-workspace .harmony-primary,.harmony-workspace .harmony-listen-clue{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -.16rem var(--accent)}.harmony-tabs,.harmony-topics,.harmony-modes,.harmony-toolbar,.harmony-playback,.harmony-practice-actions,.harmony-settings,.harmony-choices,.harmony-voice-toggles,.harmony-score{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.harmony-tabs>button{flex:1;font-weight:650}.harmony-topics{margin-bottom:1rem}.harmony-topics button{font-size:.75rem}.harmony-modes{margin-bottom:.8rem}.harmony-workspace h2{margin:.5rem 0;font-size:1.2rem}.harmony-workspace p{margin:.4rem 0}.harmony-task-panel,.harmony-task-work,.harmony-task-answer{gap:.4rem;min-width:0;display:grid}.harmony-transpose-controls{flex-wrap:wrap;gap:.45rem;display:flex}.harmony-staff,.harmony-staff *{-webkit-user-select:none;user-select:none}.harmony-staff [data-harmony-note-index]{touch-action:none}.harmony-staff [data-harmony-note-index] .harmony-note-target{cursor:grab}.harmony-staff:active [data-harmony-note-index] .harmony-note-target{cursor:grabbing}.harmony-staff [data-harmony-editable=false] .harmony-note-target{cursor:pointer}.harmony-roles button[data-harmony-fixed=true]{border-style:dashed}.harmony-edit-mode{color:var(--accent);font-size:.8rem;font-weight:650}.harmony-action{font-weight:600}.harmony-settings{align-items:flex-end;margin-top:1rem}.harmony-settings label{gap:.3rem;min-width:0;font-size:.8rem;display:grid}.harmony-settings select{border:1px solid var(--control-edge);background:var(--panel);width:100%;max-width:18rem;min-height:2.75rem;color:var(--text);font:inherit;border-radius:.4rem;padding:.4rem .65rem}.harmony-toolbar{justify-content:space-between;align-items:flex-end}.harmony-workspace .harmony-segments{border:0;flex-wrap:wrap;gap:.35rem;min-width:0;margin:0;padding:0;display:flex}.harmony-segments legend{color:var(--muted);padding:0 0 .3rem;font-size:.75rem}.harmony-segments label{position:relative}.harmony-segments input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.harmony-segments span{border:1px solid var(--control-edge);background:var(--panel);border-radius:.4rem;align-items:center;min-height:2.75rem;padding:.45rem .7rem;font-size:.8rem;display:flex}.harmony-segments input:checked+span{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 -.16rem var(--accent)}.harmony-segments input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.harmony-workspace svg:not(.harmony-staff):not(.harmony-waves):not(.harmony-semitone-arcs){fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:1.4rem;height:1.4rem}.harmony-keyboard-example{min-width:0}.harmony-semitones{color:#b33c3c;pointer-events:none;-webkit-user-select:none;user-select:none;margin:0 0 .25rem}html[data-mode=dark] .harmony-semitones{color:#ff9696}.harmony-semitones svg{width:100%;height:62px;display:block;overflow:visible}.harmony-semitones path{fill:none;stroke:currentColor;stroke-width:1.2px;vector-effect:non-scaling-stroke}.harmony-semitones text{fill:currentColor;font-family:inherit;font-size:12px;font-weight:500}.harmony-semitones figcaption{text-align:center;margin:0 0 .3rem;font-size:.8rem;line-height:1.4}.harmony-workspace [data-harmony-mute],.harmony-listen-clue,.harmony-playback button{justify-content:center;align-items:center;gap:.5rem;display:inline-flex}.harmony-workspace .harmony-listen-clue{min-height:3.5rem;padding:.75rem 1rem;font-size:1rem;font-weight:650}.harmony-workspace .harmony-help{color:var(--muted);font-size:.8rem;line-height:1.5}.harmony-instrument{gap:.35rem;min-width:0;display:grid}.harmony-staff-row{grid-template-columns:minmax(0,1fr) 8.5rem;align-items:center;gap:.5rem;min-width:0;display:grid}.harmony-staff-row>.harmony-playback{grid-template-columns:minmax(0,1fr);gap:.3rem;display:grid}.harmony-staff-row>.harmony-playback button{min-width:0;padding:.4rem;font-size:.75rem;line-height:1.25}.harmony-instrument-controls{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.4rem .75rem;min-width:0;display:flex}.harmony-instrument-controls .piano-label-control{margin:0}.harmony-choices:empty,.harmony-roles:empty,.harmony-voice-toggles:empty{display:none}.harmony-workspace[data-section=practice] .harmony-task-answer{flex-wrap:wrap;align-items:center;display:flex}.harmony-workspace[data-section=practice] [data-harmony-playing-voices]{flex-basis:100%}.harmony-roles{flex-wrap:wrap;gap:.35rem;display:flex}.harmony-roles button{border-color:var(--voice-0);color:var(--voice-0);flex:1 0 4.4rem;align-items:center;gap:.4rem;display:flex}.harmony-roles button[data-role-color="1"]{color:var(--voice-1);border-color:var(--voice-1)}.harmony-roles button[data-role-color="2"]{color:var(--voice-2);border-color:var(--voice-2)}.harmony-role-number{border:1px solid;border-radius:50%;flex-shrink:0;place-items:center;width:1.25rem;height:1.25rem;font-size:.75rem;display:inline-grid}.harmony-roles small{color:var(--muted);font-size:.65rem;display:block}.harmony-workspace .harmony-staff{touch-action:manipulation;width:100%;height:10rem;min-height:10rem;max-height:10rem;display:block;overflow:visible}.harmony-staff-lines,.harmony-ledger{stroke:var(--muted);stroke-width:1.4px;fill:none}.harmony-clef{stroke:var(--text);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none}.harmony-staff circle{fill:var(--text)}.harmony-note{fill:var(--voice-0)}.harmony-note[data-role-color="1"]{fill:var(--voice-1)}.harmony-note[data-role-color="2"]{fill:var(--voice-2)}.harmony-note-stem,.harmony-note-sign{stroke:currentColor;color:var(--voice-0);stroke-width:2px;stroke-linecap:round;fill:none}.harmony-staff [data-role-color="1"]{color:var(--voice-1)}.harmony-staff [data-role-color="2"]{color:var(--voice-2)}.harmony-staff-hit{fill:#0000;cursor:pointer}.harmony-staff-hit:hover{fill:var(--accent);fill-opacity:.12}.harmony-staff[aria-disabled=true] .harmony-staff-hit{pointer-events:none}.harmony-staff text{fill:var(--text);font-family:inherit;font-size:12px}.harmony-signature{border:1px solid var(--control-edge);background:var(--accent-soft);border-radius:.4rem;padding:.6rem .75rem}.harmony-physics{border-top:1px solid var(--edge);padding-top:.9rem}.harmony-physics h3{font-size:.85rem}.harmony-wave-legend{font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:.5rem 1rem;font-size:.8rem;display:flex}.harmony-wave-legend span{color:var(--voice-0)}.harmony-wave-legend [data-role-color="1"]{color:var(--voice-1)}.harmony-wave-legend [data-role-color="2"]{color:var(--voice-2)}.harmony-waves{width:100%;height:auto;max-height:12rem;display:block;overflow:visible}.harmony-wave-grid{fill:none;stroke:var(--control-edge);stroke-width:.6px;opacity:.6}.harmony-waves [data-wave-component]{fill:none;stroke:var(--voice-0);stroke-width:1.5px;vector-effect:non-scaling-stroke}.harmony-waves [data-wave-component="1"]{stroke:var(--voice-1);stroke-dasharray:5 3}.harmony-waves [data-wave-component="2"]{stroke:var(--voice-2);stroke-dasharray:2 2}.harmony-workspace [data-role-color="3"]{color:var(--voice-3)}.harmony-note[data-role-color="3"]{fill:var(--voice-3)}.harmony-roles button[data-role-color="3"]{border-color:var(--voice-3)}.harmony-waves [data-wave-component="3"]{stroke:var(--voice-3);stroke-dasharray:3 2}.harmony-waves [data-wave-sum]{fill:none;stroke:var(--text);stroke-width:2px;vector-effect:non-scaling-stroke;opacity:.75}.harmony-time{color:var(--muted);justify-content:space-between;padding:0 3.125%;font-size:.7rem;display:flex}.harmony-score{color:var(--muted);gap:1rem;font-size:.8rem}.harmony-feedback:empty,.harmony-audio-error:empty{display:none}.harmony-feedback{border:1px solid var(--control-edge);border-radius:.4rem;padding:.65rem .8rem;font-weight:600}.harmony-workspace[data-result=correct] .harmony-feedback{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.harmony-reading-grid{gap:1.5rem;display:grid}.harmony-reading-grid>section{border-top:1px solid var(--edge);padding-top:1rem}.harmony-reading-grid h3{margin:.3rem 0}.harmony-lesson>header{margin-bottom:1rem}.harmony-lesson-demo{padding:0}.harmony-choice-field{border:0;width:100%;min-width:0;margin:0 0 .65rem;padding:0}.harmony-choice-field legend{padding:0 0 .5rem;font-size:.85rem;font-weight:650}.harmony-root-choices{grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;width:100%;display:grid}.harmony-root-choices button{min-width:0;padding:.5rem .25rem}.harmony-choice-field .harmony-choices{width:100%}.harmony-workspace .harmony-practice-actions button{justify-content:center;align-items:center;gap:.45rem;display:inline-flex}.harmony-workspace .harmony-modes button{text-align:center;flex-direction:column;flex:6rem;justify-content:center;align-items:center;gap:.4rem;min-height:5.4rem;font-size:.8rem;display:flex}.harmony-workspace .harmony-modes .harmony-game-icon{width:2.5rem!important;height:2rem!important}.harmony-icon-text{fill:currentColor;stroke:none;font-family:inherit;font-size:18px;font-weight:650}.harmony-note-target{fill:#0000;stroke:#0000;stroke-width:2px;cursor:pointer}.harmony-staff [aria-pressed=true] .harmony-note-target{stroke:var(--accent);stroke-dasharray:3 2}.harmony-staff [role=button]:focus .harmony-note-target{stroke:var(--accent);stroke-width:3px}.harmony-staff [role=button]:focus{outline:none}.harmony-chord-name{font-size:1.05rem;font-weight:700}.harmony-choices button[data-harmony-choice]{align-items:center;gap:.5rem;display:flex}.harmony-workspace .harmony-answer-icon{width:3.2rem!important;height:2.7rem!important}.harmony-mobile-legend{display:none}.harmony-step-ruler{flex-wrap:wrap;gap:.4rem;font-size:.8rem;display:flex}.harmony-step-ruler:empty{display:none}.harmony-step-ruler span{border:1px solid var(--control-edge);border-radius:.35rem;justify-content:center;align-items:center;min-height:2rem;padding:.3rem .5rem;display:inline-flex}.harmony-step-ruler .harmony-half-step{color:var(--rust);border-style:dashed}.harmony-step-ruler .harmony-whole-step{color:var(--accent);background:var(--accent-soft)}.harmony-before{border:1px dashed var(--control-edge);color:var(--muted);border-radius:.4rem;padding:.6rem;font-size:.8rem}.harmony-before .harmony-staff{max-height:8rem}.harmony-lesson-result{font-variant-numeric:tabular-nums;font-weight:600}.harmony-circle{border:1px solid var(--control-edge);background:var(--accent-soft);border-radius:50%;justify-self:center;width:100%;max-width:25rem;height:25rem;margin:.6rem 0;position:relative}.harmony-circle button{left:var(--circle-x);top:var(--circle-y);flex-direction:column;justify-content:center;align-items:center;gap:.1rem;width:3.5rem;min-height:3rem;padding:.3rem;display:flex;position:absolute;transform:translate(-50%,-50%)}.harmony-circle button small{font-size:.65rem}.harmony-circle-centre{text-align:center;color:var(--muted);pointer-events:none;font-size:.85rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.harmony-interval-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.harmony-interval-example{border:1px solid var(--control-edge);border-radius:.45rem;gap:.5rem;padding:.85rem}.harmony-interval-example h4{margin:0}.harmony-interval-example .harmony-staff{max-height:8rem}.harmony-interval-example p,.harmony-references{font-size:.8rem}.harmony-references h2{font-size:1rem}@media (min-width:900px){.harmony-workspace[data-section=games] .harmony-task-panel{border:1px solid var(--control-edge);background:var(--panel);border-radius:.6rem;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1.4fr) minmax(15rem,1fr);align-items:start;gap:.55rem 1.1rem;padding:.85rem;scroll-margin-top:.75rem}.harmony-workspace[data-section=games] .harmony-task-work{grid-area:1/1/3;gap:.5rem}.harmony-workspace[data-section=games] .harmony-task-prompt{grid-area:1/2;gap:.5rem}.harmony-workspace[data-section=games] .harmony-task-prompt h3{margin:0;font-size:1rem;line-height:1.35}.harmony-workspace[data-section=games] .harmony-task-answer{grid-area:2/2;align-content:start;gap:.45rem}.harmony-workspace[data-section=games] .harmony-instrument{gap:.4rem}.harmony-workspace[data-section=games] .harmony-staff{height:10rem;min-height:10rem;max-height:10rem}.harmony-workspace[data-section=games] .harmony-task-reference .harmony-staff{height:5.2rem;min-height:5.2rem;max-height:5.2rem}.harmony-workspace[data-section=games] .harmony-before{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:.2rem .4rem;display:grid}.harmony-workspace[data-section=games] .harmony-task-reference>p{display:none}.harmony-workspace[data-section=games] .harmony-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;display:grid}.harmony-workspace[data-section=games] .harmony-choices:empty,.harmony-workspace[data-section=games] .harmony-voice-toggles:empty,.harmony-workspace[data-section=games] .harmony-roles:empty{display:none}.harmony-workspace[data-section=games] .harmony-choices button{gap:.3rem;padding:.35rem .45rem;font-size:.75rem}.harmony-workspace[data-section=games] .harmony-answer-icon{width:1.8rem!important;height:1.8rem!important}.harmony-workspace[data-section=games] .harmony-practice-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;display:grid}.harmony-workspace[data-section=games] .harmony-practice-actions .harmony-primary{grid-column:1/-1}.harmony-workspace[data-section=games] .harmony-toolbar{align-items:center;gap:.35rem}.harmony-workspace[data-section=games] .harmony-toolbar legend{display:none}.harmony-workspace[data-section=games] .harmony-help{font-size:.75rem;line-height:1.35}.harmony-workspace[data-section=games] .harmony-feedback{padding:.5rem;font-size:.85rem;line-height:1.35}.harmony-workspace[data-section=games] .harmony-score{gap:.5rem;font-size:.7rem}}@media (max-width:540px){.harmony-workspace[data-section=games]{gap:.65rem;padding:0}.harmony-workspace[data-section=games] .harmony-task-panel,.harmony-workspace[data-section=games] .harmony-task-work,.harmony-workspace[data-section=games] .harmony-task-answer,.harmony-workspace[data-section=games] .harmony-instrument{gap:.2rem}.harmony-workspace[data-section=games] .harmony-task-prompt h3{margin:0;font-size:1rem;line-height:1.35}.harmony-workspace[data-section=games] .harmony-toolbar legend{display:none}.harmony-workspace[data-section=games] [data-harmony-mute-text]{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.harmony-workspace[data-section=games] .harmony-staff{height:7.5rem;min-height:7.5rem;max-height:7.5rem}.harmony-workspace[data-section=games] .harmony-choices{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.harmony-workspace[data-section=games] .harmony-choices:empty,.harmony-workspace[data-section=games] .harmony-voice-toggles:empty{display:none}.harmony-workspace[data-section=games] .harmony-choices button{min-width:0;padding:.35rem;font-size:.7rem}.harmony-workspace[data-section=games] .harmony-answer-icon{width:1.5rem!important;height:1.5rem!important}.harmony-workspace[data-section=games] .harmony-practice-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;display:grid}.harmony-workspace[data-section=games] .harmony-practice-actions button{gap:.2rem;min-width:0;padding:.35rem .2rem;font-size:.7rem}.harmony-workspace[data-section=games] .harmony-practice-actions svg{width:1rem!important;height:1rem!important}.harmony-workspace[data-section=games] .harmony-task-reference>p{display:none}.harmony-workspace[data-section=games] .harmony-before{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem;padding:.3rem;display:grid}.harmony-workspace[data-section=games] .harmony-before .harmony-staff{height:3rem;min-height:3rem;max-height:3rem}.harmony-workspace[data-section=games] .harmony-mobile-legend{font-size:.7rem;line-height:1.4}.harmony-workspace[data-section=games] .harmony-feedback{padding:.2rem .5rem;font-size:.9rem;line-height:1.35}.harmony-mobile-legend{font-size:.8rem;line-height:1.6;display:block}.harmony-root-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.harmony-circle{max-width:20rem;height:20rem}.harmony-circle button{width:2.8rem;min-height:2.8rem}.harmony-interval-examples,.harmony-staff-row{grid-template-columns:minmax(0,1fr)}.harmony-staff-row>.harmony-playback{grid-template-columns:repeat(3,minmax(0,1fr))}.harmony-workspace{padding:.85rem}.harmony-roles button{flex-basis:3rem;padding:.4rem;font-size:.7rem}.harmony-topics button{flex:8rem}.harmony-settings label{flex:7rem}.harmony-roles small{font-size:.6rem}}