/* The introduction lives above the header divider, keeping the tools in reach. */
.header{height:auto;min-height:108px;display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:0 24px;padding:18px 36px 15px;align-items:center}
.brand{gap:10px;letter-spacing:-1px;font-size:26px}.brand>b{font-weight:600;white-space:nowrap}
.header-right{gap:20px;justify-content:flex-end}.header-right .edition{display:none}
:root[data-theme] .header .intro{grid-column:1/-1;text-align:left;padding:15px 0 0;display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
:root[data-theme] .header .intro .eyebrow{font-size:8px;letter-spacing:1.5px}:root[data-theme] .header .intro h1{font-size:22px;letter-spacing:-.7px;margin:0}:root[data-theme] .header .intro>p{font-size:11px;margin:0;color:var(--muted)}
main{max-width:1240px;padding-top:20px}.game{overflow:visible}.toolbar{border-radius:16px 16px 0 0;height:62px}.workspace-caption{color:var(--muted);font-size:8px;letter-spacing:1.3px;text-align:right}
:root[data-theme] .workspace-tabs button{padding-left:25px;padding-right:25px}
.practice-subtabs{display:flex;gap:5px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.practice-subtabs button{background:transparent;border:1px solid transparent;border-radius:9px;padding:9px 14px;color:var(--muted);font-size:12px;white-space:nowrap}
.practice-subtabs button[aria-pressed=true]{background:#234b8c30;border-color:#477cdd70;color:#a9c7ff}
.practice-subtabs button:hover{color:var(--text);background:#5071a215}
.practice-controls{display:flex;align-items:center;gap:14px;padding:14px 27px;border-bottom:1px solid var(--line);background:var(--surface-soft);flex-wrap:wrap}
.practice-option{display:flex;align-items:center;gap:8px;min-width:0}.practice-option label{color:var(--muted);font-size:10px;white-space:nowrap}
.practice-option select,.practice-instrument-guess select{max-width:100%;font-size:11px;padding:8px 25px 8px 10px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:9px}
.practice-identify{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.practice-identify input{accent-color:#78a2ff}
.practice-synthesis-note{width:100%;margin:0;color:var(--muted);font-size:9px}
.sound-field{cursor:ew-resize;touch-action:pan-y}.sound-field:active{touch-action:none}.field-bottom>span:last-child{display:block}.field-bottom{font-size:8px}
.practice-mic-panel{margin:16px 27px 0;padding:20px;background:#132340;border:1px solid #2e4c7b;border-radius:12px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px 22px}
.practice-mic-panel strong{font-family:'Space Grotesk',sans-serif;font-size:18px}.practice-mic-panel p{font-size:11px;line-height:1.6;color:var(--muted);margin:8px 0 0}.practice-mic-panel>p{grid-column:1/-1}
.practice-mic-actions{display:flex;flex-direction:column;gap:10px;justify-content:center}.practice-mic-actions button{background:#2f65d5;border:1px solid #5688f0;color:#fff;padding:11px 14px;border-radius:9px;font-size:12px}.practice-mic-actions span{font-family:'Space Grotesk',sans-serif;color:#abc8ff;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.practice-instrument-guess{padding:16px 27px 0;display:flex;align-items:center;gap:15px}.practice-instrument-guess label{font-size:12px;color:var(--muted)}
#play-area.voice-response .tuner{display:none}#play-area.voice-response .readout{opacity:1}#play-area.voice-response.listening .readout,#play-area.voice-response.locked:not(.voice-response) .readout{opacity:.3}
.instrument-feedback{color:var(--muted);font-size:11px;line-height:1.6}.round-dots{max-width:45%;gap:4px}.round-dots span{flex:1;width:20px;min-width:4px}.summary-panel .score-table{font-variant-numeric:tabular-nums}
@media(min-width:1600px){:root[data-theme] .header .intro{padding-top:15px}main{max-width:1240px}}
@media(max-width:800px){:root[data-theme] .header .intro>p{width:100%;font-size:11px}:root[data-theme] .header .intro{row-gap:7px}.header-right{gap:9px}.practice-controls{gap:12px}.practice-option{flex:1;min-width:175px}.practice-option select{flex:1}.practice-mic-panel{grid-template-columns:1fr}.practice-mic-panel>p{grid-column:auto}}
@media(max-width:650px){.header{padding:15px 18px 13px;gap:0 12px;grid-template-columns:1fr auto}.brand{font-size:21px;gap:7px;letter-spacing:-.8px}.brand svg{width:22px;flex-shrink:0}.header-right{flex-wrap:wrap;gap:8px;max-width:150px}.header-right .text-button{font-size:10px}:root[data-theme] .header .intro{padding-top:12px;gap:8px 10px}:root[data-theme] .header .intro .eyebrow{font-size:7px}:root[data-theme] .header .intro h1{font-size:18px;letter-spacing:-.4px}:root[data-theme] .header .intro>p{font-size:10px}.workspace-caption{font-size:6px;letter-spacing:.7px;max-width:105px;line-height:1.6}:root[data-theme] .workspace-tabs button{padding-left:19px;padding-right:19px}main{padding-top:13px}.practice-subtabs{gap:3px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr}.practice-subtabs button{font-size:11px;padding:9px}.practice-controls{gap:11px;padding:12px 15px}.practice-option{min-width:140px}.practice-option label{font-size:9px}.practice-option select{font-size:10px;padding:7px 15px 7px 8px}.practice-identify{font-size:10px}.practice-synthesis-note{font-size:8px;line-height:1.5}.practice-mic-panel{margin:15px 15px 0;padding:16px}.practice-instrument-guess{padding:14px 15px 0;flex-wrap:wrap;gap:7px}.practice-instrument-guess label{font-size:11px}.field-bottom{font-size:6px}.field-bottom>span:last-child{display:block}.field-bottom>span:first-child{max-width:50%;line-height:1.5}.round-dots{max-width:40%;gap:3px}.round-dots span{width:13px}}
@media(max-width:370px){.brand{font-size:18px;gap:6px}.brand svg{width:19px}.header-right{max-width:115px}.header-right .text-button{font-size:9px;gap:4px}.workspace-caption{display:none}:root[data-theme] .header .intro h1{font-size:17px}.practice-option{width:100%;min-width:0;flex:auto}.practice-option label{min-width:65px}}

:root[data-theme] .toolbar{height:62px}
.instrument[data-graph="ribbons"] .sound-field{min-height:320px}
@media(max-width:650px){.instrument[data-graph="ribbons"] .sound-field{min-height:285px}}

/* A single continuous audition control: choose a sound, then lock it with the note. */
.practice-instrument-guess{display:block;padding:16px 27px 0}
.instrument-guess-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.instrument-guess-heading label{font-size:12px;color:var(--text)}
.instrument-guess-heading output{color:#9dbfff;font-size:12px;font-weight:600}
.instrument-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.instrument-strip button{min-width:0;min-height:59px;padding:9px 3px 7px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#101c31;color:#97a8c2;border:1px solid #283b57;border-radius:9px;font-size:10px;line-height:1.2;text-align:center}
.instrument-strip button:hover{border-color:#527ab6;color:#d7e5ff}
.instrument-strip button[aria-pressed=true]{background:linear-gradient(145deg,#234989,#162b4c);border-color:#78a8ff;color:#e5efff;box-shadow:0 0 16px #427cff22}
.instrument-dot{display:block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.instrument-strip button[aria-pressed=true] .instrument-dot{background:#82b2ff;opacity:1;box-shadow:0 0 9px #82b2ff}
.instrument-guess-slider{width:100%;margin:17px 0 4px;accent-color:#79a8ff;cursor:ew-resize}
#instrument-audition-status{font-size:10px;color:var(--muted);line-height:1.5;margin:5px 0 0}
@media(max-width:650px){.practice-instrument-guess{padding:14px 15px 0}.instrument-strip{gap:3px}.instrument-strip button{font-size:8px;padding:8px 2px;min-height:62px;line-height:1.3}.instrument-guess-heading label,.instrument-guess-heading output{font-size:11px}#instrument-audition-status{font-size:9px}}