:root{--y:#FFD23F;--ink:#14142B;--cream:#FFF9E0;--pink:#FF5C8A;--good:#2FBF71;--bad:#FF6B5A;--bg:#FFF9E0;--card:#fff;--tx:#14142B;--mut:#6b6850;--line:#EFE3A8}
@media (prefers-color-scheme:dark){:root{--bg:#14142B;--card:#1E1E40;--tx:#FFF9E0;--mut:#b9b9d6;--line:#2c2c58}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
#app{max-width:520px;margin:0 auto;padding:0 16px 88px;min-height:100vh}
.screen{padding:16px 0;display:flex;flex-direction:column;gap:12px}.center{text-align:center;align-items:center}
h1{margin:0;font-size:32px}h2{margin:4px 0;font-size:22px}h3{margin:8px 0 0;font-size:16px}.note{color:var(--mut);font-size:14px;margin:0}.ok{color:var(--good)}.warn{color:var(--bad)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.hero{flex-direction:row;align-items:center;justify-content:space-between;background:var(--y);color:var(--ink);border:0}.eyebrow{font-size:12px;text-transform:uppercase;opacity:.7}
.streak .big{font-size:24px;font-weight:700}.warnc{border-color:var(--bad)}
.btn{font:inherit;border:0;border-radius:14px;padding:12px 16px;background:var(--card);color:var(--tx);border:1px solid var(--line);cursor:pointer;min-height:48px}
.btn.primary{background:var(--ink);color:var(--y);border-color:var(--ink);font-weight:700}.hero .btn.primary{background:var(--ink);color:var(--y)}
.btn.ghost{background:transparent}.btn.small{min-height:40px;padding:8px 12px;font-size:14px}.btn:disabled{opacity:.6}
.btn.opt{text-align:left;display:flex;flex-direction:column;gap:2px}.btn.opt small{color:var(--mut)}.btn.good{background:#BFF0C8;color:#14142B}.btn.badc{background:#FFC9C0;color:#14142B}
.btn.stage.donec{background:#BFF0C8;color:#14142B}.chipbtn{border-radius:999px;min-height:40px;padding:8px 14px}.chipbtn.on{background:var(--y);color:var(--ink);font-weight:700}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row.small{font-size:14px}.grow{flex:1}
.pill{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;background:var(--card)}
.langs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.opts{display:flex;flex-direction:column;gap:8px;width:100%}
.phrase{display:flex;flex-direction:column;gap:2px}.phrase .en{font-weight:700}.phrase .tr{color:var(--mut)}
.phrase.big{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}.phrase.big .en{font-size:24px}.phrase.big .tr{font-size:16px}
.speak{display:flex;flex-direction:column;align-items:center;gap:10px}
.mic{width:84px;height:84px;border-radius:50%;border:0;background:var(--ink);color:var(--y);font-size:34px;cursor:pointer}.mic:disabled{opacity:.6}
.heat{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.chip{border-radius:999px;padding:4px 10px;background:var(--line);font-size:14px;color:var(--tx)}
.chip.ok{background:#BFF0C8;color:#14142B}.chip.near{background:#FFE9A8;color:#14142B}.chip.bad{background:#FFC9C0;color:#14142B}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.progress,.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden;width:100%}.progress i,.bar i{display:block;height:100%;background:var(--pink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid.small{grid-template-columns:1fr 1fr 1fr}
.tile{font:inherit;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:16px;padding:14px;min-height:76px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:center;cursor:pointer;text-align:left}.tile.wide{grid-column:1/-1}
.gaps{display:flex;flex-direction:column;gap:8px;width:100%}.gap{display:flex;align-items:center;gap:8px}.gap b{width:32px}.gap .bar{flex:1}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--card);border-top:1px solid var(--line);padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.tab{flex:1;max-width:130px;font:inherit;background:none;border:0;color:var(--mut);display:flex;flex-direction:column;align-items:center;min-height:48px;cursor:pointer}.tab.on{color:var(--tx);font-weight:700}.tab small{font-size:12px}
.input{font:inherit;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx)}
.cam{width:100%;max-height:260px;background:#000;border-radius:16px}.thumb{width:140px;border-radius:12px}.mini{width:44px;height:44px;border-radius:8px;object-fit:cover}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}.bubble.me{background:#FFF1B8;color:#14142B}
.word{font:inherit;background:none;border:0;color:inherit;padding:2px 0;cursor:pointer;text-decoration:underline dotted}.tip{min-height:22px;font-weight:700}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--y);padding:10px 16px;border-radius:12px;z-index:50}
.adtest{position:fixed;inset:0;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;z-index:99}
.hidden{display:none}.item.added{opacity:.6}.logo{border-radius:22px}
@media (prefers-reduced-motion:no-preference){.btn,.tile{transition:transform .08s}.btn:active,.tile:active{transform:scale(.98)}}

.p0{width:0%}.p1{width:1%}.p2{width:2%}.p3{width:3%}.p4{width:4%}.p5{width:5%}.p6{width:6%}.p7{width:7%}.p8{width:8%}.p9{width:9%}.p10{width:10%}.p11{width:11%}.p12{width:12%}.p13{width:13%}.p14{width:14%}.p15{width:15%}.p16{width:16%}.p17{width:17%}.p18{width:18%}.p19{width:19%}.p20{width:20%}.p21{width:21%}.p22{width:22%}.p23{width:23%}.p24{width:24%}.p25{width:25%}.p26{width:26%}.p27{width:27%}.p28{width:28%}.p29{width:29%}.p30{width:30%}.p31{width:31%}.p32{width:32%}.p33{width:33%}.p34{width:34%}.p35{width:35%}.p36{width:36%}.p37{width:37%}.p38{width:38%}.p39{width:39%}.p40{width:40%}.p41{width:41%}.p42{width:42%}.p43{width:43%}.p44{width:44%}.p45{width:45%}.p46{width:46%}.p47{width:47%}.p48{width:48%}.p49{width:49%}.p50{width:50%}.p51{width:51%}.p52{width:52%}.p53{width:53%}.p54{width:54%}.p55{width:55%}.p56{width:56%}.p57{width:57%}.p58{width:58%}.p59{width:59%}.p60{width:60%}.p61{width:61%}.p62{width:62%}.p63{width:63%}.p64{width:64%}.p65{width:65%}.p66{width:66%}.p67{width:67%}.p68{width:68%}.p69{width:69%}.p70{width:70%}.p71{width:71%}.p72{width:72%}.p73{width:73%}.p74{width:74%}.p75{width:75%}.p76{width:76%}.p77{width:77%}.p78{width:78%}.p79{width:79%}.p80{width:80%}.p81{width:81%}.p82{width:82%}.p83{width:83%}.p84{width:84%}.p85{width:85%}.p86{width:86%}.p87{width:87%}.p88{width:88%}.p89{width:89%}.p90{width:90%}.p91{width:91%}.p92{width:92%}.p93{width:93%}.p94{width:94%}.p95{width:95%}.p96{width:96%}.p97{width:97%}.p98{width:98%}.p99{width:99%}.p100{width:100%}