
.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%}}
