/* ═══════════════════════════════════════════════════════════════════
   ETM Learn - shared design system
   Aesthetic: laboratory instrument. Gold = theory/reference.
   Turquoise = measured/live. Pink = even-order / asymmetry.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#06080c; --panel:#0b0f16; --panel2:#10161f; --panel3:#151d28;
  --rule:rgba(142,168,200,.15); --rule-strong:rgba(142,168,200,.30);
  --ink:#e8eef7; --dim:#b6c1d1; --faint:#9aa6ba;
  --gold:#e3bf4b; --gold-deep:#c9a227;
  --cyan:#28ABE2; --cyan-hi:#5cc8f5;
  --pink:#ff4d8d; --orange:#ff9c3d; --red:#ff4b4b; --green:#4ddb92;
  --dry:#7b8698;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --cond:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;
  --col:min(760px,100% - 40px);
  --wide:min(1060px,100% - 40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);
  font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(142,168,200,.030) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(142,168,200,.030) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000 0%,transparent 75%)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
main{position:relative;z-index:1}
.col{width:var(--col);margin-inline:auto}
.wide{width:var(--wide);margin-inline:auto}
/* The bench's wrapper is dissolved so that <main> becomes its layout parent.
   Without this the wrapper ends one line after the bench, the sticky element has
   no room to travel, and it scrolls away exactly like a static one. */
.benchwrap{display:contents}
.benchwrap>.rig.bench{width:var(--wide);margin-inline:auto}

/* ── nav ── */
.topnav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(6,8,12,.86);border-bottom:1px solid var(--rule)}
.topnav .in{width:var(--wide);margin-inline:auto;display:flex;align-items:center;gap:5px;
  padding:10px 0;font-family:var(--mono);font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.topnav .brand{color:var(--gold-deep);margin-right:16px;font-weight:600}
.topnav a{color:var(--dim);text-decoration:none;padding:6px 11px;border-radius:2px;
  border:1px solid transparent;transition:.15s}
.topnav a:hover{color:var(--ink);border-color:var(--rule)}
.topnav a[aria-current="page"]{color:var(--cyan);border-color:rgba(40,171,226,.4);
  background:rgba(40,171,226,.09)}
.topnav .sp{flex:1}
.topnav .soon{opacity:.4;pointer-events:none}

/* ── masthead ── */
header.mast{border-bottom:1px solid var(--rule);padding:52px 0 30px;margin-bottom:44px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 16px;display:flex;gap:14px;align-items:center}
.kicker::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--rule-strong),transparent)}
h1{font-family:var(--cond);font-weight:700;font-size:clamp(42px,8.5vw,78px);line-height:.94;
  letter-spacing:-.02em;margin:0 0 18px;color:#fff}
h1 em{font-style:normal;color:var(--gold);display:block}
.standfirst{font-size:19px;color:var(--dim);max-width:56ch;margin:0}
.standfirst strong{color:var(--ink);font-weight:600}

/* ── prose ── */
h2{font-family:var(--cond);font-weight:700;font-size:clamp(26px,4.4vw,38px);letter-spacing:-.01em;
  line-height:1.06;color:#fff;margin:76px 0 6px}
h2 .num{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gold-deep);
  letter-spacing:.2em;display:block;margin-bottom:12px}
h3{font-family:var(--cond);font-weight:600;font-size:21px;color:var(--gold);margin:38px 0 4px;letter-spacing:.01em}
p{margin:16px 0}
p.lead{font-size:19px;color:#e8eefa}
a.lb{color:var(--gold);text-decoration:none;cursor:pointer;
  border-bottom:1px dashed rgba(227,191,75,.45);padding-bottom:1px;transition:background .15s,color .15s}
a.lb:hover{background:rgba(227,191,75,.13);color:#fff;border-bottom-color:var(--gold)}
.w-drive,.w-thr{color:var(--gold)} .w-bias,.w-ratio{color:var(--pink)}
.w-mix,.w-atk{color:var(--cyan)} .w-dry{color:var(--dry)} .w-wet{color:var(--cyan)}
b,strong{font-weight:600;color:#fff}
.callout{border-left:2px solid var(--gold-deep);
  background:linear-gradient(90deg,rgba(227,191,75,.055),transparent 70%);
  padding:18px 22px;margin:30px 0;font-size:17.5px}
.callout .tag{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:8px}
/* Hebrew has no upper case, so the transform does nothing here except leave
   the tracking behind, which is exactly what made these unreadable. */
[dir="rtl"] .callout .tag{letter-spacing:0;text-transform:none;font-size:14px;
  font-family:'Heebo',system-ui,sans-serif;font-weight:700}
[dir="rtl"] .pane-lbl,[dir="rtl"] .rig-hd h4,[dir="rtl"] .m .t{letter-spacing:.04em}
.callout.warn{border-left-color:var(--red);background:linear-gradient(90deg,rgba(255,75,75,.06),transparent 70%)}
.callout.warn .tag{color:var(--red)}
.callout.ok{border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(40,171,226,.06),transparent 70%)}
.callout.ok .tag{color:var(--cyan)}
.src{font-family:var(--mono);font-size:12px;color:var(--faint);line-height:1.6}
.src a{color:var(--dim)}

/* ── instrument shell ── */
.rig{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--rule);
  border-radius:3px;margin:30px 0;box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 20px 50px -30px #000}

/* ── STICKY BENCH ──────────────────────────────────────────────────────
   The whole point of these pages is that you move a control and see the
   result. If the control and the result are not on screen together, that
   link is broken. So the bench pins itself under the nav and the article
   scrolls underneath it. */
.rig.bench{
  /* Not sticky any more. It was, so a control and its graph stayed
     together while you read, but a panel that sits on top of the
     paragraph you are reading costs more than it gives. The links in the
     article scroll it back into view when you press one. */
  margin:24px 0 34px;
  background:linear-gradient(180deg,#111823,#0a0e15);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 22px 44px -20px rgba(0,0,0,.95);
  border-color:rgba(142,168,200,.24);
}
/* Compact by default. A bench that fills the screen makes every page a
   scrolling exercise. The expand button is there when you want the room. */
.rig.bench .rig-bd{padding:8px}
.rig.bench .ctl{padding:8px 9px 2px;gap:7px 14px;margin-top:9px}
.rig.bench .transport{padding:7px 9px;margin-top:8px;gap:6px}
.rig.bench .m{padding:4px 9px}
.rig.bench .m .n{font-size:18px;line-height:1.2}
.rig.bench .meters{gap:1px}
.rig.bench .legend{padding:6px 9px 0;font-size:12px}
.rig.bench .k label{margin-bottom:5px}
.rig.bench .grid2{gap:7px}
.rig.bench .srcpick button{padding:5px 8px}
.rig.bench .play{padding:7px 16px;min-width:92px}
.rig.bench .ab,.rig.bench .tgl{padding:7px 13px}
/* 2x2 instrument grid so everything is visible at once */
.grid2{display:grid;gap:10px}
@media(min-width:820px){.grid2{grid-template-columns:1fr 1fr}}
/* Expanded bench: one pane per row at twice the height, and the bench scrolls
   inside itself so it can stay pinned instead of pushing the article away. */
.rig.bench.bench-big{max-height:calc(100vh - 64px);overflow:auto}
.bench-big .grid2{grid-template-columns:1fr}
.bench-min .rig-bd,.bench-min .ctl,.bench-min .transport{display:none}
.bench-min .meters{margin-top:0;border-top:0}
.mini{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;background:transparent;border:1px solid var(--rule);
  color:var(--dim);padding:4px 9px;border-radius:2px;cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--gold-deep);color:var(--gold)}
/* on short screens, let the bench scroll internally rather than eat the page */
@media(max-height:760px){
  .rig.bench{max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain}
}
@media(max-width:819px){ .rig.bench{position:static;max-height:none} }
.rig-hd{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--rule);
  background:rgba(0,0,0,.28)}
.rig-hd .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none;transition:.25s}
.rig-hd .dot.on{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.rig-hd h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dim);margin:0;font-weight:500}
.rig-hd .sp{flex:1}
.rig-hd .stat{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--faint)}
.rig-bd{padding:14px}
.panes{display:grid;gap:12px}
@media(min-width:780px){.panes.two{grid-template-columns:1fr 1fr}
  .panes.t13{grid-template-columns:1fr 2fr}}
.pane{background:#04060a;border:1px solid rgba(142,168,200,.10);border-radius:2px;position:relative;overflow:hidden}
.pane-lbl{position:absolute;top:7px;left:9px;z-index:2;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim);background:rgba(4,6,10,.72);padding:2px 6px;border-radius:2px;pointer-events:none}
.pane canvas{display:block;width:100%;height:auto}

/* ── controls ── */
.ctl{display:grid;gap:13px 20px;padding:15px 14px 4px;border-top:1px solid var(--rule);margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.ctl.wide-k{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.k label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.k label .v{font-size:13.5px;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.sl{position:relative;height:26px;cursor:grab;touch-action:none;user-select:none}
.sl:active{cursor:grabbing}
.sl .trk{position:absolute;top:11px;left:0;right:0;height:3px;border-radius:2px;background:rgba(142,168,200,.16)}
.sl .fil{position:absolute;top:11px;left:0;height:3px;border-radius:2px;background:var(--gold)}
.sl .kn{position:absolute;top:2px;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  background:#1a222e;border:1px solid var(--gold);
  box-shadow:0 0 0 4px rgba(227,191,75,.09),0 2px 7px rgba(0,0,0,.6)}
.sl.c-pink .fil{background:var(--pink)}
.sl.c-pink .kn{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,77,141,.10),0 2px 7px rgba(0,0,0,.6)}
.sl.c-cyan .fil{background:var(--cyan)}
.sl.c-cyan .kn{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(40,171,226,.10),0 2px 7px rgba(0,0,0,.6)}
.sl.c-green .fil{background:var(--green)}
.sl.c-green .kn{border-color:var(--green);box-shadow:0 0 0 4px rgba(77,219,146,.10),0 2px 7px rgba(0,0,0,.6)}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button,.tgl{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  background:#0e141d;border:1px solid var(--rule);color:var(--dim);padding:6px 10px;border-radius:2px;
  cursor:pointer;transition:.14s}
.seg button:hover,.tgl:hover{border-color:var(--rule-strong);color:var(--ink)}
.seg button[aria-pressed="true"]{background:rgba(227,191,75,.13);border-color:var(--gold-deep);color:var(--gold)}
.tgl[aria-pressed="true"]{background:rgba(40,171,226,.13);border-color:var(--cyan);color:var(--cyan-hi)}
.tgl.warn[aria-pressed="true"]{background:rgba(255,75,75,.13);border-color:var(--red);color:#ff8888}

/* ── transport ── */
.transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;
  border-top:1px solid var(--rule);margin-top:12px}
.play{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:var(--cyan);border:1px solid var(--cyan);color:#04121b;padding:9px 20px;border-radius:2px;
  cursor:pointer;transition:.15s;min-width:104px}
.play:hover{background:var(--cyan-hi);border-color:var(--cyan-hi)}
.play[data-on="1"]{background:transparent;color:var(--cyan)}
.ab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:transparent;border:1px solid var(--rule-strong);color:var(--dim);padding:9px 18px;
  border-radius:2px;cursor:pointer;transition:.15s}
.ab[aria-pressed="true"]{background:rgba(123,134,152,.22);border-color:var(--dry);color:#fff}
.hint{font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.05em}
.vol{display:flex;align-items:center;gap:8px;min-width:130px}
.vol .sl{flex:1;height:22px}
.vol .sl .trk,.vol .sl .fil{top:9px}
.vol .sl .kn{top:1px;width:18px;height:18px;margin-left:-9px}

/* loop source picker */
.srcpick{display:flex;flex-wrap:wrap;gap:4px}
.srcpick button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  background:#0e141d;border:1px solid var(--rule);color:var(--dim);padding:6px 11px;border-radius:2px;
  cursor:pointer;transition:.14s;display:flex;align-items:center;gap:6px}
.srcpick button::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--faint);transition:.14s}
.srcpick button:hover{border-color:var(--rule-strong);color:var(--ink)}
.srcpick button[aria-pressed="true"]{background:rgba(40,171,226,.12);border-color:var(--cyan);color:var(--cyan-hi)}
.srcpick button[aria-pressed="true"]::before{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.srcpick button.busy::before{background:var(--gold);animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ── readouts ── */
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;
  background:var(--rule);border-top:1px solid var(--rule);margin-top:14px}
.m{background:var(--panel);padding:9px 11px}
.m .t{font-family:var(--mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);display:block}
.m .n{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.35}
.m .n small{font-size:11px;color:var(--dim);font-weight:400}
.m.gold .n{color:var(--gold)} .m.cyan .n{color:var(--cyan)} .m.pink .n{color:var(--pink)}
.m.orange .n{color:var(--orange)} .m.red .n{color:var(--red)} .m.green .n{color:var(--green)}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.legend i{display:inline-block;width:20px;height:2px;margin-right:6px;vertical-align:middle}
.legend i.dash{background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px)}

table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;margin:24px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule)}
th{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:500}
td{font-variant-numeric:tabular-nums;color:var(--dim)}
td:first-child{color:var(--ink)}
.tw{overflow-x:auto}

footer{border-top:1px solid var(--rule);margin-top:90px;padding:34px 0 70px;font-family:var(--mono);
  font-size:12.5px;color:var(--faint);letter-spacing:.05em}
footer a{color:var(--dim)}
footer .nx{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
footer .nx a{border:1px solid var(--rule);padding:8px 14px;border-radius:2px;text-decoration:none;
  color:var(--dim);transition:.15s}
footer .nx a:hover{border-color:var(--gold-deep);color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* .rv starts at opacity 0 and is revealed BY the animation, so killing the
     animation without this would hide the article permanently. */
  .rv,.rv.on{opacity:1!important;transform:none!important}
}
.rv{opacity:0;transform:translateY(14px);animation:rv .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}

/* ══ Hebrew / RTL ══════════════════════════════════════════════════════════
   The instruments stay left to right: a spectrum runs low to high frequency
   and a waveform runs earlier to later, and mirroring either of those would be
   wrong rather than translated. Only the prose flips. */
[dir="rtl"]{ text-align:right }
[dir="rtl"] body{ font-family:'Heebo','Noto Sans Hebrew',system-ui,sans-serif;
  /* Heebo at the Latin size reads smaller: there is almost no ascender or
     descender to carry the eye along the line. */
  font-size:19px; line-height:1.85 }
[dir="rtl"] table{ font-size:14.5px }
[dir="rtl"] .callout{ font-size:18px; line-height:1.8 }
[dir="rtl"] .src{ font-size:14px; line-height:1.7 }
[dir="rtl"] .standfirst, [dir="rtl"] p.lead{ font-size:20.5px }
[dir="rtl"] .mast h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p,
[dir="rtl"] li, [dir="rtl"] .callout, [dir="rtl"] .standfirst{ text-align:right }
[dir="rtl"] h2 .num{ margin-left:12px; margin-right:0 }
[dir="rtl"] .topnav .in{ flex-direction:row-reverse }
[dir="rtl"] .nx{ flex-direction:row-reverse }
[dir="rtl"] table th, [dir="rtl"] table td{ text-align:right }
/* anything technical stays LTR inside a right to left paragraph */
[dir="rtl"] .ltr, [dir="rtl"] code, [dir="rtl"] .mono{ direction:ltr; display:inline-block; text-align:left }
/* the benches are instruments, not text: keep them in reading order */
[dir="rtl"] .rig, [dir="rtl"] .ctl, [dir="rtl"] .meters,
[dir="rtl"] .transport, [dir="rtl"] .legend{ direction:ltr; text-align:left }
[dir="rtl"] .rig-hd h4{ text-align:left }

/* The rail is the contents list of a course, so it carries the lesson numbers.
   With the numbers it no longer fits one line on a phone, so it wraps instead
   of running off the edge. */
.topnav .in{flex-wrap:wrap}
.topnav a b{color:var(--gold-deep);font-weight:600;letter-spacing:.08em;margin-inline-end:6px}
.topnav a:hover b{color:var(--gold)}
.topnav a[aria-current="page"] b{color:var(--cyan-hi)}


/* ── the arithmetic, folded away ──────────────────────────────────────────
   Everything that is a formula, a derivation or a source reference lives in
   one of these. The page has to make sense with all of them shut: if closing
   one loses the idea, the idea was in the wrong place and belongs outside. */
details.deep{border:1px solid var(--rule);border-left:2px solid var(--cyan);
  border-radius:2px;background:rgba(40,171,226,.035);margin:22px 0;padding:0}
details.deep>summary{cursor:pointer;list-style:none;padding:11px 16px;
  font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:10px;user-select:none}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::before{content:'+';font-size:15px;line-height:1;
  width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cyan);border-radius:2px;flex:none}
details.deep[open]>summary::before{content:'−'}
details.deep>summary:hover{background:rgba(40,171,226,.07)}
details.deep .in{padding:2px 18px 16px}
details.deep .in > *:first-child{margin-top:4px}
[dir="rtl"] details.deep{border-left:1px solid var(--rule);border-right:2px solid var(--cyan)}

/* the dither page asks for this and it was never defined: it looked
   right only because gold is the default fill, which is luck */
.sl.c-gold .fil{background:var(--gold-deep)}
.sl.c-gold .kn{background:var(--gold);border-color:var(--gold)}

/* A control that cannot affect the current setting: visibly out of play,
   rather than a number that moves while nothing happens. */
.k.inert{opacity:.55}
.k.inert .sl{pointer-events:none;filter:grayscale(1)}
.k.inert label::after{content:" - not used by this filter";color:var(--dim);font-size:12px}
[dir="rtl"] .k.inert label::after{content:" - לא בשימוש בפילטר הזה"}

.lesson-reference{margin-block:24px;min-width:0;overflow-wrap:anywhere}
.lesson-reference h3{color:var(--gold)}
.lesson-reference>summary{font:600 19px/1.6 var(--serif);min-height:44px;cursor:pointer;color:var(--cyan-hi);padding-block:10px}
[dir="rtl"] .lesson-reference>summary{font-family:inherit}
.visual-reading{margin-block:24px;padding:clamp(16px,3vw,24px);border:1px solid #285267;border-radius:12px;background:linear-gradient(135deg,#102b39,#101923)}
.visual-reading h3{margin-top:0;color:var(--cyan-hi)}
.interaction-help{font-size:15px;line-height:1.7;border-top:1px solid var(--rule-strong);padding-top:14px;margin-bottom:0;color:var(--ink)}
.visual-reading ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;list-style:none;counter-reset:reading}
.visual-reading li{counter-increment:reading;min-width:0;border-inline-start:2px solid var(--cyan);padding-inline-start:12px;font-size:17px;line-height:1.65}
.visual-reading li::before{content:'0' counter(reading);display:block;font:600 24px/1.5 var(--mono);color:var(--gold);margin-bottom:8px}
.advanced-bridge,.transfer-check{margin-block:24px;padding:18px;border-inline-start:3px solid var(--gold);background:var(--panel2);border-radius:6px}
.advanced-bridge h3,.transfer-check h3{font-size:20px;color:var(--gold);margin-top:0}
.metric-details{grid-column:1/-1;font-size:16px;padding:12px;min-width:0}
.metric-details summary{cursor:pointer;min-height:44px;color:var(--cyan-hi)}
.metric-details .m{margin-block:12px}
@media(max-width:700px){.visual-reading ol{grid-template-columns:minmax(0,1fr)}.visual-reading li{font-size:18px}}
.reference-card{border-block-end:1px solid var(--rule-strong);padding:8px 0}
.reference-card summary{font:600 18px/1.6 var(--serif);min-height:44px;cursor:pointer;padding:8px 0;color:var(--cyan-hi)}
[dir="rtl"] .reference-card summary{font-family:inherit}
.reference-trigger{display:inline;font:inherit;color:inherit;background:none;border:0;border-bottom:2px dotted var(--cyan);padding:2px 3px;cursor:help;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:inherit}
.reference-trigger[aria-expanded="true"]{color:var(--cyan-hi);background:var(--panel2)}
.reference-preview{position:fixed;z-index:1000;box-sizing:border-box;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:16px;border:1px solid var(--cyan);border-radius:10px;background:#10232d;color:#f4f4ee;box-shadow:0 8px 32px #0008;font:17px/1.7 var(--serif);overflow-wrap:anywhere}
[dir="rtl"] .reference-preview{font-family:inherit;direction:rtl}
.reference-preview[hidden]{display:none}
@media(pointer:coarse){.reference-trigger{min-height:44px}}
/* In-flow explanation cards work with touch and keyboard without overlays. */
.didactic-layer{margin-block:24px;padding:clamp(14px,3vw,24px);border:1px solid var(--rule-strong);border-radius:10px;background:var(--panel);overflow-wrap:anywhere;min-width:0}
.didactic-layer h3{color:var(--gold);margin-top:0}
.didactic-layer h4{font:600 19px/1.6 var(--serif);text-transform:none;letter-spacing:0;margin-top:24px}
[dir="rtl"] .didactic-layer h4{font-family:inherit}
.didactic-layer summary{cursor:pointer;min-height:44px;padding-block:10px;color:var(--cyan-hi)}
.explained-formula{font-family:var(--mono);text-align:start;white-space:normal;overflow-wrap:anywhere}
.didactic-layer details[open]{border-top:1px solid var(--rule-strong);padding-top:12px}
@media(max-width:380px){.ctl,.meters{grid-template-columns:minmax(0,1fr)!important}.rig .seg{flex-wrap:wrap}.rig .seg button{min-height:44px}.deep-dive{padding:12px}}
/* Learning progression and readable, touch-friendly experiments. */
.mast{padding-top:32px;margin-bottom:28px}
.mast h1{font-size:clamp(34px,5vw,58px);line-height:1.15}
.learning-path{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.learning-path a,.experiment-actions button,.quiz-options button,.lesson-menu{
  font:inherit;font-size:16px;line-height:1.5;border:1px solid var(--rule-strong);
  border-radius:8px;background:var(--panel2);color:var(--ink);padding:12px 16px;
  text-decoration:none;cursor:pointer;min-height:44px}
.learning-path b{color:var(--gold);margin-inline-end:8px}
.learning-section,.lab-guide,.knowledge-check{scroll-margin-top:120px;margin-block:36px}
.lab-guide{border-inline-start:3px solid var(--cyan);padding-inline-start:20px}
.lab-guide h3{margin-bottom:8px;color:var(--cyan-hi)}
.lab-section{margin-bottom:44px}
.experiment-rule{color:var(--gold)}
.experiment-actions{display:flex;flex-wrap:wrap;gap:10px}
.experiment-status{flex-basis:100%;margin:0;min-height:1.7em;font-size:15px;color:var(--cyan-hi)}
.experiment-actions button:first-child{border-color:var(--cyan);background:#102b39}
.quiz-options{display:grid;gap:10px}
.quiz-options button{text-align:start}
.quiz-options button[aria-pressed="true"]{border-color:var(--gold);background:#292516}
.quiz-feedback.answered{padding:18px;border-inline-start:3px solid var(--gold);background:var(--panel2)}
.deep-dive{border:1px solid var(--rule-strong);border-radius:10px;padding:20px}
.deep-dive summary{font-size:23px;font-weight:600;cursor:pointer;color:var(--gold);min-height:44px}
.deep-dive p{margin-top:20px}
.model-scope{padding:18px 22px;background:var(--panel2);border-radius:10px;margin-top:24px;font-size:16px}
.model-scope h3{font-size:19px;margin-top:0}
.pane-lbl{position:static;display:block;min-height:38px;padding:9px 12px;font-size:13px;line-height:1.5;letter-spacing:0;background:var(--panel2);color:var(--ink)}
.pane canvas{display:block;max-width:100%}
.rig .sl{min-height:38px;touch-action:none}
.rig .sl:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.rig .seg button,.rig .srcpick button,.rig .mini{min-height:40px;font-size:12px}
.legend{font-size:12px;letter-spacing:.02em;color:var(--dim)}
.lesson-menu{display:none}
.learning-focused .learning-extra{display:none!important}
.learning-focused .panes:not(:has(>.pane:not(.learning-extra))){display:none}
.learning-focused .panes:has(>.pane:only-child){grid-template-columns:1fr}
.show-all-controls{display:block;margin:14px;font:inherit;font-size:15px;padding:10px 14px;min-height:44px;cursor:pointer;color:var(--gold);background:var(--panel2);border:1px solid var(--rule-strong);border-radius:6px}
.show-all-controls[hidden]{display:none}
.learning-objective,.guided-observation{border-inline-start:3px solid var(--gold);padding:10px 18px;margin-block:24px;background:var(--panel)}
.learning-objective h3,.guided-observation h3{font-size:19px;margin:0 0 8px;color:var(--gold)}
.learning-objective p,.guided-observation p{margin:0}
.numerical-exercise{margin-block:26px;padding-block:20px;border-top:1px solid var(--rule-strong)}
.numerical-exercise h4{font:600 18px/1.7 var(--serif);letter-spacing:0;text-transform:none}
[dir="rtl"] .numerical-exercise h4{font-family:inherit}
.numerical-exercise form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.numerical-exercise label{flex-basis:100%;font-size:16px}
.numerical-exercise input{font:18px var(--mono);width:170px;max-width:100%;min-height:44px;background:var(--bg);color:var(--ink);border:1px solid var(--rule-strong);border-radius:6px;padding:8px 12px}
.numerical-exercise button{font:inherit;min-height:44px;padding:8px 16px;color:var(--ink);background:var(--panel3);border:1px solid var(--cyan);border-radius:6px;cursor:pointer}
.numerical-feedback{flex-basis:100%;font-size:16px;min-height:1.7em;margin:0}
.numerical-feedback[data-correct="true"]{color:var(--green)}
.numerical-exercise details{margin-top:12px}
.deep-dive .numerical-exercise summary{font-size:17px;min-height:40px}
.numerical-exercise input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:760px){
  .topnav .in{gap:8px;padding-block:8px}
  .lesson-menu{display:block;margin-inline-end:auto;padding:7px 12px;font-size:14px}
  .topnav .in>a:not(.lang-switch):not(.brand){display:none}
  .topnav .in.menu-open>a{display:block}
  .topnav .in.menu-open{max-height:70vh;overflow:auto}
  .learning-path{display:grid;grid-template-columns:1fr}
  .mast h1{font-size:36px}
  .ctl{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .meters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rig .rig-hd{flex-wrap:wrap}
  .rig .rig-hd h4{font-size:15px}
  .deep-dive{padding:16px}
}

/* Predict, commit, check. The reader answers before the page does,
   and the reveal carries a number the instrument measured. */
.predict{border:1px solid var(--rule-strong);border-radius:10px;background:var(--panel2);padding:18px 20px 16px;margin:30px 0}
.predict .tag{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:10px}
[dir="rtl"] .predict .tag{letter-spacing:0;text-transform:none;font-size:14px;font-family:'Heebo',system-ui,sans-serif;font-weight:700}
.predict .q{font-size:18px;line-height:1.5;margin:0 0 14px;color:var(--ink)}
.predict .opts{display:flex;flex-wrap:wrap;gap:8px}
.predict .opts button{font:inherit;font-size:16px;cursor:pointer;padding:10px 16px;border-radius:7px;border:1px solid var(--rule-strong);background:var(--panel3);color:var(--ink);transition:.12s}
.predict .opts button:hover{border-color:var(--cyan);background:rgba(40,171,226,.09)}
.predict .opts button[data-state="right"]{border-color:var(--green);background:rgba(77,219,146,.14);color:var(--green);font-weight:600}
.predict .opts button[data-state="wrong"]{border-color:var(--red);background:rgba(255,75,75,.12);color:var(--red)}
.predict .opts button[data-state="miss"]{opacity:.45}
.predict .say{display:none;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:17px;line-height:1.65;color:var(--dim)}
.predict.done .say{display:block}
.predict .say b{color:var(--ink)}
.predict .live{font-family:var(--mono);color:var(--gold);font-weight:600}
.predict .verdict{font-weight:700;display:block;margin-bottom:8px}
.predict .verdict.ok{color:var(--green)}
.predict .verdict.no{color:var(--red)}