:root{
  --ink:#16202E;
  --paper:#E8ECF2;
  --card:#FFFFFF;
  --violet:#5B4BE0;
  --violet-soft:#EEECFC;
  --amber:#E08A1E;
  --teal:#0E8F82;
  --teal-soft:#E1F3F1;
  --rose:#C93A54;
  --rose-soft:#FBE9EC;
  --muted:#66748A;
  --line:#D2DAE5;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:22px 22px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:0 20px 80px}

/* ---------- header ---------- */
header.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 0 18px;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.streak{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- home ---------- */
.lede{
  font-family:var(--display);font-weight:600;font-size:clamp(26px,4.6vw,38px);
  line-height:1.14;letter-spacing:-.02em;margin:14px 0 8px;max-width:19ch;
}
.lede em{font-style:normal;color:var(--violet)}
.sub{color:var(--muted);font-size:15px;max-width:56ch;margin:0 0 26px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.mod{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:8px;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mod:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(22,32,46,.09);border-color:#B9C4D3}
.mod:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.mod .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.mod h3{font-family:var(--display);font-weight:600;font-size:17.5px;margin:0;letter-spacing:-.01em}
.mod p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.mod .meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.best{color:var(--teal);font-weight:600}

.toggle{
  display:flex;align-items:center;gap:10px;margin:26px 0 0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.toggle label{font-size:13.5px;cursor:pointer;flex:1;line-height:1.45}
.toggle label b{font-weight:600}
.toggle label span{display:block;color:var(--muted);font-size:12.5px}
.switch{
  appearance:none;width:44px;height:25px;border-radius:99px;background:#C6D0DC;
  border:none;cursor:pointer;position:relative;transition:background .18s ease;flex:none;
}
.switch:checked{background:var(--violet)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .18s ease}
.switch:checked::after{transform:translateX(19px)}
.switch:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* ---------- drill chrome ---------- */
.bar{display:flex;align-items:center;gap:14px;padding:18px 0 12px;flex-wrap:wrap}
.back{
  background:none;border:1px solid var(--line);border-radius:9px;padding:7px 12px;
  font:inherit;font-size:13px;cursor:pointer;color:var(--muted);background:var(--card);
}
.back:hover{color:var(--ink);border-color:#B9C4D3}
.bar h2{font-family:var(--display);font-weight:600;font-size:17px;margin:0;flex:1;letter-spacing:-.01em}
.clock{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.clock.warn{color:var(--amber)}
.clock.out{color:var(--rose)}

/* signature: the item grid */
.track{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.cells{display:flex;gap:4px;flex-wrap:wrap}
.cell{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--line);background:var(--card);transition:background .25s ease,border-color .25s ease}
.cell.hit{background:var(--teal);border-color:var(--teal)}
.cell.miss{background:var(--rose);border-color:var(--rose)}
.cell.now{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-soft)}
.count{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- question card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px}
.stem{font-size:18px;line-height:1.5;margin:0 0 20px}
.stem.big{font-family:var(--display);font-weight:500;font-size:clamp(21px,3.4vw,27px);letter-spacing:-.01em}
.stem .arrow{color:var(--violet);padding:0 4px}
.given{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.given .chip{
  font-family:var(--display);font-weight:500;font-size:17px;
  background:var(--violet-soft);color:var(--violet);border-radius:9px;padding:8px 14px;
}
.opts{display:grid;gap:9px}
.opts.two{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opts.figs{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.opt{
  display:flex;align-items:center;gap:11px;text-align:left;
  background:var(--card);border:1.5px solid var(--line);border-radius:11px;
  padding:13px 15px;font:inherit;font-size:15.5px;cursor:pointer;color:inherit;
  transition:border-color .13s ease,background .13s ease;
}
.opt:hover:not(:disabled){border-color:var(--violet);background:var(--violet-soft)}
.opt:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.opt:disabled{cursor:default}
.opt .key{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);
  border:1.5px solid var(--line);border-radius:6px;width:23px;height:23px;
  display:grid;place-items:center;flex:none;
}
.opt.figs-item{flex-direction:column;gap:8px;padding:12px 8px 9px}
.opt.right{border-color:var(--teal);background:var(--teal-soft)}
.opt.right .key{border-color:var(--teal);color:var(--teal)}
.opt.wrong{border-color:var(--rose);background:var(--rose-soft)}
.opt.wrong .key{border-color:var(--rose);color:var(--rose)}

.figbox{display:flex;justify-content:center;align-items:center}

/* matrix */
.matrix{display:grid;grid-template-columns:repeat(2,84px);grid-template-rows:repeat(2,84px);border:2px solid var(--ink);border-radius:8px;overflow:hidden;margin:0 auto 22px}
.matrix > div{display:grid;place-items:center;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.matrix > div:nth-child(2n){border-right:none}
.matrix > div:nth-child(n+3){border-bottom:none}
.qmark{font-family:var(--display);font-weight:700;font-size:30px;color:#A9B4C4}

/* classification row */
.crow{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 auto 22px;flex-wrap:wrap}
.crow .box{border:1.5px solid var(--line);border-radius:9px;width:74px;height:74px;display:grid;place-items:center;background:var(--card)}
.crow .div{width:2px;height:52px;background:var(--line);margin:0 6px}

/* folding */
.folds{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 auto 22px}
.folds .step{display:flex;flex-direction:column;align-items:center;gap:6px}
.folds .cap{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.folds .to{font-size:20px;color:#A9B4C4}

/* geometry figure */
.geofig{display:flex;justify-content:center;margin:0 0 20px}

/* spelling */
.spell{text-align:center;padding:8px 0 4px}
.spell .say{
  font-family:var(--display);font-weight:600;font-size:16px;
  background:var(--violet);color:#fff;border:none;border-radius:11px;
  padding:15px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
}
.spell .say:hover{background:#4B3BC8}
.spell .say:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.spell input{
  font-family:var(--display);font-weight:500;font-size:24px;text-align:center;
  border:none;border-bottom:2.5px solid var(--line);background:none;
  padding:10px 6px;width:min(340px,88%);margin:24px 0 6px;color:var(--ink);letter-spacing:.01em;
}
.spell input:focus{outline:none;border-bottom-color:var(--violet)}
.hintline{font-size:14.5px;color:var(--muted);min-height:22px;margin:8px 0 0;line-height:1.5}
.hintline u{text-decoration:none;border-bottom:2px solid var(--violet);padding:0 22px}
.row{display:flex;gap:9px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* buttons */
.btn{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  border-radius:10px;padding:11px 20px;cursor:pointer;border:1.5px solid var(--ink);
  background:var(--ink);color:#fff;
}
.btn:hover{background:#22314A}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--card);border-color:#B9C4D3}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* feedback */
.fb{margin-top:18px;border-radius:12px;padding:15px 17px;font-size:14.5px;line-height:1.55;display:none}
.fb.show{display:block}
.fb.ok{background:var(--teal-soft);border:1px solid #A9DBD4}
.fb.no{background:var(--rose-soft);border:1px solid #F0BEC6}
.fb b{font-family:var(--display);display:block;margin-bottom:3px;font-size:14px}
.fb .why{color:#3D4B60}

/* results */
.score{font-family:var(--display);font-weight:700;font-size:60px;letter-spacing:-.03em;line-height:1;margin:0}
.score small{font-size:22px;color:var(--muted);font-weight:500}
.rlabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.review{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.review h4{font-family:var(--display);font-size:14px;margin:0 0 14px;letter-spacing:.01em}
.ritem{border-left:2.5px solid var(--rose);padding:2px 0 2px 14px;margin-bottom:16px;font-size:14px;line-height:1.55}
.ritem .q{font-weight:600;margin-bottom:3px}
.ritem .a{color:var(--muted)}
.ritem .a b{color:var(--teal);font-weight:600}
.empty{color:var(--muted);font-size:14.5px;line-height:1.6}

@media (max-width:560px){
  .card{padding:20px 16px}
  .matrix{grid-template-columns:repeat(2,72px);grid-template-rows:repeat(2,72px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
/* ---------- v2 additions ---------- */
.revcard{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:linear-gradient(180deg,#fff,#FBFAFF);
  border:1.5px solid var(--violet);border-radius:14px;padding:18px 20px 16px;margin:0 0 16px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.revcard:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(91,75,224,.16)}
.revcard:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.revcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.revcard h3{font-family:var(--display);font-weight:600;font-size:18px;margin:6px 0 4px;letter-spacing:-.01em}
.revcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:60ch}
.revcard .meta{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pend{color:var(--amber);font-weight:600}
.blank{display:inline-block;min-width:74px;border-bottom:2.5px solid var(--violet);margin:0 3px}

.fbrow{display:grid;grid-template-columns:132px 1fr;gap:14px;margin-top:12px;align-items:start}
.fbrow:first-of-type{margin-top:6px}
.fblab{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding-top:3px;
}
.fbrow p{margin:0;font-size:14.5px;line-height:1.55;color:#31405a}
.fb.no .fbrow:last-of-type p{color:var(--muted)}
.bigword{
  font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.01em;
  margin:10px 0 4px;color:var(--ink);
}
.ritem .w{color:var(--muted);margin-top:3px;line-height:1.55}
.ritem .tw{display:block;margin-top:4px}
.review .empty b{color:var(--ink)}
@media (max-width:560px){
  .fbrow{grid-template-columns:1fr;gap:2px}
  .fblab{padding-top:0}
}

/* ---------- v3: lessons ---------- */
.mod{cursor:default}
.mod:hover{transform:none;box-shadow:none;border-color:var(--line)}
.acts{display:flex;gap:8px;margin-top:12px}
.act{
  flex:1;font-family:var(--display);font-weight:600;font-size:13.5px;
  border-radius:9px;padding:9px 10px;cursor:pointer;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);transition:background .13s ease,border-color .13s ease;
}
.act:hover{border-color:var(--violet);background:var(--violet-soft);color:var(--violet)}
.act.play{background:var(--ink);border-color:var(--ink);color:#fff}
.act.play:hover{background:#22314A;color:#fff;border-color:#22314A}
.act:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

.lesson{padding:28px 26px 24px}
.lpageh{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,3.2vw,25px);
  letter-spacing:-.015em;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.lp{font-size:15.5px;line-height:1.62;margin:0 0 14px;color:#26313f;max-width:70ch}
.lp b{font-weight:600;color:var(--ink)}
.lh{font-family:var(--display);font-weight:600;font-size:15.5px;margin:24px 0 10px;letter-spacing:-.005em}
.lnote{
  background:var(--violet-soft);border-left:3px solid var(--violet);border-radius:0 10px 10px 0;
  padding:14px 16px;margin:16px 0;font-size:14.5px;line-height:1.6;color:#2c3550;
}
.lnote b{color:var(--ink)}

.lex{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0;background:#FBFCFD}
.lexq{font-family:var(--display);font-weight:500;font-size:15.5px;margin-bottom:12px;line-height:1.45}
.lexs{margin:0 0 10px;padding-left:20px}
.lexs li{font-size:14.5px;line-height:1.58;margin-bottom:7px;color:#33404f}
.lexa{
  font-size:14px;padding-top:10px;border-top:1px dashed var(--line);color:var(--muted);
}
.lexa b{font-family:var(--display);color:var(--teal);font-size:15px}

.ltabwrap{overflow-x:auto;margin:14px 0 18px}
.ltab{border-collapse:collapse;width:100%;font-size:13.8px;min-width:340px}
.ltab th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:7px 10px;border-bottom:1.5px solid var(--line);font-weight:500;
}
.ltab td{padding:8px 10px;border-bottom:1px solid #EDF1F5;line-height:1.5;vertical-align:top}
.ltab tr:last-child td{border-bottom:none}
.ltab td:first-child{font-weight:500;color:var(--ink)}

.lfigs{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 20px;align-items:flex-start}
.lfig{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:11px;padding:12px 10px 10px;background:var(--card);min-width:92px;
}
.lfig span{font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;line-height:1.4;max-width:104px}

.lcheck{border:1.5px solid var(--violet);border-radius:12px;padding:16px 18px;margin:20px 0 6px;background:#FBFAFF}
.lclab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:8px}
.lcq{font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:12px;line-height:1.45}
.lcopts{display:flex;flex-wrap:wrap;gap:8px}
.lcopt{
  font:inherit;font-size:14.5px;padding:9px 14px;border-radius:9px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
}
.lcopt:hover:not(:disabled){border-color:var(--violet);background:var(--violet-soft)}
.lcopt:disabled{cursor:default}
.lcopt.right{border-color:var(--teal);background:var(--teal-soft);color:var(--teal);font-weight:600}
.lcopt.wrong{border-color:var(--rose);background:var(--rose-soft);color:var(--rose)}
.lcopt:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.lcwhy{display:none;margin-top:12px;font-size:14.5px;line-height:1.58;color:#33404f}
.lcwhy.show{display:block}
.lcwhy b{font-family:var(--display)}
.lcwhy.ok b{color:var(--teal)}
.lcwhy.no b{color:var(--rose)}

.lnav{justify-content:space-between!important;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
@media (max-width:560px){
  .lesson{padding:20px 15px}
  .acts{flex-direction:column}
  .ltab{font-size:13px}
}

/* ---------- v4: bigger figures, visuals in feedback and review ---------- */
.matrix{grid-template-columns:repeat(2,96px);grid-template-rows:repeat(2,96px)}
.matrix.small{grid-template-columns:repeat(2,62px);grid-template-rows:repeat(2,62px);margin:0}
.opts.figs{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:11px}
.opt.figs-item{padding:14px 8px 10px}
.crow .box{width:84px;height:84px}
.crow.small{margin:0;gap:7px}
.crow.small .box{width:56px;height:56px}
.folds.small{margin:0;gap:7px}
.folds.small .cap{font-size:9px;margin-top:3px}

.fbfigs{display:flex;gap:14px;margin:6px 0 14px;flex-wrap:wrap}
.ansfig{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:2px solid var(--teal);border-radius:12px;padding:12px 14px 9px;background:#fff;
}
.ansfig span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
}
.rvrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.rvbox{
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;
  display:flex;align-items:center;
}
.rvarrow{font-size:19px;color:#A9B4C4}
@media (max-width:560px){
  .matrix{grid-template-columns:repeat(2,80px);grid-template-rows:repeat(2,80px)}
  .opts.figs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
}

/* ---------- v5: resume card ---------- */
.revcard.resume{border-color:var(--amber);background:linear-gradient(180deg,#fff,#FFFCF6)}
.revcard.resume:hover{box-shadow:0 6px 22px rgba(224,138,30,.18)}
.revcard.resume .tag{color:var(--amber)}

/* ============================================================
   v6: fifth-grader theme + iPad touch
   Overrides layered on top of the base styles above.
   --ink stays #16202E: the SVG figures draw with that exact hex.
   ============================================================ */
:root{
  --paper:#EEF2FF;
  --violet:#6C4DF4;
  --violet-soft:#EFEBFF;
  --teal:#0FA48E;
  --teal-soft:#DFF5EF;
  --amber:#F59E0B;
  --rose:#E14D6D;
  --rose-soft:#FDEBEF;
  --line:#D9DEF2;
}
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 10% -6%, rgba(108,77,244,.13), transparent 36%),
    radial-gradient(circle at 92% -2%, rgba(245,158,11,.13), transparent 32%),
    radial-gradient(circle at 50% 112%, rgba(15,164,142,.11), transparent 40%),
    radial-gradient(var(--line) 1.2px, transparent 1.2px);
  background-size:auto,auto,auto,22px 22px;
}
/* keep the page itself the only scroller; iPadOS handles that best */
html{overflow-x:hidden}

/* header */
.brand b::before{content:"🚀 "}
.brand b{font-size:21px}

/* module cards: one accent colour per category, set by position */
.mod{
  border-radius:18px;position:relative;overflow:hidden;
  border-color:var(--line);padding-top:24px;
  box-shadow:0 2px 10px rgba(58,58,130,.05);
}
.mod::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--mc,var(--violet))}
.mod .tag{color:var(--mc,var(--violet))}
.grid .mod:nth-child(-n+3){--mc:#6C4DF4}
.grid .mod:nth-child(n+4):nth-child(-n+6){--mc:#0FA48E}
.grid .mod:nth-child(7){--mc:#F59E0B}
.grid .mod:nth-child(n+8){--mc:#E14D6D}
.grid .mod h3{font-size:18.5px}
.grid .mod h3::before{margin-right:7px}
.grid .mod:nth-child(1) h3::before{content:"🔗 "}
.grid .mod:nth-child(2) h3::before{content:"🧺 "}
.grid .mod:nth-child(3) h3::before{content:"✏️ "}
.grid .mod:nth-child(4) h3::before{content:"🧩 "}
.grid .mod:nth-child(5) h3::before{content:"🔍 "}
.grid .mod:nth-child(6) h3::before{content:"📄 "}
.grid .mod:nth-child(7) h3::before{content:"📐 "}
.grid .mod:nth-child(8) h3::before{content:"📚 "}
.grid .mod:nth-child(9) h3::before{content:"🔤 "}

/* primary actions go violet instead of near-black */
.act.play{background:var(--violet);border-color:var(--violet)}
.act.play:hover{background:#5A3BE0;border-color:#5A3BE0}
.btn{background:var(--violet);border-color:var(--violet);border-radius:12px}
.btn:hover{background:#5A3BE0}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--card)}
.revcard{border-radius:18px}
.card{border-radius:18px}
.fb{border-radius:14px}

/* ---------- iPad / touch ---------- */
button,input,select,label{touch-action:manipulation}
input,textarea{-webkit-text-size-adjust:100%}
.act{min-height:48px;padding:12px;font-size:15px;border-radius:12px}
.opt{min-height:52px;padding:14px 16px;font-size:16px;border-radius:14px}
.opt .key{width:28px;height:28px;font-size:13px;border-radius:8px}
.lcopt{min-height:46px;padding:11px 16px;font-size:15px;border-radius:11px}
.btn{min-height:48px;padding:12px 22px;font-size:15.5px}
.back{min-height:44px;padding:9px 16px;font-size:14px;border-radius:10px}
.spell .say{min-height:52px;padding:15px 28px}
.switch{width:54px;height:31px}
.switch::after{width:25px;height:25px}
.switch:checked::after{transform:translateX(23px)}
.cell{width:15px;height:15px;border-radius:4px}
.lnavbtns .btn{min-width:110px}

/* the 2x2 matrix grid should hug its cells, not stretch the card (v1 quirk) */
.matrix{width:max-content}

/* touch feedback where hover does not exist */
@media (hover:none){
  .opt:active:not(:disabled){border-color:var(--violet);background:var(--violet-soft)}
  .lcopt:active:not(:disabled){border-color:var(--violet);background:var(--violet-soft)}
  .act:active{border-color:var(--violet);background:var(--violet-soft);color:var(--violet)}
  .act.play:active{background:#5A3BE0;border-color:#5A3BE0;color:#fff}
  .btn:active{transform:scale(.97)}
  .revcard:active{transform:translateY(1px)}
}

/* ---------- v7: routing chrome, reset controls ---------- */
.act.reset{
  flex:0 0 48px;font-size:17px;color:var(--muted);
}
.act.reset:hover{color:var(--rose);border-color:var(--rose);background:var(--rose-soft)}
.resetrow{margin-top:10px;text-align:right}
.linkbtn{
  background:none;border:none;font:inherit;font-size:12.5px;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:12px 10px;min-height:44px;
}
.linkbtn:hover{color:var(--rose)}
#restart{margin-left:auto}
.bar .clock{margin-left:0}

/* granular reset chooser on module cards */
.resetq{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rose);align-self:center;flex:1 0 100%;padding-bottom:2px;
}
.acts.choosing{flex-wrap:wrap}
.acts.choosing .act{flex:1 1 auto;font-size:13px;padding:10px 6px;min-height:44px}
.act.resetx{flex:0 0 44px;font-size:17px;color:var(--muted)}

/* ---------- v8: sticker book ---------- */
.stickbtn{
  font-family:var(--display);font-weight:600;font-size:13px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:99px;
  padding:8px 14px;min-height:40px;color:var(--ink);
}
.stickbtn:hover{border-color:var(--amber);background:#FFF7E8}
.stickbtn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.triedtxt{display:block;margin-top:5px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted)}

.stickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.sticker{
  border:1.5px dashed var(--line);border-radius:14px;padding:16px 14px;text-align:center;
  display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--muted);background:#FAFBFE;
}
.sticker b{font-family:var(--display);font-size:14px;font-weight:600}
.sticker span:last-child{font-size:12.5px;line-height:1.45}
.sticker .stickemo{font-size:34px;line-height:1;filter:grayscale(1);opacity:.55}
.sticker.got{
  border-style:solid;border-color:var(--amber);background:#FFFBF2;color:var(--ink);
}
.sticker.got .stickemo{filter:none;opacity:1}
.sticker.got span:last-child{color:var(--muted)}

.sticknew{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.sticklab{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
}
.stickchip{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  background:#FFFBF2;border:1.5px solid var(--amber);border-radius:99px;padding:9px 16px;
  animation:stickpop .45s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes stickpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}
.confetti i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation-name:confall;animation-timing-function:ease-in;animation-fill-mode:forwards;
}
@keyframes confall{
  0%{opacity:1;transform:translateY(0) rotate(0deg)}
  100%{opacity:.9;transform:translateY(105vh) rotate(320deg)}
}

/* ---------- v9: brand as home button, spelling keypad ---------- */
button.brand{
  background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit;
  display:flex;align-items:baseline;gap:10px;text-align:left;
}
button.brand:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:6px}
button.brand:active{opacity:.7}

.keys{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.krow{display:flex;gap:6px;justify-content:center}
.kbd{
  font-family:var(--display);font-weight:600;font-size:18px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  flex:0 1 54px;min-width:30px;height:52px;cursor:pointer;padding:0;touch-action:manipulation;
}
.kbd:hover{border-color:var(--violet)}
.kbd:active{background:var(--violet-soft);border-color:var(--violet)}
.kbd:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.kbd.wide{flex:0 1 80px;font-size:20px}
@media (max-width:560px){
  .krow{gap:4px}
  .kbd{height:46px;font-size:16px;border-radius:8px}
}
/* mouse-and-keyboard machines type directly; hide the touch keypad */
@media (hover:hover) and (pointer:fine){
  .keys{display:none}
}

/* ---------- v10: review fixes - contrast, calm miss panel, reading width ---------- */
/* AA contrast: darker muted, and darker text variants of the category
   colours (the bright ones stay for stripes and fills, where size makes
   them fine; small text gets these). */
:root{
  --muted:#5A6880;
  --teal-text:#0B7A6A;
  --amber-text:#B45309;
  --rose-text:#C82B4F;
}
.mod .tag{color:var(--mct,var(--violet))}
.grid .mod:nth-child(-n+3){--mct:#6C4DF4}
.grid .mod:nth-child(n+4):nth-child(-n+6){--mct:var(--teal-text)}
.grid .mod:nth-child(7){--mct:var(--amber-text)}
.grid .mod:nth-child(n+8){--mct:var(--rose-text)}
.best{color:var(--teal-text)}
.pend{color:var(--amber-text)}
.revcard.resume .tag{color:var(--amber-text)}
.sticklab{color:var(--amber-text)}
.clock.warn{color:var(--amber-text)}
.clock.out{color:var(--rose-text)}
.ansfig span{color:var(--teal-text)}
.lexa b{color:var(--teal-text)}
.lcwhy.ok b{color:var(--teal-text)}
.ritem .a b{color:var(--teal-text)}

/* A miss should teach, not punish: neutral panel, slim rose accent.
   The picked option keeps its rose outline; correct stays celebratory. */
.fb.no{background:#F8F9FD;border:1px solid var(--line);border-left:4px solid var(--rose)}

/* comfortable reading measure inside lessons */
.lnote,.lex,.lcheck{max-width:72ch}
.lexs li{max-width:64ch}
.lcwhy{max-width:66ch}

/* decorative emoji: empty alt so screen readers skip them
   (older browsers drop this declaration and keep the plain one above) */
.brand b::before{content:"🚀 " / ""}
.grid .mod:nth-child(1) h3::before{content:"🔗 " / ""}
.grid .mod:nth-child(2) h3::before{content:"🧺 " / ""}
.grid .mod:nth-child(3) h3::before{content:"✏️ " / ""}
.grid .mod:nth-child(4) h3::before{content:"🧩 " / ""}
.grid .mod:nth-child(5) h3::before{content:"🔍 " / ""}
.grid .mod:nth-child(6) h3::before{content:"📄 " / ""}
.grid .mod:nth-child(7) h3::before{content:"📐 " / ""}
.grid .mod:nth-child(8) h3::before{content:"📚 " / ""}
.grid .mod:nth-child(9) h3::before{content:"🔤 " / ""}

/* ---------- v11: clickable answered cells, placeable stickers ---------- */
/* answered cells are buttons: tap to look back at that question */
button.cell{padding:0;position:relative;cursor:pointer;font:inherit}
button.cell::after{content:"";position:absolute;inset:-5px} /* roomier touch target */
button.cell:hover{box-shadow:0 0 0 2px var(--violet-soft)}
button.cell:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.cell.peek{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet)}

/* place-on-screen button inside an earned sticker card */
.stickplace{
  font-family:var(--display);font-weight:600;font-size:12.5px;cursor:pointer;
  border:1.5px solid var(--amber);background:#fff;border-radius:99px;
  padding:7px 14px;min-height:38px;color:var(--amber-text);margin-top:6px;
}
.stickplace:hover{background:#FFF7E8}
.stickplace:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* the decoration layer: stickers float over every screen */
.deco{position:fixed;inset:0;pointer-events:none;z-index:60}
.decosticker{
  position:absolute;font-size:36px;line-height:1;pointer-events:auto;cursor:grab;
  user-select:none;-webkit-user-select:none;touch-action:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 2px 3px rgba(22,32,46,.25));
}
.decosticker.drag{cursor:grabbing;transform:translate(-50%,-50%) scale(1.25)}
.decosticker.pop{animation:stickpop .45s cubic-bezier(.2,1.6,.4,1) both}
.decobin{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  display:none;pointer-events:none;z-index:61;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted);
  background:var(--card);border:1.5px dashed var(--line);border-radius:99px;padding:12px 20px;
}
.decobin.show{display:block}
.decobin.hot{border-color:var(--rose);color:var(--rose-text);background:var(--rose-soft)}

/* ---------- v12: scratchpad ---------- */
/* the floating toggle, parked in the lower-right corner */
.padfab{
  position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);z-index:69;
  width:48px;height:48px;border-radius:50%;cursor:pointer;padding:0;line-height:1;
  border:1.5px solid var(--line);background:var(--card);font-size:21px;
  box-shadow:0 3px 12px rgba(22,32,46,.16);
}
.padfab:hover{border-color:var(--violet)}
.padfab.on{border-color:var(--violet);background:var(--violet-soft)}
.padfab:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

.pad{
  position:fixed;z-index:70;display:flex;flex-direction:column;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  box-shadow:0 12px 36px rgba(22,32,46,.24);overflow:hidden;
}
.pad[hidden]{display:none}
.padbar{
  display:flex;align-items:center;gap:8px;padding:8px 10px;flex:none;
  background:#F4F6FB;border-bottom:1px solid var(--line);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.padbar:active{cursor:grabbing}
.padtitle{font-family:var(--display);font-weight:600;font-size:13px;flex:1;white-space:nowrap}
.padtitle::before{content:"✏️ "}
.padtitle::before{content:"✏️ " / ""}
.padtools{display:flex;gap:6px;align-items:center}
.padcolor{
  width:27px;height:27px;border-radius:50%;cursor:pointer;padding:0;flex:none;
  border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);
}
.padcolor.on{box-shadow:0 0 0 2.5px var(--violet)}
.padcolor:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.padtool{
  width:34px;height:34px;border-radius:9px;cursor:pointer;padding:0;flex:none;
  border:1.5px solid var(--line);background:var(--card);font-size:15px;line-height:1;
}
.padtool:hover{border-color:var(--violet)}
.padtool.on{border-color:var(--violet);background:var(--violet-soft)}
.padtool:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.padclose{font-size:20px;color:var(--muted)}
.padcanvas{
  flex:1;width:100%;min-height:0;display:block;touch-action:none;cursor:crosshair;
  -webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:18px 18px;
}
.padgrab{
  position:absolute;right:0;bottom:0;width:34px;height:34px;
  cursor:nwse-resize;touch-action:none;
}
.padgrab::before{
  content:"";position:absolute;right:6px;bottom:6px;width:13px;height:13px;
  border-right:3px solid #B9C4D3;border-bottom:3px solid #B9C4D3;border-radius:0 0 5px 0;
}

/* split mode: the pad docks to the right edge and the page shares the
   width with it, so nothing floats over a question */
body.padsplit{padding-right:var(--padw,380px)}
body.padsplit .padfab{right:calc(var(--padw,380px) + 16px)}
.pad.split{
  top:0;right:0;bottom:0;left:auto;height:auto;
  border-radius:0;border:none;border-left:1.5px solid var(--line);
  box-shadow:-10px 0 30px rgba(22,32,46,.13);
}
.pad.split .padbar{cursor:default}
.pad.split .padgrab{display:none}
.padedge{display:none}
.pad.split .padedge{
  display:block;position:absolute;left:0;top:0;bottom:0;width:20px;
  cursor:ew-resize;touch-action:none;
}
.padedge::before{
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:5px;height:46px;border-radius:99px;background:#B9C4D3;
}

/* ---------- v13: courses, mock test, word wall, worksheets, read-aloud ---------- */
/* course chip row above the hero */
.courserow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.coursechip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);background:var(--violet-soft);border-radius:99px;padding:7px 14px;
}
.coursegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.coursecard h3{font-size:19px}

/* extras row: mock + word wall entry cards */
.xrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.xcard{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 18px 16px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 10px rgba(58,58,130,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.xcard:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(22,32,46,.09);border-color:#B9C4D3}
.xcard:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.xcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.xcard h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0;letter-spacing:-.01em}
.xcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}

/* the print link joins the reset link on one quiet row */
.resetrow{display:flex;justify-content:space-between;align-items:center;text-align:left}

/* read-aloud button under verbal stems */
.hearrow{margin:-8px 0 16px}
.hear{
  font-family:var(--display);font-weight:600;font-size:13px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:99px;
  padding:8px 14px;min-height:40px;color:var(--muted);
}
.hear:hover{border-color:var(--violet);color:var(--violet)}
.hear:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* mock: answered cells fill neutrally - no right/wrong until the end */
.cell.fill{background:#B9C4D3;border-color:#B9C4D3}
.mbat{font-family:var(--display);font-weight:600;font-size:15px;margin:20px 0 4px}
.mrow{
  display:flex;justify-content:space-between;gap:10px;padding:8px 2px;
  border-bottom:1px solid #EDF1F5;font-size:14.5px;
}
.mrow span:last-child{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* word wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.wword{
  border:1px solid var(--line);border-radius:14px;padding:14px 15px 10px;background:#FBFCFD;
  display:flex;flex-direction:column;
}
.wtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wtop b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.wsay{
  width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;flex:none;
  border:1.5px solid var(--line);background:var(--card);font-size:16px;line-height:1;
}
.wsay:hover{border-color:var(--violet)}
.wsay:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.wctx{font-size:13.5px;color:var(--muted);margin:8px 0 6px;line-height:1.55;flex:1}
.wfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wfoot .meta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.wgot{padding:8px 2px;font-size:12px}
.wgot:hover{color:var(--teal-text)}

/* worksheets: shaped like a real test page, on screen and on paper */
.wsheet{font-size:14.5px}
.wshead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
  border-bottom:3px solid var(--ink);padding-bottom:14px;margin-bottom:14px;
}
.wtitle{font-family:var(--display);font-weight:700;font-size:25px;margin:0 0 3px;letter-spacing:-.015em}
.wsub{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.wname{display:flex;gap:28px;font-size:13.5px;align-items:baseline;padding-bottom:2px}
.wname .fill{display:inline-block;min-width:190px;border-bottom:1.5px solid var(--ink);height:1em;vertical-align:baseline}
.wname .fill.short{min-width:100px}
.winstr{font-size:13.5px;color:var(--muted);margin:0 0 26px;line-height:1.55;max-width:70ch}

.pq{display:flex;gap:14px;margin:0 0 28px;break-inside:avoid;page-break-inside:avoid}
.pqn{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--muted);
  min-width:30px;padding-top:3px;
}
.pqb{flex:1}
.pstem{font-size:16px;margin:2px 0 13px;line-height:1.5}
.pstem.pbig{font-family:var(--display);font-weight:500;font-size:18.5px;letter-spacing:-.01em}
.pblank{display:inline-block;min-width:110px;border-bottom:2px solid var(--ink);margin:0 3px}
.popts{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px 28px;max-width:580px}
.popt{display:flex;align-items:center;gap:10px;line-height:1.35}
.pkey{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);
  border:1.5px solid #98A4B5;border-radius:50%;width:25px;height:25px;
  display:inline-grid;place-items:center;flex:none;
}
.pfigs{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:2px}
.pfig{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:10px;padding:8px 9px 7px;background:#fff;
}
.pline{border-bottom:1.5px solid var(--ink);height:30px;margin:4px 0 6px;max-width:320px}

.keybreak{page-break-before:always;break-before:page;border-top:2px dashed var(--line);margin:30px 0 22px;padding-top:22px}
.keychips{display:flex;flex-wrap:wrap;gap:8px 12px;margin:4px 0 24px}
.keychip{
  font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-radius:9px;
  padding:6px 11px;background:#FBFCFD;
}
.keychip b{color:var(--teal-text)}
.pk{
  margin:0 0 14px;font-size:13.5px;line-height:1.6;break-inside:avoid;page-break-inside:avoid;
  border-left:2.5px solid var(--line);padding-left:13px;
}
.pk b{font-family:var(--mono)}
.pk .pkans{font-family:var(--body);font-weight:600}
.pktrap{color:var(--muted)}

@page{margin:16mm}
@media print{
  header.top,.padfab,.pad,.deco,.decobin,.noprint{display:none!important}
  body{background:#fff!important;padding-right:0!important}
  .wrap{max-width:none;padding:0}
  .card.wsheet{border:none;border-radius:0;padding:0;box-shadow:none}
  .wsheet{font-size:13px}
  .pstem{font-size:14.5px}
  .pstem.pbig{font-size:16.5px}
  .pq{margin-bottom:22px}
  .keybreak{border-top:none;margin:0 0 14px;padding-top:0}
  .keychip{background:#fff}
}

/* ---------- v14: platform - studio forms, catalog, badges ---------- */
.fld{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;min-width:0}
.fld label{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.txt{
  font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;min-height:46px;
}
textarea.txt{min-height:0;line-height:1.5;resize:vertical}
select.txt{cursor:pointer}
.txt:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.fldrow{display:flex;gap:12px;flex-wrap:wrap}
.fldrow .fld{flex:1;min-width:140px}

.sh{font-family:var(--display);font-weight:600;font-size:15px;margin:24px 0 12px;letter-spacing:-.005em;border-top:1px solid var(--line);padding-top:18px}
.slist{display:flex;flex-direction:column;gap:8px}
.srow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#FBFCFD;
}
.srow .srmain{flex:1;min-width:200px;font-size:14.5px;line-height:1.4}
.srow .srmain .meta{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.srow .acts{display:flex;gap:6px;margin:0;flex-wrap:wrap}
.srow .act{flex:0 0 auto;min-height:40px;padding:8px 12px;font-size:13px}

.visb{
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--muted);margin-left:8px;
}
.visb.unlisted{border-color:var(--amber);color:var(--amber-text)}
.visb.listed{border-color:var(--teal);color:var(--teal-text)}

.optrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.optrow input[type=radio]{width:22px;height:22px;accent-color:var(--teal);flex:none;cursor:pointer}
.optrow .txt{flex:1}

.qpreview{margin-top:4px}
.qpreview .card{background:#FBFCFD}
.qpreview .opt{pointer-events:none}

/* shorter laptop screens: tighter hero so cards start above the fold */
@media (max-height:820px){
  header.top{padding:14px 0 10px}
  .lede{font-size:clamp(22px,3.4vw,30px);margin:8px 0 6px}
  .sub{font-size:14px;margin-bottom:16px}
}