@font-face{font-family:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-400-hebrew.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;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:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-500-hebrew.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;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:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-700-hebrew.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';src:url(fonts/frankruhllibre-700-latin.woff2) format('woff2');font-weight:700;font-display:swap;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';src:url(fonts/rubik-400-hebrew.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Rubik';src:url(fonts/rubik-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;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';src:url(fonts/rubik-500-hebrew.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Rubik';src:url(fonts/rubik-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;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';src:url(fonts/rubik-700-hebrew.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Rubik';src:url(fonts/rubik-700-latin.woff2) format('woff2');font-weight:700;font-display:swap;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';src:url(fonts/rubik-800-hebrew.woff2) format('woff2');font-weight:800;font-display:swap;unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Rubik';src:url(fonts/rubik-800-latin.woff2) format('woff2');font-weight:800;font-display:swap;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{
  --ink:#232b47; --mute:#5d6688; --line:#d9def0; --paper:#ffffff; --bg:#eef1fa;
  --lav:#ecebfb; --lavD:#5b54c4; --sky:#e3f0fb; --skyD:#2f72ad; --mint:#dff4ee; --mintD:#1f8574;
  --rose:#fbe9f1; --roseD:#b4467a; --amber:#fdf1dc; --amberD:#b06c0e; --olive:#eef4dc; --oliveD:#5a7814;
  --good:#1f8574; --goodBg:#e3f6ef; --diff:#a86a00; --diffBg:#fff4dc; --bad:#c2410c; --badBg:#fdebe4;
  --acc:var(--lavD); --accBg:var(--lav);
  --r:20px; --shadow:0 8px 28px rgba(40,48,100,.10),0 1px 3px rgba(40,48,100,.08);
  --fs:clamp(16px, .3vw + 14.6px, 18.5px);
  --navh:76px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Rubik,system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:var(--fs);line-height:1.5;-webkit-tap-highlight-color:transparent;min-height:100vh;
 background-image:radial-gradient(circle at 12% 0%,#e6e3fb 0,transparent 42%),radial-gradient(circle at 100% 28%,#dcf0f7 0,transparent 45%),radial-gradient(circle at 30% 100%,#e1f4ea 0,transparent 42%);background-attachment:fixed}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:10px}
.hidden{display:none!important}
body[data-ot=a]{--acc:var(--lavD);--accBg:var(--lav)}
body[data-ot=b]{--acc:var(--skyD);--accBg:var(--sky)}
body[data-ot=c]{--acc:var(--mintD);--accBg:var(--mint)}
body[data-ot=d]{--acc:var(--oliveD);--accBg:var(--olive)}
body[data-ot=e]{--acc:var(--roseD);--accBg:var(--rose)}
body[data-ot=f]{--acc:var(--amberD);--accBg:var(--amber)}

/* header */
#top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.5em;padding:.45em .8em;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.brand b{font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font-size:.66em;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbadge{display:inline-flex;align-items:center;gap:.3em;background:linear-gradient(90deg,#6a5ae0,#2f9e8f);color:#fff;font-weight:700;border-radius:99px;padding:.18em .7em;font-size:.72em;white-space:nowrap}
.tbtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:.32em .65em;font-size:.78em;font-weight:500;display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.tbtn .cnt{background:var(--lavD);color:#fff;border-radius:99px;font-size:.8em;padding:0 .5em;font-weight:700}
.tbtn.lvl{background:var(--ink);color:#fff;border-color:var(--ink)}
.tbtn.bump{animation:pop .6s}
@keyframes pop{30%{transform:scale(1.18)}60%{transform:scale(.96)}}
#lvlMenu{position:fixed;z-index:60;top:3.4em;left:.8em;background:#fff;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--line);padding:.5em;display:flex;flex-direction:column;gap:.35em;min-width:15em}
#lvlMenu button{border:0;background:#f4f5fb;border-radius:12px;padding:.55em .8em;text-align:right;font-size:.9em}
#lvlMenu button.on{background:var(--ink);color:#fff}
#lvlMenu small{display:block;font-size:.75em;opacity:.8}

/* layout */
#stage{max-width:960px;margin:0 auto;padding:.7em .9em calc(var(--navh) + 1em)}
.scene{animation:fadeUp .45s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h1,h2,h3,h4{line-height:1.25;margin:.2em 0 .45em}
h1{font-size:clamp(2em,6vw,3.2em);font-weight:800}
h2{font-size:1.3em;font-weight:700}
h4{font-size:1.05em;margin:0 0 .3em}
p{margin:.3em 0 .5em}
.kicker{font-size:.8em;font-weight:700;color:var(--acc);letter-spacing:.01em}
.lead{color:var(--mute)}
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1em 1.2em;border:1px solid #e6e9f5}
.btn{border:0;border-radius:14px;padding:.62em 1.25em;font-weight:700;background:var(--acc);color:#fff;box-shadow:0 4px 14px rgba(60,60,140,.22);transition:transform .15s,opacity .2s;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--acc);box-shadow:none;border:2px solid currentColor}
.btn.soft{background:var(--accBg);color:var(--ink);box-shadow:none}
.btn[disabled]{opacity:.35;pointer-events:none}
.row{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}

/* title */
.title{padding-top:.6em}
.title .hero{z-index:0;background:linear-gradient(135deg,#efeafe 0%,#e2f3f8 55%,#e3f6ec 100%);border-radius:28px;padding:1.4em 1.3em 1.3em;box-shadow:var(--shadow);position:relative;overflow:hidden}
.title .hero:after{content:"שלד״ע";position:absolute;left:.2em;top:.15em;font-size:5em;font-weight:800;color:rgba(91,84,196,.05);pointer-events:none;line-height:1}
.title .sub{font-size:1.1em;color:var(--mute);margin:.2em 0 .8em}
.credit{display:inline-flex;align-items:center;gap:.45em;background:#fff;border-radius:99px;padding:.35em 1em;font-weight:700;font-size:1.02em;box-shadow:0 2px 10px rgba(40,48,100,.08)}
.credit span{color:var(--mute);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin:1.1em 0 .4em}
.step{background:#fff;border-radius:16px;padding:.8em .9em;border:1px solid var(--line)}
.step i{font-style:normal;font-size:1.5em;display:block}
.step b{display:block}
.step small{color:var(--mute);font-size:.82em;line-height:1.4;display:block}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin:.6em 0 1em}
.lvlcard{border:2px solid var(--line);background:#fff;border-radius:20px;padding:1em;text-align:right;transition:.2s;display:flex;flex-direction:column;gap:.25em}
.lvlcard:hover{border-color:var(--lavD);transform:translateY(-2px)}
.lvlcard.on{border-color:var(--lavD);background:var(--lav)}
.lvlcard .ic{font-size:1.6em}
.lvlcard b{font-size:1.15em}
.lvlcard small{color:var(--mute);font-size:.85em;line-height:1.45}
.note-free{font-size:.82em;color:var(--mute)}

/* map */
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9em;margin-top:.8em}
.otcard{border:0;text-align:right;background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:1em 1.1em;display:flex;gap:.8em;align-items:flex-start;position:relative;transition:transform .15s}
.otcard:hover{transform:translateY(-2px)}
.otcard .L{flex:0 0 auto;width:2.2em;height:2.2em;border-radius:16px;display:grid;place-items:center;font-size:1.5em;font-weight:800;color:#fff}
.otcard .t b{display:block;font-size:1.05em}
.otcard .t small{display:block;color:var(--mute);font-size:.82em}
.otcard .pg{height:7px;border-radius:9px;background:#eef0f7;margin-top:.55em;overflow:hidden}
.otcard .pg i{display:block;height:100%;border-radius:9px}
.otcard .st{font-size:.72em;color:var(--mute);margin-top:.3em}
.c-lav{background:var(--lavD)}.c-sky{background:var(--skyD)}.c-mint{background:var(--mintD)}.c-rose{background:var(--roseD)}.c-amber{background:var(--amberD)}.c-olive{background:var(--oliveD)}
.mypath{margin-top:1.1em}
.chips{display:flex;flex-wrap:wrap;gap:.4em}
.chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.22em .8em;font-size:.82em}
.chip b{color:var(--lavD)}
footer.credit-foot{text-align:center;color:var(--mute);font-size:.8em;margin:2em 0 .5em}

/* page */
.phead{margin-bottom:.4em}
.prog{display:flex;align-items:center;gap:.6em;margin:.3em 0 .5em}
.bar{flex:1;display:flex;gap:4px}
.bar i{flex:1;height:8px;border-radius:6px;background:#dfe3f1;transition:.3s}
.bar i.done{background:var(--acc);opacity:.45}
.bar i.on{background:var(--acc)}
.ptxt{font-size:.78em;color:var(--mute);white-space:nowrap;font-weight:500}
.body{font-size:1em}
.body b{color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin:.5em 0}
.duo>div{background:var(--accBg);border-radius:16px;padding:.8em .9em}
.src{background:#fffdf7;border:1px solid #efe6cf;border-right:6px solid var(--acc);border-radius:14px;padding:.55em .9em .6em;margin:.55em 0;box-shadow:0 2px 10px rgba(80,70,30,.05)}
.src .h{display:flex;flex-wrap:wrap;gap:.3em .6em;align-items:baseline;margin-bottom:.25em}
.src .h b{font-size:.92em;color:var(--acc)}
.src .h small{font-size:.74em;color:var(--mute)}
.src .tx{font-family:'Frank Ruhl Libre',serif;font-size:1.06em;line-height:1.65;font-weight:500}
.src .more{border:0;background:none;color:var(--acc);font-weight:700;font-size:.8em;padding:.3em 0 0;text-decoration:underline}
.co{border-radius:14px;padding:.55em .85em;margin:.5em 0;font-size:.95em;display:flex;gap:.6em;align-items:flex-start}
.co .ic{flex:0 0 auto;font-size:1.15em;line-height:1.5}
.co.tip{background:#f1f3fb}
.co.warn{background:var(--diffBg)}
.co.link{background:var(--accBg);border:1.5px dashed var(--acc)}
/* choose */
.opts{display:flex;flex-direction:column;gap:.45em;margin:.6em 0}
.opt{border:2px solid var(--line);background:#fff;border-radius:16px;padding:.55em .85em;text-align:right;display:flex;gap:.7em;align-items:flex-start;transition:.18s;min-height:48px;animation:fadeUp .35s ease both;animation-delay:calc(var(--i)*60ms)}
.opt:hover{border-color:var(--acc);background:var(--accBg)}
.opt .k{flex:0 0 auto;width:1.7em;height:1.7em;border-radius:10px;background:var(--accBg);color:var(--acc);display:grid;place-items:center;font-weight:800;font-size:.9em}
.opt .ot b{display:block;font-size:1.02em}
.opt .ot small{display:block;color:var(--mute);font-size:.85em;line-height:1.5;margin-top:.15em}
.opt.sel{border-color:var(--acc);background:var(--accBg);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.opt.sel .k{background:var(--acc);color:#fff}
.opt.struck{opacity:.55;border-style:dashed}
.opt.struck .ot b{text-decoration:line-through}
.opts.done .opt{pointer-events:none}
.opts.done .opt.right{border-color:var(--good);background:var(--goodBg)}
.opts.done .opt.right .k{background:var(--good);color:#fff}
.opts.done .opt.wrong{border-color:var(--bad);background:var(--badBg)}
.opts.done .opt.wrong .k{background:var(--bad);color:#fff}
.opts.done .opt.dim{opacity:.55}
.qq{font-weight:700;font-size:1.05em;margin:.6em 0 .2em}
.qtag{display:inline-block;font-size:.72em;font-weight:700;border-radius:99px;padding:.15em .7em;background:var(--accBg);color:var(--acc);margin-bottom:.3em}
.fb{border-radius:16px;padding:.75em 1em;margin:.6em 0;animation:fadeUp .35s ease}
.fb.good{background:var(--goodBg)}
.fb.hm{background:#f3f1fb}
.fb b.t{display:block;margin-bottom:.15em}
.rv{border-radius:20px;padding:.9em 1.1em;margin:.8em 0;animation:fadeUp .4s ease;border:2px solid}
.rv .rh{display:flex;align-items:center;gap:.45em;font-weight:800;font-size:1.05em;margin-bottom:.25em}
.rv.hold{background:var(--goodBg);border-color:#9fd9c6}
.rv.hold .rh{color:var(--good)}
.rv.diff{background:var(--diffBg);border-color:#f0cf8c}
.rv.diff .rh{color:var(--diff)}
.rv.crash{background:var(--badBg);border-color:#f2b49b}
.rv.crash .rh{color:var(--bad)}
.rv .acts{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.6em}
.chosen{background:var(--accBg);border-radius:14px;padding:.55em .9em;margin:.4em 0;font-size:.92em}
/* lens / matrix / summary */
.lens{display:flex;align-items:center;gap:.7em;background:linear-gradient(90deg,var(--accBg),#fff);border-radius:20px;padding:1em 1.1em;border:2px solid var(--acc)}
.lens .gl{font-size:2em}
.lens b{font-size:1.15em}
.mx{overflow-x:auto;margin:.6em 0;-webkit-overflow-scrolling:touch}
.mx table{border-collapse:separate;border-spacing:5px;min-width:620px;width:100%;font-size:.86em}
.mx th{background:var(--ink);color:#fff;border-radius:12px;padding:.5em .6em;font-weight:500}
.mx td{border-radius:12px;padding:.55em .65em;vertical-align:top;line-height:1.45}
.mx td.rowh{background:#fff;font-weight:700;border:1px solid var(--line)}
.mx tr.me td.rowh{background:var(--acc);color:#fff}
.mx tr.me td{box-shadow:0 0 0 2px var(--acc) inset}
.mx td.hold{background:var(--goodBg)}.mx td.diff{background:var(--diffBg)}.mx td.crash{background:var(--badBg)}
.mx td .ic{display:block;font-size:1.1em}
.legend{display:flex;gap:.8em;flex-wrap:wrap;font-size:.78em;color:var(--mute)}
.sumlist{display:flex;flex-direction:column;gap:.45em;margin:.6em 0}
.sumlist .it{background:#fff;border-radius:14px;padding:.55em .85em;border:1px solid var(--line);font-size:.92em;display:flex;gap:.5em}
.score{display:flex;align-items:center;gap:.8em;background:#fff;border-radius:18px;padding:.8em 1em;border:1px solid var(--line);margin:.6em 0}
.score .big{font-size:1.8em;font-weight:800;color:var(--acc)}
/* bottom nav */
#nav{position:fixed;bottom:0;right:0;left:0;z-index:25;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:.55em .8em calc(.55em + env(safe-area-inset-bottom))}
#nav .in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:.6em}
#nav .mid{flex:1;text-align:center;font-size:.8em;color:var(--mute);line-height:1.25}
#nav .mid b{display:block;color:var(--ink);font-size:1.05em}
#nav .btn{min-width:6.5em}
#nav .btn.skip{background:#fff;color:var(--acc);border:2px solid var(--acc);box-shadow:none}
/* notebook */
#nb{position:fixed;top:0;bottom:0;left:0;width:min(420px,92vw);background:#fff;z-index:50;box-shadow:0 0 40px rgba(0,0,0,.18);transform:translateX(-105%);transition:transform .3s;display:flex;flex-direction:column}
#nb.open{transform:none}
#nb .hd{display:flex;align-items:center;justify-content:space-between;padding:.8em 1em;border-bottom:1px solid var(--line)}
#nb .hd h3{margin:0;font-size:1.1em}
#nb .x{border:0;background:#f1f2f8;border-radius:10px;width:2.2em;height:2.2em}
#nbList{overflow:auto;padding:.8em 1em;display:flex;flex-direction:column;gap:.55em}
.ne{border-radius:14px;padding:.6em .8em;background:#f5f6fb;font-size:.88em;line-height:1.5}
.ne .h{font-weight:700;display:flex;gap:.4em;align-items:baseline}
.ne .h small{color:var(--mute);font-weight:500;margin-inline-start:auto;font-size:.8em}
.ne.crash{background:var(--badBg)}.ne.diff{background:var(--diffBg)}.ne.hold{background:var(--goodBg)}.ne.choice{background:var(--lav)}
.nbempty{color:var(--mute);font-size:.9em}
#scrim{position:fixed;inset:0;background:rgba(20,24,50,.32);z-index:45;opacity:0;pointer-events:none;transition:.3s}
#scrim.on{opacity:1;pointer-events:auto}
#toast{position:fixed;top:4.2em;left:50%;transform:translateX(-50%) translateY(-14px);background:var(--ink);color:#fff;border-radius:14px;padding:.55em 1.1em;font-size:.88em;opacity:0;transition:.3s;z-index:70;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:700px){
  :root{--navh:70px}
  #stage{padding:.8em .75em calc(var(--navh) + 1.4em)}
  .steps{grid-template-columns:1fr}
  .levels{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .tbtn .lbl{display:none}
  .brand b{font-size:.86em}
  .brand small{display:block;font-size:.62em;color:#4d3fb8;font-weight:700}
  .brand .vb-desk{display:none}
  .title .hero{z-index:0;padding:1.1em 1em}
  h2{font-size:1.3em}
  #nav .btn{min-width:5.2em;padding:.55em .9em}
  .vbadge.inbar{display:none}
}
@media (min-width:701px){ .brand .vb-mobile{display:none} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.srcchips{display:flex;flex-wrap:wrap;gap:.4em;margin:-.3em 0 .9em}
.srcchips span{background:rgba(255,255,255,.75);border-radius:99px;padding:.15em .75em;font-size:.78em;color:var(--mute);border:1px solid var(--line)}
.mxc{display:none;flex-direction:column;gap:.7em;margin:.6em 0}
.mxr{background:#fff;border-radius:18px;border:1px solid var(--line);padding:.6em;display:flex;flex-direction:column;gap:.4em}
.mxr.me{border:2.5px solid var(--acc)}
.mxh{font-weight:800;padding:.1em .3em}
.mxh small{color:var(--acc);font-weight:700}
.mxi{border-radius:12px;padding:.45em .7em;font-size:.88em;line-height:1.45}
.mxi b{display:block;font-size:.92em}
.mxi.hold{background:var(--goodBg)}.mxi.diff{background:var(--diffBg)}.mxi.crash{background:var(--badBg)}
@media (max-width:700px){ .mx{display:none} .mxc{display:flex} }

@media (max-width:700px){
  .steps{gap:.45em;margin:.8em 0 .2em}
  .step{display:grid;grid-template-columns:auto 1fr;column-gap:.6em;align-items:center;padding:.55em .75em}
  .step i{grid-row:span 2;font-size:1.35em}
  .step small{font-size:.78em}
  .title h1{margin:.15em 0 .05em}
}

#lvH{scroll-margin-top:4em}
.title .hero .btn{position:relative;z-index:1}

/* registration + greeting */
.reg{padding-top:.4em}
.hero.compact{background:linear-gradient(135deg,#efeafe 0%,#e2f3f8 55%,#e3f6ec 100%);border-radius:24px;padding:1em 1.1em;box-shadow:var(--shadow)}
.hero.compact h1{font-size:clamp(1.7em,5vw,2.5em);margin:.25em 0 .1em}
.hero.compact .sub{color:var(--mute);font-size:.95em;margin:0 0 .6em}
.regcard{margin-top:.9em;max-width:560px}
.regcard h2{margin-top:0}
.fld{display:block;margin:.55em 0}
.fld span{display:block;font-weight:700;font-size:.9em;margin-bottom:.2em}
.fld input,.fld select{width:100%;font:inherit;font-size:1em;padding:.55em .8em;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:48px}
.fld input:focus,.fld select:focus{border-color:var(--lavD);outline:none;box-shadow:0 0 0 3px rgba(91,84,196,.15)}
.err{color:var(--bad);font-weight:500;min-height:1.2em;margin:.2em 0;font-size:.9em}
.linkbtn{border:0;background:none;color:var(--lavD);text-decoration:underline;font-weight:500;padding:0;font-size:inherit}
.devrow .btn small{font-weight:400;opacity:.75;margin-right:.3em}
a.tlink{color:var(--mute);text-decoration:none;border-bottom:1px dotted currentColor}
.hello{display:flex;justify-content:space-between;align-items:center;gap:.6em;flex-wrap:wrap;padding:.8em 1.1em}
.hello .linkbtn{font-size:.85em}
.title .steps{margin:.7em 0 .3em}
.title .step{padding:.55em .75em}
.title .step i{font-size:1.25em}
.lvh{margin:.6em 0 .2em}
.lvh small{font-size:.6em;color:var(--mute);font-weight:400}
.title .levels{margin:.4em 0 .7em}
.title .lvlcard{padding:.75em .9em}
footer.credit-foot{margin:1.2em 0 .4em}

.opts.done .opt.dim{display:none}
.page.answered .src:not(.open) .tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.page.answered .src:not(.open) .more{display:none}
.page.answered .src{cursor:pointer}
.page.answered .src:not(.open) .h:after{content:"הצג ▾";margin-inline-start:auto;font-size:.72em;color:var(--acc);font-weight:700}
.page.answered .co{display:none}
.page.answered.has-rv .pbody>.body{display:none}
.mxr:not(.me):not(.open) .mxi{display:none}
.mxr:not(.me) .mxh{cursor:pointer}
.mxr:not(.me) .mxh:after{content:" ▾ הצג";font-size:.75em;color:var(--acc);font-weight:700}
.mxr.open .mxh:after{content:" ▴"}
.mxc{gap:.45em}

.score{padding:.5em .9em;margin:.4em 0}
.score .big{font-size:1.5em}
.finalcard{margin-top:.8em}
.sumB h3,.sumA h3{margin:.4em 0 .3em}
@media (min-width:900px){
  .sumgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;align-items:start}
}
@media (min-width:1100px){
  body[data-scene=page] #stage{max-width:1240px}
  .page.twocol .pbody{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:1.4em;align-items:start}
  .page.twocol .pbody>*{grid-column:1}
  .page.twocol .pbody>.quiz{grid-column:2;grid-row:1 / span 12}
  .page.twocol .pbody>.srcs>.src:first-child{margin-top:0}
  .page.twocol .quiz .qtag{margin-top:0}
}

@media (max-width:700px){
  .title .steps{grid-template-columns:repeat(3,1fr);gap:.35em;margin:.55em 0 .2em}
  .title .step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.45em .3em;gap:.1em}
  .title .step i{font-size:1.2em}
  .title .step b{font-size:.8em;line-height:1.25}
  .title .step small{display:none}
  .title .levels{gap:.45em}
  .title .lvlcard{display:grid;grid-template-columns:auto 1fr;column-gap:.6em;align-items:center;padding:.55em .8em}
  .title .lvlcard .ic{grid-row:span 2;font-size:1.4em}
  .title .lvlcard small{font-size:.78em;line-height:1.35}
  .hello{padding:.6em .9em}
  .hello h2{font-size:1.2em}
  .lvh{font-size:1.1em}
  .otcard{padding:.7em .85em}
  .mapgrid{gap:.55em}
}

@media (max-width:700px){
  .otcard .L{width:1.9em;height:1.9em;font-size:1.3em;border-radius:13px}
  .otcard .pg{margin-top:.35em}
  .mypath{margin-top:.6em;padding:.6em .9em}
  .mypath h3{font-size:1em}
  body[data-scene=map] .lead{font-size:.88em}
}

@media (max-width:700px){ .page.answered.has-rv .qtag{display:none} .page.answered.has-rv .qq{font-size:.95em} }

body[data-scene=reg] #top .tbtn{display:none}
.reg{max-width:640px;margin:0 auto}
.reg .regcard{max-width:none}

/* ===== תא-שמע: brand, disclaimer, sugya picker ===== */
.brand b{display:flex;align-items:center;gap:.4em;flex-wrap:nowrap}
.slogan{font-weight:500;font-size:.72em;color:var(--mute);background:linear-gradient(90deg,#efeafe,#e2f3f8);border-radius:99px;padding:.1em .6em;white-space:nowrap}
.ibtn{border:0;background:none;color:var(--lavD);font-size:1em;padding:0 .15em;line-height:1;cursor:pointer;min-width:28px;min-height:28px}
.brandname{font-size:2em;margin:.05em 0 .2em;display:flex;align-items:center;gap:.4em;flex-wrap:wrap;background:linear-gradient(90deg,#4b3fc4,#1f8574);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandname .slogan{font-size:.42em;-webkit-text-fill-color:var(--mute);color:var(--mute);font-weight:600}
.disclaimer{display:flex;gap:.6em;align-items:flex-start;background:#fffaf0;border:1px solid #f1dfb8;border-radius:16px;padding:.6em .85em;margin:.7em 0 .2em;font-size:.86em;line-height:1.5;color:#5a4a26}
.disclaimer .ic{font-size:1.3em;line-height:1.1}
.disclaimer.small{font-size:.78em;margin-top:1em}
body:not(.in-sugya) #lvlBtn,body:not(.in-sugya) #nbBtn{display:none}
body[data-scene=reg] #fbBtn,body[data-scene=reg] #mapBtn{display:none}
.sggrid{display:grid;gap:.8em;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:.4em 0}
.sgcard{border:0;text-align:right;border-radius:22px;padding:1em 1.1em;color:#fff;display:flex;flex-direction:column;gap:.25em;box-shadow:0 8px 24px rgba(70,60,160,.22);background:linear-gradient(135deg,#5b54c4,#2f72ad);transition:transform .15s}
.sgcard:hover{transform:translateY(-2px)}
.sgcard.c-mint{background:linear-gradient(135deg,#1f8574,#2f72ad)}
.sgcard.c-rose{background:linear-gradient(135deg,#b4467a,#5b54c4)}
.sgcard .sgt{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.sgcard .sgt b{font-size:1.25em}
.part{display:inline-block;font-size:.62em;font-weight:700;background:rgba(255,255,255,.25);border-radius:99px;padding:.12em .65em;vertical-align:middle}
.sgcard small{opacity:.85}
.sgcard .d{font-size:.9em;opacity:.95}
.sgcard .st{font-size:.8em;background:rgba(255,255,255,.18);border-radius:10px;padding:.15em .5em;align-self:flex-start}
.sgcard .go{align-self:flex-end;font-weight:800;background:#fff;color:var(--lavD);border-radius:12px;padding:.3em .9em;margin-top:.3em}
.sgsoon{border:2px dashed var(--line);border-radius:22px;padding:1em;color:var(--mute);display:grid;place-items:center;text-align:center;font-size:.9em}
.sghead{margin-bottom:.4em}
.sghead h1{font-size:1.7em;margin:.15em 0 .1em}
.sghead h1 .part{background:var(--lav);color:var(--lavD);font-size:.5em}
.sghead .sub{color:var(--mute);font-size:.88em}
/* ===== own explanation ===== */
.ownbox{background:linear-gradient(135deg,#f4f1ff,#eef8f6);border:2px solid #d9d3fb;border-radius:18px;padding:.75em .9em;margin:.5em 0;animation:fadeUp .35s ease}
.ownbox .oh{font-size:1.02em}
.ownbox .oh small{color:var(--mute);font-weight:400}
.ownbox .op{margin:.25em 0 .45em;font-size:.92em;color:var(--mute)}
.ownbox textarea,.fbform textarea,.fbform select{width:100%;font:inherit;font-size:.95em;border:2px solid var(--line);border-radius:12px;padding:.5em .7em;background:#fff;resize:vertical;color:var(--ink)}
.ownbox textarea:focus,.fbform textarea:focus,.fbform select:focus{outline:none;border-color:var(--lavD)}
.ownbox .row{margin-top:.5em}
.ownshow{display:flex;flex-wrap:wrap;gap:.2em .5em;align-items:baseline;background:#f4f1ff;border-radius:12px;padding:.4em .75em;margin:.35em 0;font-size:.88em}
.ownshow small{color:var(--mute)}
/* ===== confidence ===== */
.opt.pend{border-color:var(--lavD);background:#f4f1ff;box-shadow:0 0 0 3px rgba(91,84,196,.15)}
.conf{display:flex;flex-wrap:wrap;gap:.4em;align-items:center;margin:.5em 0 .2em;padding:.5em .7em;background:#fff;border:2px dashed #cfc9f5;border-radius:14px}
.conf>span{font-weight:700;font-size:.9em;margin-left:.2em}
.conf button{border:1px solid var(--line);background:#f7f8fd;border-radius:99px;padding:.35em .85em;font-weight:600;font-size:.88em;min-height:40px}
.conf button:hover{background:var(--lav);border-color:var(--lavD)}
.conf.nudge{animation:pop .35s ease}
.cnote{margin-top:.35em;font-size:.88em;opacity:.9}
/* ===== feedback ===== */

.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:1em;pointer-events:none}
.modal.open{display:flex}
.mbox{pointer-events:auto;background:#fff;border-radius:22px;box-shadow:0 20px 60px rgba(20,24,60,.3);padding:1em 1.2em;width:min(560px,100%);max-height:calc(100dvh - 2em);overflow:auto;animation:fadeUp .25s ease}
.mbox h3{margin:.1em 0 .4em}
.mbox .hd{display:flex;justify-content:space-between;align-items:center}
.mbox .x{border:0;background:#f1f3fa;border-radius:10px;width:40px;height:40px;font-size:1em}
#scrim.on{z-index:55}
.fbform .fld{margin:.4em 0}
.fbform .fld>span{display:block;font-weight:700;font-size:.92em;margin-bottom:.2em}
.fbform select{margin-bottom:.3em}
.fbintro{margin:.1em 0 .3em;font-size:.88em}
.stars{display:flex;gap:.2em;direction:ltr;justify-content:flex-end}
.star{border:0;background:none;font-size:1.6em;color:#d5d9ea;padding:0 .1em;min-width:40px;min-height:40px;line-height:1}
.star.on{color:#f2b01e}
.fbcard{padding:.8em 1em}
.fbthanks{text-align:center;padding:1em}
.fbthanks .big{font-size:2.4em}
.fbthanks .row{justify-content:center}
@media (min-width:900px){.fbform.inline .fbgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 1em}}
@media (max-width:700px){
  .slogan{font-size:.62em;padding:.05em .45em}
  .brandname{font-size:1.6em}
  .sggrid{grid-template-columns:1fr}
  .disclaimer{font-size:.8em;padding:.5em .7em}
  .fbform textarea{font-size:.9em}
  .fbform .fld{margin:.25em 0}
  .conf button{padding:.3em .7em}
}
@media (max-width:420px){ body.in-sugya .brand .slogan{display:none} }

@media (max-width:700px){ .conf{gap:.25em;padding:.4em .5em} .conf>span{flex-basis:100%;font-size:.85em} .conf button{font-size:.82em;padding:.25em .65em;min-height:36px} }

.ownshow{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.3em .7em;margin:.25em 0}
.conf{position:sticky;bottom:calc(var(--navh) + 8px);z-index:5;box-shadow:0 8px 28px rgba(60,60,140,.18);border-style:solid;border-color:#bdb5f3}
.cnote{font-size:.82em}
@media (max-width:700px){ .ownshow small{display:none} }

.ours{display:inline-block;font-size:.8em;font-weight:700;color:#8a5a00;background:#fff4dc;border:1px dashed #e0b45c;border-radius:8px;padding:0 .45em;margin:0 .2em}

/* opening (registration) screen has no page nav: no need to reserve its height */
body[data-scene=reg] #stage{padding-bottom:max(.3em, env(safe-area-inset-bottom))}

/* ===== teacher preview (opened from the teacher area) ===== */
.pvonly,.brand .pvtag{display:none}
body.preview #top .pvonly{display:inline-flex}
body.preview #fbBtn,body.preview .brand #sgTitle{display:none}
body.preview .brand .pvtag{display:flex;align-items:center;gap:.4em;align-self:flex-start;max-width:100%;margin-top:.05em;background:#fff1d6;color:#8a4500;border:0;box-shadow:inset 0 0 0 1px #f3c77a;border-radius:99px;padding:0 .55em;line-height:1.3;font-weight:700;font-size:.66em;white-space:nowrap;overflow:visible}
.pvtag .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pvtag .pvx{flex:none;border:0;border-inline-start:1px solid #f3c77a;background:none;padding:0;padding-inline-start:.45em;line-height:inherit;font:inherit;color:#b42318;text-decoration:underline;cursor:pointer}
@media (max-width:700px){ body.preview #mapBtn{display:none} body.preview .brand .pvtag{font-size:.62em} }
body.preview #top{box-shadow:inset 0 -3px 0 #f3c77a}
body.preview #nav .mid{cursor:pointer}
.jumpbox{display:flex;flex-direction:column;overflow:hidden;width:min(620px,100%)}
.jumpbox .jlv{gap:.4em;flex-wrap:nowrap;margin-bottom:.4em}
.jumpbox .jlv .btn{flex:1;min-height:38px;padding:.3em .5em;font-size:.85em;white-space:nowrap}
.jumpbox .jlets{gap:.35em;flex-wrap:wrap;margin-bottom:.4em}
.jlet{border:1px solid var(--line);background:#f6f5ff;border-radius:10px;min-width:2.6em;min-height:36px;font-weight:700;font-size:.95em}
.jlist{overflow:auto;flex:1;min-height:0;border-top:1px solid var(--line);padding-top:.3em}
.jg{margin-bottom:.5em}
.jh{position:sticky;top:0;background:#fff;font-weight:700;font-size:.9em;padding:.3em 0;color:#4d3fb8}
.jg ol{list-style:none;margin:0;padding:0}
.jp{display:flex;align-items:center;gap:.45em;width:100%;text-align:right;border:0;background:none;border-radius:10px;padding:.42em .5em;font-size:.88em;min-height:38px}
.jp:hover{background:#f3f2fb}
.jp.on{background:#ece9ff;font-weight:700}
.jp .n{color:var(--mute);min-width:1.6em;font-size:.85em}
.jp .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== v12: the four-part skeleton, folded sources, להרחבה, lens bar, 📌 interactive summaries ===== */
.stepper{list-style:none;margin:.25em 0 .1em;padding:0;display:flex;gap:4px;flex-wrap:nowrap}
.stepper li{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.25em;font-size:.72em;font-weight:600;color:var(--mute);background:#f1f3fa;border-radius:99px;padding:.18em .35em;white-space:nowrap;overflow:hidden}
.stepper li i{font-style:normal;font-weight:800}
.stepper li span{overflow:hidden;text-overflow:ellipsis}
.stepper li.past{background:var(--accBg);color:var(--acc)}
.stepper li.on{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(40,48,100,.18)}
.stepper li.off{opacity:.38}
.src.folded{padding:.4em .9em}
.src.folded>summary{list-style:none;cursor:pointer;margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.3em .6em}
.src.folded>summary::-webkit-details-marker{display:none}
.src.folded .unf{font-size:.75em;color:var(--acc);font-weight:700;margin-inline-start:auto}
.src.folded[open] .unf{visibility:hidden}
.src.folded[open] .tx{margin-top:.3em}
.co.more{display:block;background:#f6f7fc;border:1.5px dashed #cfd5ea;padding:.35em .8em}
.co.more>summary{cursor:pointer;list-style:none;display:flex;gap:.45em;align-items:center;font-size:.9em;color:var(--acc)}
.co.more>summary::-webkit-details-marker{display:none}
.co.more>summary .ic{font-size:.95em}
.co.more[open]>summary{margin-bottom:.3em}
.co.more .mo{font-size:.93em}
.co.more .mo p{margin:.2em 0 .4em}
.lensbar{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .7em;background:var(--accBg);border-radius:12px;padding:.3em .8em;font-size:.88em;margin:.2em 0 .4em}
.lensbar .lbo{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.4em}
.btn.sm{padding:.38em .8em;font-size:.86em;border-radius:11px}
/* summary */
.sumx{display:flex;flex-direction:column;gap:.45em}
.sq{display:flex;gap:.55em;align-items:flex-start;background:linear-gradient(135deg,#fff8e6,#fff);border:1.5px solid #f0dfae;border-radius:16px;padding:.5em .8em}
.sq .pin{font-size:1.25em;line-height:1.3}
.sq small{display:block;color:var(--mute);font-size:.72em;font-weight:700}
.sq b{font-weight:600;font-size:.93em;line-height:1.45}
.chk{background:#f1f3fb;border-radius:14px;padding:.45em .7em}
.chk .cq{font-size:.9em;margin-bottom:.35em}
.chk .cq small{display:block;color:var(--acc);font-weight:700;font-size:.78em}
.chk .ca{display:flex;flex-wrap:wrap;gap:.4em}
.chkdone{font-size:.85em;color:var(--mute)}
.scards{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:.6em;overflow-x:auto;scroll-snap-type:x mandatory;padding:.15em .1em .35em;scrollbar-width:thin}
.scard{scroll-snap-align:center;background:#fff;border:2px solid var(--line);border-radius:16px;padding:.5em .6em;display:flex;flex-direction:column;gap:.35em;transition:border-color .3s}
.scard.me{border-color:var(--acc);box-shadow:0 4px 14px rgba(40,48,100,.12)}
.scard.flash{animation:flash 1s ease}
@keyframes flash{0%{background:#fff6cc}100%{background:#fff}}
.scard header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .5em}
.scard header small{flex-basis:100%;color:var(--mute);font-size:.7em;font-weight:700}
.scard header b{font-size:1em;color:var(--acc)}
.scard .mine{font-size:.72em;background:var(--accBg);color:var(--acc);border-radius:99px;padding:.05em .55em;font-weight:700}
.scard .cells{display:flex;flex-direction:column;gap:.3em}
.cell{display:block;width:100%;text-align:right;border:0;border-radius:11px;background:#f4f5fb;padding:.3em .55em;font:inherit;color:var(--ink);cursor:pointer}
.cell .cl{display:block;font-size:.7em;font-weight:700;color:var(--mute)}
.cell .cv{display:block;font-size:.84em;line-height:1.4}
.cell:not(.open) .cv{color:var(--acc);font-weight:600}
.cell:not(.open){background:repeating-linear-gradient(135deg,#f4f5fb 0 10px,#eef0f9 10px 20px)}
.cell.open{background:#fbfbfe;border:1px solid #eceef7;cursor:default}
.cell.empty{opacity:.55}
.sdots{display:flex;justify-content:center;gap:6px}
.sdot{width:9px;height:9px;border-radius:50%;border:0;background:#d5d9ea;padding:0}
.sbar{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.scount{font-size:.82em;color:var(--mute)}
.sdeep{font-size:.84em;background:#f1f3fb;border-radius:12px;padding:.35em .7em}
.sumpath{display:flex;flex-wrap:wrap;gap:.25em .9em;font-size:.8em;color:var(--mute);border-top:1px solid var(--line);padding-top:.35em}
.sumpath .sacts2{display:inline-flex;gap:.7em}
.finalline{background:var(--goodBg);border-radius:12px;padding:.4em .7em;font-size:.88em}
@media (min-width:900px){
  .scards{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));overflow:visible}
  .sdots{display:none}
}
.ssum{background:linear-gradient(135deg,#fff8e6,#fff);border:1.5px solid #f0dfae;border-radius:16px;padding:.5em .9em;margin:.2em 0 .6em}
.ssum h3{margin:.1em 0 .3em;font-size:1em}
.ssum ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25em}
.ssum li{font-size:.86em;line-height:1.45;display:flex;gap:.45em}
.ssum li .L{flex:0 0 auto;background:var(--lav);color:var(--lavD);font-weight:800;border-radius:7px;padding:0 .4em;height:1.45em}
/* notebook: tabs + summaries */
.nbtabs{display:flex;gap:.3em;margin:0 0 .6em;position:sticky;top:0;background:#fff;padding:.2em 0;z-index:1}
.nbtabs button{flex:1;border:0;border-radius:10px;background:#f1f2f8;padding:.45em;font:inherit;font-size:.88em;font-weight:600;color:var(--mute)}
.nbtabs button.on{background:var(--lavD);color:#fff}
.nbsum{border:1px solid var(--line);border-radius:14px;padding:.45em .7em;margin:.45em 0;font-size:.88em}
.nbsum>summary{cursor:pointer}
.nbsum.locked{color:var(--mute);display:flex;flex-wrap:wrap;gap:.2em .5em}
.nbsum.locked small{margin-inline-start:auto}
.nbsum .sq2{margin:.4em 0;color:var(--mute);font-size:.92em}
.stbl{width:100%;border-collapse:collapse;font-size:.85em;margin:.3em 0}
.stbl th,.stbl td{border:1px solid #e1e4f0;padding:.3em .35em;vertical-align:top;text-align:right;line-height:1.35}
.stbl thead th{background:#f1f3fb;font-size:.9em}
.stbl tr.sg th{background:#f7f6ff;color:var(--lavD);font-size:.85em}
.stbl tr.me th,.stbl tr.me td{background:#fbfaff}
.stbl tbody th{font-weight:700;white-space:normal;min-width:4.5em}
.stbl th small{font-weight:500;color:var(--lavD)}
.stbl .em{color:#aab}
.nbsum .go{font-size:.85em;margin-top:.2em}
.nbprint{margin:.6em 0}

.stepper .sh{display:none}
@media (max-width:700px){.stepper .lg{display:none}.stepper .sh{display:inline}.stepper li{font-size:.7em;padding:.2em .25em}}
.sq b{font-size:.86em}
.sgroups{display:flex;gap:.35em;flex-wrap:wrap}
.sgroups:empty{display:none}
.sgroups button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:.22em .8em;font:inherit;font-size:.82em;font-weight:600;color:var(--mute)}
.sgroups button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.shead{display:none}
.scard .cells{display:grid;grid-template-columns:1fr 1fr;gap:.3em}
.cell .cv{font-size:.8em}
.cell:not(.open) .cv{font-size:.76em}
@media (max-width:899px){ .scard header small{display:none} }
@media (min-width:900px){
  .scards{display:flex;flex-direction:column;gap:.35em;overflow:visible;padding:0}
  .scard{display:grid;grid-template-columns:10.5em repeat(4,minmax(0,1fr));gap:.35em;padding:.3em .4em;border-width:1.5px;border-radius:12px}
  .scard header{flex-direction:column;align-items:flex-start;justify-content:center}
  .scard header small{display:none}
  .scard .cells{display:contents}
  .cell .cl{display:none}
  .cell{min-height:2.4em}
  .shead{display:grid;grid-template-columns:10.5em repeat(4,minmax(0,1fr));gap:.35em;padding:0 .4em;font-size:.78em;font-weight:700;color:var(--mute)}
}

.sumpage .phead h2{font-size:1.08em;margin:.15em 0 .1em}
.sumpage .phead .prog{margin:.2em 0 .25em}
.sumx{gap:.35em}
.sq{padding:.35em .7em;gap:.4em}
.sq small{display:none}
.sq .pin{font-size:1em}
.sq b{font-size:.82em;line-height:1.42}
.chk{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .6em;padding:.3em .6em}
.chk .cq{flex:1 1 14em;margin:0;font-size:.84em}
.chk .ca{gap:.3em}
.chk .btn.sm{padding:.28em .7em;font-size:.8em}
.scard{padding:.4em .5em;gap:.25em}
.scard .cells{gap:.25em}
.cell{padding:.22em .45em}
.cell .cv{font-size:.76em;line-height:1.36}
.cell:not(.open) .cv{font-size:.72em}
.sdots{margin:-.1em 0}
.sdeep{font-size:.78em;padding:.28em .6em}
.sumpath{font-size:.74em;padding-top:.25em}
.sbar .btn.sm{padding:.3em .75em;font-size:.82em}
@media (min-width:900px){
  .scard,.shead{grid-template-columns:8.5em minmax(0,1.15fr) minmax(0,.75fr) minmax(0,1.4fr) minmax(0,1fr)}
  .cell{min-height:2em}
  .scard header b{font-size:.92em}
}
.ssum{padding:.4em .8em;margin:.1em 0 .4em}
.ssum li{font-size:.8em}

.sbar{gap:.3em .8em}
.sbar .sumpath{border:0;padding:0;flex:1 1 auto}
.cell.open .cv{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cell.open.full .cv{display:block}
.cell.open{cursor:pointer}
@media (min-width:900px){.cell.open .cv{-webkit-line-clamp:4}.cell .cv{font-size:.74em}}

@media (max-width:700px){.sumpage .phead h2{display:none}.scard .cells{gap:.2em}.cell .cl{font-size:.66em}}

.sumpage.page .phead h2{display:none}
.sq small{display:block;color:var(--acc);font-size:.7em;font-weight:800;margin-bottom:.05em}
.sdeep{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:right;border:0;font:inherit;font-size:.78em;color:var(--ink);width:100%;cursor:pointer}
.sdeep.full{display:block}
@media (max-width:700px){.chk .cq{font-size:.8em}.chk .btn.sm{font-size:.76em;padding:.25em .6em}.cell.open .cv{-webkit-line-clamp:5}}

@media (min-width:900px){.cell.open .cv{-webkit-line-clamp:3}}
@media (max-width:700px){.cell.open .cv{-webkit-line-clamp:4}}

.prog .stepper{flex:1;margin:0;min-width:0}
.prog .stepper li{padding:.15em .3em}
@media (max-width:700px){.prog .stepper li:not(.on) span{display:none}.prog .stepper li:not(.on){flex:0 0 auto;min-width:1.7em}.prog .stepper li.on{flex:1 1 auto}.prog .ptxt{font-size:.72em;white-space:nowrap}}
.qbody{margin:.2em 0}

.page.answered .fbx .co{display:flex}
.page.answered .fbx .co.more{display:block}
.page.answered .lensbar{display:none}
.prog .stepper li{font-size:.66em;line-height:1.25;padding:.08em .3em}
@media (max-width:700px){.prog .stepper li{font-size:.64em}}
.qbody .qsrcs .src{margin:.35em 0}
@media (min-width:900px){.cell{min-height:1.7em}}

.src.folded .h:after{content:none!important}
@media (max-width:700px){.page.answered .src:not(.open) .tx{display:none}.page.answered .src:not(.open) .h{margin-bottom:0}}
.co.more blockquote.q{font-family:'Frank Ruhl Libre',serif;margin:.3em 0;padding:.3em .6em;background:#fffdf7;border-right:4px solid var(--acc);border-radius:8px}

@media (min-width:1100px){.page.twocol.answered .pbody{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}}

.src.folded{padding:.3em .8em;margin:.35em 0}
.src.folded>summary .srcgo{position:static;transform:none;margin-inline-start:.3em;order:3}

#nb{z-index:58}

.fbwrap>summary{list-style:none;display:block;text-align:center;margin:.3em 0 .6em;white-space:normal;line-height:1.35}
.fbwrap>summary::-webkit-details-marker{display:none}
.fbwrap[open]>summary{opacity:.75}

/* hotfix 2026-11-03 (live a3311603): notebook list scrolls inside its panel */
#nb{overflow:hidden;max-height:100dvh;overscroll-behavior:contain}
#nb .hd{flex:0 0 auto}
#nbList{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.mbox,.jlist{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
/* copyright (2026-11-03) */
.mbox .copy{margin-top:.8em;padding:.6em .75em;border-radius:10px;background:#f6f5fb;border:1px solid #e4e2f3;font-size:.8em;line-height:1.5;color:#4a4870}
.mbox .copy b{color:#2b2670}

/* ===== teacher notes (teacher preview only) ===== */
.notebox{width:min(560px,100%);display:flex;flex-direction:column;max-height:calc(100dvh - 2em);overflow:auto}
.notebox .ntctx{margin:.1em 0 .5em;display:flex;flex-direction:column;gap:.15em;font-size:.92em}
.notebox .ntctx small{color:#6b6450;font-size:.86em;line-height:1.35}
.notebox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;line-height:1.5;border:1px solid var(--line);border-radius:12px;padding:.55em .7em;resize:vertical;min-height:6.5em}
.notebox .ntrow{align-items:center;gap:.7em;margin-top:.55em}
.notebox .ntprev h4{margin:.8em 0 .3em;font-size:.88em;color:#4d3fb8}
.notebox .ntprev ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35em}
.notebox .ntprev li{background:#fbfaf6;border:1px solid #eee9da;border-radius:10px;padding:.35em .55em;font-size:.88em;white-space:pre-wrap}
.notebox .ntprev li.done{opacity:.6}
.notebox .ntprev li small{color:#6b6450;margin-inline-end:.3em}
body.preview #noteBtn{background:#fff1d6;box-shadow:inset 0 0 0 1px #f3c77a}
@media (max-width:700px){ body.preview #noteBtn .lbl{display:inline} }

/* ===== round 6: ✏️ teacher text editing (teacher preview only) ===== */
body.preview #editBtn[aria-pressed="true"]{background:#5b54c4;color:#fff;box-shadow:none}
body.editing [data-ef]{outline:1.5px dashed rgba(91,84,196,.55);outline-offset:2px;border-radius:3px;cursor:text;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body.editing [data-ef]:hover{background:rgba(91,84,196,.07)}
body.editing #nav{bottom:44px}
.efbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:.6em;justify-content:space-between;background:#2d2870;color:#fff;padding:.45em .8em calc(.45em + env(safe-area-inset-bottom));font-size:.84em;height:44px;box-sizing:border-box}
.efbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.efbar .linkbtn{color:#fff;text-decoration:underline;white-space:nowrap}
.efbar .btn.small{background:#fff;color:#2d2870;white-space:nowrap}
@media (max-width:480px){ .efbar span b~*,.efbar span{font-size:.92em} .efbar span{max-width:34%} }
.efbox{position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:78vh;overflow:auto;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(20,18,60,.25);padding:.9em 1em calc(1em + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .18s ease;max-width:720px;margin:0 auto}
.efbox.on{transform:none}
.efbox .hd{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.efbox .hd h3{margin:0;font-size:1.02em}
.efbox .x{background:none;border:0;font-size:1.2em;cursor:pointer;padding:.2em .4em}
.efbox .efwhere{margin:.15em 0 .5em;color:#6a6680;font-size:.82em}
.efbox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.55;border:1.5px solid #c9c4f0;border-radius:10px;padding:.55em .7em;resize:vertical}
.efbox textarea:focus{outline:none;border-color:#5b54c4;box-shadow:0 0 0 3px rgba(91,84,196,.15)}
.efbox .efhint{margin:.3em 0 0;color:#6a6680;font-size:.78em}
.efbox .eforig{margin:.5em 0 0;font-size:.85em;color:#555}
.efbox .eforig p{margin:.3em 0 0;background:#f6f5fb;border-radius:8px;padding:.45em .6em;white-space:pre-wrap}
.efbox .efwarn{margin:.45em 0 0;color:#a14a00;font-size:.85em;font-weight:500}
.efbox .efwarn:empty{display:none}
.efbox .efrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-top:.7em}
.efbox .eflist{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.efbox .eflist button{display:block;width:100%;text-align:right;background:#f7f6fd;border:1px solid #e3e0f6;border-radius:10px;padding:.45em .65em;font:inherit;cursor:pointer}
.efbox .eflist small{display:block;color:#5b54c4;font-size:.76em;font-weight:700}
.efbox .eflist span{display:block;font-size:.88em;line-height:1.45}
.efbox .efed{color:#a14a00}
.pvblock .card{max-width:520px;margin:2em auto}
.pvblock .row{display:flex;flex-wrap:wrap;gap:.6em;margin-top:.8em}
@media (max-width:480px){ body.preview #noteBtn .lbl,body.preview #editBtn .lbl,body.preview #jumpBtn .lbl{display:none} body.preview #top .tbtn{padding-inline:.5em} }
.brand .pvtag .ts{display:none}
@media (max-width:480px){ body.preview .brand .pvtag .t{display:none} body.preview .brand .pvtag .ts{display:inline} }

/* platform (phase A): class code entry, a teacher's copy credit, no ✏️ on a package the teacher doesn't own */
.codeask{margin:.1em 0 .6em;font-size:.92em}
.codeask summary{cursor:pointer;color:var(--lavD)}
.codeask .row{margin-top:.4em;gap:.4em;flex-wrap:nowrap}
.codeask input{flex:1;min-width:0;font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:.45em .7em;letter-spacing:.08em}
.codecls{background:#f3f2ff;border:1.5px solid #d9d6ff;border-radius:12px;padding:.55em .8em;margin:.2em 0 .7em;line-height:1.5}
.codecls small{color:var(--mute)}
.sgcard .crd{display:block;font-size:.85em;font-weight:600;color:#fff;opacity:.9;margin-top:.15em}
.sgcredit{font-size:.85em;color:var(--lavD);margin-top:.25em}
body.noedit #editBtn{display:none}
body.preview.noedit #editBtn{display:none!important}

/* a pending teacher in student view (Nov 4) */
.svnote{margin:.2em 0 .6em;background:#fff8e6;border:1px solid #f3d58a;color:#6b4a00;border-radius:12px;padding:.5em .8em;font-size:.9em;line-height:1.45}

/* personal code (Nov 4) */
.pinrow{gap:.45em;flex-wrap:nowrap;align-items:center}
input.pin{width:6.2em;flex:0 0 auto;font:inherit;font-size:1.15em;text-align:center;letter-spacing:.35em;border:1.5px solid var(--line);border-radius:12px;padding:.4em .5em;direction:ltr}
.pinhint{margin:.1em 0 .6em;font-size:.88em;color:var(--mute,#666)}
.pinhint b{color:var(--lavD,#4a3fb0)}
.pinbig{font-size:1.15em;letter-spacing:.2em}
.pinask{border:1.5px dashed var(--lavD,#5b54c4);border-radius:14px;padding:.6em .8em;margin:.2em 0 .6em;background:rgba(91,84,196,.06)}
.pinask .askrow p{margin:.1em 0 .4em}
.pinask .askrow .row{gap:.45em;flex-wrap:wrap;align-items:center;margin-bottom:.5em}

/* optional (starred) source badge, Nov 5 */
.src .optb{display:inline-block;margin-inline-start:.4em;padding:0 .45em;border-radius:999px;background:#fff4d6;color:#8a5a00;font-size:.78em;font-weight:600;white-space:nowrap}

/* feedback call-to-action (Nov 5, his ask: prominent and inviting) */
.tbtn.fbcta{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 2px 8px rgba(234,88,12,.35);padding:.38em .8em;font-size:.82em}
.tbtn.fbcta .lbl2{display:inline}
.tbtn.fbcta:hover{filter:brightness(1.05);transform:translateY(-1px)}
@keyframes fbnudge{0%,100%{transform:none}50%{transform:scale(1.07)}}
.tbtn.fbcta{animation:fbnudge 1.6s ease-in-out 2.5s 2}
.fblead{margin:.2em 0 .8em;color:#5b4a2e;background:#fff7e8;border-radius:10px;padding:.55em .75em;font-size:.95em;line-height:1.5}

/* vision intro (Nov 5) */
.scene.title .vision{max-width:46em;margin:.4em auto .7em;font-size:1em;line-height:1.65;background:#f6f3ff;border-radius:12px;padding:.7em .9em}
.steps.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.steps.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}