#familyDialog.typing-dialog { width:min(1000px,calc(100% - 24px)); }
.typing-lab { max-width:850px; margin:0 auto; }.typing-intro { text-align:center; padding:20px 0; }.typing-intro>span { font-size:54px; color:#719b66; }.typing-intro h3 { font-size:27px; }.typing-intro p { color:#738272; }
.typing-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.typing-mode-grid button { text-align:left; border:1px solid #d6e3cd; background:#edf4e5; border-radius:20px; padding:22px 18px; min-height:112px; color:#365b45; }.typing-mode-grid strong { display:block; font-size:21px; }.typing-mode-grid small { display:block; font-size:14px; margin-top:10px; line-height:1.6; }
.typing-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; color:#617361; }.typing-toolbar>span { flex:1; min-width:150px; font-size:15px; }.typing-toolbar .learn-text-button { padding:10px 2px; font-size:15px; }.typing-audio { font-size:14px; }.typing-audio summary { cursor:pointer; padding:12px 0; }.typing-audio[open] { flex-basis:100%; border:1px solid #d8e3d0; border-radius:14px; padding:0 16px 12px; }.typing-audio label { display:inline-flex; align-items:center; gap:12px; padding:8px 14px 8px 0; }.typing-audio select { border:1px solid #c6d7bf; padding:9px; border-radius:9px; background:white; color:#365b45; }.typing-audio input { max-width:140px; accent-color:#739768; }
.typing-progress { height:5px; border-radius:9px; background:#e7eee0; overflow:hidden; margin-top:12px; }.typing-progress>span { display:block; height:100%; background:#85ab67; transition:width .25s; }
.typing-stage { text-align:center; padding:40px 0 12px; }.typing-stage>small { color:#7a8876; font-size:14px; }.typing-target { font:600 clamp(36px,8vw,68px)/1.6 ui-monospace,Consolas,monospace; color:#b2b9af; margin:18px 0 0; overflow-wrap:anywhere; letter-spacing:.05em; }.typing-target span { border-bottom:3px solid transparent; }.typing-target .right { color:#3a7756; }.typing-target .wrong { background:#fae1d9; color:#bc4e44; }.typing-target .cursor { border-color:#74945b; }.typing-stage #typingMeaning { font-size:22px; color:#4d684f; margin:8px 0 16px; }.typing-listen { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }.typing-listen .learn-secondary { background:transparent; border-color:#d9e5d0; font-size:16px; }
.typing-input { display:block; max-width:540px; margin:24px auto 10px; }.typing-input input { width:100%; border:1px solid #d1dfca; border-bottom:3px solid #adbf9a; border-radius:14px; background:#fff; padding:14px 10px; min-height:64px; text-align:center; font:24px/1.4 ui-monospace,Consolas,monospace; color:#2f5640; }.typing-input input:focus { outline:3px solid #d7e8c6; outline-offset:2px; }.typing-input input:disabled { background:#eef1eb; }.typing-stage #typingFeedback { font-size:15px; min-height:30px; color:#74816e; }
.typing-stats { display:flex; justify-content:center; gap:clamp(20px,6vw,70px); border-top:1px solid #e1e8dc; padding:24px 0; }.typing-stats>div { text-align:center; min-width:65px; }.typing-stats b { display:block; font-size:25px; font-variant-numeric:tabular-nums; color:#365b45; }.typing-stats small { display:block; font-size:12px; color:#84907c; margin-top:7px; }
.typing-keys { text-align:center; color:#91a089; margin:0 auto 20px; max-width:560px; }.typing-keys>div { display:flex; justify-content:center; gap:5px; margin:5px 0; }.typing-keys span { display:grid; place-items:center; width:38px; height:35px; border:1px solid #d5dfce; border-bottom:3px solid #c4d3bb; border-radius:7px; background:#f3f6ee; font:14px/1 ui-monospace,monospace; }.typing-keys .next { background:#d6e8be; border-color:#9aba7c; color:#305039; }.typing-keys small { display:block; font-size:12px; margin-top:12px; }
@media(max-width:600px) { .typing-mode-grid { grid-template-columns:1fr; }.typing-mode-grid button { min-height:90px; padding:17px; }.typing-stage { padding-top:28px; }.typing-keys>div { gap:3px; }.typing-keys span { width:24px; height:30px; font-size:12px; }.typing-input input { font-size:21px; }.typing-stats { gap:20px; }.typing-stats b { font-size:23px; } }