:root{--bg0: #0c1f18;--bg1: #143528;--ink: #f2f7f3;--muted: #a8c4b6;--accent: #3ecf8e;--accent-dim: #2a9a68;--warn: #e8a54b;--bad: #e86a6a;--ok: #3ecf8e;--card: #1a3d2f;--choice: #214a39;--radius: 16px;--font: "Segoe UI", system-ui, -apple-system, sans-serif;--thai: "Thonburi", "Sukhumvit Set", "Noto Sans Thai", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font);color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,#1e5c44 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#0a3326 0%,transparent 50%),linear-gradient(165deg,var(--bg0),var(--bg1) 40%,#0a1812);background-attachment:fixed}.app{max-width:520px;margin:0 auto;min-height:100dvh;padding:1rem 1rem 2.5rem}@media(min-width:768px){.app{max-width:640px;padding:2rem 1.5rem 3rem}}.screen{display:flex;flex-direction:column;gap:1rem}.hero h1,.screen>h1{font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.15;margin:.2rem 0;font-weight:700;letter-spacing:-.02em}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--accent);margin:0}.lede,.hint,.meta{color:var(--muted);line-height:1.45;margin:0}.panel{display:flex;flex-direction:column;gap:.65rem;background:color-mix(in srgb,var(--card) 88%,black);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--radius);padding:1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:12px;padding:.9rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;color:var(--ink);background:var(--choice);transition:transform .12s ease,background .12s ease}.btn:active{transform:scale(.98)}.btn--primary{background:linear-gradient(180deg,var(--accent),var(--accent-dim));color:#062116}.btn--secondary{background:color-mix(in srgb,var(--accent) 22%,var(--choice))}.btn--ghost{background:transparent;border:1px solid color-mix(in srgb,var(--muted) 35%,transparent);color:var(--muted)}.btn--icon{width:2.75rem;height:2.75rem;padding:0;border-radius:999px;font-size:1.2rem;flex-shrink:0}.back{align-self:flex-start;padding:.4rem .7rem}.card{background:var(--card);border-radius:calc(var(--radius) + 4px);padding:1.1rem 1rem 1.25rem;border:1px solid color-mix(in srgb,white 8%,transparent);display:flex;flex-direction:column;gap:.75rem}.card__kind{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}.card__prompt{margin:0;font-size:1.2rem;line-height:1.35}.card__thai-block{display:flex;flex-direction:column;gap:.25rem}.card__thai-row{display:flex;align-items:center;gap:.75rem}.card__thai{margin:0;font-family:var(--thai);font-size:clamp(2.4rem,10vw,3.4rem);line-height:1.2;flex:1}.card__transcript{margin:.15rem 0 0;padding:.35rem .55rem;border-radius:8px;background:color-mix(in srgb,black 22%,transparent);color:#e3f2ea;font-size:1.12rem;line-height:1.4;letter-spacing:.01em;font-weight:500}.card__note{margin:0;color:var(--muted);font-size:.95rem}.choices{display:flex;flex-direction:column;gap:.55rem}.choice{display:flex;align-items:flex-start;gap:.75rem;text-align:left;width:100%;padding:.85rem .9rem;border-radius:12px;border:1px solid color-mix(in srgb,white 10%,transparent);background:var(--choice);color:var(--ink);font-size:1rem;cursor:pointer}.choice:disabled{cursor:default;opacity:1}.choice__key{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:6px;background:color-mix(in srgb,black 25%,transparent);font-size:.8rem;font-weight:700;color:var(--muted);flex-shrink:0}.choice--ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 22%,var(--choice))}.choice--bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--choice))}.reveal{border-radius:12px;padding:.85rem;background:color-mix(in srgb,black 25%,transparent);line-height:1.4}.reveal p{margin:.35rem 0}.reveal__status{font-weight:700}.reveal--ok .reveal__status{color:var(--ok)}.reveal--bad .reveal__status{color:var(--bad)}.reveal__tip{color:var(--warn)}.reveal__class{margin:.25rem 0!important}.reveal__class span{display:inline-block;margin-left:.25rem;padding:.15rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);font-weight:700;font-size:.9rem;text-transform:lowercase}.streak{color:var(--accent)}.progress{position:relative;height:1.6rem;flex:1;background:color-mix(in srgb,black 35%,var(--choice));border-radius:999px;overflow:hidden}.progress__fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .2s ease}.progress__label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.75rem;font-weight:600}.session-top{display:flex;align-items:center;gap:.75rem}.sticky{position:sticky;bottom:.75rem;margin-top:.25rem;box-shadow:0 8px 24px color-mix(in srgb,black 45%,transparent)}.lesson-list{display:flex;flex-direction:column;gap:1rem}.lesson-item{background:var(--card);border-radius:var(--radius);padding:1rem;border:1px solid color-mix(in srgb,white 8%,transparent)}.lesson-item h2{margin:0 0 .4rem;font-size:1.15rem}.lesson-item>p{color:var(--muted);margin:0 0 .75rem;line-height:1.4}.rules{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.85rem}.rules details{background:color-mix(in srgb,black 20%,transparent);border-radius:10px;padding:.55rem .7rem}.rules summary{cursor:pointer;font-weight:600}.rules p{margin:.5rem 0 .15rem;color:var(--muted);line-height:1.45;font-size:.95rem}.score{font-size:2rem;font-weight:700;margin:0;color:var(--accent)}.weak-list{margin:0;padding-left:1.1rem;color:var(--muted);line-height:1.5}.weak-list span[lang=th]{font-family:var(--thai);color:var(--ink);margin-right:.35rem}