:root{--ink:#283e39;--green:#356b57;--cream:#f7f5ed;--pink:#c65c73}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Microsoft JhengHei',sans-serif;line-height:1.7}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d99130;outline-offset:4px}header{max-width:1180px;margin:auto;padding:22px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce1d5}header strong{color:var(--pink)}header a{color:var(--green);text-decoration:none}main{max-width:1100px;margin:auto;padding:30px 24px}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:30px}.eyebrow{font-size:13px;letter-spacing:3px;color:var(--green)}h1{font-size:clamp(32px,5vw,53px);line-height:1.3;margin:12px 0}h1 span{color:var(--pink)}.muted{color:#66776d}.characters{position:relative;text-align:center}.character-pair{display:flex;align-items:flex-end;justify-content:center;max-width:360px;margin:0 auto 10px}.character-pair img{display:block;width:100%;height:auto;object-fit:contain}.bubble{background:white;border:1px solid #dce1d5;border-radius:18px;padding:12px;font-size:14px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 20px}.tabs button,.secondary{background:transparent;color:var(--green);border:1px solid #aabeb2;border-radius:30px;padding:10px 20px}.tabs .active,.primary{background:var(--green);color:white;border:0;border-radius:30px;padding:11px 24px}.board{background:white;border:1px solid #e1e5db;border-radius:24px;padding:26px;box-shadow:0 10px 40px #29433708}.status{display:flex;justify-content:space-between;gap:15px;font-size:14px}.track{height:6px;background:#edf0e9;border-radius:20px;margin:14px 0 24px}.track div{height:100%;background:var(--pink);border-radius:20px;transition:width .3s}.question{display:grid;grid-template-columns:190px 1fr;gap:28px}.symbol{background:#f4eee6;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px}.symbol b{font-size:94px;line-height:1.5;color:var(--green)}.symbol small{color:#7d7469}fieldset{border:0;padding:0;margin:0 0 15px}legend{font-weight:bold;margin-bottom:7px}.options{display:flex;flex-wrap:wrap;gap:8px}.option{border:1px solid #d7dfd5;background:white;border-radius:10px;padding:8px 18px;min-width:68px;color:var(--ink)}.option.selected{background:#e4eee6;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.option.correct{border-color:#39815f;background:#e4f3e8}.option.wrong{border-color:#c55c71;background:#fff0f1}.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.feedback{margin-top:18px;background:#f4f6ef;border-radius:14px;padding:15px}.feedback:empty{display:none}.learn{display:grid;grid-template-columns:1fr 1fr;gap:26px}.vowel-map{width:100%;max-height:350px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:24px}.card{background:#f7f6f0;border-radius:14px;padding:16px}.card b{font-size:25px;color:var(--green)}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid #e2e6dd;padding:10px}footer{font-size:12px;color:#788076;margin:25px 0;text-align:center}.note{padding:14px;background:#f6eee8;border-radius:12px;font-size:14px}[hidden]{display:none!important}@media(max-width:650px){header{padding:16px;font-size:14px}.hero{grid-template-columns:1fr;gap:12px}.characters{display:flex;align-items:center}.character-pair{width:150px;flex-shrink:0;margin:0 8px 0 0}.bubble{text-align:left}.question,.learn{grid-template-columns:1fr}.symbol{min-height:125px}.symbol b{font-size:68px}.board{padding:18px}main{padding:22px 16px}.tabs button{padding:8px 14px}td,th{padding:7px;font-size:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.sound-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.sound-button{border:1px solid #b6c6b8;border-radius:10px;background:white;color:var(--green);font-size:26px;min-width:44px;min-height:44px;padding:3px 8px}.sound-button[aria-pressed="true"]{background:var(--green);color:white}.map-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.map-controls small{color:#66776d}.map-feedback{min-height:66px;margin-top:8px}.vowel-map{max-height:395px;overflow:visible}.nasal-label{fill:#347cb3}.learn{align-items:start;grid-template-columns:1.05fr 1fr}.learn>.cards{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.learn>.cards .card{min-width:0}.learn>.cards .card b{font-size:23px}.vowel-summary{margin-top:28px}.vowel-summary h3{margin-bottom:8px}.vowel-map{max-height:460px}@media(max-width:650px){.learn{grid-template-columns:1fr}.learn>.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.learn>.cards .card{padding:12px}.learn>.cards .card b{font-size:20px}}@media(max-width:380px){.learn>.cards{grid-template-columns:1fr}}.vowel-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:12px 0 28px}.vowel-card{display:flex;flex-direction:column;align-items:center;background:#f7f6f0;border:1px solid #dce1d5;border-radius:16px;padding:18px;color:var(--green)}.vowel-card:hover{background:#e4eee6}.vowel-card strong{font-size:48px;line-height:1.5}.vowel-card small{font-size:13px}.card-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;margin-top:18px}.card-detail .vowel-map{max-height:none}.card-copy{background:#f7f6f0;padding:24px;border-radius:18px}.card-copy h2{font-size:56px;margin:0}.listen-button[aria-pressed="true"]{box-shadow:0 0 0 4px #cfe5d6}.retroflex-badge{border:2px solid var(--green);border-radius:14px;padding:14px;text-align:center;color:var(--green);font-size:30px}@media(max-width:650px){.card-detail{grid-template-columns:1fr}.card-copy{padding:18px}.vowel-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.question.with-answer-map{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:20px}.answer-map{min-width:0;border:1px solid #dce1d5;background:#fafbf7;border-radius:16px;padding:14px}.answer-map h3{margin:0 0 8px;color:var(--green)}.answer-map .vowel-map{display:block;width:100%;max-height:none}.answer-map p{font-size:14px;margin:8px 0 0}@media(min-width:651px) and (max-width:900px){.question.with-answer-map{grid-template-columns:130px minmax(0,1fr)}.answer-map{grid-column:1/-1}}@media(max-width:650px){.question.with-answer-map{grid-template-columns:1fr}.answer-map{grid-column:auto}}header a.teacher-fb{display:inline-block;background:#c73542;color:#fff;border-radius:24px;padding:8px 16px;font-weight:bold;white-space:nowrap}header a.teacher-fb:hover{background:#a82230}