:root{
  --bg:#f7f4ff; --card:#fff; --ink:#24213a; --muted:#6b6785; --line:#e6e0f5;
  --pri:#6a4ce0; --pri2:#8f6bff; --priSoft:#eee8ff; --ok:#14966f; --okSoft:#e3f7ef; --bad:#d6455d; --badSoft:#fde8ec; --part:#b7791f; --partSoft:#fff4e0;
  --t1:#ff8fab; --t2:#6a4ce0; --t3:#f6a63b; --t4:#2fb7a5; --t5:#4c8de0; --t6:#c25fd6;
  --metal:#ffd9a8; --nonmetal:#c9f0e3; --shadow:0 4px 18px rgba(60,40,140,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Rubik","Assistant","Heebo","Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column}
body.noscroll{overflow:hidden}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:8px;z-index:99}
.skip:focus{right:8px}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
main:focus,main:focus-visible{outline:none}
.chem{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-weight:600;letter-spacing:.01em}
.chem sub{font-size:.72em;vertical-align:-.25em;line-height:0}
.chem sup{font-size:.72em;vertical-align:.55em;line-height:0;margin-left:.02em}

.top{background:linear-gradient(120deg,#6a4ce0,#9b6bff 60%,#ff8fab);color:#fff;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.15rem}
.brand small{font-weight:500;opacity:.9}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);font-size:1.3rem}
.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;padding:8px 10px;background:rgba(247,244,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.tabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.navbtn{flex:0 0 auto;text-decoration:none;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.9rem;white-space:nowrap}
.navbtn.on{background:var(--pri);color:#fff;border-color:var(--pri)}
main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:16px 14px 40px;outline:none}
.hero{text-align:center;padding:10px 4px 6px}
.hero h1{margin:.2em 0;font-size:1.7rem}
.hero p{margin:0 auto;color:var(--muted);max-width:34em}
.topics{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.topic{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon ttl" "icon desc" "icon stars";column-gap:12px;text-decoration:none;background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);border-inline-start:6px solid var(--c,var(--pri));transition:transform .15s}
.topic:active{transform:scale(.98)}
.topic .ticon{grid-area:icon;font-size:2rem;align-self:center;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,#fff)}
.topic .ttl{grid-area:ttl;font-weight:700;font-size:1.1rem}
.topic .tdesc{grid-area:desc;color:var(--muted);font-size:.9rem}
.topic .tstars{grid-area:stars;color:#946800;font-size:.85rem;font-weight:600;margin-top:2px}
.topic .tnum{position:absolute;left:12px;top:10px;color:var(--c);font-weight:800;opacity:.35;font-size:1.4rem}
.t1{--c:var(--t1)}.t2{--c:var(--t2)}.t3{--c:var(--t3)}.t4{--c:var(--t4)}.t5{--c:var(--t5)}.t6{--c:var(--t6)}
.tip{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px}
.tabhead h1{margin:.1em 0;font-size:1.45rem}
.tabhead p{margin:0 0 12px;color:var(--muted)}
.acts{display:grid;gap:10px}
.act{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t go" "d go" "s go";text-decoration:none;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.act .atl{grid-area:t;font-weight:700}
.act .ad{grid-area:d;color:var(--muted);font-size:.9rem}
.act .stars{grid-area:s}
.act .go{grid-area:go;align-self:center;font-size:1.4rem;color:var(--pri)}
.stars{color:#d9d3ea;font-size:1.1rem;letter-spacing:2px}
.star.on{color:#b98300}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--priSoft);color:var(--pri);min-height:44px}
.btn.primary{background:var(--pri);color:#fff;box-shadow:0 3px 10px rgba(106,76,224,.3)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn.small{padding:7px 12px;min-height:38px;font-size:.92rem}
.btn:disabled{opacity:.45;cursor:default}
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

.qtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.qprog{color:var(--muted);font-size:.9rem}
.pbar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-bottom:12px}
.pfill{height:100%;background:linear-gradient(90deg,var(--pri2),var(--pri));transition:width .3s}
.qcard{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.qtag{display:inline-block;background:var(--priSoft);color:var(--pri);font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.qtext{font-size:1.08rem;font-weight:600}
.qvis{margin:12px 0}
.defbox{margin-top:8px;padding:10px 12px;border-radius:12px;background:#faf8ff;border:1px dashed #cfc3f7;font-weight:500}
.eq{display:block;text-align:center;font-size:1.2rem;margin:8px 0;padding:8px;border-radius:12px;background:#faf8ff}
.opts{display:grid;gap:9px;margin-top:12px}
.opts.cols2{grid-template-columns:1fr 1fr}
.opts.cols3{grid-template-columns:repeat(3,1fr)}
.opts.cols4{grid-template-columns:repeat(4,1fr)}
.opt{display:block;width:100%;text-align:start;background:#fff;border:2px solid var(--line);border-radius:14px;padding:11px 13px;cursor:pointer;min-height:48px;font-size:1rem;line-height:1.45}
.cols2 .opt,.cols3 .opt,.cols4 .opt{text-align:center}
.opt:hover:not(:disabled){border-color:var(--pri2)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok);background:var(--okSoft)}
.opt.wrong{border-color:var(--bad);background:var(--badSoft)}
.opt svg{max-width:100%;height:auto}
.fb{display:none;margin-top:14px;padding:12px 14px;border-radius:14px}
.fb.show{display:block}
.fb.ok{background:var(--okSoft);border:1px solid #a9e3cd}
.fb.bad{background:var(--badSoft);border:1px solid #f4b8c3}
.fb.part{background:var(--partSoft);border:1px solid #f1d29b}
.fbh{font-weight:800;margin-bottom:4px}
.fb.ok .fbh{color:var(--ok)}.fb.bad .fbh{color:var(--bad)}.fb.part .fbh{color:var(--part)}
.fbwhy{margin-bottom:6px}
.fbex{color:#3c3956}
.next{margin-top:14px;width:100%}
.done{text-align:center}
.bigscore{font-size:2.6rem;font-weight:800;color:var(--pri)}
.done .stars{font-size:2rem}
.donemsg{font-size:1.05rem}
.done .row{justify-content:center}

.ballbox{display:flex;justify-content:center;padding:6px;background:#faf8ff;border-radius:14px}
.ballbox svg{max-width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:8px;font-size:.85rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.35);margin-inline-end:4px;vertical-align:-1px}
.scene{max-width:100%;height:auto}
.rxpics{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;direction:ltr}
.rxbox{background:#faf8ff;border:1px solid var(--line);border-radius:14px;padding:6px 8px;text-align:center;direction:rtl}
.rxbox.solo{display:block;margin:0 auto;width:max-content;max-width:100%}
.rxlab{font-size:.78rem;color:var(--muted);font-weight:700}
.rxarrow{font-size:1.6rem;color:var(--pri)}
.cnttbl{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cnth,.cntrow{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;gap:6px;padding:8px 10px}
.cnth{background:#faf8ff;font-weight:700;font-size:.85rem;color:var(--muted)}
.cntrow{border-top:1px solid var(--line)}
.cntrow.right{background:var(--okSoft)}.cntrow.wrong{background:var(--badSoft)}
.cntrow .sortwhy{grid-column:1/-1}
.cntel{font-size:.95rem}
.stepper{display:inline-flex;align-items:center;gap:4px;justify-self:center}
.stp{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:800;font-size:1.1rem;cursor:pointer}
.stpn{min-width:26px;text-align:center;font-weight:800;font-size:1.1rem}
.sortlist{display:grid;gap:8px;margin:12px 0}
.sortrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:14px}
.sortrow.right{background:var(--okSoft);border-color:#a9e3cd}.sortrow.wrong{background:var(--badSoft);border-color:#f4b8c3}
.sortitem{font-weight:600}
.sortbtns{display:flex;gap:6px}
.sortwhy{flex-basis:100%;font-size:.9rem;color:#5a2630}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:.92rem;min-height:36px}
.chip.sel{background:var(--pri);color:#fff;border-color:var(--pri)}
.hint{color:var(--muted);font-size:.92rem}

.flash{display:block;width:100%;min-height:220px;border:0;padding:0;background:none;perspective:1000px;cursor:pointer;margin-top:8px}
.fside{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:220px;padding:22px;border-radius:22px;box-shadow:var(--shadow);text-align:center}
.front{background:linear-gradient(135deg,#7b5cf0,#a77bff);color:#fff}
.backside{display:none;background:#fff;border:2px solid var(--priSoft)}
.flash.flipped .front{display:none}.flash.flipped .backside{display:flex;animation:pop .25s}
@keyframes pop{from{transform:rotateY(70deg);opacity:.3}to{transform:none;opacity:1}}
.fterm{font-size:1.6rem;font-weight:800}
.fdef{font-size:1.1rem;font-weight:500}
.fex{color:var(--muted);font-size:.95rem}
.fhint{font-size:.8rem;opacity:.8}
.fcmode{font-size:.9rem;color:var(--muted)}
.fcnav{justify-content:space-between}
.match{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;margin-top:8px}
.mcol{display:flex;flex-direction:column;gap:8px}
.mitem{border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;text-align:start;cursor:pointer;font-size:.9rem;min-height:48px}
.mitem.term{font-weight:700}
.mitem.sel{border-color:var(--pri);background:var(--priSoft)}
.mitem.matched{border-color:var(--ok);background:var(--okSoft);opacity:.75}
.mitem.shake{animation:shake .45s;border-color:var(--bad);background:var(--badSoft)}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.ion{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;margin:4px;font-size:1rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.ion.pos{background:#ffe2b8;border:2px solid #f0a33a}
.ion.neg{background:#c9f0e3;border:2px solid #2fb7a5}
.ibstep{margin-top:6px}
.ibq{font-weight:700;margin:6px 0}
.ionopts .opt{font-size:1.15rem}
.minifb{display:none;margin-top:10px;padding:10px 12px;border-radius:12px}
.minifb.ok,.minifb.bad,.minifb:not(:empty){display:block}
.minifb.ok{background:var(--okSoft)}.minifb.bad{background:var(--badSoft)}
.minifb ul{margin:6px 0 0;padding-inline-start:20px}
.ibpool{display:flex;flex-wrap:wrap;justify-content:center;min-height:68px;padding:8px;border-radius:14px;background:#faf8ff;border:1px dashed #cfc3f7;margin-top:8px;direction:ltr}
.ibsum{text-align:center;margin:8px 0;font-size:1rem}
.ibsum .zero{color:var(--ok)}.ibsum .nz{color:var(--bad)}
.ibctrl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ibc{display:flex;gap:4px}
.ibres{font-size:2rem;text-align:center}
.ibname{text-align:center;font-weight:800;font-size:1.15rem;color:var(--ok)}
.ibcheck{margin-top:10px;width:100%}

.builder{margin-top:10px}
.captable{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
.captable .cap{background:#faf8ff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.85rem}
.captable.small .cap{font-size:.8rem}
.tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:52px;align-items:center}
.traydone{color:var(--ok);font-weight:700;font-size:.9rem}
.tatom{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);background:#fff;border-radius:16px;padding:4px 8px 4px 6px;cursor:pointer}
.tatom.sel{border-color:var(--pri);background:var(--priSoft)}
.ta{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.35);font-weight:800;color:var(--tc,#000);text-shadow:0 0 3px var(--tg,#fff)}
.tn{font-weight:700;color:var(--muted);font-size:.9rem}
.bhint{min-height:1.4em;font-size:.88rem;color:var(--muted);text-align:center;margin:6px 0}
.canvaswrap{background:#fbfaff;border:1px solid var(--line);border-radius:16px;padding:4px;max-width:480px;margin:0 auto}
.canvas{display:block;width:100%;height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cell{fill:transparent;cursor:pointer}
.cell:hover{fill:#f1ecff}
.gdot{fill:#d6cdf3;pointer-events:none}
.bline{stroke:#3a3550;stroke-width:4;stroke-linecap:round;pointer-events:none}
.atom{cursor:pointer}
.acirc{stroke:rgba(0,0,0,.4);stroke-width:1.5}
.atom.sel .acirc{stroke:#ffb703;stroke-width:5}
.asym{font-weight:800;font-size:18px;pointer-events:none}
.badge rect{fill:#fff;stroke-width:1.5}
.badge text{font-size:12px;font-weight:800}
.badge.full rect{stroke:var(--ok)}.badge.full text{fill:var(--ok)}
.badge.under rect{stroke:#e0a100}.badge.under text{fill:#b07d00}
.badge.over rect{stroke:var(--bad);fill:var(--badSoft)}.badge.over text{fill:var(--bad)}
.btools{display:flex;justify-content:center;gap:8px;margin-top:8px}
.molres{margin-top:8px}
.mrrow{font-size:1.05rem}
.mrlab{font-weight:700;color:var(--muted);font-size:.85rem}
.mrf{font-size:1.4rem}
.mrviews{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.mrviews>div{background:#fff;border-radius:12px;padding:6px 8px;text-align:center}
.struct{max-width:100%;height:auto}
.struct .bond{stroke:#2d2944;stroke-width:2.5;stroke-linecap:round}
.struct .atomlbl{font-weight:800;font-size:19px;fill:#2d2944;font-family:"Segoe UI",system-ui,Arial,sans-serif}
.struct .atomlbl.bad{fill:var(--bad)}
.struct .edot{fill:#6a4ce0}
.struct .edot.lone{fill:#2d2944}
.structbox{display:flex;justify-content:center;background:#faf8ff;border-radius:14px;padding:6px}
.note{background:var(--partSoft);padding:8px 10px;border-radius:10px;font-size:.92rem}

.ptbtn{flex:0 0 auto;display:flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:8px 12px;background:linear-gradient(135deg,#13806f,#2f6cc0);color:#fff;font-weight:800;box-shadow:0 3px 10px rgba(30,90,160,.3);cursor:pointer;font-size:.9rem;min-height:38px}
.ptl{display:none}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(25,18,60,.55);display:flex;align-items:flex-end;justify-content:center}
.overlay[hidden]{display:none}
.ptpanel{background:#fff;width:100%;max-width:1000px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:12px 12px 20px}
.pthead{display:flex;align-items:center;justify-content:space-between}
.pthead h2{margin:0;font-size:1.2rem}
.ptclose{border:0;background:var(--priSoft);color:var(--pri);width:40px;height:40px;border-radius:50%;font-size:1.1rem;cursor:pointer}
.ptmodes{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.ptlegend{display:flex;gap:14px;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.ptlegend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-inline-end:4px}
.lm{background:var(--metal)}.lnm{background:var(--nonmetal)}.lst{background:#d33;height:4px!important;width:18px!important;border-radius:2px!important;vertical-align:3px!important}
.ptscroll{overflow-x:auto;padding-bottom:6px}
.ptgrid{display:grid;grid-template-columns:22px repeat(var(--cols),minmax(0,1fr));gap:2px;min-width:100%}
.ptgrid.full{grid-template-columns:22px repeat(18,minmax(40px,1fr));min-width:780px}
.ph{font-size:.72rem;font-weight:800;color:var(--muted);text-align:center;align-self:end}
.ph.corner{font-size:.55rem;font-weight:600}
.ph.rowh{align-self:center}
.pempty{min-height:44px}
.pe{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:2px 1px;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;line-height:1.05}
.pe.m{background:var(--metal)}.pe.nm{background:var(--nonmetal)}
.pe.sel{outline:3px solid var(--pri);z-index:2}
.pe.sr::after{content:"";position:absolute;top:-3px;bottom:-3px;right:-4px;width:5px;background:#d33;border-radius:3px;z-index:3}
.pe.sb::before{content:"";position:absolute;left:-3px;right:-4px;bottom:-4px;height:5px;background:#d33;border-radius:3px;z-index:3}
.pz{font-size:.55rem;color:#555}
.ps{font-weight:800;font-size:.95rem}
.pn{font-size:.5rem;color:#444;white-space:nowrap;overflow:hidden;max-width:100%}
.ptinfo{margin-top:8px;padding:10px;border-radius:12px;background:#faf8ff;min-height:44px}
.ptinfo .tm{color:#b4630f;font-weight:700}.ptinfo .tnm{color:#13806f;font-weight:700}
.pib{font-size:1.2rem}
.ptnote{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.foot{text-align:center;color:var(--muted);font-size:.78rem;padding:10px 16px 24px}

@media (min-width:700px){
  body{font-size:17.5px}
  .topics{grid-template-columns:1fr 1fr}
  .acts{grid-template-columns:1fr 1fr}
  .ptl{display:inline}
  .overlay{align-items:center}
  .ptpanel{border-radius:22px}
  .pn{font-size:.6rem}
  .ps{font-size:1.1rem}
  .pe{min-height:54px}
}
@media (max-width:380px){
  .opts.cols4{grid-template-columns:1fr 1fr}
}

/* הסבר בשפה כימית אחרי שם של חומר (names.js) */
.ndesc{font-weight:400;font-size:.92em;color:#55506e}
.opt .ndesc,.sortitem .ndesc{display:inline;font-size:.86em}
b .ndesc,strong .ndesc{font-weight:400}
.opt.right .ndesc,.opt.wrong .ndesc{color:inherit;opacity:.85}

/* קרדיט (נטע, 4.11) */
.foot .credit{margin:8px 0 0;font-size:.72rem;opacity:1}

/* נגישות: טקסט לקוראי מסך בלבד (כותרת h1 של הדף לפני שהמסך נטען) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}