/* Optional E palette: warm brass for practice sections, original teal for audio. */
:where(#stemRoom){--practice-gold:#d4a84b;--practice-gold-light:#e6c780;--practice-ink:#211b10}
:where(#stemRoom) .region{background:#d4a84b18;border-color:var(--practice-gold)}
:where(#stemRoom) .region span{color:var(--practice-gold-light)}
:where(#stemRoom) button:is(#loop,.console-toggle)[aria-pressed=true]{background:var(--practice-gold);border-color:var(--practice-gold);color:var(--practice-ink)}
:where(#stemRoom) button:is(#loop,.console-toggle)[aria-pressed=true]:hover{background:var(--practice-gold-light)}
:where(#stemRoom) button:is(#loop,.console-toggle)[aria-pressed=false]{background:#211d16;border-color:#d4a84b55;color:var(--practice-gold-light)}
:where(#stemRoom) #addSection,:where(#stemRoom) .practice .control-title .text-button{color:var(--practice-gold-light)}
:where(#stemRoom) .section-row{background:#171613;border-color:#343029}
:where(#stemRoom) .section-row .section-index{color:#c2a56b}
:where(#stemRoom) .section-row.selected{border-color:#d4a84b88;background:#d4a84b0c}
:where(#stemRoom) .section-row.selected .section-jump[aria-pressed=true],
:where(#stemRoom) .section-row.selected .section-jump[aria-pressed=true]:hover{background:var(--practice-gold);color:var(--practice-ink)}
:where(#stemRoom) .section-row.selected .section-jump[aria-pressed=true] strong,
:where(#stemRoom) .section-row.selected .section-jump[aria-pressed=true] .section-index,
:where(#stemRoom) .section-row.selected .section-jump[aria-pressed=true] small{color:var(--practice-ink)}
:where(#stemRoom) .section-jump:hover,:where(#stemRoom) .edit-section:hover{background:#d4a84b12}
:where(#stemRoom) .section-row.selected .edit-section{color:var(--practice-gold-light)}
:where(#stemRoom) .section-editor{background:#191713;border-color:#d4a84b70}
:where(#stemRoom) .practice .control,:where(#stemRoom) .practice .count-row select{background:#191815;border-color:#39342a}
:where(#stemRoom) .practice .pitch-note{color:var(--practice-gold-light)}
:where(#stemRoom) .practice :focus-visible,:where(#stemRoom) button:is(#loop,.console-toggle):focus-visible{outline-color:var(--practice-gold-light)}

/* One mode-toggle component: Loop, Focus and Click share size, type and states. */
:where(#stemRoom) button:is(#loop,.console-toggle){display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;height:30px;min-height:30px;padding:4px 10px;border:1px solid #d4a84b55;border-radius:22px;font:12px/1.2 system-ui;white-space:nowrap}
:where(#stemRoom) button.console-toggle::before{content:'';width:14px;height:14px;flex:none;background:currentColor;mask:var(--toggle-icon) center/contain no-repeat}
@media(hover:hover){:where(#stemRoom) button:is(#loop,.console-toggle)[aria-pressed=false]:hover{background:#2a2416;border-color:var(--practice-gold)}}
@media(max-width:760px){:where(#stemRoom) button:is(#loop,.console-toggle){height:44px;min-height:44px}}