@font-face{font-family:"Heebo";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/heebo-hebrew-wght-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/heebo-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:300 900;src:url(fonts/rubik-hebrew-wght-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-display:swap;font-weight:300 900;src:url(fonts/rubik-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#f4f3ff;--card:#fff;--ink:#1e1b4b;--text:#27253f;--muted:#6b6a85;--line:#e4e2f3;--accent:#4f46e5;--accent2:#7c3aed;--accent-soft:#eef0ff;--good:#059669;--goodbg:#ecfdf5;--bad:#e11d48;--badbg:#fff1f3;--curve:#3730a3;--asym:#ea580c;
--l1:#059669;--l1bg:#d1fae5;--l2:#b45309;--l2bg:#fef3c7;--l3:#be123c;--l3bg:#ffe4e6;--r:20px;--shadow:0 1px 2px rgba(30,27,75,.05),0 8px 28px rgba(79,70,229,.09)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:"Heebo","Rubik","Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.55;min-height:100vh;
background:radial-gradient(1200px 500px at 100% -10%,#e0e7ff 0,rgba(224,231,255,0) 60%),radial-gradient(900px 500px at -10% 30%,#fae8ff 0,rgba(250,232,255,0) 55%),var(--bg);background-attachment:fixed}
h1,h2,h3,.primary,.badge,.pill,.stat,.chip,.finish,.who{font-family:"Rubik","Heebo",Arial,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
/* hero */
.hero{background:linear-gradient(120deg,#4338ca 0%,#6d28d9 55%,#a21caf 100%);color:#fff;padding:18px 0 46px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% -60px -10%;height:90px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero:before{content:"";position:absolute;width:340px;height:340px;left:-120px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.hero-in{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.hero h1{margin:0;font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:-.2px}
.hero .sub{margin:3px 0 0;opacity:.88;font-size:.95rem}
main{position:relative;margin-top:-28px;padding-bottom:30px}
.card{background:var(--card);border:1px solid rgba(228,226,243,.9);border-radius:var(--r);padding:16px 16px 18px;box-shadow:var(--shadow)}
/* start */
.start-card{max-width:520px;margin:0 auto;padding:24px 22px 22px;animation:rise .45s ease both}
.start-card h2{margin:0 0 4px;font-size:1.5rem;color:var(--ink)}
.lead{margin:0 0 16px;color:var(--muted)}
.field{display:block;margin:0 0 12px}
.field span{display:block;font-weight:600;font-size:.95rem;margin-bottom:5px;color:var(--ink)}
.field small{font-weight:400;color:var(--muted)}
.field input{width:100%;font:inherit;font-size:1.05rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fbfbff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(79,70,229,.15);background:#fff}
.err{color:var(--bad);margin:-4px 0 10px;font-size:.92rem}
.legend{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.pill{display:inline-block;border-radius:999px;padding:3px 11px;font-size:.84rem;font-weight:600}
.pill.l1{background:var(--l1bg);color:var(--l1)}.pill.l2{background:var(--l2bg);color:var(--l2)}.pill.l3{background:var(--l3bg);color:var(--l3)}
.hint{margin:4px 0 16px;font-size:.88rem;color:var(--muted)}
.privacy{margin:14px 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.primary{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff;border:0;border-radius:14px;padding:13px 28px;font-weight:600;font-size:1.05rem;cursor:pointer;min-width:200px;box-shadow:0 8px 20px rgba(79,70,229,.28);transition:transform .12s,box-shadow .15s}
.primary:hover{box-shadow:0 10px 26px rgba(79,70,229,.36)}
.primary:active{transform:scale(.97)}
.primary.big{width:100%;padding:15px;font-size:1.12rem}
.primary:focus-visible,.chip:focus-visible,.finish:focus-visible,.opt:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
/* status bar */
.status{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:8px 10px;box-shadow:var(--shadow)}
.who{font-weight:600;color:var(--ink);font-size:.95rem;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat{position:relative;background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:3px 11px;font-size:.92rem;white-space:nowrap}
.stat b{font-weight:700}
.stat.pts{background:#fff7d6;color:#7a4b00}
.stat.bump{animation:bump .45s ease}
.plus{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-weight:800;color:var(--good);opacity:0;pointer-events:none;font-size:1rem}
.plus.go{animation:floatup 1s ease-out}
.finish{margin-inline-start:auto;background:#fff;border:1.5px solid var(--accent);color:var(--accent);border-radius:12px;padding:6px 12px;font-size:.92rem;font-weight:600;cursor:pointer}
.finish:active{transform:scale(.97)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 8px}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 15px;font-size:.92rem;cursor:pointer;transition:all .15s}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.progress{margin:4px 2px 12px}
.prog-top{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);margin-bottom:5px}
.prog-top b{font-weight:700}.prog-top .lv1{color:var(--l1)}.prog-top .lv2{color:var(--l2)}.prog-top .lv3{color:var(--l3)}
.prog-bar{height:8px;background:#e8e6f6;border-radius:99px;overflow:hidden}
.prog-bar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,#34d399,#059669)}
.prog-bar i.lv2{background:linear-gradient(90deg,#fbbf24,#d97706)}.prog-bar i.lv3{background:linear-gradient(90deg,#fb7185,#e11d48)}
/* question */
.qcard.enter{animation:rise .35s ease both}
.qhead{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.88rem}
.badge{border-radius:999px;padding:2px 11px;font-size:.82rem;font-weight:600;background:#eef1f8}
.badge.d1{background:var(--l1bg);color:var(--l1)}.badge.d2{background:var(--l2bg);color:var(--l2)}.badge.d3{background:var(--l3bg);color:var(--l3)}
.func{font-size:1.3rem;margin:4px 0 6px;overflow-x:auto;overflow-y:hidden;direction:ltr;text-align:center;background:linear-gradient(180deg,#f8f7ff,#f3f2ff);border-radius:14px;padding:2px 8px}
.func .katex-display{margin:.45em 0}
.h{font-size:1.05rem;margin:14px 0 6px;color:var(--ink)}
.h.small{font-size:.98rem;margin-top:14px}
.h.choose{margin-top:18px}
.data{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;align-items:baseline}
.data dt{color:var(--muted);font-size:.93rem;white-space:nowrap}
.data dd{margin:0;font-size:1.02rem;direction:ltr;text-align:right}
.katex{direction:ltr;unicode-bidi:isolate}
.why .katex,.feedback .katex,.data .katex{display:inline-block;white-space:nowrap}
svg{direction:ltr}
.sep{color:#a3a2bd;margin:0 7px 0 1px}
.tablewrap{direction:ltr;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:2px}
table.inv{border-collapse:collapse;margin:0 auto;font-size:1rem;direction:ltr}
table.inv th,table.inv td{border:1.5px solid #3b3a52;text-align:center;padding:4px 5px;min-width:30px;height:34px;white-space:nowrap}
table.inv th{background:#f1f0fb;font-weight:600}
table.inv td.pt{background:#fafaff}
table.inv td.undef{background:repeating-linear-gradient(45deg,#fff 0 4px,#555 4px 5.5px)}
table.inv .arr{font-size:1.25rem;line-height:1}
table.inv .mm{font-weight:700}
table.inv .mm.max{color:#b42318}table.inv .mm.min{color:#1d5fb3}
/* options */
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative;background:#fff;border:2px solid var(--line);border-radius:16px;padding:6px 6px 4px;cursor:pointer;font:inherit;color:inherit;text-align:right;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,box-shadow .2s,transform .12s;box-shadow:0 2px 8px rgba(30,27,75,.05);animation:rise .35s ease both}
.opt:hover:not([disabled]){border-color:#a5b4fc;box-shadow:0 6px 18px rgba(79,70,229,.15);transform:translateY(-1px)}
.opt:active:not([disabled]){transform:scale(.98)}
.opt .lab{position:absolute;top:6px;right:6px;background:var(--ink);color:#fff;border-radius:8px;min-width:24px;height:24px;display:grid;place-items:center;font-weight:700;font-size:.95rem;z-index:1;font-family:"Rubik",sans-serif}
.opt svg{width:100%;height:auto;display:block;aspect-ratio:1}
.opt .why{font-size:.84rem;line-height:1.4;padding:2px 4px 4px;display:none}
.opt.good{border-color:var(--good);background:var(--goodbg);animation:glow 1.1s ease}
.opt.good .lab{background:var(--good)}
.opt.bad{border-color:var(--bad);background:var(--badbg);animation:shake .4s ease}
.opt.bad .lab{background:var(--bad)}
.opt.done .why{display:block}
.opt.dim{opacity:.8}
.opt[disabled]{cursor:default}
svg .grid{stroke:#e9e8f3;stroke-width:1;fill:none}
svg .axis{stroke:#2e2d42;stroke-width:1.6;fill:none}
svg .arrow{fill:#2e2d42}
svg .tl text{font-size:17px;fill:#45445a;font-family:Arial,sans-serif}
svg .tl text.axl{font-style:italic;font-weight:700;font-size:16px}
svg .asym{stroke:var(--asym);stroke-width:1.8;stroke-dasharray:7 5;fill:none}
svg .curve{stroke:var(--curve);stroke-width:3;fill:none;stroke-linejoin:round;stroke-linecap:round}
.feedback{margin:14px 0 0;border-radius:16px;padding:12px 16px;font-size:1rem}
.feedback.ok{background:var(--goodbg);border:1px solid #a7e3c9}
.feedback.no{background:var(--badbg);border:1px solid #fbb6c3}
.feedback b{display:block;font-size:1.08rem;margin-bottom:2px;font-family:"Rubik",sans-serif}
.feedback.pop{animation:pop .35s ease both}
.actions{display:flex;justify-content:center;margin:14px 0}
.foot{color:var(--muted);font-size:.84rem;text-align:center;margin:10px 0 20px}
/* summary */
.sum-card{max-width:560px;margin:0 auto;text-align:center;padding:24px 20px;animation:rise .45s ease both}
.sum-hello{margin:0;color:var(--muted);font-weight:600}
.sum-card h2{margin:2px 0 14px;font-size:1.45rem;color:var(--ink)}
.ring{--p:0;width:150px;height:150px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent2) calc(var(--p)*1%),#ebe9fb 0);animation:pop .6s ease both}
.ring>div{width:118px;height:118px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}
.ring b{font:800 2.3rem/1 "Rubik",sans-serif;color:var(--ink)}
.ring span{font-size:.85rem;color:var(--muted)}
.sum-msg{margin:4px 0 14px;font-weight:600;color:var(--ink)}
.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.sum-grid div{background:var(--accent-soft);border-radius:14px;padding:10px 4px}
.sum-grid b{display:block;font:700 1.25rem/1.2 "Rubik",sans-serif;color:var(--ink)}
.sum-grid span{font-size:.8rem;color:var(--muted)}
.sum-levels{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:.95rem}
.sum-levels th{color:var(--muted);font-weight:500;font-size:.85rem;padding:4px}
.sum-levels td{padding:6px 4px;border-top:1px solid var(--line)}
.saved{font-size:.85rem;color:var(--good);margin:0 0 12px}
.saved.pending{color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.94)}60%{opacity:1;transform:scale(1.02)}100%{transform:none}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}100%{box-shadow:0 0 0 14px rgba(5,150,105,0)}}
@keyframes bump{0%{transform:none}40%{transform:scale(1.18)}100%{transform:none}}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media (max-width:420px){body{font-size:16px}.wrap{padding:0 10px}.options{gap:8px}.opt{padding:4px 4px 3px}table.inv th,table.inv td{padding:3px 4px;min-width:28px;font-size:.92rem}.func{font-size:1.18rem}.hero h1{font-size:1.3rem}.status{gap:6px;padding:7px 8px}.stat{padding:3px 8px;font-size:.88rem}.finish{padding:6px 10px;font-size:.88rem}.who{max-width:27%;font-size:.88rem}.sum-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:760px){.options{grid-template-columns:repeat(4,1fr)}.hero{padding:26px 0 54px}.hero h1{font-size:1.8rem}}

/* link to the learning centre (/learn) */
.learn-link{margin-inline-start:auto;flex:none;color:#fff;text-decoration:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 13px;font:600 .9rem "Rubik","Heebo",sans-serif;white-space:nowrap;transition:background .15s}
.learn-link:hover{background:rgba(255,255,255,.26)}
.learn-cta{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:11px 14px;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #ddd6fe;color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.4}
.learn-cta>span:first-child{font-size:1.5rem}
.learn-cta .arr{margin-inline-start:auto;font-weight:700;color:var(--accent)}
.learn-cta:hover{border-color:#a5b4fc}
@media (max-width:420px){.learn-link{padding:5px 10px;font-size:.82rem}}