/* فهمان — lesson player. Phone-first, full screen. On wide screens it sits in a phone-width column. */
.fp-host { position: fixed; inset: 0; z-index: 50; background: #060B18; display: grid; place-items: center; }
.fp {
  --ink: #0E1730; --ink-2: #16234A; --ink-3: #22325F; --muted: rgba(244,246,251,.66); --faint: rgba(244,246,251,.38);
  --saffron: #FFC83D; --mint: #3DDC97; --coral: #FF6B6B; --sky: #4CC2FF; --violet: #A58BFF; --white: #F7F8FC;
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden;
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--white);
  background-color: var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center top;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* tablets & desktop: a tall card that grows with the screen (keeps a ~2:3 portrait stage) */
@media (min-width: 560px) and (min-height: 560px) {
  .fp { width: min(92vw, 700px, calc(92dvh * .66)); height: min(92dvh, 1100px); border-radius: 28px;
        box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
  .fp-cap { font-size: clamp(17px, 2.1dvh, 22px); min-height: 84px; }
}
.fp-host { height: 100dvh; }
/* phones turned sideways: ask to rotate (the lesson is designed for portrait) */
.fp-rotate { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .fp-rotate { display: grid; position: fixed; inset: 0; z-index: 60; place-content: center; justify-items: center; gap: 14px;
    background: #0E1730; color: #F7F8FC; font: 600 18px "IBM Plex Sans Arabic", sans-serif; text-align: center; }
  .fp-rotate i { width: 34px; height: 56px; border: 3px solid #FFC83D; border-radius: 9px; animation: fp-rot 1.6s ease-in-out infinite; }
}
@keyframes fp-rot { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }

/* top bar */
.fp-top { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "x title" "steps steps"; gap: 8px 10px; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 6px; }
.fp-exit { grid-area: x; }
.fp-title { grid-area: title; font: 600 15px/1.3 "Readex Pro", sans-serif; color: var(--muted); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-steps { grid-area: steps; display: flex; gap: 6px; align-items: center; justify-content: center; }
.fp-step { width: 10px; height: 10px; border: 0; padding: 0; background: var(--ink-3); transform: rotate(45deg); cursor: pointer; transition: background .3s, transform .3s; }
.fp-step.done { background: rgba(255,200,61,.55); }
.fp-step.now { background: var(--saffron); transform: rotate(45deg) scale(1.35); }

.fp-icon { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.06); display: grid; place-items: center; cursor: pointer; color: var(--white); }
.fp-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-prev svg, .fp-next svg { fill: currentColor; stroke-width: 1.5; }

/* stage */
.fp-stage-wrap { position: relative; min-height: 0; }
.fp-stage { position: absolute; inset: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; padding: 2cqh 6cqw; opacity: 0; transition: opacity .35s; }
.fp-stage.in { opacity: 1; }
.fp-stage .a { will-change: transform, opacity; }

/* captions + controls */
.fp-cap { min-height: 74px; padding: 6px 22px 10px; display: flex; align-items: center; justify-content: center; text-align: center; font: 500 17px/1.6 "IBM Plex Sans Arabic", sans-serif; color: var(--white); opacity: 0; transition: opacity .2s; }
.fp-cap.on { opacity: 1; }
.fp-cap.hidden { visibility: hidden; }
.fp-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); background: rgba(10,17,36,.7); }
.fp-play { width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--saffron); color: #0E1730; display: grid; place-items: center; cursor: pointer; }
.fp-play svg { width: 24px; height: 24px; fill: currentColor; }
.fp-play .i-pause, .fp.playing .fp-play .i-play { display: none; }
.fp.playing .fp-play .i-pause { display: block; }
.fp-spacer { flex: 1; }
.fp-media { display: flex; align-items: center; gap: 10px; direction: ltr; }   /* media controls are never mirrored */
.fp-chip { min-width: 48px; height: 40px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--muted); font: 600 14px "Readex Pro", sans-serif; cursor: pointer; }
.fp-chip.on { color: var(--white); border-color: rgba(255,255,255,.35); }

/* overlay: intro, questions, end */
.fp-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(14,23,48,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; animation: fp-fade .3s ease-out; }
@keyframes fp-fade { from { opacity: 0; } }
.fp-overlay[hidden] { display: none; }
.fp-intro, .fp-end { text-align: center; display: grid; gap: 12px; justify-items: center; }
.fp-intro-kicker { color: var(--sky); font: 600 14px "Readex Pro", sans-serif; }
.fp-intro h1, .fp-end h2 { margin: 0; font: 700 38px/1.25 "Readex Pro", sans-serif; }
.fp-intro p, .fp-end p { margin: 0; color: var(--muted); }
.fp-start { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 30px; border: 0; border-radius: 99px; background: var(--saffron); color: #0E1730; font: 700 19px "IBM Plex Sans Arabic", sans-serif; cursor: pointer; box-shadow: 0 10px 40px -10px rgba(255,200,61,.6); }
.fp-start svg { width: 22px; height: 22px; fill: currentColor; }
.fp-hint { color: var(--faint); font-size: 13px; max-width: 280px; }

.fp-q { width: 100%; max-width: 380px; background: var(--ink-2); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); animation: fp-up .4s cubic-bezier(.2,.8,.2,1); }
@keyframes fp-up { from { transform: translateY(24px); opacity: 0; } }
.fp-q-tag { display: flex; align-items: center; gap: 8px; color: var(--saffron); font: 600 14px "Readex Pro", sans-serif; }
.fp-q-tag i { width: 9px; height: 9px; background: var(--saffron); transform: rotate(45deg); }
.fp-q-text { font: 700 22px/1.5 "IBM Plex Sans Arabic", sans-serif; }
.fp-q-opts { display: grid; gap: 10px; }
.fp-q-opt { min-height: 56px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: var(--white); font: 600 18px "IBM Plex Sans Arabic", sans-serif; cursor: pointer; transition: border-color .2s, background .2s; }
.fp-q-opt:hover:not([disabled]) { border-color: rgba(255,255,255,.4); }
.fp-q-opt.right { border-color: var(--mint); background: rgba(61,220,151,.12); }
.fp-q-opt.wrong { border-color: var(--coral); background: rgba(255,107,107,.12); }
.fp-q-opt[disabled]:not(.right):not(.wrong) { opacity: .45; }
.fp-q-fb { min-height: 24px; color: var(--muted); font-size: 16px; }
.fp-q-fb .ok { color: var(--mint); } .fp-q-fb .bad { color: var(--coral); }
.fp-q-next { height: 52px; border: 0; border-radius: 99px; background: var(--saffron); color: #0E1730; font: 700 17px "IBM Plex Sans Arabic", sans-serif; cursor: pointer; }
.fp-end-mark { width: 64px; height: 64px; display: grid; place-items: center; }
.fp-end-mark i { width: 34px; height: 34px; background: var(--saffron); transform: rotate(45deg); box-shadow: 0 0 40px rgba(255,200,61,.6); animation: fp-spin 1.2s cubic-bezier(.2,.8,.2,1); }
@keyframes fp-spin { from { transform: rotate(-135deg) scale(.3); } }
.fp-end-actions { display: grid; gap: 10px; width: 100%; max-width: 280px; margin-top: 10px; }
.fp-btn { height: 52px; border-radius: 99px; display: grid; place-items: center; text-decoration: none; font: 700 17px "IBM Plex Sans Arabic", sans-serif; color: var(--white); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); cursor: pointer; }
.fp-btn.primary { background: var(--saffron); color: #0E1730; border: 0; }
.fp-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }

/* ---------------------------------------------------------------- scene vocabulary */
.L { direction: ltr; unicode-bidi: isolate; }
.num { font-family: "Readex Pro", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.var { font-family: "STIX Two Text", "Times New Roman", serif; font-style: italic; font-weight: 500; }
.h-kicker { font: 600 max(14px, 3.6cqw) "Readex Pro", sans-serif; color: var(--saffron); display: flex; align-items: center; gap: 8px; }
.h-kicker::before { content: ""; width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }
.h-xl { font: 700 min(13cqw, 9cqh)/1.2 "Readex Pro", sans-serif; text-align: center; }
.h-lg { font: 700 min(9cqw, 6.5cqh)/1.3 "Readex Pro", sans-serif; text-align: center; }
.h-md { font: 600 min(6.4cqw, 4.6cqh)/1.5 "IBM Plex Sans Arabic", sans-serif; text-align: center; color: var(--white); }
.h-sm { font: 500 min(4.8cqw, 3.4cqh)/1.6 "IBM Plex Sans Arabic", sans-serif; text-align: center; color: var(--muted); }
.saffron { color: var(--saffron); } .mint { color: var(--mint); } .coral { color: var(--coral); } .sky { color: var(--sky); } .muted { color: var(--muted); }

.row { display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.col { display: flex; flex-direction: column; align-items: center; gap: 2cqh; }
.wide { width: 100%; }

/* fraction */
.frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: middle; }
.frac > .n, .frac > .d { padding: 0 .12em; }
.frac > .bar { align-self: stretch; height: max(3px, .07em); background: currentColor; border-radius: 9px; margin: .1em 0; }
.eq { display: inline-flex; align-items: center; gap: .32em; direction: ltr; unicode-bidi: isolate; }
.eq .op { color: var(--muted); font-weight: 500; }
.big { font-size: min(17cqw, 11cqh); }
.mid { font-size: min(11cqw, 7.5cqh); }
.sm { font-size: min(8cqw, 5.5cqh); }

/* pills / tags */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: .32em .95em; border-radius: 99px; font: 700 min(5.4cqw, 3.8cqh) "IBM Plex Sans Arabic", sans-serif; }
.pill.mint { background: rgba(61,220,151,.16); color: var(--mint); }
.pill.coral { background: rgba(255,107,107,.16); color: var(--coral); }
.pill.saffron { background: rgba(255,200,61,.16); color: var(--saffron); }
.pill.fill-mint { background: var(--mint); color: #062615; }
.pill.fill-coral { background: var(--coral); color: #2a0707; }
.pill.fill-saffron { background: var(--saffron); color: #0E1730; }
.pill.ghost { border: 1.5px solid rgba(255,255,255,.18); color: var(--muted); }

/* calculator (scene 1) */
.calc { width: min(70cqw, 46cqh); border-radius: 26px; padding: 4cqw; background: linear-gradient(180deg, #1C2A55, #121C3B); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -25px rgba(0,0,0,.8); }
.calc-screen { height: min(17cqw, 11cqh); border-radius: 14px; background: #0A1124; display: flex; align-items: center; justify-content: flex-end; padding: 0 3cqw; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.calc-screen .num { font-size: min(9cqw, 6cqh); white-space: nowrap; }
.calc-keys { margin-top: 3cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; direction: ltr; }
.calc-keys span { height: min(9cqw, 6cqh); border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; font: 600 min(4.4cqw, 3cqh) "Readex Pro"; color: var(--muted); transition: background .15s, color .15s; }
.calc-keys span.op { color: var(--saffron); }
.calc-keys span.hit { background: var(--saffron); color: #0E1730; }

/* bar model (scene 3) */
.barmodel { width: min(78cqw, 60cqh); height: min(16cqw, 11cqh); border-radius: 14px; border: 2px solid rgba(255,255,255,.3); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.barmodel span { border-inline-start: 2px solid transparent; transition: background .35s, border-color .35s; }
.barmodel span:first-child { border-inline-start: 0; }
.barmodel.split span { border-inline-start-color: rgba(255,255,255,.35); }
.barmodel span.on { background: rgba(255,200,61,.85); }

/* labelled fraction (scene 3/4) */
.lab-frac { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 5cqw; row-gap: 0; direction: ltr; }
.lab { direction: rtl; display: flex; align-items: center; gap: 2.4cqw; font: 600 min(5.6cqw, 4cqh) "IBM Plex Sans Arabic"; white-space: nowrap; }
.lab::before { content: ""; width: 7cqw; height: 3px; border-radius: 3px; background: currentColor; order: 2; }
.lab small { display: block; font: 500 min(3.8cqw, 2.7cqh) "Readex Pro"; color: var(--muted); direction: ltr; }
.hl-n .n, .hl-d .d { color: var(--saffron); transition: color .3s; }

/* digit lanes (scenes 7-10, 13) */
.lane { width: 100%; min-width: 0; overflow: hidden; border-radius: 22px; padding: 3cqh 5cqw; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 1.6cqh; justify-items: start; }
.lane.mint { border-color: rgba(61,220,151,.35); }
.lane.coral { border-color: rgba(255,107,107,.35); }
.stream { width: 100%; overflow: hidden; white-space: nowrap; direction: ltr; text-align: left;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.eq .stream { flex: 1 1 0; min-width: 0; width: auto; }
.eq.wide { min-width: 0; max-width: 100%; }
.stream.nomask { -webkit-mask-image: none; mask-image: none; }
.stop { display: inline-block; width: .22em; height: .9em; background: var(--mint); border-radius: 3px; margin-inline-start: .18em; vertical-align: -.08em; }
.rep { color: var(--coral); }
.grp { display: inline-block; padding: 0 .1em; margin: 0 .04em; border-bottom: .09em solid var(--coral); border-radius: 4px; color: var(--coral); transition: background .3s; }
.pulse .grp { background: rgba(255,107,107,.18); }

/* circle & square (scene 10) */
.geo { width: min(42cqw, 26cqh); height: min(42cqw, 26cqh); overflow: visible; }
.geo .stroke { fill: none; stroke: var(--saffron); stroke-width: 3; stroke-linecap: round; }
.geo .dim { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-dasharray: 5 6; }

/* summary tree (scene 11) */
.tree { width: 100%; display: grid; gap: 2.4cqh; justify-items: center; }
.tree-root { padding: .5em 1.4em; border-radius: 99px; background: rgba(255,255,255,.08); font: 700 min(6cqw, 4.2cqh) "Readex Pro"; }
.tree-branches { width: 100%; display: grid; grid-template-columns: 1.35fr 1fr; gap: 3cqw; }
.branch { border-radius: 20px; padding: 2.2cqh 3cqw; display: grid; gap: 1.6cqh; justify-items: center; align-content: start; }
.branch.ok { background: rgba(255,200,61,.08); border: 1px solid rgba(255,200,61,.35); }
.branch.no { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.branch h4 { margin: 0; font: 700 min(5.6cqw, 3.9cqh) "Readex Pro"; }
.leaf { width: 100%; border-radius: 14px; padding: 1.2cqh 2cqw; text-align: center; font: 600 min(4.6cqw, 3.2cqh) "IBM Plex Sans Arabic"; }
.leaf .num { display: block; font-size: 1.1em; margin-top: .2em; }
.leaf.mint { background: rgba(61,220,151,.12); color: var(--mint); }
.leaf.coral { background: rgba(255,107,107,.12); color: var(--coral); }
.leaf.white { background: rgba(255,255,255,.06); color: var(--white); }

/* misc */
.cross { color: var(--coral); font-weight: 700; }
.shake { animation: fp-shake .5s; }
@keyframes fp-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.glow { text-shadow: 0 0 40px rgba(255,200,61,.55); }
.brandmark { height: min(30cqw, 18cqh); }
.nw { white-space: nowrap; }
.lane.center { justify-items: center; }
.fp-q-text .eq { font-size: .95em; vertical-align: middle; margin-inline-start: .2em; }

/* ---------------------------------------------------------------- lesson 2 vocabulary */
.gcd { letter-spacing: -.01em; white-space: nowrap; }
.div-row { width: 100%; display: grid; gap: 1.2cqh; justify-items: center; }
.div-label { font: 600 min(4.6cqw, 3.2cqh) "IBM Plex Sans Arabic"; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; direction: ltr; }
.chipn { min-width: min(8.4cqw, 6cqh); padding: .18em .32em; border-radius: 10px; text-align: center;
  font: 600 min(5cqw, 3.8cqh) "Readex Pro", sans-serif; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  transition: background .35s, border-color .35s, color .35s; }
.chipn.common { background: rgba(61,220,151,.16); border-color: var(--mint); color: var(--mint); }
.chipn.max { background: var(--saffron); border-color: var(--saffron); color: #0E1730; }
.chipn.minus { color: var(--coral); border-color: rgba(255,107,107,.45); }
.flower-row { width: 100%; display: grid; gap: 1cqh; justify-items: center; }
.fl-label { font: 600 min(5cqw, 3.4cqh) "IBM Plex Sans Arabic"; }
.dots { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: min(1.1cqw, .8cqh); width: min(84cqw, 60cqh); }
.dots i { aspect-ratio: 1; border-radius: 50%; display: block; }
.dots i.rose { background: #FF6B8A; }
.dots i.tulip { background: var(--violet); }
.steps { width: 100%; display: grid; gap: .8cqh; direction: ltr; }
.st-head, .st-row { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; align-items: center; }
.st-head { color: var(--muted); font-size: min(5cqw, 3.4cqh); padding-bottom: .6cqh; border-bottom: 1px solid rgba(255,255,255,.12); }
.st-row { font-size: min(6.4cqw, 4.2cqh); padding: .6cqh 0; border-radius: 12px; }
.st-row .res { color: var(--saffron); }
.st-row .res.zero { color: var(--muted); }
.st-row .res.best, .rem.best { background: var(--saffron); color: #0E1730; border-radius: 10px; padding: 0 .3em; }
.euclid { gap: 1.4cqh; }
.eu-row { width: 100%; border-radius: 16px; padding: 1.4cqh 3cqw; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; justify-content: center; }
.rem { color: var(--coral); }
.chain { display: flex; align-items: center; gap: 2cqw; font-size: min(6cqw, 4cqh); }
.chain .arr { color: var(--muted); }
.bouquets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqw; width: min(86cqw, 62cqh); }
.bq { min-width: 0; display: grid; gap: .6cqh; padding: 1.4cqh 1.8cqw; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.bq .dots { width: 100%; gap: 3px; }
.formula .eq { flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- lesson 3 vocabulary */
.op-step { font: 600 .55em "Readex Pro", sans-serif; color: var(--coral); background: rgba(255,107,107,.14); padding: .15em .5em; border-radius: 99px; align-self: center; }
.num.x { position: relative; }
.num.x::after { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: .09em; background: var(--coral); border-radius: 4px;
  transform: rotate(-24deg) scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.num.x.struck::after { transform: rotate(-24deg) scaleX(1); }
.num.x.struck { opacity: .55; transition: opacity .45s; }
.chain.wrap { flex-wrap: wrap; justify-content: center; row-gap: 1cqh; font-size: min(5.2cqw, 3.6cqh); max-width: 100%; }

/* ---------------------------------------------------------------- lesson 4 vocabulary */
.rad { display: inline-flex; align-items: stretch; direction: ltr; line-height: 1; }
.rad .rs { font-family: "Readex Pro", "IBM Plex Sans Arabic", sans-serif; font-weight: 500; font-size: 1.12em; margin-inline-end: -.04em; transform: translateY(.02em); }
.rad .rb { border-top: max(2px, .075em) solid currentColor; padding: .1em .12em 0; display: inline-flex; align-items: center; gap: .1em; }
.rad .rb .frac { font-size: .8em; }
sup.sq { font-size: .55em; vertical-align: super; margin-inline-start: .04em; }
.tiles { gap: 8cqw; align-items: flex-end; }
.tile-wrap { display: grid; justify-items: center; gap: 1.2cqh; }
.tile { display: grid; place-items: center; border: 3px solid var(--saffron); border-radius: 10px; background: rgba(255,200,61,.1);
  font: 600 min(5cqw, 3.6cqh) "IBM Plex Sans Arabic"; }
.tile.big { width: min(36cqw, 24cqh); aspect-ratio: 1; }
.tile.small { width: min(17cqw, 11.5cqh); aspect-ratio: 1; border-color: var(--coral); background: rgba(255,107,107,.1); }
.side { font: 700 min(7cqw, 5cqh) "Readex Pro"; }
.lane-tag { font: 600 min(4cqw, 2.9cqh) "IBM Plex Sans Arabic"; color: var(--muted); }
.lane-tag.mint { color: var(--mint); } .lane-tag.coral { color: var(--coral); }
.lane .row { flex-wrap: wrap; gap: 2cqh 8cqw; }
.eq .num + .rad { margin-inline-start: -.2em; }
.tile > span { direction: rtl; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- lesson 5 vocabulary (powers) */
.pw { display: inline-block; white-space: nowrap; direction: ltr; }
.pw > sup.xp { font-size: .56em; vertical-align: .78em; line-height: 0; margin-inline-start: .06em; font-weight: 600; }
.pw > sup.xp .num, .pw > sup.xp .var { font-size: 1em; }
.frac .pw > sup.xp { vertical-align: .7em; }
.ladder { display: grid; gap: .9cqh; justify-items: center; }
.lad-row { display: flex; align-items: center; gap: 3cqw; direction: ltr; }
.lad-row.dim { opacity: .45; }
.lad-row .op-step { font-size: min(4cqw, 2.8cqh); }
.digits i { font-style: normal; display: inline-block; }
.one { transition: color .3s, text-shadow .3s; }
.hl { color: var(--saffron) !important; text-shadow: 0 0 18px rgba(255,200,61,.6); }
.lane.saffron-b { border-color: rgba(255,200,61,.4); background: rgba(255,200,61,.06); }
.grpb { display: inline-flex; align-items: center; gap: .25em; padding: .05em .3em; border: 2px solid rgba(255,200,61,.5); border-radius: 12px; }
.sum-row { display: flex; align-items: center; gap: 3cqw; flex-wrap: wrap; font: 500 min(4.6cqw, 3.3cqh)/1.5 "IBM Plex Sans Arabic", sans-serif; color: var(--white); }
.sum-row .eq { font-size: 1.15em; }
.digits i.g { margin-inline-start: .22em; }
.eq > .res:has(> .op) { display: inline-flex; align-items: center; gap: .32em; }
.fp-q-text .eq { margin-inline: .2em; }

/* ---------------------------------------------------------------- lesson 6 vocabulary (algebra) */
.tm { display: inline-block; white-space: nowrap; direction: ltr; }
.tm > sup.xp { font-size: .56em; vertical-align: .78em; line-height: 0; margin-inline-start: .04em; font-weight: 600; }
.tm .var + .var { margin-inline-start: .04em; }
.area { direction: ltr; width: min(78cqw, 52cqh); display: grid; gap: .8cqh; }
.area-top { display: flex; margin-inline-start: 9cqw; font-size: min(6cqw, 4.2cqh); }
.area-top > span { text-align: center; }
.area-row { display: flex; align-items: stretch; gap: 2cqw; }
.area-side { width: 7cqw; display: grid; place-items: center; font-size: min(6cqw, 4.2cqh); }
.area-box { flex: 1; display: flex; height: min(26cqw, 17cqh); border: 3px solid var(--saffron); border-radius: 10px; overflow: hidden; background: rgba(255,200,61,.08); }
.area-box .cell { display: grid; place-items: center; font-size: min(6.4cqw, 4.4cqh); transition: background .4s; }
.area-box .c2 { border-inline-start: 3px dashed transparent; transition: border-color .4s; }
.area.split .c1 { background: rgba(76,194,255,.16); }
.area.split .c2 { background: rgba(61,220,151,.16); border-inline-start-color: var(--white); }
.grid4 { display: grid; grid-template-columns: auto 1fr 1fr; gap: 1cqh 2cqw; direction: ltr; width: min(70cqw, 48cqh); font-size: min(6.4cqw, 4.4cqh); }
.grid4 .gh, .grid4 .gs { display: grid; place-items: center; }
.grid4 .gc { display: grid; place-items: center; padding: 1.6cqh 0; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.prod { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqh 2cqw; width: 100%; direction: ltr; }
.prod .pc { display: grid; place-items: center; padding: 1.2cqh 1cqw; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: min(4.8cqw, 3.4cqh); }
.grp-h { border-radius: 10px; padding: 0 .12em; transition: background .4s, box-shadow .4s; }
.grp-h.grp-on { background: rgba(255,200,61,.18); box-shadow: 0 0 0 2px rgba(255,200,61,.55); }
.op.arrow { color: var(--saffron); }

/* ---------------------------------------------------------------- lesson 7 vocabulary (identities) */
.tbl { display: grid; grid-template-columns: auto 1fr 1fr; direction: ltr; width: min(84cqw, 56cqh); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; font-size: min(5.6cqw, 3.9cqh); }
.tbl > span { display: grid; place-items: center; padding: 1.4cqh 2cqw; border-top: 1px solid rgba(255,255,255,.08); }
.tbl > span:nth-child(3n+2), .tbl > span:nth-child(3n) { border-inline-start: 1px solid rgba(255,255,255,.08); }
.tbl .th { background: rgba(255,255,255,.06); border-top: 0; color: var(--muted); }
.tbl .tc.v { color: var(--mint); font-weight: 600; }
.sq { display: grid; grid-template-columns: auto 2fr 1fr; grid-template-rows: auto 2fr 1fr; gap: 0; direction: ltr; width: min(66cqw, 40cqh); aspect-ratio: 1.06; font-size: min(5.6cqw, 3.9cqh); }
.sq .lt, .sq .ls { display: grid; place-items: center; padding: .3em; }
.sqc { display: grid; place-items: center; border: 2px solid rgba(255,255,255,.35); margin: -1px; opacity: .35; transition: opacity .4s, background .4s; }
.sqc.on { opacity: 1; }
.sqc.aa.on { background: rgba(76,194,255,.22); }
.sqc.ab.on { background: rgba(61,220,151,.2); }
.sqc.bb.on { background: rgba(255,200,61,.28); }
.tm.xx { position: relative; }
.tm.xx::after { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: .09em; background: var(--coral); border-radius: 4px; transform: rotate(-20deg) scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.tm.xx.struck::after { transform: rotate(-20deg) scaleX(1); }
.tm.xx.struck { opacity: .5; transition: opacity .45s; }

/* ---------------------------------------------------------------- lesson 8 vocabulary (equations) */
.bal { direction: ltr; width: min(84cqw, 56cqh); display: grid; justify-items: center; position: relative; padding-top: 1cqh; }
.bal .beam { width: 92%; height: max(5px, 1cqh); border-radius: 99px; background: var(--saffron); box-shadow: 0 0 18px rgba(255,200,61,.35); }
.bal .pans { width: 100%; display: flex; justify-content: space-between; margin-top: -.2cqh; }
.bal .pan { width: 44%; min-height: min(16cqw, 11cqh); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 1.4cqw; padding: 1.4cqh 1cqw; border: 3px solid rgba(255,255,255,.35); border-top: 0; border-radius: 0 0 50% 50% / 0 0 30% 30%; }
.bal .post { width: max(5px, 1cqh); height: min(10cqw, 6cqh); background: rgba(255,255,255,.35); margin-top: -1cqh; border-radius: 4px; }
.bag { display: grid; place-items: center; width: min(10cqw, 6.6cqh); aspect-ratio: .9; border-radius: 40% 40% 30% 30%; background: rgba(76,194,255,.22); border: 2px solid var(--sky); font-size: min(5.4cqw, 3.6cqh); }
.wt { display: grid; place-items: center; min-width: min(10cqw, 6.6cqh); padding: .2em .4em; border-radius: 8px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.45); font: 700 min(5cqw, 3.4cqh) "Readex Pro", sans-serif; }
.wt.big { min-width: min(18cqw, 12cqh); font-size: min(6.4cqw, 4.4cqh); }
.solve { display: grid; gap: 1.2cqh; width: 100%; justify-items: stretch; }
.sv-row { display: grid; grid-template-columns: min(22cqw, 15cqh) 1fr; align-items: center; gap: 2cqw; direction: ltr; }
.sv-row .op-step { justify-self: end; white-space: nowrap; font-size: min(4cqw, 2.8cqh); }
.sv-row > .eq { justify-self: start; }
.bal { padding-bottom: 2.4cqh; }
.bal .post { position: absolute; left: 50%; top: 1.4cqh; bottom: 1.6cqh; height: auto; margin: 0; transform: translateX(-50%); }
.bal::after { content: ""; position: absolute; left: 50%; bottom: 1cqh; width: 24%; height: max(4px, .8cqh); transform: translateX(-50%); background: rgba(255,255,255,.35); border-radius: 99px; }
.sv-row { grid-template-columns: min(27cqw, 18cqh) 1fr; gap: 1.6cqw; }
.sv-row .op-step { font-size: min(3.4cqw, 2.4cqh); padding: .15em .45em; }
.solve .eq.sm { font-size: min(7cqw, 4.8cqh); }
.solve .eq.mid { font-size: min(9.5cqw, 6.5cqh); }

/* ---------------------------------------------------------------- lesson 9 vocabulary (zero product) */
.fork { display: flex; direction: ltr; align-items: stretch; gap: 2cqw; width: 100%; }
.fork .br { flex: 1 1 0; min-width: 0; justify-items: center; padding: 1.6cqh 2cqw; gap: 1cqh; }
.fork .or { align-self: center; font: 700 min(4.6cqw, 3.2cqh) "IBM Plex Sans Arabic", sans-serif; color: var(--muted); }
.wrong-line { display: flex; align-items: center; gap: .5em; color: var(--coral); font-size: min(6cqw, 4.2cqh); position: relative; }
.wrong-line::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 3px; background: var(--coral); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.wrong-line.struck::after { transform: scaleX(1); }
.wrong-line.struck { opacity: .6; }

/* ---------------------------------------------------------------- lesson 10 vocabulary (inequalities) */
.nl { width: min(88cqw, 58cqh); direction: ltr; overflow: visible; }
.nl .ax { stroke: rgba(255,255,255,.45); stroke-width: 2; }
.nl .ah { fill: rgba(255,255,255,.45); }
.nl .tk { stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.nl .tl { fill: var(--muted); font: 600 13px "Readex Pro", sans-serif; text-anchor: middle; }
.nl .tl.tp { fill: var(--saffron); font-weight: 700; }
.nl .ray line { stroke: var(--mint); stroke-width: 7; stroke-linecap: round; opacity: .9; }
.nl .pt { stroke: var(--mint); stroke-width: 3; }
.nl .pt.open { fill: #0E1730; }
.nl .pt.closed { fill: var(--mint); }
.sum-row .sym { font: 700 1.6em/1 "Readex Pro", sans-serif; color: var(--saffron); min-width: 1.2em; text-align: center; }
.sum-row .spacer { flex: 1; }
.op.coral { color: var(--coral) !important; font-weight: 700; }
.op.saffron { color: var(--saffron) !important; font-weight: 700; }
.op.mint { color: var(--mint) !important; font-weight: 700; }
.sum-row .sym { direction: ltr; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- lesson 11 vocabulary (systems) */
.sys { display: inline-flex; align-items: center; gap: .15em; direction: ltr; }
.sys .brace { font: 300 2.5em/1 "STIX Two Text", serif; color: var(--muted); transform: scaleY(1.15); }
.sys .rows { display: grid; gap: .25em; }
.sys .r { display: flex; align-items: center; gap: .5em; }
.sys .tag { font: 500 .55em "Readex Pro", sans-serif; color: var(--muted); }
.stack { display: grid; justify-items: end; gap: .35em; direction: ltr; }
.stack .s2 { display: flex; align-items: center; gap: .4em; }
.stack .plus { color: var(--saffron); font: 700 1em "Readex Pro", sans-serif; }
.stack .s3 { border-top: 3px solid rgba(255,255,255,.5); padding-top: .3em; justify-self: stretch; text-align: right; }

/* ---------------------------------------------------------------- lesson 12 vocabulary (coordinate grid) */
.cg { height: min(44cqh, 82cqw); width: auto; max-width: 100%; direction: ltr; overflow: visible; }
.cg.sm { height: min(34cqh, 70cqw); }
.cg .gl { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.cg .axis { stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.cg .an { fill: var(--muted); font: italic 600 11px "STIX Two Text", serif; text-anchor: middle; }
.cg .tl { fill: var(--muted); font: 500 8.5px "Readex Pro", sans-serif; text-anchor: middle; }
.cg .tl.ty { text-anchor: end; }
.cg .ln { stroke-width: 3; stroke-linecap: round; }
.cg .ln.saffron { stroke: var(--saffron); }
.cg .ln.mint { stroke: var(--mint); }
.cg .p circle { stroke: #0E1730; stroke-width: 1.5; }
.cg .p.mint circle { fill: var(--mint); }
.cg .p.saffron circle { fill: var(--saffron); }
.cg .p.coral circle { fill: var(--coral); }
.cg .pl { fill: var(--white); font: 600 9px "Readex Pro", sans-serif; }
.xytab { display: grid; direction: ltr; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; font-size: min(5.4cqw, 3.8cqh); }
.xytab > span { display: grid; place-items: center; min-width: 3.2em; padding: .9cqh 2cqw; border-inline-start: 1px solid rgba(255,255,255,.08); }
.xytab > span { border-bottom: 1px solid rgba(255,255,255,.08); }
.xytab .h { background: rgba(255,255,255,.06); color: var(--muted); border-inline-start: 0; }
.cg .p.hit .halo { fill: rgba(255,200,61,.22); stroke: var(--saffron); stroke-width: 1.5; }
.cg .p.hit circle:not(.halo) { fill: var(--saffron); }

/* ---------------------------------------------------------------- lesson 14 vocabulary (function) */
.mach { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 1.6cqw; padding: 1.4cqh 3cqw; border-radius: 18px; background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.18); }
.mach .mb { display: grid; place-items: center; min-width: 15cqw; padding: 1.2cqh 2cqw; border-radius: 12px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); transition: background .3s, border-color .3s, box-shadow .3s; }
.mach .mb.on { background: rgba(255,200,61,.14); border-color: rgba(255,200,61,.6); box-shadow: 0 0 18px rgba(255,200,61,.25); }
.mach .mar, .trace .tar { color: var(--muted); font: 600 min(5cqw, 3.4cqh) "Readex Pro", sans-serif; }
.trace { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 2cqw; padding: .8cqh 3cqw; border-radius: 99px; background: rgba(255,200,61,.06); border: 1px solid rgba(255,200,61,.3); }
.trace.coral-b { background: rgba(255,107,107,.07); border-color: rgba(255,107,107,.35); }
.adg { height: min(30cqh, 62cqw); width: auto; max-width: 100%; direction: ltr; overflow: visible; }
.adg .set { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.adg .ed { stroke: var(--saffron); stroke-width: 2.4; }
.adg .dv { fill: var(--white); font: 600 17px "Readex Pro", sans-serif; text-anchor: middle; }
.adg .dv.o { fill: var(--saffron); }
.adg .sl { fill: var(--muted); font: 500 10px "IBM Plex Sans Arabic", sans-serif; text-anchor: middle; }
.mapr { font-size: min(7cqw, 5cqh); display: flex; direction: ltr; align-items: center; justify-content: center; gap: 3cqw; padding-bottom: 3cqh; }
.mapr .chip { font-size: inherit; position: relative; display: grid; place-items: center; min-width: 16cqw; padding: 1.2cqh 3cqw; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16); }
.mapr .chip.saffron { border-color: rgba(255,200,61,.6); background: rgba(255,200,61,.1); }
.mapr .chip.mint { border-color: rgba(61,220,151,.55); background: rgba(61,220,151,.08); }
.mapr .fa { display: grid; justify-items: center; line-height: 1; }
.mapr .fa i { font-style: normal; color: var(--saffron); font: 600 min(8cqw, 5.6cqh) "Readex Pro", sans-serif; }
.mapr .mt { position: absolute; top: 100%; margin-top: .6cqh; font: 600 min(4cqw, 2.9cqh) "IBM Plex Sans Arabic", sans-serif; font-style: normal; white-space: nowrap; }
.mapr .chip.saffron .mt { color: var(--saffron); } .mapr .chip.mint .mt { color: var(--mint); }
.rope { height: min(30cqh, 48cqw); width: auto; max-width: 100%; direction: ltr; overflow: visible; }
.rope .rp { stroke-width: 6; stroke-linecap: round; stroke: rgba(255,255,255,.7); }
.rope .rp.saffron { stroke: var(--saffron); } .rope .rp.mint { stroke: var(--mint); }
.rope .rl { font: italic 600 13px "STIX Two Text", serif; text-anchor: middle; }
.rope .rl.saffron { fill: var(--saffron); } .rope .rl.mint { fill: var(--mint); }
.rope .rt { fill: var(--muted); font: 500 10px "IBM Plex Sans Arabic", sans-serif; text-anchor: middle; }
.rope .sq1 { fill: rgba(255,200,61,.18); stroke: var(--saffron); stroke-width: 2; }
.rope .sq2 { fill: rgba(61,220,151,.15); stroke: var(--mint); stroke-width: 2; }
.crvg .crv { fill: none; stroke: var(--saffron); stroke-width: 3; stroke-linecap: round; }
.crvg .dash { stroke: rgba(255,200,61,.6); stroke-width: 1.5; stroke-dasharray: 4 4; }
.crvg .p.hit circle:not(.halo) { fill: var(--mint); }
.crvg .p.hit .halo { fill: rgba(61,220,151,.2); stroke: var(--mint); }
.xytab > span.hl { background: rgba(255,200,61,.16); }

/* ---------------------------------------------------------------- lesson 15 vocabulary (ways to define a function) */
.cg .fcv { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.cg .sg { stroke-width: 2; stroke-dasharray: 5 4; }
.cg .sg.mint { stroke: var(--mint); } .cg .sg.saffron { stroke: var(--saffron); } .cg .sg.coral { stroke: var(--coral); }
.cg .sg.bar { stroke-width: 5; stroke-dasharray: none; stroke-linecap: round; }
.cg .pl.mint { fill: var(--mint); }
.cg .al { fill: var(--muted); font: 600 10px "IBM Plex Sans Arabic", sans-serif; transition: fill .3s; }
.cg .al.on { fill: var(--saffron); }
.scat { height: min(40cqh, 76cqw); }
.vtab { display: grid; grid-template-columns: 1fr 1fr; width: min(70cqw, 52cqh); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; font-size: min(4.6cqw, 3.3cqh); }
.vtab > span { display: grid; place-items: center; padding: .55cqh 2cqw; border-bottom: 1px solid rgba(255,255,255,.07); transition: background .3s; }
.vtab .h { background: rgba(255,255,255,.06); color: var(--muted); font: 600 min(3.8cqw, 2.8cqh) "IBM Plex Sans Arabic", sans-serif; }
.vtab > span.hl { background: rgba(255,200,61,.16); }
.xytab.tight { font-size: min(4.4cqw, 3.2cqh); }
.xytab.tight > span { min-width: 0; padding: .9cqh 1cqw; }
.xytab.tight .h { font: 600 min(3.4cqw, 2.5cqh) "IBM Plex Sans Arabic", sans-serif; padding: .9cqh 2cqw; }
.lane .res { justify-self: center; }

/* ---------------------------------------------------------------- lesson 16 vocabulary (probability) */
.coin { display: grid; place-items: center; width: min(26cqw, 17cqh); aspect-ratio: 1; border-radius: 50%; font: 700 min(5cqw, 3.4cqh) "IBM Plex Sans Arabic", sans-serif; color: #0E1730;
  background: radial-gradient(circle at 35% 30%, #f3f5f8, #aab3c2 70%, #7d879a); box-shadow: inset 0 0 0 5px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.35); transition: transform .3s, box-shadow .3s; }
.coin.on { transform: scale(1.08); box-shadow: inset 0 0 0 5px rgba(255,200,61,.9), 0 0 26px rgba(255,200,61,.45); }
.seq .mini { display: grid; place-items: center; width: min(10cqw, 7cqh); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); font: 700 min(4.4cqw, 3cqh) "IBM Plex Sans Arabic", sans-serif; }
.seq .mini.q { background: rgba(255,200,61,.16); border-color: var(--saffron); color: var(--saffron); }
.spin { height: min(30cqh, 44cqw); width: auto; overflow: visible; }
.spin .sec { stroke: #0E1730; stroke-width: 2; opacity: .55; transition: opacity .3s; }
.spin .sec.on { opacity: 1; }
.spin .sec.v1 { fill: var(--saffron); } .spin .sec.v2 { fill: var(--mint); } .spin .sec.v3 { fill: var(--coral); }
.spin .sl { fill: #0E1730; font: 700 17px "Readex Pro", sans-serif; text-anchor: middle; }
.spin .hub { fill: #0E1730; } .spin .ptr { fill: var(--white); }
.ptree { height: min(24cqh, 36cqw); width: auto; max-width: 100%; direction: ltr; overflow: visible; }
.ptree.sm { height: min(18cqh, 32cqw); }
.ptree .root { fill: var(--white); }
.ptree .br { stroke: rgba(255,255,255,.45); stroke-width: 2; transition: stroke .3s; }
.ptree .b.on .br { stroke: var(--saffron); stroke-width: 3; }
.ptree .lf { fill: var(--white); font: 600 15px "IBM Plex Sans Arabic", "Readex Pro", sans-serif; }
.ptree .pp { fill: var(--saffron); font: 700 12px "Readex Pro", sans-serif; text-anchor: middle; paint-order: stroke; stroke: #0E1730; stroke-width: 3px; }
.dice .die { display: grid; place-items: center; width: min(11cqw, 7.5cqh); aspect-ratio: 1; border-radius: 9px; background: #f3f5f8; color: #0E1730; font-size: min(5.4cqw, 3.8cqh); transition: background .3s, transform .3s; }
.dice .die.on { background: var(--saffron); transform: translateY(-4px); }
.balls .ball { display: grid; place-items: center; width: min(8.2cqw, 5.6cqh); aspect-ratio: 1; border-radius: 50%; color: #0E1730; font-size: min(4.4cqw, 3cqh); }
.balls .ball.v1 { background: var(--saffron); } .balls .ball.v2 { background: var(--mint); } .balls .ball.v3 { background: var(--coral); } .balls .ball.v4 { background: #8fb7ff; }
.pline { display: flex; direction: ltr; align-items: center; gap: 2cqw; width: 100%; padding-bottom: 3.4cqh; }
.pline .track { flex: 1; height: 8px; border-radius: 9px; background: linear-gradient(90deg, var(--coral), var(--saffron), var(--mint)); opacity: .8; }
.pline .pt { position: relative; display: grid; place-items: center; width: min(12cqw, 8cqh); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); font-size: min(5.4cqw, 3.8cqh); transition: border-color .3s, box-shadow .3s; }
.pline .pt em { position: absolute; top: 100%; margin-top: .6cqh; font: 600 min(3.8cqw, 2.8cqh) "IBM Plex Sans Arabic", sans-serif; font-style: normal; color: var(--muted); white-space: nowrap; }
.pline .pt.z.on { border-color: var(--coral); box-shadow: 0 0 18px rgba(255,107,107,.45); }
.pline .pt.o.on { border-color: var(--mint); box-shadow: 0 0 18px rgba(61,220,151,.45); }
.venn { height: min(30cqh, 50cqw); width: auto; max-width: 100%; direction: ltr; overflow: visible; }
.venn .om { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.venn .ol { fill: var(--muted); font: italic 600 15px "STIX Two Text", serif; }
.venn .ea, .venn .ec { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.3); stroke-width: 1.8; transition: fill .3s, stroke .3s; }
.venn .ea.on { fill: rgba(255,200,61,.12); stroke: var(--saffron); }
.venn .ec.on { fill: rgba(61,220,151,.18); stroke: var(--mint); }
.venn .el { font: 600 10px "IBM Plex Sans Arabic", sans-serif; fill: var(--muted); }
.venn .vn { fill: var(--white); font: 600 15px "Readex Pro", sans-serif; text-anchor: middle; transition: fill .3s; }
.venn .vn.hl { fill: var(--saffron); } .venn .vn.hl2 { fill: var(--mint); }
.freq { height: min(28cqh, 52cqw); }
.freq .half { stroke: var(--saffron); stroke-width: 1.5; stroke-dasharray: 5 4; }
.freq .fl { fill: none; stroke: var(--mint); stroke-width: 2.4; }
.freq .fp { fill: var(--mint); stroke: #0E1730; stroke-width: 1.2; }
.duo { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 2cqw; width: 100%; }
.duo .spin { height: min(22cqh, 34cqw); }
.duo .ptree { height: min(22cqh, 34cqw); }

/* ---------------------------------------------------------------- lesson 17 vocabulary (exclusive / complementary events) */
.urn { max-width: 92cqw; justify-content: center; }
.urn .ball.u { width: min(10.4cqw, 6.6cqh); background: rgba(255,255,255,.1); color: var(--white); border: 1.5px solid rgba(255,255,255,.2); transition: background .3s, color .3s, opacity .3s; }
.urn .ball.u.hs { background: var(--saffron); color: #0E1730; border-color: transparent; }
.urn .ball.u.hm { background: var(--mint); color: #0E1730; border-color: transparent; }
.urn .ball.u.hc { background: var(--coral); color: #2a0707; border-color: transparent; }
.venn .vn.big { font: italic 600 22px "STIX Two Text", serif; }
.venn .vn.nil { fill: var(--coral); font-size: 20px; }
.venn .pa { fill: rgba(255,200,61,.16); stroke: var(--saffron); stroke-width: 1.8; }
.venn .pb { fill: rgba(61,220,151,.12); stroke: var(--mint); stroke-width: 1.8; }
.dice .die.on2 { background: var(--mint); transform: translateY(-4px); }

/* ---------------------------------------------------------------- lesson 18 vocabulary (compound experiments) */
.ptree.t2 { height: min(34cqh, 66cqw); }
.ptree .s .br { transition: stroke .3s, stroke-width .3s; }
.ptree .s.on .br { stroke: var(--saffron); stroke-width: 3.2; }
.ptree .nd { fill: var(--white); font: italic 600 14px "STIX Two Text", serif; }
.ptree .rs { fill: var(--muted); font: 500 11px "Readex Pro", sans-serif; transition: fill .3s; }
.ptree .s.on .rs { fill: var(--saffron); }
.spin .sec.vR { fill: var(--coral); } .spin .sec.vV { fill: var(--mint); }
.cards .card { width: min(11cqw, 7.5cqh); aspect-ratio: 3 / 4; border-radius: 8px; border: 2px solid rgba(255,255,255,.35); opacity: .7; transition: transform .3s, opacity .3s; }
.cards .card.b { background: #4c8dff; } .cards .card.g { background: var(--mint); }
.cards .card.on { opacity: 1; transform: translateY(-5px); border-color: var(--white); }
.cubes .cube { width: min(6.5cqw, 4.5cqh); aspect-ratio: 1; border-radius: 4px; box-shadow: inset -3px -3px 0 rgba(0,0,0,.18); }
.cubes .cube.bl { background: #4c8dff; } .cubes .cube.ye { background: var(--saffron); }

/* ---------------------------------------------------------------- lesson 19 vocabulary (median, range, quartiles) */
.seqs { display: flex; direction: ltr; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; max-width: 94cqw; }
.seqs .si { display: grid; place-items: center; min-width: min(9cqw, 6.2cqh); padding: .9cqh 1.4cqw; border-radius: 10px; font-size: min(5cqw, 3.6cqh); background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16); transition: background .3s, border-color .3s, transform .3s, color .3s; }
.seqs .si.lo { border-color: rgba(61,220,151,.5); }
.seqs .si.bad { background: rgba(255,107,107,.2); border-color: var(--coral); color: var(--coral); }
.seqs .si.h1 { border-color: rgba(76,141,255,.75); background: rgba(76,141,255,.12); }
.seqs .si.h2 { border-color: rgba(61,220,151,.6); background: rgba(61,220,151,.1); }
.seqs .si.med { background: var(--saffron); border-color: var(--saffron); color: #0E1730; transform: translateY(-5px); }
.vtab.v3 { grid-template-columns: 1fr 1fr 1fr; width: min(84cqw, 60cqh); }
.vtab .cum { color: var(--saffron); }
.qbar { position: relative; width: 86cqw; padding: 5cqh 0 7cqh; direction: ltr; }
.qbar .segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 3.4cqh; }
.qbar .segs i { border-radius: 6px; background: rgba(76,141,255,.35); }
.qbar .segs i:nth-child(2), .qbar .segs i:nth-child(4) { background: rgba(61,220,151,.35); }
.qbar .qm { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: .3cqh; font-size: min(4.4cqw, 3.2cqh); }
.qbar .qm::after { content: ""; width: 3px; height: 6.4cqh; background: var(--saffron); border-radius: 3px; order: 1; }
.qbar .qm em { order: 2; font: 600 min(3.4cqw, 2.5cqh) "IBM Plex Sans Arabic", sans-serif; font-style: normal; color: var(--muted); white-space: nowrap; }