@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--red:#c0392b;--red-light:#e74c3c;--gold:#f39c12;--gold-light:#f9ca24;--bg:#0f0f13;--bg2:#1a1a24;--bg3:#252535;--card:#1e1e2e;--border:#2e2e42;--text:#f0f0f5;--text-muted:#88a;--green:#27ae60;--green-light:#2ecc71;--radius:16px;--radius-sm:10px}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,sans-serif}.app{background:var(--bg);flex-direction:column;max-width:480px;height:100dvh;margin:0 auto;display:flex;position:relative}.screen-content{flex:1;overflow:hidden auto;scrollbar-gutter:stable}.bottom-nav{background:var(--bg2);border-top:1px solid var(--border);padding:8px 0 max(8px, env(safe-area-inset-bottom));z-index:100;flex-shrink:0;justify-content:space-around;display:flex}.nav-btn{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:3px;padding:4px 12px;font-size:.65rem;font-weight:600;transition:color .2s;display:flex}.nav-btn .nav-icon{font-size:1.4rem}.nav-btn.active{color:var(--red)}.home-header{justify-content:space-between;align-items:center;padding:20px 20px 0;display:flex}.home-logo{color:var(--text);letter-spacing:-.03em;font-size:1.5rem;font-weight:800}.home-logo span{color:var(--red)}.home-stats{align-items:center;gap:10px;display:flex}.stat-pill{background:var(--bg3);border:1px solid var(--border);border-radius:20px;align-items:center;gap:5px;padding:5px 12px;font-size:.78rem;font-weight:700;display:flex}.xp-bar-wrap{background:var(--bg3);border-radius:20px;height:6px;margin:16px 20px 0}.xp-bar-fill{background:linear-gradient(90deg, var(--red), var(--gold));border-radius:20px;height:6px;transition:width .5s}.gender-row{gap:8px;padding:16px 20px 0;display:flex}.gender-btn{border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--bg3);color:var(--text-muted);cursor:pointer;flex:1;padding:10px;font-size:.8rem;font-weight:700;transition:all .2s}.gender-btn.active{border-color:var(--red);color:var(--red);background:#c0392b1a}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:20px 20px 10px;font-size:.7rem;font-weight:700}.lesson-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;active:transform scale(.98);align-items:center;gap:14px;margin:0 20px 12px;padding:18px;transition:transform .15s,border-color .15s;display:flex}.lesson-card:active{border-color:var(--red);transform:scale(.98)}.lesson-icon{background:var(--bg3);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:2rem;display:flex}.lesson-info{flex:1}.lesson-title{font-size:1rem;font-weight:700}.lesson-sub{color:var(--text-muted);margin-top:2px;font-size:.78rem}.lesson-xp{color:var(--gold);background:#f39c121a;border:1px solid #f39c124d;border-radius:20px;padding:3px 9px;font-size:.72rem;font-weight:700}.lesson-arrow{color:var(--text-muted);font-size:1.2rem}.lesson-header{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:16px 20px;display:flex}.back-btn{background:var(--bg3);border:1px solid var(--border);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;display:flex}.lesson-header-title{flex:1;font-size:1rem;font-weight:700}.lesson-header-step{color:var(--text-muted);font-size:.75rem}.step-bar{align-items:center;gap:0;margin:16px 0 8px;padding:0 20px;display:flex}.step-node{background:var(--bg3);border:2px solid var(--border);width:28px;height:28px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.7rem;font-weight:700;transition:all .3s;display:flex}.step-node.active{border-color:var(--red);color:var(--red);background:#c0392b26}.step-node.done{border-color:var(--green);background:var(--green);color:#fff}.step-line{background:var(--border);flex:1;height:2px;transition:background .3s}.step-line.done{background:var(--green)}.step-labels{justify-content:space-between;padding:4px 14px 16px;display:flex}.step-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:center;width:28px;font-size:.65rem;font-weight:600;transition:color .3s}.step-label.active{color:var(--red)}.step-label.done{color:var(--green)}.intro-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:0 20px 16px;overflow:hidden}.intro-card-top{background:var(--red);text-align:center;padding:24px 20px 20px}.intro-english{letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:8px;font-size:.8rem;font-weight:600}.intro-roman{letter-spacing:-.02em;font-size:1.8rem;font-weight:800}.intro-phonetic{opacity:.8;margin-top:4px;font-size:.85rem}.intro-thai{opacity:.75;margin-top:6px;font-size:1rem}.intro-card-bottom{padding:16px 20px}.intro-usage{color:var(--text-muted);font-size:.85rem;line-height:1.5}.intro-context{color:var(--gold);margin-top:8px;font-size:.75rem;font-weight:700}.intro-nav{justify-content:space-between;align-items:center;padding:0 20px 8px;display:flex}.nav-arrow{background:var(--bg3);border:1px solid var(--border);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.intro-counter{color:var(--text-muted);font-size:.78rem;font-weight:600}.speak-btn{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:20px;align-items:center;gap:5px;padding:6px 14px;font-size:.8rem;display:flex}.speak-btn-dark{background:var(--bg3);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:20px;align-items:center;gap:6px;margin:0 auto 8px;padding:7px 16px;font-size:.82rem;display:flex}.dots{justify-content:center;gap:5px;padding:8px 0;display:flex}.dot{background:var(--border);border-radius:50%;width:6px;height:6px;transition:background .2s}.dot.active{background:var(--red);border-radius:3px;width:18px}.continue-btn{background:var(--red);border-radius:var(--radius-sm);color:#fff;cursor:pointer;border:none;width:calc(100% - 40px);margin:4px 20px 16px;padding:14px;font-size:.95rem;font-weight:700;display:block}.continue-btn:disabled{opacity:.4;cursor:default}.match-grid{grid-template-columns:1fr 1fr;gap:8px;padding:0 20px 16px;display:grid}.match-tile{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;min-height:60px;padding:12px 10px;font-size:.82rem;font-weight:600;transition:all .18s;display:flex}.match-tile:active{transform:scale(.97)}.match-tile.selected{border-color:var(--red);background:#c0392b1f}.match-tile.matched{border-color:var(--green);color:var(--green);pointer-events:none;background:#27ae601f}.match-tile.wrong{background:#e74c3c1f;border-color:#e74c3c;animation:.3s shake}.match-sub{color:var(--text-muted);margin-top:3px;font-size:.68rem}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.match-feedback{text-align:center;min-height:28px;padding:4px 20px 12px;font-size:.82rem;font-weight:600}.quiz-wrap{padding:0 20px}.quiz-progress{background:var(--bg3);border-radius:4px;height:4px;margin-bottom:20px}.quiz-progress-fill{background:linear-gradient(90deg, var(--red), var(--gold));border-radius:4px;height:4px;transition:width .4s}.quiz-counter{color:var(--text-muted);margin-bottom:12px;font-size:.75rem;font-weight:600}.quiz-question-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;margin-bottom:16px;padding:24px 20px}.quiz-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;font-size:.75rem;font-weight:600}.quiz-prompt{font-size:1.4rem;font-weight:800}.quiz-opts{flex-direction:column;gap:10px;display:flex}.quiz-opt{background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);text-align:left;color:var(--text);cursor:pointer;padding:14px 16px;font-size:.88rem;font-weight:600;transition:all .15s}.quiz-opt:active{transform:scale(.99)}.quiz-opt.correct{border-color:var(--green);color:var(--green-light);background:#27ae6026}.quiz-opt.wrong{background:#e74c3c1f;border-color:#e74c3c}.quiz-opt.reveal{border-color:var(--green);background:#27ae6014}.quiz-opt:disabled{cursor:default}.quiz-feedback{text-align:center;min-height:32px;padding:12px 0 4px;font-size:.88rem;font-weight:700}.feedback-correct{color:var(--green-light)}.feedback-wrong{color:#e74c3c}.results-wrap{text-align:center;padding:32px 20px}.score-ring{background:conic-gradient(var(--gold) 0deg, var(--bg3) 0deg);border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;margin:0 auto 20px;display:flex}.score-inner{background:var(--bg);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:88px;height:88px;display:flex}.score-num{font-size:2rem;font-weight:800;line-height:1}.score-den{color:var(--text-muted);font-size:.8rem}.result-msg{margin-bottom:4px;font-size:1.2rem;font-weight:800}.result-sub{color:var(--text-muted);margin-bottom:16px;font-size:.85rem}.result-xp{color:var(--gold);background:#f39c121a;border:1px solid #f39c124d;border-radius:20px;margin-bottom:24px;padding:6px 16px;font-size:.9rem;font-weight:700;display:inline-block}.result-btns{flex-direction:column;gap:10px;display:flex}.btn-primary{background:var(--red);border-radius:var(--radius-sm);color:#fff;cursor:pointer;border:none;padding:14px;font-size:.95rem;font-weight:700}.btn-secondary{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;padding:14px;font-size:.95rem;font-weight:600}.culture-wrap{padding:20px}.culture-header{text-align:center;padding:8px 0 24px}.culture-title{font-size:1.6rem;font-weight:800}.culture-sub{color:var(--text-muted);margin-top:4px;font-size:.85rem}.culture-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;padding:18px}.culture-section h3{align-items:center;gap:8px;margin-bottom:12px;font-size:1rem;font-weight:700;display:flex}.culture-section ul{flex-direction:column;gap:8px;list-style:none;display:flex}.culture-section li{color:var(--text-muted);padding-left:16px;font-size:.85rem;line-height:1.5;position:relative}.culture-section li:before{content:"·";color:var(--red);font-weight:900;position:absolute;left:0}.tone-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.tone-card{background:var(--bg3);border-radius:var(--radius-sm);padding:10px 12px}.tone-name{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:700}.tone-word{color:var(--red);margin:2px 0;font-size:1rem;font-weight:800}.tone-meaning{color:var(--text-muted);font-size:.75rem}.progress-wrap{padding:20px}.progress-header{text-align:center;padding:8px 0 20px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;display:grid}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:16px}.stat-val{font-size:1.8rem;font-weight:800}.stat-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-top:2px;font-size:.7rem}.level-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;padding:16px}.level-row{color:var(--text-muted);justify-content:space-between;margin-bottom:8px;font-size:.78rem;display:flex}.xp-bar{background:var(--bg3);border-radius:8px;height:8px}.xp-fill{background:linear-gradient(90deg, var(--red), var(--gold));border-radius:8px;height:8px;transition:width .5s}.badges-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;display:grid}.badge-card{background:var(--card);border:2px solid var(--border);border-radius:var(--radius);text-align:center;opacity:.35;padding:14px 8px;transition:all .3s}.badge-card.earned{opacity:1;border-color:var(--gold);background:#f39c1214}.badge-icon{font-size:1.8rem}.badge-name{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:5px;font-size:.65rem;font-weight:700}.xp-popup{background:var(--gold);color:#000;z-index:999;pointer-events:none;border-radius:30px;padding:10px 24px;font-size:1.1rem;font-weight:800;animation:1.8s forwards popIn;position:fixed;top:30%;left:50%;transform:translate(-50%)}@keyframes popIn{0%{opacity:0;transform:translate(-50%)translateY(10px)}15%{opacity:1;transform:translate(-50%)translateY(0)}70%{opacity:1}to{opacity:0;transform:translate(-50%)translateY(-20px)}}.ph b{color:var(--text);font-weight:800}.ph{color:var(--text-muted);font-size:.78rem}.ph-bracket{opacity:.5}