:root{color-scheme:light}
a.course-card,a.set-card,a.brand,a.mobile-app-brand,a.history-item{color:inherit;text-decoration:none}a.nav-item,a.btn{text-decoration:none}a.btn{color:var(--ink)}a.btn.primary{color:#fff}
.language-control{display:inline-flex;align-items:center;flex-shrink:0}.language-control select{width:87px;min-height:36px;padding:7px 6px;font-size:1rem;border-color:var(--line);background:var(--white);color:var(--ink);cursor:pointer}.modal-footer{flex-wrap:wrap}.reference-answer p{white-space:pre-wrap;line-height:1.9}.modal-footer .btn{white-space:normal}
html[lang=en] .course-tag{letter-spacing:.3px}html[lang=en] .hero-foot{line-height:1.8}html[lang=en] .set-card h3{line-height:1.5}html[lang=en] .section-heading{gap:12px}
@media(max-width:760px){.theme-toggle .theme-label{display:none}.language-control select{min-height:34px;width:82px;font-size:1rem}html[lang=en] .hero h2{font-size:1.8125rem}}
@media(max-width:600px){.top-actions .streak-pill{display:none}html[lang=en] .mobile-app-brand{font-size:1.0625rem}html[lang=en] .listening-controls{grid-template-columns:auto 1fr}html[lang=en] .audio-speeds{grid-column:1/-1;justify-self:start}html[lang=en] .audio-seek-label{grid-row:auto}}
.set-levels{display:flex;gap:6px}.set-levels [aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--accent)}
.theme-toggle{display:inline-flex;gap:7px;align-items:center;min-height:36px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:1rem;white-space:nowrap;background:var(--white)}
.theme-options{display:grid;gap:10px}.theme-option{display:flex;gap:14px;align-items:center;text-align:left;padding:17px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.theme-option[aria-pressed=true]{border-color:var(--accent);background:var(--soft)}.theme-option strong,.theme-option small{display:block}.theme-option small{margin-top:6px;color:var(--muted);font-size:1rem}
.set-section{margin-bottom:28px}.set-section .section-heading{margin-bottom:16px}.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.set-card{display:flex;flex-direction:column;gap:11px;text-align:left;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--white);box-shadow:var(--shadow);min-width:0}.set-card:hover{border-color:var(--accent)}.set-card .set-number{font-size:1rem;letter-spacing:1px;color:var(--accent);font-weight:700}.set-card h3{font-size:1rem;margin:0;letter-spacing:-.4px}.set-card p{font-size:1rem;color:var(--muted);line-height:1.8;margin:0;flex:1}.set-card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:1rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}.set-card-footer svg{color:var(--accent)}.set-note{font-size:1rem;color:var(--muted);line-height:1.8;margin:12px 0 0}.quiz-choice:disabled{opacity:1}.theme-toggle:focus-visible,.set-card:focus-visible,.theme-option:focus-visible{outline:2px solid var(--accent)}
:root[data-theme=dark]{color-scheme:dark;--ink:#e9edf7;--muted:#b8c3d9;--accent:#b0c2ff;--highlight:#dbe5ff;--line:#35425d;--paper:#111827;--soft:#243454;--white:#192337;--danger:#ffb5a3;--amber:#e1c38e;--shadow:0 10px 35px #0002}
[data-theme=dark] :is(.sidebar,.panel,.stat,.btn,.quiz-choice,.course-card,.resume-strip,.goal-ring>div,.nav-count,.history-item,dialog,input,select,textarea){background:var(--white);border-color:var(--line);color:var(--ink)}
[data-theme=dark] .topbar{background:#151e30f0}
[data-theme=dark] .hero-foot{color:var(--muted)}
[data-theme=dark] :is(.hero,.service-hero,.daily-mini,.recommend-card,.listening-box,.notice.info,.feedback,.result-advice,.step-num,.level-option.selected,.section-option.selected,.count-option.selected,.quiz-choice.selected,.quiz-choice.correct,.level-badge,.history-icon,.stat-icon,.result-circle,.answer-state,.answer-option.right){background:#243555;border-color:#4e68a3;color:#e0e8ff}
[data-theme=dark] :is(.course-card.intermediate .level-badge,.level-pill.ii,.answer-state.essay){background:#293c49;color:#c3d9e8}
[data-theme=dark] :is(.feedback.bad,.quiz-choice.incorrect,.answer-state.bad,.notice.error){background:#442e29;border-color:#a26e5f;color:#ffcfbf}
[data-theme=dark] .quiz-choice.correct{border-color:#8da8ff}
[data-theme=dark] .quiz-choice.selected{border-color:#8da8ff}
[data-theme=dark] :is(.passage,.answer-passage,.quiz-options,.self-check,.model-answer,.chart-bar-area,.search){background:#151e30;border-color:var(--line);color:var(--ink)}
[data-theme=dark] :is(.level-option,.section-option,.count-option){background:var(--white);border-color:var(--line)}
[data-theme=dark] :is(.hero p,.recommend-card p,.listening-box p,.model-answer p,.field>span,.field-label,.self-check,.keyboard-hint,.local-label,.tiny,.bottom-note,.site-footer,.nav-item,.course-card h3>span,.goal-ring small,.goal-ring strong span,.stat-value small,.daily-mini p,.course-tag,.empty strong,.eyebrow,.nav-label,.sidebar-footer,.audio-time,.quiz-labels,.count-option span,.level-option span,.history-description small,.answer-detail summary small){color:var(--muted)}
[data-theme=dark] :is(.text-btn,.audio-restart,.info-link,.audio-symbol,.history-score,.history-icon,.goal-ring strong,.topic-row strong,.answer-option.right){color:var(--accent)}
[data-theme=dark] :is(.btn.primary,.quiz-choice.selected .option-number){background:#b0c2ff;border-color:#b0c2ff;color:#112049}
[data-theme=dark] .btn.primary:hover{background:#c8d6ff}
[data-theme=dark] .btn.tinted{background:#dbe5ff;color:#14254c;border-color:#dbe5ff}
[data-theme=dark] :is(.btn:not(.primary):not(.tinted):hover,.nav-item:hover,.history-item:hover,.quiz-choice:hover:not(:disabled)){background:#233350}
[data-theme=dark] .nav-item.active{background:var(--soft);color:var(--accent)}
[data-theme=dark] .set-levels [aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--accent)}
[data-theme=dark] :is(.pill,.level-pill,.original-tag,.option-number,.round-arrow){background:#293956;border-color:#4e6389;color:#d7e3ff}
[data-theme=dark] .streak-pill{background:#2c2b45;color:#d5d0fa;border-color:#554f7f}
[data-theme=dark] .progress{background:#2d3b57}
[data-theme=dark] :is(.progress>div,.chart-bar,.topic-progress span){background:#9ab2ff}
[data-theme=dark] .goal-ring{background:conic-gradient(#9ab2ff var(--goal),#30405f 0)}
[data-theme=dark] .topic-progress{background:#30405f}
[data-theme=dark] :is(.answer-detail,.history-item,.course-bottom,.answer-detail summary,.result-numbers,.listening-controls,.audio-speeds,.quiz-bottom,.modal-footer,.modal-head){border-color:var(--line)}
[data-theme=dark] .audio-speeds button{background:#1d2d49;color:#cad8f6}
[data-theme=dark] .audio-speeds button.active{background:#405d9a;color:#f0f4ff}
[data-theme=dark] dialog::backdrop{background:#0009}
[data-theme=dark] input:focus,[data-theme=dark] textarea:focus,[data-theme=dark] select:focus{outline-color:#7896dd}
@media(max-width:1100px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.theme-toggle{font-size:1rem;min-height:34px;padding:6px 8px}.theme-toggle svg{width:14px;height:14px}.top-actions{gap:7px}.set-card{padding:17px}.set-card h3{font-size:1rem}.set-grid{gap:10px}}
@media(max-width:370px){.theme-toggle .theme-label{display:none}.set-grid{grid-template-columns:1fr}}

/* Supporting text remains ordinary readable text at every breakpoint. */
:root{--muted:#556174;line-height:1.65}
:root[data-theme=dark]{--muted:#bac5db}
small{font-size:1rem}
@media(min-width:761px){
 :root{--sidebar-width:max(224px,14rem)}
 .sidebar{width:var(--sidebar-width);padding-left:14px;padding-right:14px}
 .workspace{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width))}
 .sidebar nav .nav-item{display:grid;grid-template-columns:20px minmax(0,1fr) max-content;gap:10px;padding:13px 12px;align-items:center}
 .sidebar nav .nav-item>svg{grid-column:1;width:20px}
 .sidebar nav .nav-text{grid-column:2;white-space:nowrap}
 .sidebar nav .nav-count{grid-column:3;justify-self:end;margin-left:0;min-width:2ch;padding:1px 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
}
:is(.tiny,.eyebrow,.nav-label,.sidebar-footer,.brand small,.local-label,.hero p,.hero-foot,.course-tag,.course-card p,.course-bottom,.stat-label,.stat-foot,.daily-mini p,.goal-panel>p,.goal-ring small,.recommend-card p,.section-heading>.tiny,.setup-step h2,.level-option span,.count-option span,.start-summary>span,.quiz-header,.quiz-labels,.original-tag,.listening-box p,.audio-time,.transcript-button,.keyboard-hint,.bottom-note,.result-numbers small,.topic-row small,.topic-row>div:first-child span,.result-advice,.answer-detail summary small,.answer-option,.history-description small,.info-body p,.site-footer,.site-footer button){color:var(--muted);line-height:1.7}
.eyebrow,.nav-label,.brand small{letter-spacing:.08em}
.btn,.text-btn,.language-control select,.audio-restart,.audio-speeds button{min-height:44px}
.language-control select{width:128px;font-size:1rem;padding:8px}
.daily-mini>div{gap:8px}.daily-mini>div>span{white-space:nowrap;flex-shrink:0}
html:lang(zh) :is(.hero p,.page-heading p,.course-card p),html:lang(ja) :is(.hero p,.page-heading p,.course-card p){word-break:normal;line-break:strict;overflow-wrap:anywhere}
.theme-toggle{width:44px;height:44px;min-height:44px;padding:10px;justify-content:center;flex-shrink:0}
.theme-toggle svg{width:22px;height:22px}
.btn{white-space:normal;text-align:center}
.option-number{color:var(--ink);border-color:var(--muted)}
.quiz-choice.selected,.quiz-choice.correct{border-color:var(--accent)}
:root:not([data-theme=dark]) .quiz-choice.selected,:root:not([data-theme=dark]) .quiz-choice.correct{background:var(--soft)}
.set-card h3{font-size:1.125rem}.set-card p{font-size:1rem}.set-card{gap:14px}
.set-card-footer,.set-note{font-size:1rem}.set-card .set-number{font-size:1rem}
.topbar{height:auto;min-height:80px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.top-actions{gap:12px;flex-wrap:wrap;margin-left:auto}.breadcrumb{line-height:1.7}
.panel-heading,.section-heading{flex-wrap:wrap}.set-section .section-heading{align-items:flex-start}
.quiz-header{flex-wrap:wrap;row-gap:12px}.quiz-bottom{flex-wrap:wrap;gap:16px}.quiz-choice{line-height:1.75}
.audio-speeds{flex-wrap:wrap}.audio-speeds button{padding:8px 12px}
.listening-controls{grid-template-columns:auto auto minmax(80px,1fr);gap:14px}.audio-speeds{grid-column:1/-1;justify-self:start}
.result-numbers strong>span{font-size:1rem}.topic-row>div:first-child{align-items:flex-start;flex-wrap:wrap}
.history-description{min-width:0;overflow-wrap:anywhere}.history-icon{flex-shrink:0}.history-item{flex-wrap:wrap}
.hero-art .art-page{height:210px}.hero-art .art-line{margin:8px 0}
@media(max-width:1100px){.topbar .local-label{display:none}.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .topbar{min-height:76px;padding:12px 16px;gap:10px}.top-actions{gap:8px}.mobile-install{min-width:36px;min-height:44px}
 .sidebar{height:calc(82px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.sidebar nav{height:82px;align-items:stretch}
 .nav-item{min-height:76px;gap:5px;padding:8px 2px}.nav-text{font-size:1rem;line-height:1.35;overflow-wrap:anywhere}.nav-count{font-size:1rem;right:4px;top:0}
 .workspace{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.set-grid{grid-template-columns:1fr}.course-grid{grid-template-columns:1fr}
 .set-levels{flex-wrap:wrap}.set-levels .btn{padding:8px 12px}.course-tag{max-width:none;font-size:1rem}
 .count-option{min-width:0;overflow-wrap:normal}
 .quiz-header .btn{font-size:1rem;min-height:44px}.quiz-labels{flex-wrap:wrap}.original-tag{display:inline}
 .listening-controls,html[lang=en] .listening-controls{grid-template-columns:auto 1fr}.audio-time{text-align:right}.audio-seek-label{grid-row:auto;grid-column:1/-1}
 .audio-speeds,html[lang=en] .audio-speeds{grid-column:1/-1}.hero-foot{line-height:1.8}
 .result-numbers{gap:8px}.result-numbers strong{font-size:1.375rem}.result-numbers small{font-size:1rem}
 .topic-panel{display:block}.modal-head,.modal-body,.modal-footer{padding:20px}.site-footer button{font-size:1rem}
}

/* Translated controls keep readable type and gain room through layout. */
.page-heading>div:first-child{min-width:0}.heading-actions{flex:0 0 auto;max-width:100%}
.btn>svg,.text-btn>svg,.section-option>svg{flex-shrink:0}
.resume-strip{flex-wrap:wrap}.resume-strip>div{flex:1 1 20rem;min-width:0}.resume-strip>.btn{flex:0 0 auto;max-width:100%;word-break:keep-all;overflow-wrap:normal}
.hero-actions{flex-wrap:wrap;align-items:center}.hero-actions>.btn{max-width:100%}
.hero-foot{display:flex;flex-wrap:wrap;gap:8px 16px}
.hero-foot>span{display:inline-flex;align-items:flex-start;gap:6px;min-width:0;max-width:100%}
.hero-foot>span>svg{flex-shrink:0;margin-top:7px}.hero-foot>span>span{min-width:0}
.section-option{max-width:100%;overflow-wrap:normal}
.setup-step>span,.step-num{flex-shrink:0}
[data-theme=dark] :is(.level-option,.section-option,.count-option){color:var(--ink)}
[data-theme=dark] .modal-footer{background:var(--paper)}
.count-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
.count-option strong{white-space:nowrap}
.listening-box>div:not(.listening-controls){flex:1 1 12rem;min-width:0}
.audio-symbol,.listening-box>[data-audio-play]{flex-shrink:0}
.modal-head{gap:12px}.modal-head>div{min-width:0}.modal-head>.icon-button{flex-shrink:0}
.modal-footer>.btn{flex:1 1 12rem;max-width:100%}
.result-numbers strong{white-space:nowrap}.result-numbers strong>span{color:var(--muted)}
@media(min-width:761px){
 :root{--sidebar-width:max(248px,15.5rem)}
 .side-bottom .nav-item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;padding:12px}
 .side-bottom .nav-item>svg{width:20px}.side-bottom .nav-text{display:block;min-width:0;line-height:1.5;overflow-wrap:normal}
}
@media(min-width:761px) and (max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{display:none}}
@media(max-width:760px){
 .sidebar nav{display:grid;grid-template-columns:repeat(4,minmax(max-content,1fr));gap:0}
 .nav-text{white-space:nowrap;overflow-wrap:normal;word-break:normal}
 .nav-count{top:2px;right:0;padding:0 4px;line-height:1.35;min-width:1.5ch}
 .heading-actions{width:100%}.heading-actions>.btn{max-width:100%}
 .quiz-header>span:first-child{flex:1 1 100%}.quiz-header>.btn{margin-left:auto}
 .quiz-bottom>.btn{width:100%}
}
@media(max-width:480px){
 .level-select,.count-options{grid-template-columns:minmax(0,1fr)}
 .count-option{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;text-align:left;padding:16px}
 .count-option span{margin:0}
 .heading-actions>.btn,.hero-actions>.btn,.hero-actions>.text-btn{width:100%}
 .hero-actions>.text-btn{text-align:center;margin:0}
 .result-numbers{grid-template-columns:minmax(0,1fr);gap:0}
 .result-numbers>div{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:8px 16px;border:0;border-bottom:1px solid var(--line);padding:12px 0;text-align:left}
 .result-numbers>div:last-child{border:0}.result-numbers small{margin:0;grid-column:1;grid-row:1}.result-numbers strong{grid-column:2;grid-row:1}
 .modal-footer>.btn{flex-basis:100%}
}

/* Thai glyphs need their natural spacing, including stacked vowel marks. */
html:lang(th){font-family:"Leelawadee UI","Thonburi","Noto Sans Thai","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif}
html:lang(th) :is(.eyebrow,.nav-label,.page-heading h1,.hero h2,.course-card h3,.set-card h3,.stat-value,.modal-head h2,.result-numbers strong){letter-spacing:normal}
html:lang(th) :is(h1,h2,h3){text-wrap:balance}
@media(max-width:1100px){.top-actions .streak-pill{display:none}}
.native-app :is(.side-bottom [data-action=install],.mobile-install){display:none}
#toast{width:max-content;max-width:calc(100vw - 32px);overflow-wrap:break-word}
@media(max-width:760px){#toast{bottom:calc(96px + env(safe-area-inset-bottom))}}