.mode-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.speaker-hero{width:110px;height:110px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-m);transition:transform .15s;position:relative}.speaker-hero svg{width:44px;height:44px}.speaker-hero:hover{transform:scale(1.05)}.speaker-hero.playing:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand);animation:ripple 1.1s infinite}@keyframes ripple{0%{transform:scale(.9);opacity:.9}to{transform:scale(1.25);opacity:0}}.dictation-input{width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-size:16px;outline:none;transition:border-color .15s;text-align:center}.dictation-input:focus{border-color:var(--brand)}.mic-hero{width:110px;height:110px;border-radius:50%;margin:14px auto;background:var(--surface-2);border:2px solid var(--line-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;transition:all .2s}.mic-hero svg{width:42px;height:42px}.mic-hero.rec{background:var(--brand);border-color:var(--brand);color:#fff;animation:pulse 1.2s infinite}.speak-target{font-family:var(--f-hz);font-size:44px;text-align:center;line-height:1.35}.speak-result{margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--surface-2);font-size:15px;text-align:center}.score-big{font-size:42px;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.lives{color:var(--brand);display:inline-flex;gap:2px;align-items:center;letter-spacing:2px}.write-layout{display:grid;grid-template-columns:300px 1fr;grid-gap:18px;gap:18px}@media (max-width:860px){.write-layout{grid-template-columns:1fr}}.char-pick-list{display:flex;flex-wrap:wrap;gap:8px;max-height:300px;overflow-y:auto;padding:2px}.char-pick{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-family:var(--f-hz);font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .13s}.char-pick:hover{border-color:var(--brand);color:var(--brand)}.char-pick.on{background:var(--brand);border-color:var(--brand);color:#fff}.write-pad-box{display:flex;flex-direction:column;align-items:center;gap:14px}.write-pad{position:relative;width:min(320px,78vw);aspect-ratio:1;border-radius:var(--r-m);background:var(--surface);border:2px solid var(--line-2);overflow:hidden;touch-action:none;box-shadow:var(--shadow-s)}.write-pad .grid-svg,.write-pad .tpl{position:absolute;inset:0;pointer-events:none}.write-pad .tpl{display:flex;align-items:center;justify-content:center;font-family:var(--f-hz);font-size:230px;color:var(--ink);line-height:1}.write-pad canvas{position:absolute;inset:0;width:100%;height:100%}.stroke-demo{display:flex;flex-direction:column;align-items:center;gap:8px}.stroke-demo svg .st-path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.stroke-demo svg .st-grid{stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 5}.rule-card{display:flex;gap:13px;align-items:flex-start}.rule-card .num{width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 30px;font-size:14px}.rule-card b{display:block;font-size:14.5px}.rule-card p{font-size:13px;color:var(--muted);margin-top:2px}.rule-card .zh-ex{font-family:var(--f-hz);color:var(--brand);font-size:17px}.tone-card{text-align:center;padding:20px 14px}#tone-cards{grid-template-columns:repeat(5,1fr)}@media (max-width:700px){#tone-cards{grid-template-columns:repeat(2,1fr)}}.tone-card .mark{font-size:38px;font-weight:800;font-family:var(--f-serif);line-height:1}.tone-card .nm{font-weight:700;margin-top:6px;font-size:14.5px}.tone-card .ds{font-size:12px;color:var(--muted);margin-top:3px;min-height:34px}.tone-card svg{margin:10px auto 4px}.tone-contour{stroke-width:4;fill:none;stroke-linecap:round}.pair-drill .pair-zh{font-family:var(--f-hz);font-size:52px;text-align:center}.pair-drill .pair-py{font-size:22px;text-align:center;font-weight:600;margin-top:4px}