.practice{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:28px;align-items:start}
.case-switch,.mode-switch,.playback,.letter-navigation{display:flex;gap:8px;align-items:center}
.playback{margin-top:10px}
#letterPicker,#phrasePicker{margin-top:12px}.stage.phrase-stage{max-width:none}#phraseSelect{font-size:16px}
.case-switch button,.mode-switch button{flex:1;font-size:14px;padding:10px 6px}
button[aria-pressed="true"]{background:#57406b;color:#fff;border-color:#57406b;text-decoration:underline;text-underline-offset:4px}
.letter-navigation{margin:14px 0}.letter-navigation label{flex:1;text-align:center;margin:0}.letter-navigation select{margin-top:4px;font-size:20px}.letter-navigation>button{align-self:end}
.alphabet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:8px 0}.alphabet button{padding:5px;min-width:0}
#letterTip{font-size:14px;background:#f8f5f9;border-radius:10px;padding:12px;margin:12px 0}
.practice-workspace{min-width:0}.stage{position:relative;max-width:460px;margin:12px auto 0;aspect-ratio:360/340;background:#fffcf8;border:1px solid #e2dce3;border-radius:14px;overflow:hidden}
#viewBox{display:block;width:100%;height:100%}.guidelines path{stroke:#c9becb;stroke-width:1;stroke-dasharray:4 5;fill:none}.guidelines text{font:9px system-ui;fill:#746575}
#ghostStrokes path,#inkStrokes path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}
#ghostStrokes path{stroke:#ddd3df}#inkStrokes path{stroke:#513765}
#pen circle{fill:#774594;stroke:#fff;stroke-width:2}#pen path{stroke:#fff;stroke-width:1.5}#pen.lift circle{fill:white;stroke:#774594;stroke-dasharray:3 2}#pen.lift path{stroke:#774594}
#startMarker circle{fill:#513765;stroke:white;stroke-width:2}#startMarker text{font:12px system-ui;fill:white}
#traceCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
#strokeStatus{min-height:28px;font-size:14px;text-align:center;margin:8px 0}.playback button{flex:1;font-size:14px;padding:10px 6px}.timeline{margin-top:12px}.timeline label{font-size:12px;margin:0}#progress{padding:0;accent-color:#57406b;cursor:pointer;min-height:32px}.speed-label{display:flex;gap:12px;align-items:center;margin:6px 0}.speed-label select{flex:1;font-size:14px}#writeControls{text-align:center}#result{font-size:13px;margin-top:8px}
@media(max-width:700px){.practice{display:flex;flex-direction:column;gap:8px}.lesson-picker,.practice-workspace{width:100%}.site-header h1{font-size:22px}.site-header>a{display:inline-block;padding:6px 0 10px}.lesson-picker>.hint{margin-bottom:6px}.letter-navigation{margin:8px 0}.alphabet-panel{padding-top:0}#letterTip{margin:6px 0;padding:8px}.stage{margin-top:8px}.playback{gap:5px}.playback button{font-size:12px}.practice.card{padding:12px}.alphabet{grid-template-columns:repeat(7,minmax(0,1fr))}}