:root{--fs:22px;--bg:#f4f2fb;--bg2:#ebe7fb;--card:#ffffff;--glass:rgba(255,255,255,.72);--ink:#16132b;--mut:#6a6788;--acc:#5b3df5;--acc-b:#8b5cf6;--acc2:#0fae8c;--warn:#f59e0b;--bad:#ef4444;--good:#10b981;--line:#e4e0f5;--soft:#efeafe;--sh:0 1px 2px rgba(30,20,80,.06),0 8px 24px rgba(60,40,160,.08);--grad:linear-gradient(135deg,#5b3df5 0%,#8b5cf6 55%,#ec4899 120%);--grad2:linear-gradient(135deg,#0fae8c,#22c3ee)}
@media (prefers-color-scheme:dark){:root{--bg:#0f0e1a;--bg2:#17152a;--card:#1b1930;--glass:rgba(30,27,52,.72);--ink:#eeecff;--mut:#a29fc4;--line:#2d2a48;--soft:#25214a;--acc:#7c5cff;--sh:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:var(--fs)}
body{margin:0;background:radial-gradient(1200px 500px at 100% -10%,var(--bg2),transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:Rubik,Heebo,system-ui,sans-serif;line-height:1.5;padding-bottom:6.5rem;min-height:100vh}
header{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;gap:.5rem}
h1{font-size:.95rem;margin:0;white-space:nowrap;min-width:0;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.2rem;margin:1rem 0 .5rem;font-weight:800;letter-spacing:-.01em}
.tools{display:flex;gap:.35rem}.tools button{background:var(--soft);color:var(--acc);border:0;border-radius:999px;font-weight:800;font-size:.75rem;min-width:2.5rem;min-height:2.5rem;padding:0 .7rem;font-family:inherit;transition:transform .15s}
main{padding:.6rem .9rem;max-width:44rem;margin:auto;outline:none}
main>*{animation:enter .35s cubic-bezier(.2,.8,.2,1) both}main>*:nth-child(2){animation-delay:.03s}main>*:nth-child(3){animation-delay:.06s}main>*:nth-child(4){animation-delay:.09s}main>*:nth-child(n+5){animation-delay:.12s}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
nav{position:fixed;bottom:.7rem;inset-inline:.7rem;display:flex;background:var(--glass);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--line);border-radius:1.4rem;box-shadow:var(--sh);z-index:5;padding:.3rem;max-width:42rem;margin:auto}
nav button{flex:1;background:none;border:0;color:var(--mut);font-size:.58rem;font-weight:700;font-family:inherit;padding:.3rem 0;min-height:3.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;border-radius:1.1rem;transition:all .2s}
nav button span{font-size:1.15rem;filter:grayscale(.6);transition:transform .2s}nav button.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(91,61,245,.35)}nav button.on span{filter:none;transform:scale(1.12)}
.card{background:var(--card);border:1px solid var(--line);border-radius:1.4rem;padding:1.1rem;margin:.75rem 0;box-shadow:var(--sh)}
main>.card:first-child:has(h2){background:var(--grad);color:#fff;border:0;box-shadow:0 14px 34px rgba(91,61,245,.35);position:relative;overflow:hidden}
main>.card:first-child:has(h2)::after{content:"";position:absolute;width:12rem;height:12rem;border-radius:50%;background:rgba(255,255,255,.12);top:-5rem;inset-inline-start:-4rem}
main>.card:first-child:has(h2) h2{margin-top:0}main>.card:first-child:has(h2) b{background:rgba(255,255,255,.2);padding:.05rem .5rem;border-radius:999px}
main>.card:first-child:has(h2) .btn{background:#fff;color:var(--acc)}main>.card:first-child:has(h2) .btn.ghost{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.5)}main>.card:first-child:has(h2) .mut{color:rgba(255,255,255,.85)}
.he{font-size:1.1rem;font-weight:700}.ar{font-size:2rem;font-family:"Noto Naskh Arabic","Geeza Pro",serif;direction:rtl;line-height:1.75;font-weight:700}
.tr{font-size:1.1rem;color:var(--trc,var(--acc2));font-weight:600}.mut{color:var(--mut);font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:999px;font-size:.95rem;font-weight:700;font-family:inherit;min-height:3.2rem;padding:.4rem 1.2rem;margin:.3rem 0;background:var(--grad);color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(91,61,245,.25);transition:transform .12s,box-shadow .2s,background .2s}
button:active,.btn:active,.lv:active,.topic:active,.mode:active{transform:scale(.96)}
.btn.alt{background:var(--grad2);box-shadow:0 6px 16px rgba(15,174,140,.28)}.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}.btn.w{width:100%}
.play{background:var(--grad2);color:#fff;border:0;border-radius:50%;width:3.4rem;height:3.4rem;font-size:1.2rem;flex:none;box-shadow:0 0 0 6px rgba(15,174,140,.15),0 6px 16px rgba(15,174,140,.3);transition:transform .15s}
.play:active{transform:scale(.9)}
.row{display:flex;align-items:center;gap:.8rem}.grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.rate{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.45rem}.rate .btn,.btn.r0,.btn.r1,.btn.r2{box-shadow:none}.r0{background:var(--bad)!important}.r1{background:var(--warn)!important}.r2{background:var(--good)!important}
.topic{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;font-weight:700;font-family:inherit;font-size:.95rem;min-height:7rem;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:1.3rem;color:var(--ink);box-shadow:var(--sh);padding:.6rem;transition:transform .15s}
.topic b{font-size:1.6rem;width:3.2rem;height:3.2rem;display:grid;place-items:center;border-radius:1rem;background:var(--soft)}
.topic .mut{font-size:.7rem;background:var(--soft);padding:.05rem .55rem;border-radius:999px;color:var(--acc);font-weight:700}
.bar{height:.7rem;background:var(--soft);border-radius:1rem;overflow:hidden}.bar i{display:block;height:100%;background:var(--grad2);border-radius:1rem;transition:width .5s}
.step{font-size:.9rem;background:var(--soft);color:var(--acc);border-radius:999px;padding:.45rem 1rem;margin:.6rem 0;font-weight:700;display:inline-block}
.opt{transition:background .2s,color .2s,transform .12s}.opt.ok{background:var(--good)!important;color:#fff!important;border-color:var(--good)!important;animation:okp .4s}.opt.bad{background:var(--bad)!important;color:#fff!important;border-color:var(--bad)!important;animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}@keyframes okp{50%{transform:scale(1.04)}}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}.chips .btn{background:var(--card);color:var(--ink);border:1.5px solid var(--line);min-height:2.5rem;font-size:.8rem;box-shadow:none}.chips .btn.on{background:var(--grad);color:#fff;border-color:transparent}
.line{border-radius:1.3rem;max-width:97%}.line.s1{border-start-start-radius:.4rem;margin-inline-end:auto}.line.s2{border-start-end-radius:.4rem;margin-inline-start:auto;background:linear-gradient(135deg,rgba(15,174,140,.12),rgba(34,195,238,.10)),var(--card)}
.line.s1{background:linear-gradient(135deg,rgba(91,61,245,.10),rgba(139,92,246,.06)),var(--card)}
button:focus-visible{outline:3px solid #22c3ee;outline-offset:2px}
.lv{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:start;background:var(--card);border:1px solid var(--line);border-radius:1.3rem;padding:.8rem 1rem;margin:.5rem 0;font-size:1rem;font-weight:700;font-family:inherit;color:var(--ink);min-height:4.2rem;box-shadow:var(--sh);transition:transform .15s}
.lv::before{content:"";flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:conic-gradient(var(--acc) var(--p,0%),var(--soft) 0);-webkit-mask:radial-gradient(circle,transparent 55%,#000 56%);mask:radial-gradient(circle,transparent 55%,#000 56%);order:-1}
.lv>span:first-child{flex:1}
.lv[disabled]{opacity:.5;box-shadow:none}.lv[disabled]::before{background:var(--soft)}.lv small{font-weight:500;color:var(--mut);font-size:.75rem;display:block}
.badge{background:var(--grad2);color:#fff;border-radius:999px;padding:.15rem .7rem;font-size:.7rem;font-weight:700;white-space:nowrap}
.note{font-size:.75rem;color:var(--acc);background:var(--soft);border-radius:999px;padding:.1rem .6rem;display:inline-block;margin-top:.25rem}
table.conj{width:100%;border-collapse:collapse;font-size:1rem}table.conj td{border-bottom:1px solid var(--line);padding:.5rem .2rem}
select{font-family:inherit;border-radius:.8rem;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 .6rem}
.hide .ar,.hide .tr{filter:blur(8px)}
.modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem}
.mode{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center;font-weight:800;font-family:inherit;font-size:.82rem;min-height:8rem;justify-content:center;border:0;border-radius:1.4rem;color:#fff;padding:.6rem .4rem;box-shadow:var(--sh);transition:transform .15s}
.mode:nth-child(1){background:linear-gradient(150deg,#1e1b4b,#4338ca)}.mode:nth-child(2){background:linear-gradient(150deg,#f59e0b,#ef4444)}.mode:nth-child(3){background:linear-gradient(150deg,#db2777,#7c3aed)}
.mode::after{content:"";position:absolute;width:6rem;height:6rem;border-radius:50%;background:rgba(255,255,255,.12);top:-2.5rem;inset-inline-end:-2rem}
.mode b{font-size:1.9rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}.mode small{font-weight:500;color:rgba(255,255,255,.85);font-size:.65rem}
.spy .big{font-size:3.5rem;text-align:center;animation:pulse 2s infinite}@keyframes pulse{50%{transform:scale(1.08)}}
.cd{font-size:3.4rem;font-weight:800;color:var(--acc);width:8rem;height:8rem;margin:.6rem auto;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--card) 60%,transparent 61%),conic-gradient(var(--acc),var(--acc-b),#ec4899,var(--acc));box-shadow:0 10px 30px rgba(91,61,245,.3)}
.cd.pop{animation:pop .9s ease-out}@keyframes pop{from{transform:scale(1.25);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes spin{from{rotate:-90deg}to{rotate:0deg}}
.dbo{text-align:start;justify-content:flex-start;border-radius:1.2rem!important}.dbo .ar{font-size:1.45rem}.he2{font-size:.8rem;font-weight:500}
@media (max-width:380px){.modes{grid-template-columns:1fr}.mode{min-height:4.5rem;flex-direction:row;gap:.6rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- accessibility ---- */
html{font-size:calc(var(--fs) * var(--a11y,1))}
header{flex-wrap:wrap}.tools{flex-wrap:wrap;justify-content:flex-end}
.tools button,nav button,.play,.btn,.lv,.topic,.mode{min-height:48px;min-width:48px}
#a11yBtn{background:var(--grad);color:#fff;font-size:.72rem}
:focus-visible{outline:3px solid #0b63ff!important;outline-offset:3px}
#a11yPanel{position:fixed;inset:0;z-index:50;background:rgba(10,8,30,.55);display:flex;align-items:flex-end;justify-content:center}
#a11yPanel[hidden]{display:none}
.a11y-box{background:var(--card);color:var(--ink);width:100%;max-width:34rem;max-height:90vh;overflow:auto;border-radius:1.5rem 1.5rem 0 0;padding:1rem 1rem 1.6rem;box-shadow:0 -10px 40px rgba(0,0,0,.3);animation:enter .25s}
.a11y-head{display:flex;justify-content:space-between;align-items:center}.a11y-head h2{margin:0}
#a11yClose{width:48px;height:48px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);font-size:1rem}
.a11y-l{font-weight:700;margin:.8rem 0 .4rem}
.a11y-sz{display:flex;gap:.4rem;flex-wrap:wrap}.a11y-sz button{flex:1;min-width:48px;min-height:48px;border-radius:1rem;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-family:inherit}
.a11y-sz button[aria-checked=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
.a11y-tg{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;margin:.5rem 0;padding:.4rem 1rem;border-radius:1rem;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:1rem;font-family:inherit}
.a11y-tg::after{content:"כבוי";font-size:.8rem;padding:.15rem .7rem;border-radius:999px;background:var(--soft);color:var(--mut)}
.a11y-tg.on{border-color:var(--acc)}.a11y-tg.on::after{content:"פעיל ✓";background:var(--acc);color:#fff}
/* large sizes: keep layout */
html[data-sz="3"] .grid,html[data-sz="4"] .grid,html[data-sz="3"] .modes,html[data-sz="4"] .modes,html[data-sz="2"] .modes{grid-template-columns:1fr}
html[data-sz="3"] .rate,html[data-sz="4"] .rate{grid-template-columns:1fr}
html[data-sz="3"] nav button,html[data-sz="4"] nav button{font-size:0;gap:0}html[data-sz="3"] nav button span,html[data-sz="4"] nav button span{font-size:22px}
html[data-sz="3"] .tools button:not(#a11yBtn),html[data-sz="4"] .tools button:not(#a11yBtn){font-size:.6rem}
.ar,.he,.tr,h1,h2,p,small,span,button{overflow-wrap:break-word}
/* bold */
.a11y-bold body,.a11y-bold body *{font-weight:800!important}
/* reduce motion */
.a11y-rm *,.a11y-rm *::before,.a11y-rm *::after{animation:none!important;transition:none!important}
/* high contrast */
.a11y-hc{--bg:#000;--bg2:#000;--card:#000;--glass:#000;--ink:#fff;--mut:#fff;--line:#fff;--soft:#1a1a1a;--acc:#ffd400;--acc2:#5ff;--grad:#ffd400;--grad2:#5ff}
.a11y-hc body{background:#000}
.a11y-hc .btn,.a11y-hc .play,.a11y-hc nav button.on,.a11y-hc #a11yBtn,.a11y-hc .badge,.a11y-hc .mode,.a11y-hc .a11y-sz button[aria-checked=true],.a11y-hc .a11y-tg.on::after{background:#ffd400!important;color:#000!important;box-shadow:none!important}
.a11y-hc .btn.ghost,.a11y-hc .card,.a11y-hc .lv,.a11y-hc .topic,.a11y-hc .line{background:#000!important;color:#fff!important;border:2px solid #fff!important;box-shadow:none!important}
.a11y-hc main>.card:first-child:has(h2){background:#000!important;color:#fff}.a11y-hc main>.card:first-child:has(h2) .btn{background:#ffd400!important;color:#000!important}
.a11y-hc .mode small,.a11y-hc .topic .mut,.a11y-hc .step,.a11y-hc .note{color:#000!important;background:#ffd400!important}
.a11y-hc .tr{color:#5ff}.a11y-hc h1{color:#ffd400;background:none}.a11y-hc .mode::after,.a11y-hc main>.card:first-child:has(h2)::after{display:none}
.a11y-hc :focus-visible{outline-color:#5ff!important}

html,body{overflow-x:hidden;max-width:100%}
.note,.step{border-radius:1rem}
main,.card,.lv,.btn{max-width:100%;min-width:0}
html[data-sz] .badge{white-space:normal;text-align:center}html[data-sz="3"] .lv,html[data-sz="4"] .lv{flex-wrap:wrap}
.a11y-tg{gap:.5rem;text-align:start}.a11y-tg::after{white-space:nowrap;flex:none}
.a11y-tg::after{font-size:.7rem}

.offl .bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;margin:8px 0}.offl .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s}
.instb{position:fixed;inset-inline:12px;bottom:12px;z-index:99;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:var(--sh);border:1px solid var(--line)}.instb span{flex:1}.instb .btn{width:auto;margin:0}.instb .x{background:none;border:0;font-size:1.2em;color:var(--mut);cursor:pointer}

/* QA fixes 2026-10-24 */
:root{--trc:#08775f}
@media (prefers-color-scheme:dark){:root{--trc:#2fd4ae}.tools button:not(#a11yBtn),.note,.topic .mut{color:#c9bcff}}
.r1{background:#b45309!important}.r2{background:#047857!important}
html{font-size:min(calc(var(--fs) * var(--a11y,1)),48px)}
html[data-sz="3"] h1,html[data-sz="4"] h1{white-space:normal}
header{padding-top:max(.5rem,env(safe-area-inset-top))}
nav{bottom:calc(.7rem + env(safe-area-inset-bottom))}
html[data-sz="3"] header,html[data-sz="4"] header{position:static}
.instb{bottom:calc(5.4rem + env(safe-area-inset-bottom))}