:root{--bg:#fff8ec;--card:#fff;--ink:#27221c;--mut:#6a5f52;--line:#eadfc9;--yel:#ffe066;--yel2:#fff3bf;--green:#2f9e44;--red:#e03131;--purple:#7048e8;--r:22px;
 --font:"Heebo","Noto Sans Hebrew","Noto Sans Arabic","Noto Sans",system-ui,"Segoe UI",Arial,sans-serif}
[data-theme=dark]{--bg:#17151f;--card:#25222f;--ink:#f3eefc;--mut:#b6aec6;--line:#3b3649;--yel:#c9a400;--yel2:#4a4210}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:19px;line-height:1.5}
button{font-family:inherit;cursor:pointer;border:0;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:4px solid var(--purple);outline-offset:2px}
.he{font-family:"Heebo","Noto Sans Hebrew",system-ui,sans-serif}
#app{max-width:860px;margin:0 auto;padding-bottom:60px}
.top{display:flex;align-items:center;gap:10px;padding:12px 14px;position:sticky;top:0;z-index:20;background:linear-gradient(90deg,#ff922b,#f76707);color:#fff;border-radius:0 0 22px 22px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.top h1{flex:1;margin:0;font-size:1.05rem;font-weight:800;min-width:0;line-height:1.2}
.logo{font-size:1.8rem}
.back,.gear{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;font-size:1.4rem}
.langs{display:flex;gap:4px}
.lg{min-width:40px;height:42px;border-radius:14px;background:rgba(255,255,255,.25);color:#fff;font-weight:800;font-size:.95rem}
.lg.on{background:#fff;color:#d9480f}
main{padding:16px 14px}
.lead{font-size:1.25rem;margin:10px 0 16px}
h2{font-size:1.2rem;margin:18px 0 8px}
.small{font-size:.9rem;color:var(--mut)}
.warn{background:var(--yel2);padding:8px 12px;border-radius:12px;color:var(--ink)}
/* read-aloud controls: big, colorful */
.playrow{display:flex;gap:10px;flex-wrap:wrap}
.bigbtn{flex:1 1 0;min-width:0;min-height:62px;border-radius:20px;font-size:1.15rem;padding:0 6px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.bigbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.bigbtn span{font-size:1.5rem}
.play{background:#2f9e44}.play.on{background:#237a34;outline:4px solid #b2f2bb}
.stop{background:#e03131}
.slow{background:#f08c00}.slow.on{background:#1971c2}
.w{border-radius:8px;padding:0 3px;transition:background .08s}
.w.hl{background:var(--yel);color:#000;box-shadow:0 0 0 2px var(--yel)}
.hl{outline:0}
.opt.hl,.card.hl{background:var(--yel)!important;color:#000}
.blank{display:inline-block;min-width:3.2ch;border-bottom:4px solid var(--purple);margin:0 4px;vertical-align:baseline}
/* home */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.gcard{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);background:var(--c);color:#fff;text-align:start;box-shadow:0 6px 0 rgba(0,0,0,.2);min-height:110px}
.gl{flex:none;width:70px;height:70px;border-radius:20px;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900}
.gl.big{width:96px;height:96px;font-size:3.4rem}
.gt{display:flex;flex-direction:column;gap:2px}.gt b{font-size:1.5rem}.gt small{font-size:.95rem;opacity:.95;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gt em{font-style:normal;font-weight:800;background:rgba(255,255,255,.25);align-self:flex-start;border-radius:12px;padding:2px 10px;margin-top:4px}
.plan{display:flex;gap:16px;align-items:center;background:var(--c);color:#fff;border-radius:var(--r);padding:20px;margin-top:14px;font-size:1.2rem}
/* units */
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ucard{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r);background:var(--c);color:#fff;font-size:1.25rem;font-weight:800;text-align:start;min-height:96px;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.ui{font-size:2.4rem}.ck{position:absolute;inset-inline-end:12px;top:10px;background:#fff;color:#2f9e44;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
/* lesson */
.exs{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 18px}
.ex{display:flex;align-items:center;gap:12px;background:var(--card);border:3px solid var(--line);border-radius:18px;padding:12px 18px;font-size:2rem;font-weight:700}
.ex small{font-size:1.3rem;color:var(--mut)}.em{font-size:2.6rem}
.cta{display:block;width:100%;min-height:68px;border-radius:22px;background:var(--c,#2f9e44);color:#fff;font-size:1.5rem;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.2);margin-top:14px}
.cta.alt{background:#495057}
.cta.next{display:none}.cta.next.show{display:block;animation:pop .3s}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
/* practice */
.prog{display:flex;gap:6px;margin-bottom:12px}
.prog i{flex:1;height:12px;border-radius:8px;background:var(--line)}.prog i.d{background:#2f9e44}.prog i.c{background:#f08c00}
.ins{font-size:1.35rem;font-weight:700;margin:16px 0 6px}
.stage{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0 16px;text-align:center}
.emoji{font-size:5.5rem;line-height:1.1}
.itemword{font-size:2.4rem;font-weight:800}
.bigitem{font-size:3.2rem;font-weight:800;direction:rtl;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:6px 26px}
.sent{font-size:1.9rem;line-height:1.9;text-align:start;background:var(--card);border:3px solid var(--line);border-radius:20px;padding:12px 18px;width:100%}
.qtext{font-size:1.6rem;font-weight:800;line-height:1.7;width:100%;text-align:start}
.pass{width:100%}.ptitle{font-weight:900;font-size:1.5rem;margin-bottom:6px;text-align:start}
.trans{font-size:1rem;color:var(--mut);background:var(--yel2);border-radius:12px;padding:8px 12px;margin-top:8px;text-align:start}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.optwrap{position:relative;display:flex}
.opt{flex:1;min-height:84px;border-radius:20px;background:var(--card);border:4px solid #74c0fc;font-size:1.7rem;font-weight:800;padding:8px 54px 8px 54px;color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.12);text-align:center}
.optwrap:nth-child(2) .opt{border-color:#ffa94d}.optwrap:nth-child(3) .opt{border-color:#63e6be}.optwrap:nth-child(4) .opt{border-color:#da77f2}
.opt.bigopt{font-size:3rem}
.opt:disabled{cursor:default}
.opt.soft{opacity:.35;border-style:dashed;box-shadow:none}
.opt.right{background:#b2f2bb!important;border-color:#2f9e44!important;color:#0b3d17;opacity:1}
.spk{position:absolute;inset-block:0;inset-inline-start:6px;margin:auto 0;width:44px;height:44px;border-radius:50%;background:#2f9e44;color:#fff;font-size:1.3rem;box-shadow:0 3px 0 rgba(0,0,0,.2);z-index:2}
.spk[data-say]{position:static;flex:none;margin-inline-start:8px}
.fb{min-height:40px;margin:14px 0 6px;font-size:1.3rem;font-weight:800;border-radius:16px;padding:0}
.fb:not(:empty){padding:10px 16px}
.fb.ok{background:#d3f9d8;color:#0b5a1a}.fb.try{background:var(--yel2)}.fb.hint{background:var(--yel);color:#000}.fb.rev{background:#d0ebff;color:#08305a}
.helprow{display:flex;gap:10px;flex-wrap:wrap}
.hbtn{flex:1 1 150px;min-height:60px;border-radius:18px;font-size:1.15rem;font-weight:800;box-shadow:0 5px 0 rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:8px}
.hint{background:#ffd43b;color:#3d2e00}.limor{background:#7048e8;color:#fff}
.lav{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#7048e8;font-weight:900;position:relative;overflow:hidden}
.lav.big{width:64px;height:64px;font-size:2rem;background:#7048e8;color:#fff;flex:none}
.lav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* limor window: full screen */
.limorov{position:fixed;inset:0;z-index:100;background:#f3f0ff;overflow:auto;padding:14px}
[data-theme=dark] .limorov{background:#201a3a}
.limorbox{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lhead{display:flex;align-items:center;gap:12px;font-size:1.4rem}.lhead b{flex:1}
.x{width:52px;height:52px;border-radius:50%;background:#e03131;color:#fff;font-size:1.4rem}
.lplay{display:flex;gap:10px}
.ltext{font-size:1.5rem;line-height:1.8;background:var(--card);border:4px solid #b197fc;border-radius:22px;padding:16px 20px;margin:0}
.lask{display:flex;flex-direction:column;gap:10px}
.lq{min-height:58px;border-radius:18px;background:#7048e8;color:#fff;font-size:1.15rem;font-weight:700;padding:8px 16px}.lq.alt{background:#495057}
/* misc */
.done{text-align:center}.trophy{font-size:6rem}
.set .seg{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:52px;padding:6px 20px;border-radius:16px;background:var(--card);border:3px solid var(--line);font-size:1.1rem;font-weight:700;color:var(--ink)}
.chip.on{background:#ffd43b;color:#3d2e00;border-color:#f08c00}.chip.danger{margin-top:12px;border-color:#e03131;color:#e03131}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.confetti span{position:absolute;top:-40px;animation:fall 2.2s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}
@media(max-width:520px){.bigbtn{font-size:1rem}.bigbtn span{font-size:1.2rem}.opts{grid-template-columns:1fr}.opt{font-size:1.5rem}.top h1{font-size:1rem}.emoji{font-size:4.6rem}}
@media(prefers-reduced-motion:reduce){.confetti span,.cta.next.show{animation:none}}

.gloss{display:block;font-size:.8rem;font-weight:600;color:var(--mut);margin-top:2px;font-family:var(--font)}
.top{flex-wrap:wrap}.top h1{flex:1 1 120px}

.nkbtn{display:block;margin:8px auto 0;padding:10px 18px;border-radius:14px;border:2px solid var(--mut);background:#fff;font:700 1rem var(--font);min-height:44px}