@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap";*{box-sizing:border-box}body{color:#203b33;background:#f7f8f3;margin:0;font-family:DM Sans,Noto Sans Thai,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#fff;border:1px solid #dce3da;border-radius:12px;padding:12px 18px;transition:background .15s,transform .15s}button:hover{background:#edf2e8}button:disabled{cursor:default;opacity:.72}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #df9b48}a{color:inherit;text-decoration:none}.app{--bg:#f7f8f3;--panel:#fff;--ink:#203b33;--muted:#718078;background:var(--bg);min-height:100vh;color:var(--ink)}aside{background:var(--panel);border-right:1px solid #e7eae1;flex-direction:column;width:238px;padding:36px 24px;display:flex;position:fixed;inset:0 auto 0 0}.brand{letter-spacing:-1px;align-items:center;gap:12px;font-size:32px;font-weight:700;display:flex}.brand small{letter-spacing:3px;margin-top:2px;font-size:9px;display:block}.logo{color:#fff;background:#244c3e;border-radius:17px;place-items:center;width:46px;height:50px;font-size:36px;display:grid}.side-caption{letter-spacing:1.5px;color:var(--muted);margin:56px 12px 18px;font-size:10px}nav{gap:7px;display:grid}nav button{text-align:left;color:#6b7970;background:0 0;border:0;gap:14px;padding:15px 14px;font-size:14px;display:flex}nav button span{width:22px;font-size:19px}nav button.active{color:#204d3c;background:#edf3e9;font-weight:700}nav b{margin-left:auto;font-size:11px}.aside-bottom{color:var(--muted);margin-top:auto;padding:20px 12px;font-size:12px}.aside-bottom small{margin-top:10px;display:block}.dot{background:#6b9670;border-radius:50%;width:7px;height:7px;margin-right:8px;display:inline-block}main{max-width:1510px;margin-left:238px;padding:0 48px}header{height:100px;color:var(--muted);justify-content:space-between;align-items:center;font-size:13px;display:flex}select{background:var(--panel);color:var(--ink);border:1px solid #dce3da;border-radius:10px;padding:12px}h1{letter-spacing:-1.8px;margin:20px 0;font-size:42px;line-height:1.25}h2{letter-spacing:-.6px;font-size:24px;font-weight:600}h3{font-size:17px}p{color:var(--muted);line-height:1.75}.hero{background:#eaf0e1;border-radius:24px;grid-template-columns:1.25fr 1fr;min-height:350px;display:grid;overflow:hidden}.hero>div:first-child{z-index:1;padding:44px 0 38px 40px}.eyebrow{letter-spacing:2px;color:#6b806d;font-size:10px;font-weight:700}.hero h1{max-width:410px;margin:22px 0 18px;font-size:48px}.hero p{max-width:380px;font-size:15px}.primary{color:#fff;background:#254f3e;border:0;border-radius:12px;justify-content:center;align-items:center;gap:20px;padding:15px 22px;font-size:14px;font-weight:600;display:inline-flex}.primary:hover{background:#36664f}.hero small{color:#6b806d;margin-top:16px;font-size:11px;display:block}.hero-art{position:relative;overflow:hidden}.sun{background:#e9ca80;border-radius:50%;width:230px;height:230px;position:absolute;top:40px;right:36px}.letter{color:#31553b;z-index:1;font-family:Noto Sans Thai,sans-serif;font-size:210px;position:absolute;top:30px;right:75px;transform:rotate(-8deg)}.floating{z-index:3;background:#fff8ed;border-radius:16px;padding:16px 24px;font-size:25px;position:absolute;bottom:62px;left:15px;transform:rotate(-6deg);box-shadow:0 12px 30px #344f2418}.floating span{color:#7f8168;font-size:12px;display:block}.land{background:#b8c9a5;border-radius:50%;width:440px;height:130px;position:absolute;bottom:-65px;left:0;transform:rotate(-12deg)}.stats{grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 42px;display:grid}.stats article{background:var(--panel);border:1px solid #e7eae1;border-radius:15px;align-items:center;gap:18px;padding:22px;display:flex}.stats article>span{color:#8ba382;font-size:30px}.stats strong{font-size:26px;font-weight:500}.stats small{color:var(--muted);margin-top:4px;font-size:12px;display:block}.section-heading{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-heading h2{margin:10px 0}.text-button{color:#507056;background:0 0;border:0;padding:8px;font-size:13px}.topics{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.topic{text-align:left;background:var(--panel);border:1px solid #e3e7dd;border-radius:17px;padding:22px}.topic:hover{transform:translateY(-3px)}.topic-icon{background:#edf2e5;border-radius:12px;place-items:center;width:45px;height:45px;font-size:25px;display:inline-grid}.tone1 .topic-icon{background:#f7e9d6}.tone2 .topic-icon{background:#f6e5df}.tone3 .topic-icon{background:#e5edf0}.topic h3{margin:17px 0 6px}.topic p{min-height:42px;margin:0;font-size:12px}.topic footer{color:var(--muted);border-top:1px solid #e7eae1;justify-content:space-between;margin-top:18px;padding-top:14px;font-size:11px;display:flex}.voice-banner{background:#e7ece5;border-radius:18px;align-items:center;gap:24px;margin:30px 0;padding:26px;display:flex}.voice-symbol{color:#4e7359;font-size:44px}.voice-banner h2{margin:0;font-size:21px}.voice-banner p{margin:6px 0 0;font-size:13px}.voice-banner button{flex-shrink:0}.page-footer{color:#8a968b;justify-content:space-between;padding:32px 0;font-size:12px;display:flex}.panel{background:var(--panel);border:1px solid #e3e7dd;border-radius:22px;margin:20px 0;padding:32px}.filters{gap:12px;margin:24px 0;display:flex}.filters input{flex:1;min-width:100px}input,textarea{background:var(--panel);color:var(--ink);border:1px solid #dce3da;border-radius:12px;padding:14px}.chips{flex-wrap:wrap;gap:8px;margin:20px 0;display:flex}.chips button{padding:9px 12px;font-size:12px}.chips .selected{color:#fff;background:#254f3e}.word-list article{background:var(--panel);border:1px solid #e7eae1;border-radius:12px;align-items:center;gap:14px;margin-bottom:8px;padding:18px 22px;display:flex}.word-list article>div{flex:1}.word-list strong{font-size:21px;font-weight:500}.word-list small{color:var(--muted);margin-top:6px;display:block}.word-list p{flex:1;font-size:14px}.practice{max-width:780px;margin:30px auto}.practice-top{color:var(--muted);justify-content:space-between;margin:24px 0 10px;font-size:13px;display:flex}progress{accent-color:#537b52;width:100%;height:6px}.flash{text-align:center;background:var(--panel);border:1px solid #e3e7dd;border-radius:24px;margin:20px 0;padding:48px 32px}.flash h1{letter-spacing:0;font-family:Noto Sans Thai,DM Sans,sans-serif;font-size:42px}.roman{font-size:16px}.listen{color:#426640;background:#eaf0e1;border:0;font-size:13px}.answers{grid-template-columns:1fr 1fr;gap:12px;margin-top:32px;display:grid}.answers button{padding:20px}.correct{background:#dcefd7!important;border-color:#62975f!important}.wrong{background:#fae2dc!important;border-color:#c97160!important}.big-symbol{color:#6d9366;font-size:70px}.voice-layout{grid-template-columns:1fr 1.3fr;gap:24px;display:grid}.voice-layout h2{margin-top:28px;font-size:18px}.intro{max-width:680px}.badge{color:#8c6828;background:#fbefd8;border-radius:20px;padding:6px 10px;font-size:11px;display:inline-block}.empty{text-align:center;color:var(--muted);padding:60px 10px}.empty>span{color:#c0cbbb;font-size:55px}.muted{font-size:12px}.voice-result{border-bottom:1px solid #e3e7dd;padding:18px 0}.voice-result p,.reply{white-space:pre-wrap}.tutor textarea{resize:vertical;width:100%;height:140px;margin:20px 0;display:block}.reply{background:var(--bg);border-radius:15px;margin-top:24px;padding:24px;line-height:1.8}.settings{max-width:780px}.settings label{align-items:center;gap:16px;margin:24px 0;display:flex}.notice{color:#725b2d;background:#fff1d3;border-radius:12px;justify-content:space-between;align-items:center;margin:10px 0 20px;padding:15px 20px;font-size:13px;display:flex}.notice button{background:0 0;border:0;padding:0 7px}.alphabet-grid{grid-template-columns:repeat(8,1fr);gap:10px;display:grid}.alphabet-grid button{gap:5px;padding:15px 8px;display:grid}.alphabet-grid strong{color:#426640;font-size:42px}.alphabet-grid span{font-size:13px}.alphabet-grid small{color:var(--muted);font-size:10px}.alphabet-practice{align-items:center;gap:60px;display:flex}.alphabet-practice small{letter-spacing:1px;font-size:10px}.alpha-big{color:#426640;font-size:110px}.alphabet-practice .primary{margin:16px;display:block}.vowels{flex-wrap:wrap;gap:14px;display:flex}.vowels div{background:var(--bg);text-align:center;border-radius:12px;padding:16px;display:grid}.vowels strong{font-size:30px}.vowels span{color:var(--muted);font-size:12px}.dark{--bg:#172820;--panel:#21372c;--ink:#e3eadc;--muted:#a8baaa}.dark button,.dark select{color:var(--ink);background:#294333;border-color:#405442}.dark .hero{background:#304b34}.dark .hero h1,.dark .hero p{color:#eef1df}.dark nav button.active{background:#3b5940}.dark .voice-banner{background:#304b34}.dark .topic-icon{background:#405442}.dark .primary{color:#203b33;background:#cfdfb6}.dark .flash,.dark .panel,.dark .stats article,.dark .word-list article{border-color:#405442}@media (width>=1550px){main{margin-left:calc(50vw - 517px)}}@media (width<=1150px){aside{width:200px;padding:30px 15px}main{margin-left:200px;padding:0 28px}.hero h1{font-size:39px}.topics{grid-template-columns:repeat(2,1fr)}.hero-art .letter{right:35px}.sun{right:0}.alphabet-grid{grid-template-columns:repeat(6,1fr)}}@media (width<=750px){aside{background:var(--panel);z-index:10;border-top:1px solid #dce3da;width:100%;height:76px;padding:5px;inset:auto 0 0}.brand,.side-caption,.aside-bottom{display:none}nav{justify-content:space-around;gap:0;display:flex}nav button{border-radius:9px;flex-direction:column;align-items:center;gap:5px;padding:7px 5px;font-size:9px;display:flex}nav button span{font-size:20px}nav b{display:none}main{margin:0;padding:0 20px 80px}header{gap:10px;height:78px;font-size:11px}header select{padding:9px;font-size:11px}.hero{grid-template-columns:1fr;min-height:320px;position:relative}.hero>div:first-child{padding:30px 24px}.hero h1{max-width:240px;font-size:36px}.hero p{max-width:260px;font-size:13px}.hero-art{opacity:.23;width:220px;height:270px;position:absolute;top:20px;right:-70px}.hero-art .letter{font-size:180px}.floating{display:none}.hero .eyebrow{font-size:8px}.stats{gap:8px;margin:16px 0 30px}.stats article{gap:6px;padding:14px 10px}.stats article>span{display:none}.stats strong{font-size:23px}.stats small{font-size:10px}.section-heading h2{font-size:23px}.eyebrow{font-size:8px}.section-heading .text-button{font-size:11px}.topics{gap:10px}.topic{padding:17px}.topic p{font-size:11px}.voice-banner{flex-wrap:wrap;gap:12px;padding:20px}.voice-symbol{display:none}.voice-banner button{width:100%}.page-footer{font-size:10px}.voice-layout{grid-template-columns:1fr;gap:0}.panel{padding:23px}.filters{flex-wrap:wrap}.filters input{width:100%}.filters select{max-width:62%;font-size:12px}.filters .primary{font-size:12px}.word-list article{flex-wrap:wrap;gap:9px;padding:14px}.word-list article>div{flex-basis:50%}.word-list article p{flex-basis:30%}.word-list strong{font-size:18px}.word-list button{padding:8px 12px}.flash{padding:32px 18px}.flash h1{font-size:30px}.answers{grid-template-columns:1fr}.alphabet-grid{grid-template-columns:repeat(4,1fr)}.alphabet-practice{gap:20px}.alphabet-practice .primary{margin:12px 0}.alpha-big{font-size:90px}h1{font-size:34px}.settings label{flex-wrap:wrap}}.login-page{background:#eaf0e1;place-items:center;min-height:100vh;padding:24px;display:grid}.login-page .panel{max-width:500px;padding:40px}.login-page form{gap:15px;margin-top:25px;display:grid}.pair-box{background:#edf2e8;border-radius:12px;margin-top:16px;padding:18px}.vowels button{gap:8px;max-width:160px;display:grid}.vowels small{color:#718078}.direct-audio{justify-content:space-between;align-items:center;gap:30px;display:flex}.recording{background:#ac4138!important}.direct-audio p{font-size:13px}@media (width<=750px){.direct-audio{display:block}.direct-audio button{width:100%}}.optional-speech{border:1px dashed #c5d2bb;border-radius:16px;margin:25px 0;padding:22px}.optional-speech>small{color:#718078;letter-spacing:1px;margin-bottom:13px;font-size:10px;display:block}.optional-speech>p{margin-bottom:0;font-size:12px}.voice-score{text-align:left;background:#edf3e8;border-radius:14px;margin-top:20px;padding:20px}.voice-score>strong{color:#315c3c;font-size:32px;display:block}.voice-score small{color:#718078;font-size:10px}.voice-score p{white-space:pre-wrap}.voice-score h3{font-family:Noto Sans Thai,sans-serif}.pronunciation{color:var(--muted,#63756b);overflow-wrap:anywhere;margin:12px 0 20px}.pronunciation>span{font-size:1.25rem;display:block}.pronunciation>small{margin-top:5px;font-size:.75rem;display:block}.pronunciation details{text-align:left;max-width:540px;margin:12px auto;font-size:.9rem}.pronunciation summary{cursor:pointer;text-align:center;text-underline-offset:4px;text-decoration:underline}.pronunciation details p{margin:12px 0;font-size:.9rem;line-height:1.6}.pronunciation .ipa{color:var(--ink,#254f3e);font-size:1.25rem}.word-list .pronunciation{margin:6px 0}.word-list .pronunciation>span{font-size:1rem}.playback-speed{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:14px 0 22px;display:flex}.playback-speed>small{text-align:center;flex-basis:100%;font-size:.8rem}.playback-speed button{min-width:64px;min-height:44px;color:inherit;background:0 0;border:1px solid #b8c7b9;border-radius:12px;padding:8px 14px}.playback-speed button[aria-pressed=true]{color:#fff;background:#254f3e;border-color:#254f3e}.playback-speed button:focus-visible{outline-offset:3px;outline:3px solid #9dbd88}.syllable-tones{flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0;display:flex}.syllable-tones>span{border:1px solid #c4d0c3;border-radius:10px;flex-direction:column;gap:4px;padding:8px 12px;display:flex}.syllable-tones small{font-size:.75rem}.pronunciation .reading-tip{max-width:460px;margin:12px auto;font-size:.85rem;line-height:1.5}.pronunciation .phonetic-reading{color:inherit;margin-top:8px;font-size:1.5rem;font-weight:600}.flash .word-meaning{margin:8px 0 12px;font-size:25px}.practice .pronunciation{margin:10px 0 12px}.practice .pronunciation details{margin:8px auto}.practice .playback-speed{margin:10px 0 16px}@media (width<=750px){.practice-view header>span{display:none}.practice-view header{justify-content:flex-end}.practice-view .practice-top{margin:8px 0 4px}.practice-view .flash h1{margin:10px 0 6px;font-size:30px;line-height:1.3}.practice-view .flash .word-meaning{margin:4px 0 10px;font-size:24px}.practice-view .pronunciation .phonetic-reading{margin-top:0;font-size:1.3rem}.practice-view .pronunciation summary{font-size:.8rem}.practice-view .listen{min-height:44px;padding:10px 20px}.practice-view .playback-speed{gap:6px}.practice-view .playback-speed>small{font-size:.75rem}.practice-view .playback-speed button{padding:8px 12px}.practice-view main{padding:0 14px 80px;position:relative}.practice-view header{height:44px}.practice-view header select{max-width:65%;padding:7px;font-size:11px}.practice-view .practice{margin:0 auto}.practice-view .practice>.text-button{min-height:44px;padding:8px;position:absolute;top:0;left:14px}.practice-view .practice-top{margin:3px 0 1px;font-size:12px;line-height:20px}.practice-view .flash{margin:6px 0;padding:12px 14px}.practice-view .flash>.eyebrow{display:none}.practice-view .flash h1{margin:4px 0;line-height:1.25}.practice-view .flash .word-meaning{margin:4px 0 8px;font-size:22px;line-height:1.25}.practice-view .pronunciation{margin:6px 0 8px}.practice-view .pronunciation>small{margin-top:3px;font-size:10px}.practice-view .pronunciation details{margin:6px auto}.practice-view .playback-speed{gap:8px;margin:8px 0}.practice-view .playback-speed>small,.practice-view .repeat-instruction{display:none}.practice-view .optional-speech{border-radius:12px;margin:10px 0;padding:10px}.practice-view .optional-speech>small{letter-spacing:.5px;margin-bottom:6px;font-size:9px}.practice-view .optional-speech>button{min-height:44px;padding:9px 16px}.practice-view .optional-speech>p:last-of-type{display:none}.practice-view .optional-speech>p[role=status]{margin:0 0 6px;display:block}.practice-view .flash>.primary{min-height:44px;padding:10px 24px}.practice-view .page-footer{display:none}}.pronunciation>.thai-syllables{color:var(--ink,#203b33);margin-bottom:4px;font-family:Noto Sans Thai,sans-serif;font-size:1.1rem;line-height:1.35}.practice-view .pronunciation>.thai-syllables{font-size:1rem}