.practice{margin-top:28px}.practice-top,.segmented,.treatments,.samples{display:flex;gap:8px;flex-wrap:wrap}.practice-top{justify-content:space-between}.tone-study button{min-height:44px}.tone-study button[aria-pressed=true]{background:#252525;color:white;border-color:#252525}.tone-study button:disabled{opacity:.45;cursor:default}.syllable{display:flex;align-items:baseline;gap:14px;margin:28px 0 16px}.syllable #character{font-size:28px}.syllable #pinyin{font-size:40px;letter-spacing:-.02em}.syllable small{font-size:14px;color:#666}.visual-caption{display:flex;justify-content:space-between;font-size:13px;color:#666;margin-bottom:8px}#liquidVisual{overflow:hidden;border-radius:8px;background:#6e1ba1}#plot{display:block;width:100%;height:auto;background:#f5f5f3;border-radius:8px}.guide{stroke:#ddd;fill:none}#reference{stroke:#777;stroke-width:2;stroke-dasharray:6 5;fill:none}#attempt{stroke:#8f368c;stroke-width:4;fill:none}.legend{display:flex;gap:24px;font-size:12px;margin-top:8px}.legend i{display:inline-block;width:20px;border-top:2px dashed #777;margin-right:7px}.legend span+span i{border-top:3px solid #8f368c}.feedback{margin-top:18px;min-height:78px}.feedback p{margin:0 0 5px}.feedback span,.privacy,.motion-key,.target-note{font-size:13px;color:#666}.tone-study .controls{flex-wrap:wrap;gap:8px}.tone-study .primary{background:#252525;color:#fff}.below{margin-top:28px}.below h2{font-size:20px}.below p{font-size:15px}.tone-study details{margin-top:28px}.tone-study summary{cursor:pointer;font-size:15px}.study-notes p{font-size:14px}.tone-study summary:focus-visible{outline:2px solid #3153aa;outline-offset:4px}.tone-study svg.material{aspect-ratio:2/1} .recording #record{display:none}@media(max-width:560px){.syllable{flex-wrap:wrap;gap:10px}.syllable small{width:100%}.practice-top{gap:14px}.visual-caption{gap:12px}.tone-study .controls button{flex:1 1 40%}}
.recall-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#recallCover{min-height:260px;background:#f3eff5;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;text-align:center}#recallCover p:first-child{font-size:28px;margin-bottom:8px}#recallCover p+p{font-size:15px;max-width:320px;color:#665d6a}
#attemptTrail{margin-top:20px}.trail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.trail-heading button{font-size:13px}#attemptFrames{display:flex;gap:10px;list-style:none;padding:0;margin:14px 0;overflow-x:auto}#attemptFrames li{flex:0 0 88px;font-size:12px;color:#666}#attemptFrames canvas{width:88px;height:44px;border-radius:5px;display:block;margin-bottom:6px}#attemptFrames li:last-child span{color:#252525}#attemptFrames li:last-child canvas{outline:2px solid #b04ab9;outline-offset:2px}#attemptFrames{padding:3px}
.success-cue{display:flex;align-items:center;gap:12px;background:#f3f1f5;border-radius:12px;padding:16px;margin-top:20px;font-size:15px}.success-cue.complete{background:#e8f6dc;color:#245b15}#streakDots{letter-spacing:3px;color:#819177}.complete #streakDots{color:#4c9229}.sound-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#666}.success-cue.pop{animation:success-pop .55s cubic-bezier(.2,.8,.2,1)}@keyframes success-pop{0%{transform:scale(.96)}45%{transform:scale(1.035)}75%{transform:scale(.995)}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.success-cue.pop{animation:none}}

/* The checkbox keeps its native glyph; its full label accepts the tap. */
.sound-toggle{min-height:44px;min-width:44px;width:fit-content;cursor:pointer}

/* A preference change also removes an in-flight microphone-driven transform. */
@media(prefers-reduced-motion:reduce){#waterMaterial,#materialCharacter{transform:none!important}}