:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f8fafc;--surface:#fff;--ink:#1e1b4b;--muted:#475569;--muted-soft:#94a3b8;--border:#e2e8f0;--accent:#9333ea;--accent-hover:#a855f7;--accent-dark:#6b21a8;--accent-soft-bg:#faf5ff;--accent-soft-border:#c084fc;--accent-soft-text:#7e22ce;--correct:#15803d;--correct-dark:#166534;--correct-bg:#dcfce7;--correct-border:#bbf7d0;--incorrect:#b91c1c;--incorrect-dark:#991b1b;--incorrect-bg:#fee2e2;--incorrect-border:#fecaca;--streak-bg:#fff7ed;--streak-border:#fed7aa;--streak-text:#c2410c;--heart:#ef4444;--on-solid:#fff;--radius-card:26px;--radius-control:16px;--juicy:cubic-bezier(.25, .46, .45, .94);--font-ui:"Nunito", "Leelawadee UI", "Thonburi", system-ui, sans-serif;--font-display:"Fredoka", "Nunito", system-ui, sans-serif;--font-content:"Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--bg:#120b24;--surface:#1e1338;--ink:#f3f0fa;--muted:#b3a8d9;--muted-soft:#7a6fa3;--border:#33254d;--accent:#c084fc;--accent-hover:#d8b4fe;--accent-dark:#a855f7;--accent-soft-bg:#2a1c47;--accent-soft-border:#7e22ce;--accent-soft-text:#e9d5ff;--correct:#4ade80;--correct-dark:#22c55e;--correct-bg:#4ade8024;--correct-border:#4ade8059;--incorrect:#ff8177;--incorrect-dark:#ef4444;--incorrect-bg:#ff817724;--incorrect-border:#ff817759;--streak-bg:#fb923c24;--streak-border:#fb923c59;--streak-text:#fb923c;--heart:#ff8177;--on-solid:#120b24}}:root[data-theme=dark]{--bg:#120b24;--surface:#1e1338;--ink:#f3f0fa;--muted:#b3a8d9;--muted-soft:#7a6fa3;--border:#33254d;--accent:#c084fc;--accent-hover:#d8b4fe;--accent-dark:#a855f7;--accent-soft-bg:#2a1c47;--accent-soft-border:#7e22ce;--accent-soft-text:#e9d5ff;--correct:#4ade80;--correct-dark:#22c55e;--correct-bg:#4ade8024;--correct-border:#4ade8059;--incorrect:#ff8177;--incorrect-dark:#ef4444;--incorrect-bg:#ff817724;--incorrect-border:#ff817759;--streak-bg:#fb923c24;--streak-border:#fb923c59;--streak-text:#fb923c;--heart:#ff8177;--on-solid:#120b24}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);min-height:100vh;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0}#app{max-width:480px;margin:0 auto;padding:2.75rem 1.25rem 3.5rem}.wordmark{align-items:baseline;gap:.5rem;margin:0 0 1.5rem;display:flex}.wordmark .thai{font-family:var(--font-content);color:var(--ink);font-size:1.15rem;font-weight:700}.wordmark .en{font-family:var(--font-display);color:var(--accent);font-size:.8rem;font-weight:600}.progress-bar{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:1rem;font-size:.85rem;font-weight:600}.nav{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:center;gap:1.1rem;margin-bottom:1.75rem;padding-bottom:.1rem;display:flex}.nav-link{all:unset;color:var(--muted);cursor:pointer;border-bottom:2px solid #0000;align-items:center;min-height:44px;padding:.7rem .1rem .65rem;font-family:inherit;font-size:.88rem;font-weight:600;display:inline-flex}.nav-link:hover{color:var(--ink)}.nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.nav-link.active{color:var(--accent);border-bottom-color:var(--accent)}.exercise{text-align:center;background:var(--surface);border-radius:var(--radius-card);width:100%;box-shadow:0 1px 0 var(--border), 0 20px 48px -28px #6b21a847;padding:2.25rem 1.5rem 2rem}.prompt{color:var(--ink);text-wrap:pretty;margin:0 0 1.5rem;font-size:1rem;font-weight:600}.character{font-family:var(--font-content);margin-bottom:1.75rem;font-size:4.5rem;line-height:1}.options{grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.25rem;display:grid}.options>.option:last-child:nth-child(odd){grid-column:1/-1}.option{border:2px solid var(--border);border-radius:var(--radius-control);background:var(--surface);min-height:44px;color:var(--ink);cursor:pointer;justify-content:center;align-items:center;gap:.45rem;padding:.85rem .6rem;font-family:inherit;font-size:.98rem;font-weight:600;transition:border-color .15s,background-color .15s,box-shadow .15s,transform .12s;display:flex}.option:hover:not(:disabled){border-color:var(--accent-soft-border);box-shadow:0 6px 16px -12px #6b21a859}.option:active:not(:disabled){transform:scale(.96)}.option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.option:disabled{cursor:default}.option.selected{border-color:var(--accent-soft-border);background:var(--accent-soft-bg);color:var(--accent-soft-text);animation:card-bounce .25s var(--juicy)}@keyframes card-bounce{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:scale(1)}}.option.correct{background:var(--correct-bg);border-color:var(--correct-border);color:var(--correct)}.option.incorrect{background:var(--incorrect-bg);border-color:var(--incorrect-border);color:var(--incorrect)}.option:disabled:not(.correct):not(.incorrect){opacity:.55}.option .icon{flex-shrink:0;width:1.05em;height:1.05em;animation:.22s cubic-bezier(.2,0,0,1) both icon-in}@keyframes icon-in{0%{opacity:0;filter:blur(4px);transform:scale(.25)}to{opacity:1;filter:blur();transform:scale(1)}}.quiz-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.streak-pill{background:var(--streak-bg);border:1px solid var(--streak-border);color:var(--streak-text);font-family:var(--font-display);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:.3rem;padding:.35rem .7rem;font-size:.9rem;font-weight:600;display:inline-flex}.hearts-row{gap:.2rem;display:flex}.heart{color:var(--heart);font-size:1.2rem;transition:color .2s}.heart.spent{color:var(--border)}.mascot{text-align:left;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.mascot-idle-outer{animation:idle-breathe 3s var(--juicy) infinite;transform-origin:50% 100%;flex-shrink:0;position:relative}.mascot-idle-outer.paused{animation-play-state:paused}@keyframes idle-breathe{0%,to{transform:scaleY(1)rotate(0)}50%{transform:scaleY(1.02)rotate(-1deg)}}.mascot-figure{background:#fff;border-radius:50%;width:72px;height:72px;position:relative;overflow:hidden}.mascot-figure img{object-fit:cover;width:100%;height:100%;display:block}.mascot-figure-fallback{justify-content:center;align-items:center;font-size:2.6rem;display:flex}@keyframes impatient-bob{0%,to{transform:rotate(0)translateY(0)}50%{transform:rotate(-3deg)translateY(-4px)}}.mascot-figure.impatient{animation:impatient-bob 1.1s var(--juicy) infinite;transform-origin:50% 100%}@keyframes impatient-blink{0%,70%,to{opacity:0}85%{opacity:1}}.impatient-cue{opacity:0;animation:impatient-blink 2.2s var(--juicy) infinite;pointer-events:none;font-size:1.1rem;display:none;position:absolute;top:-6px;right:-6px}@keyframes correct-squash-jump{0%{transform:translateY(0)scaleY(1)}15%{transform:translateY(4px)scaleY(.75)}45%{transform:translateY(-24px)scaleY(1.1)}72%{transform:translateY(2px)scaleY(.97)}to{transform:translateY(0)scaleY(1)}}.mascot-figure.celebrate{animation:correct-squash-jump .6s var(--juicy) both;transform-origin:50% 100%}@keyframes water-drop{0%{opacity:1;transform:translate(0)scale(.5)}to{opacity:0;transform:translate(var(--wx,0px), var(--wy,-46px)) scale(1)}}.water-drop{width:7px;height:7px;animation:water-drop .65s var(--juicy) forwards;pointer-events:none;background:#38bdf8;border-radius:50%;position:absolute;top:14%;left:12%}@keyframes star-float{0%{opacity:1;transform:translate(-50%)scale(.6)rotate(0)}to{opacity:0;transform:translate(calc(-50% + var(--sx,0px)), -70px) scale(1.1) rotate(var(--sr,90deg))}}.star-piece{color:var(--accent);animation:star-float .9s var(--juicy) forwards;pointer-events:none;font-size:1.2rem;position:absolute;top:10%;left:50%}@keyframes wrong-head-hang{0%{transform:translateY(0)rotate(0)}to{transform:translateY(8px)rotate(6deg)}}.mascot-figure.encourage{animation:wrong-head-hang .5s var(--juicy) both;transform-origin:50% 20%}@keyframes mascot-waddle{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.mascot-figure.waddle{animation:mascot-waddle .3s var(--juicy) infinite;transform-origin:50% 100%}.speech-bubble{background:var(--surface);border:2px solid var(--border);color:var(--ink);transition:background-color .3s var(--juicy), border-color .3s var(--juicy);border-radius:14px;flex:1;padding:.6rem .85rem;font-size:.85rem;font-weight:600;position:relative}.speech-bubble:after{content:"";background:var(--surface);border-left:2px solid var(--border);border-bottom:2px solid var(--border);width:12px;height:12px;position:absolute;top:50%;left:-7px;transform:translateY(-50%)rotate(45deg)}.speech-bubble.comfort,.speech-bubble.comfort:after{background:var(--accent-soft-bg);border-color:var(--accent-soft-border)}.check-btn[hidden]{display:none}.check-btn,.continue-btn{all:unset;box-sizing:border-box;width:100%;min-height:50px;font-family:var(--font-display);letter-spacing:.02em;border-radius:var(--radius-control);cursor:pointer;justify-content:center;align-items:center;font-size:1rem;font-weight:600;transition:transform .1s,background-color .15s,border-color .15s,opacity .15s;display:flex}.check-btn{background:var(--border);color:var(--muted-soft);border-bottom:4px solid var(--border);margin-top:.25rem}.check-btn:not(:disabled){background:var(--accent);color:var(--on-solid);border-bottom-color:var(--accent-dark)}.check-btn:not(:disabled):hover{background:var(--accent-hover)}.check-btn:not(:disabled):active{border-bottom-width:0;transform:translateY(4px)}.check-btn:disabled{cursor:default}.check-btn:focus-visible,.continue-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.continue-btn:active{border-bottom-width:0;transform:translateY(4px)}.drawer{border-radius:var(--radius-control);text-align:left;border:2px solid;margin-top:1.1rem;padding:1rem 1.1rem}.drawer-in{animation:drawer-in .28s var(--juicy) both}@keyframes drawer-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.drawer-correct{background:var(--correct-bg);border-color:var(--correct-border)}.drawer-incorrect{background:var(--incorrect-bg);border-color:var(--incorrect-border)}.drawer-title{font-family:var(--font-display);margin-bottom:.35rem;font-size:1.1rem;font-weight:600}.drawer-correct .drawer-title{color:var(--correct)}.drawer-incorrect .drawer-title{color:var(--incorrect)}.drawer-detail{color:var(--ink);text-wrap:pretty;margin-bottom:1rem;font-size:.92rem}.drawer-correct .continue-btn{background:var(--correct);color:var(--on-solid);border-bottom:4px solid var(--correct-dark)}.drawer-incorrect .continue-btn{background:var(--incorrect);color:var(--on-solid);border-bottom:4px solid var(--incorrect-dark)}.progress-list{text-align:left;flex-direction:column;gap:.75rem;display:flex}.progress-row{border:1px solid var(--border);border-radius:var(--radius-control);justify-content:space-between;align-items:center;padding:.7rem .9rem;display:flex}.progress-stat{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.option .icon,.option.selected,.drawer-in,.mascot-idle-outer,.mascot-figure.impatient,.mascot-figure.celebrate,.mascot-figure.encourage,.mascot-figure.waddle,.impatient-cue,.water-drop,.star-piece{animation:none}.option,.check-btn,.continue-btn{transition:none}}