:root{
  --ink:#241B3A;
  --ink-soft:#5B5273;
  --paper:#F7F4FF;
  --card:#FFFFFF;
  --magic:#6D4AFF;
  --keyblue:#195A8C;
  --magic-soft:#EDE7FF;
  --spark:#FFB020;
  --mint:#12B39B;
  --mint-soft:#E2F8F4;
  --coral:#FF6B6B;
  --coral-soft:#FFEDED;
  --line:#E5DFF7;
  --radius:20px;
  --shadow:0 2px 0 var(--line), 0 12px 30px rgba(36,27,58,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Nunito","Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body[dir="rtl"]{font-family:"Vazirmatn","Nunito",system-ui,sans-serif}

h1,h2,h3,.display{font-family:"Fredoka","Vazirmatn",system-ui,sans-serif;font-weight:600;line-height:1.25;margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font-family:inherit;font-size:inherit}
:focus-visible{outline:3px solid var(--magic);outline-offset:3px;border-radius:8px}

.wrap{max-width:660px;margin:0 auto;padding:20px 18px 120px}
.screen{display:none;animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.screen.on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:10px;padding:18px 0 8px}
.logo{font-family:"Fredoka","Vazirmatn",sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em}
.logo .wand{display:inline-block;transform:rotate(-8deg)}
.top .sp{flex:1}
.chip{
  font-size:14px;font-weight:700;padding:7px 13px;border-radius:99px;
  background:var(--card);border:1.5px solid var(--line);color:var(--ink-soft);
}
.chip:hover{border-color:var(--magic);color:var(--magic)}

/* ---------- language picker ---------- */
.hero{text-align:center;padding:34px 0 26px}
.hero .stars{font-size:44px;letter-spacing:6px;display:block;margin-bottom:14px}
.hero h1{font-size:34px;margin-bottom:8px}
.hero p{color:var(--ink-soft);margin:0;font-size:17px}
.langgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.lang{
  background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:14px 14px;text-align:start;transition:.15s;font-weight:700;
}
.lang small{display:block;font-weight:600;color:var(--ink-soft);font-size:13px}
.lang:hover{border-color:var(--magic);transform:translateY(-2px)}
.lang.sel{border-color:var(--magic);background:var(--magic-soft)}

/* ---------- ask screen ---------- */
.askbox{
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
}
.askbox textarea{
  width:100%;border:0;resize:none;min-height:92px;background:none;color:var(--ink);
  font-size:18px;line-height:1.5;
}
.askbox textarea::placeholder{color:#A79FC4}
.tools{display:flex;gap:8px;flex-wrap:wrap;border-top:1.5px solid var(--line);padding-top:12px;margin-top:8px}
.tool{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  padding:9px 13px;border-radius:12px;background:var(--paper);color:var(--ink-soft);
  border:1.5px solid transparent;transition:.15s;
}
.tool:hover{background:var(--magic-soft);color:var(--magic)}
.tool.rec{background:var(--coral-soft);color:var(--coral);animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.55}}
.attach{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px;
  background:var(--magic-soft);border-radius:14px;
}
.thumb{position:relative;width:56px;height:56px;flex:none}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.thumb .num{
  position:absolute;bottom:-3px;inset-inline-start:-3px;background:var(--magic);color:#fff;
  font-size:11px;font-weight:800;min-width:17px;height:17px;line-height:17px;text-align:center;
  border-radius:99px;border:2px solid var(--card);
}
.thumb .x{
  position:absolute;top:-6px;inset-inline-end:-6px;width:20px;height:20px;line-height:1;
  background:var(--ink);color:#fff;border-radius:99px;font-size:14px;font-weight:700;padding:0;
}
.thumbcount{margin-inline-start:auto;font-size:13px;font-weight:800;color:var(--magic)}

.btn{
  display:block;width:100%;background:var(--magic);color:#fff;font-weight:700;
  padding:17px;border-radius:16px;font-size:18px;margin-top:16px;
  box-shadow:0 4px 0 #4A2FD1;transition:.12s;font-family:"Fredoka","Vazirmatn",sans-serif;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 #4A2FD1}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4A2FD1}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--line);border:1.5px solid var(--line)}
.btn.ghost:hover{box-shadow:0 4px 0 var(--line)}


/* ---------- loading ---------- */
.loading{text-align:center;padding:70px 0}
.loading .orb{font-size:52px;display:inline-block;animation:float 1.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(8deg)}}
.loading p{color:var(--ink-soft);margin-top:18px;font-weight:700}

/* ---------- lesson ---------- */
.trail{display:flex;gap:4px;margin:6px 0 20px;flex-wrap:wrap}
.trail i{flex:1 1 12px;min-width:8px;height:7px;border-radius:99px;background:var(--line);transition:.35s}
.trail i.done{background:var(--mint)}
.trail i.now{background:var(--magic)}

.meta{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.meta .dot{width:4px;height:4px;border-radius:99px;background:var(--line)}

.card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.stepemoji{font-size:40px;line-height:1;display:block;margin-bottom:10px}
.card h2{font-size:24px;margin-bottom:14px}

ul.dots{list-style:none;padding:0;margin:0}
ul.dots li{
  display:flex;gap:11px;padding:11px 0;border-bottom:1.5px dashed var(--line);
  font-size:17px;line-height:1.5;
}
ul.dots li:last-child{border-bottom:0}
ul.dots li .b{flex:none;font-size:19px;line-height:1.4}

.eq{
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
  padding:16px;margin-top:14px;text-align:center;font-size:20px;overflow-x:auto;direction:ltr;
}
.hook{
  margin-top:16px;background:linear-gradient(180deg,#FFF8E9,#FFF3D9);
  border:2px solid #FFE0A3;border-radius:14px;padding:14px 16px;
}
.hook .lbl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#B47800;display:block;margin-bottom:4px}


/* ---------- test ---------- */
.test{margin-top:16px;background:var(--card);border:2px solid var(--magic);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.test .lbl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--magic);display:block;margin-bottom:8px}
.test h3{font-size:19px;margin-bottom:14px}
.opt{
  display:block;width:100%;text-align:start;background:var(--paper);
  border:2px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:9px;
  font-weight:600;transition:.14s;
}
.opt:hover:not([disabled]){border-color:var(--magic);background:var(--magic-soft)}
.opt.right{border-color:var(--mint);background:var(--mint-soft)}
.opt.wrong{border-color:var(--coral);background:var(--coral-soft)}
.opt[disabled]{cursor:default}
.blank{
  width:100%;padding:14px 16px;border-radius:14px;border:2px solid var(--line);
  background:var(--paper);font-weight:700;
}
.blank:focus{border-color:var(--magic);outline:none}
.verdict{margin-top:12px;padding:13px 15px;border-radius:14px;font-weight:700;font-size:15px}
.verdict.good{background:var(--mint-soft);color:#0A7D6C}
.verdict.bad{background:var(--coral-soft);color:#C03A3A}

/* ---------- step controls ---------- */
.controls{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.controls .c{
  flex:1;min-width:120px;background:var(--card);border:2px solid var(--line);
  border-radius:14px;padding:13px 10px;font-weight:700;font-size:15px;text-align:center;transition:.14s;
}
.controls .c:hover{border-color:var(--magic);color:var(--magic)}
.controls .c.primary{background:var(--magic);color:#fff;border-color:var(--magic);box-shadow:0 4px 0 #4A2FD1}
.controls .c.primary:hover{color:#fff;transform:translateY(-1px)}
.controls .c[disabled]{opacity:.45;pointer-events:none}

.qa{margin-top:14px;background:var(--card);border:2px dashed var(--line);border-radius:var(--radius);padding:16px}
/* the question box grows with the question, so the send button sits at the
   bottom rather than floating beside a tall field */
.qa .row{display:flex;gap:8px;align-items:flex-end}
.qainput{
  flex:1;min-width:0;padding:12px 14px;border-radius:12px;
  border:2px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.55;
  resize:none;overflow-y:auto;max-height:180px;
}
.qainput:focus{border-color:var(--magic);outline:none}
.qa .send{flex:none;white-space:nowrap}
.qa .send{background:var(--magic);color:#fff;font-weight:700;padding:12px 18px;border-radius:12px}
.answer{margin-top:12px;padding:14px;background:var(--magic-soft);border-radius:14px;font-size:16px}
.answer ul{margin:6px 0 0;padding-inline-start:20px}

/* ---------- summary ---------- */
.score{text-align:center;padding:26px 0 10px}
.score .big{font-family:"Fredoka",sans-serif;font-size:56px;font-weight:700;color:var(--magic);line-height:1}
.score p{color:var(--ink-soft);font-weight:700;margin:6px 0 0}
.memcard{
  background:linear-gradient(160deg,#6D4AFF,#9B7BFF);color:#fff;border-radius:var(--radius);
  padding:24px;box-shadow:0 14px 34px rgba(109,74,255,.28);
}
.memcard h2{color:#fff;font-size:22px;margin-bottom:14px}
.memcard ul{list-style:none;padding:0;margin:0}
.memcard li{padding:9px 0;border-bottom:1.5px solid rgba(255,255,255,.22);font-weight:600}
.memcard li:last-child{border-bottom:0}

.err{background:var(--coral-soft);border:2px solid var(--coral);border-radius:14px;padding:14px 16px;font-weight:700;color:#C03A3A;margin-top:14px}

/* ---------- settings ---------- */
.sheet{position:fixed;inset:0;background:rgba(36,27,58,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.sheet.on{display:flex}
.sheet .box{background:var(--card);border-radius:var(--radius);padding:24px;max-width:440px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sheet h3{font-size:20px;margin-bottom:6px}
.sheet p{color:var(--ink-soft);font-size:14px;margin:0 0 14px}
.sheet input{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--paper);margin-bottom:10px}
.seg{display:flex;gap:6px;background:var(--paper);padding:5px;border-radius:12px;margin-bottom:14px}
.seg button{flex:1;padding:10px;border-radius:9px;font-weight:700;font-size:14px;color:var(--ink-soft)}
.seg button.on{background:var(--card);color:var(--magic);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* recap: one-line reminder of the previous step — the memory glue */
.recap{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:9px 13px;font-size:14px;font-weight:700;color:var(--ink-soft);
}
.recap span:first-child{font-size:15px;opacity:.7}


/* the real-world comparison box — the thing that makes it click */
.analogy{
  margin-top:16px;background:#F2F7FF;border:2px solid #CFE0FF;border-radius:14px;
  padding:14px 16px;font-size:16px;line-height:1.55;
}
.analogy .lbl{font-size:20px;display:block;margin-bottom:4px}

/* give bullets a little more room now that they are full sentences */
ul.dots li{font-size:16.5px;line-height:1.6}

/* the ask box accepts whole pasted paragraphs */
.askbox textarea{max-height:260px;overflow-y:auto}

/* playful one-line intro under the step title */
.opener{margin:0 0 14px;color:var(--ink-soft);font-weight:700;font-size:16px}

/* re-teach box shown after a wrong answer, before the fresh question */
.reteach{
  margin-top:14px;background:#FFF8E9;border:2px solid #FFE0A3;border-radius:14px;
  padding:14px 16px;font-size:16px;line-height:1.6;
}
.reteach p{margin:4px 0}

/* bold key terms inside lesson lines */
ul.dots b, .analogy b, .hook b, .reteach b, .opener b, .test h3 b, .answer b{color:var(--keyblue);font-weight:800}
.memcard b{color:#BFE0FF}

/* ── inline loading spinner ─────────────────────────────────── */
.loader{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:20px;color:var(--ink-soft);font-weight:700;font-size:15px;
}
/* Standalone spinner — works anywhere, not only inside .loader.
   (It previously only had styles as `.loader .ring`, so spinners placed
   inside buttons rendered with no border and no animation: invisible.) */
.ring{
  display:inline-block;width:26px;height:26px;flex:none;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--magic);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* animated "…" — its own class (NOT .dots, which is the bullet list) so it
   works inside buttons without decorating every list on the page. */
.ell::after{
  content:'';animation:ell 1.4s steps(4,end) infinite;
}
@keyframes ell{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* loader shown inside the amber re-teach box */
.reteach .loader{padding:6px 0;color:#B47800}
.reteach .loader .ring{border-color:#FFE0A3;border-top-color:var(--spark)}

/* full-width loader used before the results screen */
.loader.big{padding:40px 20px;flex-direction:column;gap:16px;font-size:16px}
.loader.big .ring{width:40px;height:40px;border-width:4px}

/* small spinner used inside buttons */
.ring.sm{
  width:17px;height:17px;border-width:2.5px;
  border-color:rgba(255,255,255,.45);border-top-color:#fff;vertical-align:-3px;
}

/* numbered points + indented sub-points */
ul.dots li .b{white-space:nowrap;font-size:17px}
ul.dots li.sub{
  padding-inline-start:26px;border-bottom:0;padding-top:5px;padding-bottom:5px;
  font-size:16px;color:var(--ink-soft);
}
ul.dots li.sub + li:not(.sub){border-top:1.5px dashed var(--line);padding-top:12px}

/* playful lead-in above the questions */
.quizintro{
  margin-top:18px;margin-bottom:-4px;font-weight:800;font-size:16px;
  color:var(--magic);text-align:center;
}

/* inline SVG diagram inside a step */
.visual{
  margin-top:16px;padding:12px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:14px;text-align:center;
}
.visual svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* inline SVG diagram inside a step */
.visual{
  margin-top:16px;padding:12px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:14px;text-align:center;
}
.visual svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* ── worked example (maths / physics / chemistry / code) ────── */
.example{
  margin-top:16px;background:var(--card);border:2px solid var(--magic);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.exlbl{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--magic);margin-bottom:10px;
}
.problem{
  background:var(--magic-soft);border-radius:14px;padding:16px;
  text-align:center;font-size:21px;overflow-x:auto;direction:ltr;
}
.exintro{margin:12px 0 0;font-weight:700;color:var(--ink-soft);font-size:15px}

.exsteps{margin-top:6px}
.exstep{
  display:flex;gap:12px;padding:14px 0;border-bottom:1.5px dashed var(--line);
  animation:rise .3s cubic-bezier(.2,.8,.2,1);
}
.exstep:last-child{border-bottom:0}
.exstep .num{
  flex:none;width:24px;height:24px;border-radius:99px;background:var(--magic);color:#fff;
  font-size:13px;font-weight:800;line-height:24px;text-align:center;margin-top:2px;
}
.exstep .body{flex:1;min-width:0}
/* the explanation leads the row, the working follows it */
.exstep .why{font-size:14.5px;font-weight:700;color:var(--ink-soft);margin-bottom:3px}
.exstep .m{
  font-size:19px;overflow-x:auto;direction:ltr;text-align:start;
  padding:2px 0;
}

.exnext{
  display:block;width:100%;margin-top:14px;padding:14px;border-radius:14px;
  background:var(--magic-soft);color:var(--magic);font-weight:800;font-size:16px;
  border:2px dashed var(--magic);transition:.14s;
}
.exnext:hover{background:var(--magic);color:#fff;border-style:solid}

.exanswer{
  margin-top:14px;background:var(--mint-soft);border:2px solid var(--mint);
  border-radius:14px;padding:14px 16px;text-align:center;font-size:20px;
  direction:ltr;overflow-x:auto;
}
.exanswer .lbl{
  display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0A7D6C;margin-bottom:6px;direction:inherit;
}
/* note shown above the working — a heads-up before solving, so it reads as a
   quiet aside rather than a closing highlight */
.extip{
  margin-top:12px;background:#FFF8E9;border:1.5px solid #FFE0A3;border-radius:12px;
  padding:10px 13px;font-size:14.5px;line-height:1.5;
}

/* KaTeX inside RTL pages must stay left-to-right */
.problem .katex-display, .exstep .m .katex-display, .exanswer .katex-display{margin:0}

/* "another example" button under a finished worked example */
.exmore{
  display:block;width:100%;margin-top:14px;padding:13px;border-radius:14px;
  background:var(--card);color:var(--ink-soft);font-weight:800;font-size:15px;
  border:2px solid var(--line);transition:.14s;
}
.exmore:hover{border-color:var(--magic);color:var(--magic)}
.exmore[disabled]{opacity:.7}
.ring.sm.dark{border-color:var(--line);border-top-color:var(--magic)}
.exmore .ring.sm{margin-inline-end:8px}

/* stacked extra examples */
.example + .example{margin-top:14px}


/* ── mixed prose + maths ────────────────────────────────────────
   A line containing both Kurdish/Arabic words and maths must follow the
   page's own direction, or the bidi algorithm reorders the sentence.
   `unicode-bidi:plaintext` lets each line pick its direction from its own
   first strong character, which is exactly right for mixed content.
   Only the maths itself is forced LTR. */
[data-eq].mixed{
  direction:inherit;
  unicode-bidi:plaintext;
  text-align:start;
  line-height:1.9;
}
.inlinemath{
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
  margin:0 3px;
  vertical-align:middle;
}
.problem.mixed{font-size:18px}
.exstep .m.mixed{font-size:17px}
.exanswer .mixed{font-size:18px}

/* inline maths sitting inside a normal sentence (bullets, questions, hooks) */
ul.dots .inlinemath, .analogy .inlinemath, .hook .inlinemath,
.test h3 .inlinemath, .opt .inlinemath, .verdict .inlinemath,
.answer .inlinemath, .reteach .inlinemath, .memcard .inlinemath,
.extip .inlinemath, .exstep .why .inlinemath{
  font-size:1.02em;margin:0 2px;vertical-align:baseline;
}
/* keep long expressions from pushing a card sideways on mobile */
ul.dots li span:last-child{min-width:0;overflow-wrap:anywhere}
.inlinemath .katex{white-space:normal}

/* what a formula says, and whether to memorise it */
.eqnote{margin-top:8px}
/* the plain-words reading of the formula — the main thing, so it leads */
.eqnote .what{
  font-size:16px;color:var(--ink);font-weight:700;line-height:1.6;
  text-align:center;padding:0 4px;
}
.eqnote .todo{
  margin-top:8px;background:var(--mint-soft);border:1.5px solid #B7EBE2;border-radius:12px;
  padding:9px 13px;font-size:14.5px;font-weight:800;color:#0A7D6C;text-align:center;
}

/* back to the previous step — quieter than the other controls */
.controls .c.back{flex:0 0 auto;min-width:0;padding-inline:16px;color:var(--ink-soft)}

/* what each symbol means */
.eqnote .symbols{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;
}
.eqnote .sym{
  background:var(--card);border:1.5px solid var(--line);border-radius:10px;
  padding:5px 10px;font-size:13px;font-weight:700;color:var(--ink-soft);
}
.eqnote .sym .katex{font-size:1em;color:var(--keyblue)}
/* how to actually use it */
.eqnote .howto{
  margin-top:10px;background:var(--magic-soft);border:1.5px solid #D9CFFF;border-radius:12px;
  padding:9px 13px;font-size:14.5px;font-weight:700;color:var(--magic);text-align:center;
}

/* the small "why" under a line of working — only when the move isn't obvious */
.exstep .stepnote{
  margin-top:6px;background:#FFF8E9;border-inline-start:3px solid #FFD98A;
  border-radius:0 8px 8px 0;padding:7px 11px;
  font-size:13.5px;font-weight:600;color:#8A6100;line-height:1.55;
}

/* "I don't understand this line" — a quiet icon, revealed on hover/touch */
.linehelp{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-top:6px;border-radius:99px;
  background:var(--paper);border:1.5px solid var(--line);
  font-size:14px;line-height:1;opacity:.55;transition:.15s;
}
.linehelp:hover{opacity:1;border-color:var(--magic);background:var(--magic-soft)}
.linehelp[disabled]{opacity:.3}
.exstep:hover .linehelp{opacity:.9}

/* the slower explanation of one line */
.lineexp{
  margin-top:8px;background:var(--magic-soft);border:1.5px solid #D9CFFF;
  border-radius:12px;padding:11px 13px;font-size:14.5px;line-height:1.6;
}
.lineexp p{margin:5px 0}
.lineexp p:first-child{margin-top:0}
.lineexp p:last-child{margin-bottom:0}

/* "explain again" on a worked example: the same problem solved another way */
.againlbl{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--spark);margin-bottom:10px;
}
.method{
  margin-bottom:12px;background:#FFF8E9;border:1.5px solid #FFE0A3;border-radius:12px;
  padding:9px 13px;font-size:14.5px;font-weight:700;color:#8A6100;
}
.card .example{border-color:var(--spark)}
.card .example .exnext{border-color:var(--spark);background:#FFF8E9;color:#8A6100}
.card .example .exnext:hover{background:var(--spark);color:#fff}

/* ── exercise picker ────────────────────────────────────────── */
.pickhint{
  margin:0 0 14px;font-size:14px;font-weight:700;color:var(--ink-soft);text-align:center;
}
.pickrow{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:start;
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:13px 15px;margin-bottom:9px;transition:.14s;line-height:1.55;
}
.pickrow:hover{border-color:var(--magic);background:var(--magic-soft)}
.pickrow .qn{
  flex:none;min-width:26px;height:26px;line-height:26px;text-align:center;
  background:var(--magic);color:#fff;border-radius:99px;font-size:13px;font-weight:800;
}
.pickrow .qt{
  flex:1;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;
  /* a question may be pure maths, Kurdish prose, or both — let each line take
     its direction from its own first strong character */
  unicode-bidi:plaintext;text-align:start;
}
.pickrow .qt .katex{font-size:1.05em}
.pickrow.done{border-color:var(--mint);background:var(--mint-soft)}
.pickrow.done .qn{background:var(--mint)}
#pickSolution{margin-top:18px}

/* A field holding a SENTENCE rather than maths (grammar lessons). The maths
   containers force LTR and centre; prose needs its own direction and normal
   spacing, or an English sentence in an RTL lesson reads wrongly. */
[data-eq].plaintext{
  /* centred like an equation — these sit in the same slots, so left-aligning
     them made the working look ragged next to the numbered markers */
  direction:ltr;unicode-bidi:plaintext;text-align:center;
  font-family:inherit;font-size:17px;line-height:1.6;white-space:normal;
}
.problem.plaintext{font-size:18px;font-weight:700}
/* .exstep .m sets text-align:start and outranks the generic rule above,
   so the centring has to be repeated here */
.exstep .m.plaintext{font-size:16.5px;font-weight:600;padding:6px 0;text-align:center}
.exanswer .plaintext{font-size:17px;font-weight:700;text-align:center}
.eq.plaintext{font-size:17px;text-align:center}

/* ── code rendering (programming lessons) ───────────────────── */
[data-eq].codeblock{
  direction:ltr;text-align:start;white-space:pre-wrap;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:15px;line-height:1.6;background:#1E1B2E;color:#E8E3FF;
  border-radius:10px;padding:12px 14px;
}
.exstep .m.codeblock{font-size:14.5px;padding:10px 12px}
.exanswer .codeblock{font-size:15px;text-align:start}

/* ── "now you try it" ───────────────────────────────────────── */
.task{
  margin-top:18px;background:var(--card);border:2px solid var(--mint);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
}
.tasklbl{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint);margin-bottom:8px;
}
.taskprompt{margin:0 0 12px;font-size:16px;font-weight:700;line-height:1.55}
.taskinput{
  width:100%;direction:ltr;text-align:start;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;line-height:1.6;padding:13px 14px;border-radius:12px;
  border:2px solid var(--line);background:#1E1B2E;color:#E8E3FF;
}
.taskinput:focus{border-color:var(--mint);outline:none}
.taskrow{margin-top:12px}
.taskrow .btn{margin-top:0}
.taskout{margin-top:14px}
.taskverdict{border-radius:14px;padding:13px 15px;font-size:15px;line-height:1.6}
.taskverdict.good{background:var(--mint-soft);border:2px solid var(--mint);color:#0A7D6C}
.taskverdict.bad{background:#FFF8E9;border:2px solid #FFE0A3;color:#8A6100}
.taskverdict p{margin:6px 0 0}
.taskline{
  margin-top:10px;direction:ltr;text-align:start;white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  background:#FFEDED;border-inline-start:3px solid var(--coral);
  border-radius:0 8px 8px 0;padding:9px 12px;color:#8A2A2A;
}
.taskhint{
  margin-top:10px;background:var(--magic-soft);border:1.5px solid #D9CFFF;
  border-radius:12px;padding:10px 13px;font-size:14.5px;font-weight:700;color:var(--magic);
}
.tasksol{margin-top:12px}
.sollbl{font-size:12px;font-weight:800;text-transform:uppercase;color:#0A7D6C;margin-bottom:6px}
.solcode{
  margin:0;direction:ltr;text-align:start;white-space:pre-wrap;overflow-x:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;line-height:1.6;
  background:#1E1B2E;color:#E8E3FF;border-radius:10px;padding:12px 14px;
}

/* `identifier` inside a sentence */
.inlinecode{
  direction:ltr;unicode-bidi:isolate;display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;margin:0 2px;color:var(--keyblue);
}

/* inline code inside a prose problem/answer line stays readable */
.problem.plaintext .inlinecode,
.exstep .m.plaintext .inlinecode,
.exanswer .plaintext .inlinecode{font-size:.95em;background:#EFEBFF}

/* the complete program / working, assembled after the last step */
.wholebox{
  margin-top:16px;background:var(--paper);border:2px solid var(--line);
  border-radius:14px;padding:14px;
}
.wholelbl{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px;
}
/* Maths must be laid out left-to-right even on an RTL page, or KaTeX mirrors
   the whole expression and the exponents land on the wrong side. */
.wholebody{margin:0;direction:ltr;text-align:center;overflow-x:auto}
.wholebody.codeblock{font-size:14.5px;text-align:start}
.wholebody.plaintext{text-align:start}

/* "what did we just do?" — always visible under the assembled solution */
.recapbox{
  margin-top:12px;background:var(--magic-soft);border:1.5px solid #D9CFFF;
  border-radius:12px;padding:12px 14px;
}
.recaplbl{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--magic);margin-bottom:6px;
}
.recapbox p{margin:5px 0;font-size:14.5px;line-height:1.6}
.recapbox p:last-child{margin-bottom:0}

/* "work it out on paper, then tap" — maths, physics, chemistry */
.taskhintline{
  margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink-soft);
}
.taskopts{display:flex;flex-direction:column;gap:9px}
.taskopt{
  display:block;width:100%;text-align:start;background:var(--paper);
  border:2px solid var(--line);border-radius:14px;padding:14px 16px;
  font-weight:700;font-size:16px;transition:.14s;
}
.taskopt:hover:not([disabled]){border-color:var(--mint);background:var(--mint-soft)}
.taskopt[disabled]{cursor:default;opacity:.75}
.taskopt.right{border-color:var(--mint);background:var(--mint-soft);opacity:1}
.taskopt.wrong{border-color:var(--coral);background:var(--coral-soft);opacity:1}
.solworking{
  direction:ltr;text-align:center;font-size:17px;padding:10px 0;
}
.shortinput{
  direction:ltr;text-align:start;font-family:inherit;font-size:16px;
  background:var(--paper);color:var(--ink);
}


/* Any typeset maths is LTR, whatever container it lands in. */
[data-eq]:not(.plaintext):not(.codeblock){direction:ltr}
.mathline{direction:ltr;text-align:center;padding:3px 0;overflow-x:auto}

/* ── camera-first start screen ───────────────────────────────── */
.hero.capture{padding:36px 0 28px;text-align:center}
.hero.capture .stars{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;margin-bottom:6px;border-radius:20px;
  background:linear-gradient(160deg,var(--magic-soft),#fff);
  font-size:30px;box-shadow:0 6px 18px rgba(109,74,255,.15);
}
.hero.capture h1{font-size:26px}
.hero.capture p{max-width:320px;margin-inline:auto}

.bigtools{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.bigtool{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--card);border:1.5px solid var(--line);border-radius:20px;
  padding:30px 14px 24px;font-weight:800;font-size:15px;color:var(--ink);
  box-shadow:0 1px 0 var(--line), 0 10px 24px rgba(36,27,58,.05);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.bigtool:active{transform:scale(.97)}
.bigtool:hover{
  border-color:var(--magic);transform:translateY(-3px);
  box-shadow:0 1px 0 var(--line), 0 16px 30px rgba(109,74,255,.16);
}
/* line icons rather than emoji: they take the button's colour, stay crisp at
   any size, and look the same on every device */
.bigtool .ic{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  padding:13px;border-radius:16px;color:var(--magic);background:var(--magic-soft);
  transition:.16s;
}
.bigtool:hover .ic{background:var(--magic);color:#fff;transform:scale(1.05)}
.bigtool .lb{line-height:1.3;text-align:center}

.typelink{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:20px;padding:12px;border-radius:14px;font-size:15px;font-weight:700;
  color:var(--ink-soft);border:1.5px dashed var(--line);background:transparent;
  transition:.15s;
}
.typelink:hover{color:var(--magic);border-color:var(--magic);background:var(--magic-soft)}
.typelink::before{content:'✎';font-size:15px;line-height:1}
#typeBox{margin-top:10px}

/* ── "what should I do with this?" ───────────────────────────── */
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.thumbs .thumb{width:64px;height:64px}
.intenth{font-size:22px;margin-bottom:14px}
.intentopt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:15px 16px;margin-bottom:10px;font-weight:700;font-size:16px;transition:.14s;
}
.intentopt:hover{border-color:var(--magic);background:var(--magic-soft)}
.intentopt.on{border-color:var(--magic);background:var(--magic-soft);box-shadow:0 2px 0 var(--line)}
.intentopt .ic{font-size:22px;flex:none}
#intentAskBox{margin-top:6px}
#intentAskBox textarea{
  width:100%;border:0;resize:none;background:none;color:var(--ink);
  font-size:16px;line-height:1.5;
}
#intentAskBox textarea::placeholder{color:#A79FC4}