:root{
    --bg:#0b1220; --bg2:#0f1a2e; --card:#132038; --ink:#e8eefb; --muted:#9fb2d4;
    --accent:#22d3ee; --accent2:#a78bfa; --good:#34d399; --warn:#fbbf24; --danger:#f87171;
    --line:#25324d; --code:#0a1020;
    --fs: clamp(16px, 1.4vw, 22px);
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    background:radial-gradient(1200px 800px at 80% -10%, #16233f 0%, var(--bg) 55%);
    color:var(--ink); font:var(--fs)/1.5 "Segoe UI", "Assistant","Rubik", system-ui, Arial, sans-serif;
    overflow:hidden;
  }
  body.lang-he .en{display:none}
  body.lang-en .he{display:none}
  code,pre,.mono{font-family:"JetBrains Mono","Fira Code","Consolas",ui-monospace,monospace}

  /* ---- stage / slides ---- */
  .stage{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:3.2rem 3rem 4.2rem;}
  .slide{display:none; width:min(1180px,96vw); max-height:100%; overflow:auto; animation:fade .35s ease}
  .slide.active{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}
  .slide::-webkit-scrollbar{width:8px}
  .slide::-webkit-scrollbar-thumb{background:#2a3a5c;border-radius:8px}

  h1{font-size:2.4em; line-height:1.15; margin:.1em 0 .3em}
  h2{font-size:1.7em; margin:0 0 .6em; display:flex; align-items:center; gap:.5rem}
  h2 .num{font-size:.55em; color:#08131f; background:var(--accent); border-radius:.5rem; padding:.15em .55em; font-weight:700}
  h3{font-size:1.15em; margin:1em 0 .4em; color:var(--accent)}
  p{margin:.5em 0}
  ul{margin:.4em 0; padding-inline-start:1.3em}
  li{margin:.35em 0}
  .lead{color:var(--muted); font-size:1.1em}
  .accent{color:var(--accent)} .a2{color:var(--accent2)} .warnc{color:var(--warn)} .good{color:var(--good)} .danger{color:var(--danger)}
  .pill{display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.15em .7em; font-size:.8em; color:var(--muted)}
  .grid{display:grid; gap:1rem}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr 1fr}
  @media (max-width:800px){.g2,.g3{grid-template-columns:1fr}}
  .card{background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1rem 1.15rem}
  .card.tint{background:linear-gradient(180deg,#14233f,#101a30)}
  .kbd{background:#0a1224;border:1px solid var(--line);border-bottom-width:3px;border-radius:.4em;padding:.05em .5em;font-size:.85em}

  .level{border-inline-start:4px solid var(--accent); padding-inline-start:.8rem}
  .lv1{border-color:var(--accent)} .lv2{border-color:var(--accent2)} .lv3{border-color:var(--warn)} .lv4{border-color:var(--good)}

  /* ---- code blocks ---- */
  .codewrap{position:relative; margin:.6em 0}
  pre{background:var(--code); border:1px solid var(--line); border-radius:.8rem; padding:2.6rem 1.1rem 1rem; overflow:auto; font-size:.82em; line-height:1.55; direction:ltr; text-align:left}
  svg text{direction:ltr; unicode-bidi:embed}
  pre .cm{color:#6b84b0} pre .kw{color:#f0a35e} pre .fn{color:#7dd3fc} pre .num{color:#a5f3b0} pre .str{color:#eab6ff}
  pre .hl{background:rgba(34,211,238,.12); border-radius:.25em; display:inline-block; padding:0 .25em}
  .copybtn{position:absolute; inset-inline-end:.6rem; top:.6rem; background:#1b2a49; color:var(--ink); border:1px solid var(--line); border-radius:.5rem; padding:.25em .7em; font-size:.75em; cursor:pointer}
  .copybtn:hover{background:#243a63} .copybtn:active{transform:translateY(1px)}
  .copybtn.ok{background:var(--good); color:#062}

  /* ---- controls ---- */
  input[type=range]{width:100%; accent-color:var(--accent)}
  button.demo{background:var(--accent); color:#062330; border:0; border-radius:.6rem; padding:.5em 1em; font-weight:700; cursor:pointer; font-family:inherit}
  button.demo:hover{filter:brightness(1.08)} button.demo:active{transform:translateY(1px)}
  button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .readout{font-family:ui-monospace,monospace; font-size:1.05em}
  .big{font-size:1.6em; font-weight:700}

  /* ---- nav ---- */
  .topbar{position:fixed; inset-inline:0; top:0; height:2.7rem; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; background:linear-gradient(180deg,rgba(11,18,32,.95),rgba(11,18,32,0)); z-index:20}
  .brand{font-weight:700; letter-spacing:.02em}
  .brand .dot{color:var(--accent)}
  .navbtns{position:fixed; inset-inline:0; bottom:0; height:3.4rem; display:flex; align-items:center; justify-content:center; gap:1rem; z-index:20; background:linear-gradient(0deg,rgba(11,18,32,.95),rgba(11,18,32,0))}
  .navbtns button{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:.6rem; padding:.4em .9em; cursor:pointer; font-family:inherit; font-size:.9em}
  .navbtns button:hover{border-color:var(--accent)}
  .counter{color:var(--muted); min-width:5.5rem; text-align:center; font-variant-numeric:tabular-nums}
  .dots{position:fixed; inset-inline-end:.7rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.4rem; z-index:20}
  .dots i{width:.55rem; height:.55rem; border-radius:50%; background:#2b3a5a; cursor:pointer; display:block}
  .dots i.on{background:var(--accent)}
  .langtoggle{background:#1b2a49;color:var(--ink);border:1px solid var(--line);border-radius:.5rem;padding:.25em .8em;cursor:pointer;font-family:inherit;font-size:.85em}
  .progress{position:fixed; top:0; inset-inline-start:0; height:3px; background:var(--accent); width:0; z-index:30; transition:width .3s}

  svg{max-width:100%}
  .tag{font-size:.72em; color:var(--muted)}
  a.dl{color:var(--accent); text-decoration:underline dotted; text-underline-offset:.2em}
  a.dl:hover{text-decoration-style:solid}
  a.dl::after{content:" ⬇"; font-size:.85em}
  .note{background:#101a30;border:1px dashed var(--line);border-radius:.7rem;padding:.6em .9em;color:var(--muted);font-size:.9em}
  .note.danger{border-color:#5a2730;color:#f3b4b4}
  table.cmp{width:100%; border-collapse:collapse; font-size:.82em; margin:.4em 0}
  table.cmp th,table.cmp td{border:1px solid var(--line); padding:.45em .6em; text-align:center}
  table.cmp th{background:#16233f; color:var(--ink)}
  table.cmp td:first-child,table.cmp th:first-child{text-align:start; color:var(--muted)}
  table.cmp tr:nth-child(even) td{background:#101a30}

  /* ---- lesson-2 extras ---- */
  .readbig{font-family:ui-monospace,monospace; font-size:2.2em; font-weight:700; color:var(--accent)}
  .scene{border-radius:.8rem; border:1px solid var(--line); transition:background .25s}
  .se7 .seg{fill:#16233f; transition:fill .12s, filter .12s}
  .se7 .seg.on{fill:var(--accent); filter:drop-shadow(0 0 4px rgba(34,211,238,.7))}
  .serialbox{background:#05080f;border:1px solid var(--line);border-radius:.6rem;padding:.5rem .7rem;font-family:ui-monospace,monospace;font-size:.82em;text-align:left;direction:ltr;height:7.5em;overflow:hidden;color:#9fe8c8}
  .serialbox .t{color:#5a7fb0}
  .ledbulb{transition:fill .08s, filter .08s}
  .fork{display:flex;gap:.6rem;align-items:stretch;margin:.4rem 0}
  .fork .arm{flex:1;border:1px solid var(--line);border-radius:.7rem;padding:.5em .7em;background:#101a30;transition:.2s;opacity:.45}
  .fork .arm.on{opacity:1;border-color:var(--accent);background:#13233f}
  .fork .arm.t.on{border-color:var(--good);background:#10251c}
  .fork .arm.f.on{border-color:var(--accent2);background:#171333}
  .big-emoji{font-size:1.5em}

/* Lesson 3: diagrams, accessible navigation and mobile layout */
a{color:var(--accent)} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--warn);outline-offset:3px}
.slide[hidden]{display:none!important}.slide.active{display:block}.stage{padding-top:4rem}.topbar{height:3.3rem;background:var(--bg);gap:.6rem}.topbar .tools{display:flex;gap:.4rem;align-items:center}.topbar select{max-width:32vw;background:var(--card);color:var(--ink);padding:.3rem;border:1px solid var(--line);border-radius:.4rem;font:inherit;font-size:.72em}
.journey,.system-map{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0}.journey span,.system-map>div{background:var(--card);border:1px solid var(--line);padding:1rem;border-radius:.7rem}.journey{direction:ltr}.system-map{direction:ltr}.system-map small{display:block;color:var(--muted);font-size:.7em;margin-top:.3em}.note{margin-top:.8rem}.pin-map>div{display:grid;grid-template-columns:1fr 2rem 2fr;border-bottom:1px solid var(--line);padding:.35rem;gap:.5rem}.power-map{display:grid;gap:.6rem;background:var(--card);border:1px solid var(--line);padding:1rem;border-radius:.8rem;margin-bottom:1rem}.demo-controls{display:flex;flex-wrap:wrap;gap:.45rem}.demo-controls button[aria-pressed=true]{background:var(--accent);color:#062330}.demo-controls button{font-size:.76em}#bridge-svg{display:block;width:100%;height:310px}#bridge-svg text{fill:var(--ink);font:15px "Segoe UI",Arial,sans-serif}#bridge-status{min-height:2em;text-align:center}.motor-cutaway{width:100%;display:block}.motor-cutaway text{fill:var(--ink);font:18px "Segoe UI",Arial,sans-serif;text-anchor:middle;dominant-baseline:middle}.check{display:flex;gap:.5rem;align-items:center;margin:.7rem 0}#pwm-svg{width:100%;height:125px;display:block}#car-svg{width:100%;display:block}.logic-grid{font-size:.85em}.logic-row{display:grid;grid-template-columns:repeat(3,1fr) 2fr;gap:.5rem;padding:.55rem;border-bottom:1px solid var(--line)}.logic-row.head{color:var(--accent);font-weight:700}.dots{max-height:65vh;overflow:auto}.dots button{display:block;width:9px;height:9px;min-height:9px;border:0;border-radius:50%;background:var(--line);padding:0}.dots button.on{background:var(--accent)}.navbtns button:disabled{opacity:.35;cursor:default}.brand{white-space:nowrap}.codewrap pre{white-space:pre;font-size:.75em}.version-tag{font-size:.65em;color:var(--muted)}
@media(max-width:650px){.stage{padding:6.7rem 1rem 4.4rem}.topbar{height:auto;min-height:5.6rem;flex-wrap:wrap;padding:.5rem 1rem}.topbar .tools{flex:1;justify-content:flex-end;flex-wrap:wrap}.topbar select{max-width:100%;width:100%;order:3}.dots{display:none}.slide{width:100%}h1{font-size:1.8em}h2{font-size:1.4em}.card{padding:.85rem}.journey,.system-map{gap:.5rem}.journey span,.system-map>div{padding:.55rem}.navbtns{gap:.5rem}#bridge-svg{height:290px}.codewrap pre{font-size:.78em}.power-map{font-size:.85em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{body{overflow:visible;background:white;color:black}.stage{display:block;position:static;padding:0}.slide,.slide[hidden]{display:block!important;break-after:page;max-height:none;overflow:visible;width:100%;animation:none}.topbar,.navbtns,.dots,.progress,.copybtn{display:none}.card,.note{background:white;color:black;border-color:#aaa}a{color:black}.lead,.tag{color:#333}pre{white-space:pre-wrap;background:#eee;color:black}.en{display:none!important}}

.grid>*{min-width:0}.codewrap{min-width:0;max-width:100%}.codewrap pre{max-width:100%}a.dl{overflow-wrap:anywhere}.power-map{overflow-wrap:anywhere}h2>span{min-width:0}.pin-map code{overflow-wrap:anywhere}.dots button{width:12px;height:12px;min-height:12px}
@media(max-width:650px){.stage{padding-top:8.2rem}.topbar .brand{font-size:.9em}.topbar .tools{font-size:.9em}.topbar select{font-size:.8em}.slide p,.slide li,.note{overflow-wrap:anywhere}}

/* Reading order follows the chosen language; circuit coordinates and code remain physical/LTR. */
.journey,.system-map{direction:inherit}
.journey span{background:none;border:0;padding:0;border-radius:0}
.journey>span{background:var(--card);border:1px solid var(--line);padding:1rem;border-radius:.7rem}
.flow-arrow{flex:none;text-align:center}
code{unicode-bidi:isolate;direction:ltr}
.pin-map code,.logic-row>span{unicode-bidi:isolate}
.logic-row>span:last-child{unicode-bidi:normal}
.counter{direction:ltr;unicode-bidi:isolate}
.module-layout{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.module-photo{margin:0}
.module-image{position:relative;width:min(100%,440px);margin:auto;direction:ltr}
.module-image img{display:block;width:100%;height:auto;border-radius:1rem}
.photo-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#0b1220;color:#fff;border:2px solid #22d3ee;font-size:.85rem;font-weight:700}
.module-photo figcaption{color:var(--muted);font-size:.75em;margin-top:.7rem}
.module-key{display:grid;gap:.7rem}
.module-key>div{display:flex;align-items:start;gap:.65rem}
.part-number{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--accent);color:var(--bg);border-radius:50%;font-size:.8em;font-weight:700;margin-top:.15rem}
.module-key h3{margin:0 0 .2em;font-size:.95em}.module-key p{margin:0;font-size:.8em}
.exercise-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);align-items:stretch}
.exercise-notes{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:1rem;min-width:0}.exercise-notes>.card{min-width:0}
.exercise-code{display:flex;flex-direction:column;min-width:0;height:clamp(440px,65vh,680px)}
.exercise-code h3{margin:0 0 .4rem}.sketch-file{font-size:.75em;margin-bottom:.6rem;direction:ltr;text-align:start;overflow-wrap:anywhere}
.exercise-code .codewrap{flex:1;min-height:0;margin:0}
.exercise-code pre{height:100%;margin:0;font-size:.68em;line-height:1.65;overscroll-behavior:contain;tab-size:2}
@media(max-width:800px){.exercise-layout,.module-layout{grid-template-columns:minmax(0,1fr)}.exercise-code{height:520px}.module-image{max-width:380px}.module-key h3{font-size:1.05em}.module-key p{font-size:.95em}}
@media(max-width:650px){.journey,.system-map{flex-direction:column;gap:.5rem}.journey>span{padding:.65rem 1rem}.flow-arrow{line-height:1}.journey>.flow-arrow,.system-map>.flow-arrow{transform:rotate(90deg)}body.lang-he .journey>.flow-arrow,body.lang-he .system-map>.flow-arrow{transform:rotate(-90deg)}.system-map>div{min-width:190px;text-align:center}.module-key{gap:1rem}.exercise-code pre{font-size:.74em}}
@media print{.exercise-code{height:auto}.exercise-code pre{height:auto;max-height:none}.module-photo{max-width:350px}.photo-marker{print-color-adjust:exact}}

/* Slide 7: gear reduction demonstrator. Readouts follow language order. */
.gear-layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
.gear-controls{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:1rem;font-size:.82em}
.gear-controls label{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.gear-controls select{font:inherit;padding:.4rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:.4rem;width:100%;direction:ltr}
.gear-readouts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;text-align:center;margin-top:1rem;font-size:.85em}
.gear-readouts>div{display:flex;flex-direction:column;gap:.2rem}.gear-readouts strong{font-size:1.3em;font-variant-numeric:tabular-nums}
.gear-input-label{color:var(--accent)}.gear-output-label{color:var(--warn)}
#gear-svg{display:block;width:100%;height:230px;direction:ltr}
.gear-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.78em}.gear-actions .check{margin:0}
#gear-relationship{font-size:.85em;margin:.8rem 0 .25rem}#gear-power{margin:.2rem 0}
.gear-explanation h3{margin-top:0}.gear-explanation p,.gear-explanation .note{font-size:.85em}.gear-formula{font-family:Consolas,monospace;background:var(--code);padding:.8rem;border-radius:.5rem;overflow-wrap:anywhere;font-size:.72em;text-align:left}
@media(max-width:900px){.gear-layout{grid-template-columns:minmax(0,1fr)}.gear-explanation p,.gear-explanation .note{font-size:1em}}
@media(max-width:400px){.gear-controls{grid-template-columns:minmax(0,1fr)}.gear-readouts{gap:.5rem;font-size:.8em}}

.transistor-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.3rem;align-items:center}
.transistor-copy{min-width:0}.transistor-copy p{font-size:.9em}
#transistor-demo{min-width:0;font-size:.85em}#transistor-demo .check{margin:.3rem 0}
#transistor-demo svg{display:block;width:100%;height:255px;direction:ltr}
#transistor-demo svg text{font:14px "Segoe UI",Arial,sans-serif;fill:var(--ink)}
#transistor-demo .tx-wire{stroke:var(--muted);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#transistor-demo .tx-outline,#transistor-demo .tx-motor,#transistor-demo .tx-resistor,#transistor-demo .tx-diode{fill:var(--bg);stroke:var(--muted);stroke-width:2}
#transistor-demo .tx-conducting{stroke:var(--accent)}#transistor-demo .tx-control{stroke:var(--warn)}
#transistor-demo .tx-current{stroke:var(--accent);stroke-width:4;stroke-dasharray:2 13;animation:tx-flow 1s linear infinite}
#transistor-demo [role=status]{min-height:2.8em;margin:.3rem 0;font-size:.9em}
#transistor-demo .tag{margin:.3rem 0}
@keyframes tx-flow{to{stroke-dashoffset:-30}}
@media(max-width:800px){.transistor-layout{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){#transistor-demo .tx-current{animation:none}}