:root{color-scheme:light;--bg:#f7f2ea;--paper:#fffaf2;--panel:#fff;--ink:#27221d;--muted:#756a5f;--line:#eadfd1;--accent:#b5422b;--accent-soft:#f2d9d0;--teal:#117b73;--teal-soft:#d9eeeb;--gold:#bd8419;--gold-soft:#f6e7c6;--green:#24805f;--shadow:0 18px 50px rgba(64,42,25,.12);--radius:8px}:root[data-theme=night]{color-scheme:dark;--bg:#161412;--paper:#211e1a;--panel:#29251f;--ink:#fff7ec;--muted:#c6b8a7;--line:#40382f;--accent:#f0734f;--accent-soft:#4b281f;--teal:#59d3c7;--teal-soft:#193936;--gold:#f1b94a;--gold-soft:#46351b;--green:#65d19f;--shadow:0 18px 54px rgba(0,0,0,.36)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;margin:0;background:radial-gradient(circle at 18% -8%,rgba(17,123,115,.12),transparent 32rem),radial-gradient(circle at 92% 2%,rgba(181,66,43,.12),transparent 30rem),var(--bg);color:var(--ink);font-family:'Noto Sans Thai','Leelawadee UI',Tahoma,'Hiragino Sans','Yu Gothic UI',Meiryo,system-ui,sans-serif}button{border:0;color:inherit;font:inherit;cursor:pointer}button:focus-visible{outline:3px solid rgba(17,123,115,.32);outline-offset:3px}h1,h2,h3,p{margin-top:0}.app-shell{width:min(1180px,100%);margin:0 auto;padding:22px clamp(14px,4vw,34px) 36px}.topbar,.workspace,.lesson-header,.course-meta,.word-toolbar,.lesson-actions,.top-actions,.mode-tabs,.chip-row{display:flex}.topbar{align-items:center;justify-content:space-between;gap:16px;padding:8px 2px 22px}.eyebrow,.section-label{margin:0;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1{margin-bottom:0;font-size:clamp(1.55rem,4vw,2.6rem);line-height:1.18}.workspace{align-items:flex-start;gap:20px}.course-panel,.study-panel{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.course-panel{position:sticky;top:18px;width:340px;flex:0 0 340px;padding:14px}.course-image{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);border-radius:6px}.course-meta,.lesson-header,.word-toolbar{align-items:center;justify-content:space-between;gap:14px}.course-meta{margin-top:16px}.course-meta h2,.lesson-header h2{margin-bottom:0;font-size:1.35rem;line-height:1.25}.progress-ring{display:grid;min-width:58px;height:58px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--teal);font-weight:900}.meter{height:8px;margin:14px 0 16px;overflow:hidden;border-radius:999px;background:var(--line)}.meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .3s ease}.lesson-list{display:grid;gap:8px}.lesson-card,.icon-button,.tool-button,.mode-tab,.play-small,.quiz-choice{border:1px solid var(--line);background:var(--paper);transition:transform .16s ease,background-color .16s ease,border-color .16s ease}.lesson-card{width:100%;padding:11px 12px;border-radius:6px;text-align:left}.lesson-card:hover{transform:translateY(-1px);border-color:var(--teal)}.lesson-card.active{border-color:var(--teal);background:var(--teal-soft)}.lesson-card strong,.lesson-card span{display:block}.lesson-card span{margin-top:2px;color:var(--muted);font-size:.78rem}.study-panel{min-width:0;flex:1;padding:clamp(16px,3vw,24px)}.lesson-actions,.top-actions{align-items:center;gap:8px}.icon-button{display:grid;width:42px;height:42px;place-items:center;border-radius:999px}.icon-button svg,.tool-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tool-button{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border-radius:999px;font-size:.88rem;font-weight:800}.tool-button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.icon-button:active,.tool-button:active,.mode-tab:active,.lesson-card:active{transform:scale(.97)}.mode-tabs{gap:8px;margin:22px 0;padding:4px;overflow-x:auto;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.mode-tab{min-width:72px;padding:9px 14px;border-radius:999px;color:var(--muted);font-weight:800;white-space:nowrap}.mode-tab.active{border-color:var(--ink);background:var(--ink);color:var(--bg)}.tab-panel{display:none}.tab-panel.active{display:block}.sentence-stack{display:grid;gap:12px}.sentence-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.thai-line{margin-bottom:6px;font-size:clamp(1.55rem,4.8vw,2.35rem);font-weight:800;line-height:1.4}.roman-line{margin-bottom:7px;color:var(--teal);font-weight:800}.tone-line{margin-bottom:7px;color:var(--accent);font-size:.95rem;font-weight:900;line-height:1.6}.jp-line{margin-bottom:0;color:var(--muted);line-height:1.7}.play-small{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;color:var(--accent)}.sound-lab,.practice-box,.diagnosis{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--gold-soft) 58%,var(--paper))}.sound-lab h3,.practice-box h3,.word-toolbar h3{margin-bottom:4px;font-size:1.08rem}.sound-lab p,.diagnosis ul{color:var(--muted);line-height:1.75}.tone-guide{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}.tone-guide-item{display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.tone-guide-item b{color:var(--accent);font-size:1.1rem}.tone-guide-item span{font-weight:800}.tone-guide-item small{color:var(--muted);font-size:.76rem}.chip-row{flex-wrap:wrap;gap:8px}.chip-row-inner{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border-radius:999px;background:var(--panel);color:var(--accent);font-weight:800}.word-toolbar{margin-bottom:14px}.word-grid,.analysis-grid{display:grid;gap:12px}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.word-card,.stat-block{padding:15px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.word-card{min-height:150px}.word-card.known{border-color:var(--green);background:color-mix(in srgb,var(--teal-soft) 52%,var(--paper))}.word-card button{width:100%;background:transparent;text-align:left}.word-thai{margin-bottom:2px;font-size:1.85rem;font-weight:900;line-height:1.35}.word-tone{margin-bottom:10px;color:var(--accent);font-weight:900;line-height:1.55}.word-reading{margin-bottom:10px;color:var(--teal);font-weight:800}.word-meaning{margin-bottom:10px;font-weight:800}.word-note{margin-bottom:0;color:var(--muted);font-size:.9rem;line-height:1.65}.known-toggle{margin-top:13px;padding:8px 10px;border-radius:999px;background:var(--teal)!important;color:#fff;font-size:.82rem;font-weight:800}.practice-box{background:var(--paper)}.quiz-choices{display:grid;gap:10px;margin-top:14px}.quiz-choice{padding:13px 14px;border-radius:8px;text-align:left;font-weight:800}.quiz-choice.correct{border-color:var(--green);background:color-mix(in srgb,var(--teal-soft) 72%,var(--panel))}.quiz-choice.wrong{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 72%,var(--panel))}.quiz-result{min-height:28px;margin:12px 0 0;color:var(--muted);font-weight:800}.stat-block span{display:block;color:var(--accent);font-size:1.75rem;font-weight:900}.stat-block p{margin-bottom:0;color:var(--muted);font-size:.84rem;font-weight:800}.diagnosis{background:color-mix(in srgb,var(--teal-soft) 55%,var(--paper))}.diagnosis ul{margin:10px 0 0;padding-left:1.2rem}@media (max-width:860px){.workspace{display:block}.course-panel{position:static;width:auto;margin-bottom:16px}.lesson-list{grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;padding-bottom:2px}.lesson-header,.word-toolbar{align-items:stretch;flex-direction:column}}@media (max-width:620px){.app-shell{padding:16px 12px 28px}.topbar{align-items:flex-start}.lesson-actions{display:grid;grid-template-columns:1fr 1fr}.tool-button{justify-content:center}.sentence-row,.analysis-grid,.word-grid{grid-template-columns:1fr}.tone-guide{grid-template-columns:repeat(2,minmax(0,1fr))}.play-small{width:100%;border-radius:999px}}