[hidden]{display:none!important} img{max-width:100%} body{margin:0}
:root{
  --paper:#FCFBFF; --grid:rgba(96,110,220,.10); --surface:#FFFFFF; --surface2:#F2EFFC; --ink:#1D1838; --ink2:#4B4568; --muted:#6B6589; --line:#E2DDF2; --edge:#1D1838;
  --pri:#6A4BF2; --pri-2:#5534E0; --pri-ink:#FFFFFF; --pri-soft:#EEE9FF;
  --pink:#E8408A; --pink-soft:#FFE3EF; --butter:#FFD54A; --butter-soft:#FFF4C8; --sky:#1E8FE0; --sky-soft:#DDF0FF;
  --coral:#E5484D; --coral-soft:#FFE5E3; --ok:#2F6BFF; --ok-soft:#E3EBFF; --warn:#E08A00;
  /* text-safe variants (WCAG AA ≥4.5:1 on paper/surface/soft tints); the bright tokens stay for fills, borders and shadows */
  --pink-t:#BE2767; --warn-t:#9A5700; --sky-t:#1668B0; --coral-t:#C62F37; --ok-t:#2457DB;
  --deep:#2A1F5C; --deep-2:#3A2D78; --deep-ink:#F4F1FF;
  --l1:#FF8FC0; --l2:#FFC93C; --l3:#56B6FF; --l4:#6A4BF2;
  --n0:#FFE27A; --n1:#FFA8CF; --n2:#CDBEFF; --n3:#A6DBFF; --note-ink:#1D1838;
  --hl:rgba(199,184,255,.75);
  --shadow:0 1px 2px rgba(29,24,56,.05),0 10px 24px -14px rgba(29,24,56,.18);
  --pop:3px 3px 0 var(--edge);
  --f-head:"Baloo Bhaijaan 2","Almarai",system-ui,sans-serif;
  --f-body:"Almarai","Baloo Bhaijaan 2",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-hand:"Aref Ruqaa","Caveat",cursive;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:16px; --gut:16px;
}
:root[lang="en"]{--f-hand:"Caveat","Aref Ruqaa",cursive}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#15112A; --grid:rgba(255,255,255,.045); --surface:#1F1A3A; --surface2:#2A2450; --ink:#F2EFFF; --ink2:#C4BEE3; --muted:#A39CC6; --line:#3A335F; --edge:#0A0818;
  --pri:#9D86FF; --pri-2:#B3A1FF; --pri-ink:#140F2E; --pri-soft:#2E2766;
  --pink:#FF79B0; --pink-soft:#45213A; --butter:#FFD54A; --butter-soft:#3D3419; --sky:#6FC2FF; --sky-soft:#1C3552;
  --coral:#FF7373; --coral-soft:#45202A; --ok:#86A9FF; --ok-soft:#1F2C57; --warn:#FFB547; --focus:#FFD54A; --pink-t:#FF79B0; --warn-t:#FFB547; --sky-t:#6FC2FF; --coral-t:#FF7373; --ok-t:#86A9FF;
  --deep:#0E0A24; --deep-2:#231B4E; --deep-ink:#F4F1FF;
  --n0:#EACB5C; --n1:#E992BC; --n2:#B7A7F2; --n3:#90C8F0; --hl:rgba(157,134,255,.45);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#15112A; --grid:rgba(255,255,255,.045); --surface:#1F1A3A; --surface2:#2A2450; --ink:#F2EFFF; --ink2:#C4BEE3; --muted:#A39CC6; --line:#3A335F; --edge:#0A0818;
  --pri:#9D86FF; --pri-2:#B3A1FF; --pri-ink:#140F2E; --pri-soft:#2E2766;
  --pink:#FF79B0; --pink-soft:#45213A; --butter:#FFD54A; --butter-soft:#3D3419; --sky:#6FC2FF; --sky-soft:#1C3552;
  --coral:#FF7373; --coral-soft:#45202A; --ok:#86A9FF; --ok-soft:#1F2C57; --warn:#FFB547; --focus:#FFD54A; --pink-t:#FF79B0; --warn-t:#FFB547; --sky-t:#6FC2FF; --coral-t:#FF7373; --ok-t:#86A9FF;
  --deep:#0E0A24; --deep-2:#231B4E; --deep-ink:#F4F1FF;
  --n0:#EACB5C; --n1:#E992BC; --n2:#B7A7F2; --n3:#90C8F0; --hl:rgba(157,134,255,.45);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body{padding-bottom:0}}
body.exam-open{overflow:hidden}
a{color:var(--pri)}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.35;text-wrap:balance;margin:0;font-weight:700}
h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800}
h2{font-size:1.25rem}
h3{font-size:1.06rem}
h4{font-size:1rem}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.86rem} .center{text-align:center}
.lead{color:var(--ink2);max-width:70ch}
.eyebrow{font-family:var(--f-hand);font-size:1.15rem;color:var(--pink-t);line-height:1.3;margin-block-end:4px}
.hl{background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 90%,transparent 90%);padding-inline:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m{font-family:var(--f-mono);font-size:.9em;unicode-bidi:isolate;white-space:nowrap;background:var(--pri-soft);color:var(--ink);padding:.05em .4em;border-radius:6px}
.m sup{font-size:.68em}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .f{fill:currentColor;stroke:none}
.i16{inline-size:16px;block-size:16px;vertical-align:-3px}
:focus-visible{outline:3px solid var(--focus,var(--pri));outline-offset:2px}
.hero :focus-visible,.accent-card :focus-visible,.ricon.official:focus-visible{outline-color:var(--butter)}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px;align-content:start;box-shadow:var(--shadow);min-width:0}
.chip{display:inline-flex;align-items:center;font-size:.76rem;padding:2px 10px;border-radius:99px;background:var(--pri-soft);color:var(--pri);white-space:nowrap;font-weight:700}
.chip.sand{background:var(--butter-soft);color:var(--warn-t)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.row{display:flex;gap:8px;flex-wrap:wrap}

/* illustrations */
.ill{inline-size:100%;max-width:260px;block-size:auto;display:block;margin-inline:auto;stroke:var(--ink)}
.ill .il-s{stroke:var(--ink);stroke-width:2.2;fill:none}
.ill .il-s.thin{stroke-width:1.4}
.ill .il-s.acc{stroke:var(--pri)} .ill .il-s.pinks{stroke:var(--pink)}
.ill .il-fill{fill:var(--pri-soft);stroke:none} .ill .il-fill2{fill:var(--butter-soft);stroke:none} .ill .il-fill3{fill:var(--pink-soft);stroke:none}
.ill .il-cell{fill:var(--surface2);stroke:none}
.ill .il-bar{fill:var(--pri);stroke:none} .ill .il-bar.acc{fill:var(--pri)} .ill .il-bar.pink{fill:var(--pink)} .ill .il-bar.sky{fill:var(--sky)} .ill .il-bar.butter{fill:var(--butter)}
.ill .il-dot{fill:var(--pink);stroke:none}
.ill text{stroke:none;fill:var(--ink);font-family:var(--f-mono);font-size:13px}
.ill .il-t.acc{fill:var(--pri)} .ill .il-t.b{font-weight:700;font-size:15px} .ill .il-t.light{fill:#fff}
.flash .ill text,.note-card .ill text{fill:var(--note-ink)}
.flash .ill .il-s,.note-card .ill .il-s{stroke:var(--note-ink)}
.flash .ill .il-fill,.note-card .ill .il-fill{fill:rgba(255,255,255,.55)} .flash .ill .il-cell,.note-card .ill .il-cell{fill:rgba(255,255,255,.45)}
.flash .ill .il-fill2,.note-card .ill .il-fill2{fill:rgba(255,255,255,.7)} .flash .ill .il-fill3,.note-card .ill .il-fill3{fill:rgba(29,24,56,.1)}
.flash .ill .il-bar,.note-card .ill .il-bar{fill:#5534E0} .flash .ill .il-bar.pink,.note-card .ill .il-bar.pink{fill:#D6246F} .flash .ill .il-bar.sky,.note-card .ill .il-bar.sky{fill:#1672C2} .flash .ill .il-t.acc,.note-card .ill .il-t.acc{fill:#5534E0} .flash .ill .il-s.acc,.note-card .ill .il-s.acc{stroke:#5534E0}

/* header + nav */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.top-in{max-width:1160px;margin:0 auto;padding-inline:var(--gut);display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo{inline-size:40px;block-size:40px;border-radius:6px;background:var(--n0);color:var(--note-ink);display:grid;place-items:center;font-family:var(--f-head);font-weight:800;font-size:13px;letter-spacing:-.02em;transform:rotate(-5deg);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge)}
.brand b{font-family:var(--f-head);font-size:1.12rem;display:block;line-height:1.2;font-weight:800}
.brand small{color:var(--muted);font-size:.72rem;display:block;line-height:1.2}
#nav{display:none;gap:4px;flex:1}
#nav a,#tabbar a{text-decoration:none;color:var(--ink2);display:flex;align-items:center;gap:7px;border-radius:12px;font-size:.93rem;font-weight:700}
#nav a{padding:8px 14px}
#nav a svg,#tabbar a svg{inline-size:21px;block-size:21px}
#nav a:hover{background:var(--surface2)}
#nav a.on{color:var(--pri-ink);background:var(--pri)}
.lang{margin-inline-start:auto;flex-shrink:0}
#tabbar{position:fixed;inset-inline:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border:2px solid var(--edge);border-radius:20px;box-shadow:var(--pop);padding:5px}
#tabbar a{flex-direction:column;gap:1px;padding:6px 2px;font-size:.72rem;justify-content:center}
#tabbar a.on{color:var(--pri-ink);background:var(--pri)}
@media (min-width:900px){#nav{display:flex}#tabbar{display:none}.lang{margin-inline-start:0}}

main{max-width:1160px;margin:0 auto;padding-inline:var(--gut);padding-block:26px 50px;display:grid;gap:24px}
.page-h{display:grid;gap:8px;max-width:780px}
.page-h p{color:var(--ink2)}
.lesson-h{max-width:none;grid-template-columns:1fr 220px;align-items:center}
.lh-ill{background:var(--surface);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--pop);padding:8px}
@media (max-width:640px){.lesson-h{grid-template-columns:1fr}.lh-ill{max-width:260px}}
.back{font-size:.88rem;text-decoration:none;color:var(--muted);font-weight:700}
.back::before{content:"‹ "} [dir="rtl"] .back::before{content:"› "}
.sec-h{margin-block:10px 0;justify-self:start}
.h2s{margin-block-end:12px}
.note{background:var(--butter-soft);padding:10px 14px;border-radius:12px;font-size:.9rem;color:var(--ink);border:1.5px dashed var(--warn)}
.block{display:grid;gap:14px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.block-head a{font-size:.9rem;text-decoration:none;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}

/* buttons */
.btn{font:inherit;font-size:.95rem;font-weight:700;border:2px solid transparent;border-radius:14px;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.3;transition:transform .08s,box-shadow .08s,background .15s;min-block-size:46px}
.btn.primary{background:var(--pri);color:var(--pri-ink);border-color:var(--edge);box-shadow:var(--pop)}
.btn.primary:hover{background:var(--pri-2)}
.btn.primary:active,.btn.sand:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.btn.sand{background:var(--butter);color:var(--note-ink);border-color:var(--edge);box-shadow:var(--pop)}
.btn.soft{background:var(--pri-soft);color:var(--pri)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--pri)}
.btn.danger{background:var(--coral);color:#fff} .btn.danger-ghost{background:transparent;border-color:var(--coral);color:var(--coral-t)}
.btn.sm{padding:6px 12px;font-size:.85rem;min-block-size:36px;border-radius:11px}
.btn.xl{padding:15px 28px;font-size:1.08rem;border-radius:16px}
.btn.block{inline-size:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.icon-btn{inline-size:42px;block-size:42px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.icon-btn svg{inline-size:20px;block-size:20px}

/* hero */
.hero{background:var(--deep);color:var(--deep-ink);border-radius:26px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden;border:2px solid var(--edge);box-shadow:5px 5px 0 var(--pink)}
.hero::before{content:"✦  ✧   ✦    ✧  ✦";position:absolute;inset-inline-end:24px;top:14px;color:var(--butter);opacity:.7;letter-spacing:.3em;font-size:14px}
.hero::after{content:"";position:absolute;inset-inline-start:-70px;bottom:-110px;inline-size:260px;block-size:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,158,.35),transparent 65%);pointer-events:none}
.hero-main{display:grid;gap:12px;position:relative;z-index:1}
.hero h1{font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.3;color:#fff}
.hero h1 em{font-style:normal;color:var(--butter)}
.hero p{color:color-mix(in srgb,var(--deep-ink) 82%,transparent);max-width:56ch}
.hero .eyebrow{color:var(--butter)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.1);font-size:.86rem;color:var(--deep-ink);text-decoration:none;border:1px solid rgba(255,255,255,.14)}
.pill b{color:var(--butter);font-size:1rem}
.pill a{color:var(--butter)}
.pill.link:hover{background:rgba(255,255,255,.18)}
.hero-ring{position:relative;z-index:1;background:var(--n2);border-radius:10px;padding:14px;transform:rotate(3deg);border:2px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.hero-ring::before{content:"";position:absolute;top:-10px;inset-inline-start:50%;inline-size:70px;block-size:20px;background:rgba(255,255,255,.55);transform:translateX(-50%) rotate(-4deg)}
.hero .r-track{stroke:rgba(29,24,56,.15)} .hero .r-val{stroke:var(--note-ink)} .hero .r-txt{fill:var(--note-ink)} .hero .r-lab{fill:var(--note-ink)}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero-ring{justify-self:center;order:-1}.hero-ring .ring{inline-size:120px!important}}
.ring{max-width:100%;display:block}
.r-track{stroke:var(--surface2);stroke-width:9}
.r-val{stroke:var(--pri);stroke-width:9;stroke-linecap:round}
.r-txt{font-family:var(--f-head);font-size:22px;font-weight:800;fill:var(--ink);stroke:none}
.r-lab{font-size:7.4px;fill:var(--muted);stroke:none;font-family:var(--f-body);font-weight:700}

/* session */
.session{grid-template-columns:1fr auto;align-items:center;gap:20px;background:var(--n0);border:2px solid var(--edge);box-shadow:var(--pop);color:var(--note-ink);position:relative}
.session .eyebrow{color:#7A1240}
.session .muted{color:rgba(29,24,56,.75)}
.session .chip{background:rgba(255,255,255,.6);color:var(--note-ink)}
.sess-txt{display:grid;gap:8px}
.session h2{font-size:1.2rem}
@media (max-width:640px){.session{grid-template-columns:1fr}.session .btn{inline-size:100%}}

/* mastery */
.mmap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mcol{display:grid;gap:8px;align-content:start}
.mcol-h{font-family:var(--f-hand);font-size:1.15rem;color:var(--pink-t)}
.mtiles{display:grid;gap:8px}
.mtile{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "f f";gap:4px 10px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);align-items:center;transition:transform .1s,border-color .15s}
.mtile:hover{border-color:var(--pri);transform:translateY(-1px)}
.mt-n{grid-area:n;font-weight:800;font-size:.96rem}
.mtile .pips{grid-area:p}
.mt-f{grid-area:f;display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.mtile.l4{background:var(--pri-soft);border-color:var(--pri)}
@media (max-width:640px){.mmap{grid-template-columns:1fr}}
.pips{display:inline-flex;gap:3px}
.pips i{inline-size:15px;block-size:7px;border-radius:4px;background:var(--surface2);display:block}
.pips i.on.l1{background:var(--l1)} .pips i.on.l2{background:var(--l2)} .pips i.on.l3{background:var(--l3)} .pips i.on.l4{background:var(--l4)}

/* tasks + checks */
.task-list{display:grid;gap:6px}
.task{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface2);border-radius:12px}
.task .tl{flex:1;font-size:.92rem;line-height:1.5}
.task.done .tl{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--pink)}
.chk{inline-size:22px;block-size:22px;border-radius:7px;border:2px solid var(--muted);display:grid;place-items:center;flex-shrink:0;color:#fff}
.chk svg{inline-size:14px;block-size:14px;stroke-width:3}
.task.done .chk{background:var(--pink);border-color:var(--pink)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;line-height:1.55}
.ck{inline-size:22px;block-size:22px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;display:grid;place-items:center;color:#fff}
.ck svg{inline-size:13px;block-size:13px;stroke-width:3}
.checks li.ok .ck{background:var(--pri);border-color:var(--pri)}

/* method + notes (sticky) */
.method-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.method-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
@media (max-width:900px){.method-strip{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.method-strip{grid-template-columns:1fr}}
.mcard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:6px;align-content:start}
.mcard p{font-size:.88rem;color:var(--ink2);line-height:1.7}
.mtag{font-family:var(--f-hand);font-size:1.02rem;color:var(--pink-t);line-height:1.4}
.mnum{font-family:var(--f-head);color:var(--pri);font-weight:800}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;padding-block:6px}
.small-notes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.note-card,.flash{position:relative;border-radius:4px 4px 14px 4px;padding:22px 16px 16px;color:var(--note-ink);box-shadow:0 10px 18px -12px rgba(29,24,56,.45),0 2px 0 rgba(29,24,56,.08);display:grid;gap:8px;align-content:start}
.note-card h3,.flash h3{color:var(--note-ink)}
.note-card p{font-size:.9rem;line-height:1.7;color:rgba(29,24,56,.85)}
.note-card .m,.flash .m{background:rgba(255,255,255,.6);color:var(--note-ink)}
.c0{background:var(--n0)} .c1{background:var(--n1)} .c2{background:var(--n2)} .c3{background:var(--n3)}
.notes>:nth-child(4n+1) .flash,.notes>.note-card:nth-child(4n+1){transform:rotate(-1.2deg)}
.notes>:nth-child(4n+2) .flash,.notes>.note-card:nth-child(4n+2){transform:rotate(.8deg)}
.notes>:nth-child(4n+3) .flash,.notes>.note-card:nth-child(4n+3){transform:rotate(-.5deg)}
.notes>:nth-child(4n) .flash,.notes>.note-card:nth-child(4n){transform:rotate(1.3deg)}
.note-card::before,.flash .tape{content:"";position:absolute;top:-9px;inset-inline-start:50%;inline-size:74px;block-size:20px;background:rgba(255,255,255,.55);border:1px solid rgba(29,24,56,.08);transform:translateX(-50%) rotate(-3deg)}
[dir="rtl"] .note-card::before,[dir="rtl"] .flash .tape{transform:translateX(50%) rotate(3deg)}
.nc-ill,.fl-ill{background:rgba(255,255,255,.35);border-radius:10px;padding:6px}
.flash .chip{background:rgba(255,255,255,.6);color:var(--note-ink);justify-self:start}
.fl-b{font-size:.95rem;line-height:1.75}
.fl-x{font-size:.88rem;background:rgba(255,255,255,.5);border-radius:10px;padding:8px 10px;line-height:1.6}
.fl-hint{font-family:var(--f-hand);font-size:1.05rem;opacity:.75;justify-self:center}
.mini-flash{list-style:none}
.mini-flash summary{list-style:none;cursor:pointer}
.mini-flash summary::-webkit-details-marker{display:none}
.mini-flash[open] summary{display:none}
.mini-flash .flash h3{font-size:1rem}
.deck-chips{display:flex;gap:6px;overflow-x:auto;padding-block:4px;scrollbar-width:thin}
.dchip{font:inherit;font-size:.85rem;font-weight:700;padding:7px 14px;border-radius:99px;border:2px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;white-space:nowrap}
.dchip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.study{display:grid;gap:14px;justify-items:center}
.flash-btn{font:inherit;border:0;background:none;padding:0;cursor:pointer;inline-size:100%;max-width:440px;text-align:start}
.flash.big{min-block-size:320px;padding:28px 22px 22px;border:2px solid var(--edge);box-shadow:5px 5px 0 var(--edge);transform:rotate(-1deg)}
.flash.big h3{font-size:1.3rem}
.flash.big.flipped{animation:flipin .35s ease}
@keyframes flipin{from{transform:rotate(-1deg) rotateY(80deg)}to{transform:rotate(-1deg) rotateY(0)}}
@media (prefers-reduced-motion:reduce){.flash.big.flipped{animation:none}}

/* plan */
.settings-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.settings-form label{display:grid;gap:4px;font-size:.84rem;color:var(--ink2);flex:1 1 150px;font-weight:700}
input,select,textarea{font:inherit;font-size:.95rem;padding:9px 11px;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);max-width:100%;min-block-size:46px}
.phase-row{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.phase-row li{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:4px}
.phase-row li span{font-size:.84rem;color:var(--ink2);line-height:1.6}
.phase-row li.cur{background:var(--n1);border:2px solid var(--edge);box-shadow:var(--pop);color:var(--note-ink)} .phase-row li.cur span{color:rgba(29,24,56,.8)}
@media (max-width:760px){.phase-row{grid-template-columns:1fr 1fr}}
.weeks{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
@media (max-width:400px){.weeks{grid-template-columns:1fr}}
.week.cur{border:2px solid var(--edge);box-shadow:var(--pop)}
.wk-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip.ph0{background:var(--pink-soft);color:var(--pink-t)} .chip.ph1{background:var(--butter-soft);color:var(--warn-t)} .chip.ph2{background:var(--sky-soft);color:var(--sky-t)} .chip.ph3{background:var(--pri);color:var(--pri-ink)}
.now{font-family:var(--f-hand);font-size:1rem;color:var(--pink-t)}
.wk-c{margin-inline-start:auto;font-size:.84rem;color:var(--muted)}

/* kit */
.tabs{display:flex;gap:4px;background:var(--surface);border:2px solid var(--line);padding:4px;border-radius:16px;max-width:100%;overflow-x:auto;justify-self:start;scrollbar-width:none}
.tabs a{padding:8px 16px;border-radius:12px;text-decoration:none;color:var(--ink2);font-weight:700;white-space:nowrap;font-size:.92rem}
.tabs a.on{background:var(--ink);color:var(--paper)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.lcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:grid;gap:10px;align-content:start;transition:transform .1s,border-color .15s}
.lcard:hover{border-color:var(--pri);transform:translateY(-2px)}
.lc-ill{background:var(--surface2);border-radius:12px;padding:6px}
.lc-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.lcard p{font-size:.88rem;color:var(--ink2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lc-f{display:flex;justify-content:space-between;align-items:center}
.lc-go{font-size:.86rem;color:var(--pri);font-weight:800}
.pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pat{gap:8px}
.pat-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pat-h h3{flex:1}
.pnum{inline-size:30px;block-size:30px;border-radius:50%;background:var(--n1);color:var(--note-ink);display:grid;place-items:center;font-family:var(--f-head);font-weight:800;border:2px solid var(--edge);flex-shrink:0}
.pat p{font-size:.9rem;color:var(--ink2);line-height:1.7}
.pat .key{background:var(--butter-soft);border-radius:10px;padding:8px 10px;color:var(--ink)}
.pat .exl{font-family:var(--f-hand);font-size:1.1rem;color:var(--pri)}
.pat .btn{justify-self:start}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.lesson-main{display:grid;gap:20px;min-width:0}
.lesson-main .card p{color:var(--ink2)}
.lesson-side{position:sticky;top:84px}
.side-card{gap:10px;border:2px solid var(--edge);box-shadow:var(--pop)}
.lvl-row{display:flex;align-items:center;gap:10px}
.lvl-rules{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:.82rem;color:var(--muted)}
.lvl-rules li b{color:var(--ink2);margin-inline-end:4px}
.lvl-rules li.on b{color:var(--pri)}
.mobile-cta{display:none}
@media (max-width:900px){.lesson{grid-template-columns:1fr}.lesson-side{position:static;order:-1}.mobile-cta{display:block}}
.callout{background:var(--n2);color:var(--note-ink);border-radius:6px 6px 16px 6px;padding:18px 20px;display:grid;gap:4px;transform:rotate(-.4deg);box-shadow:0 10px 18px -12px rgba(29,24,56,.45)}
.callout .eyebrow{color:#7A1240}
.nsteps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.nsteps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;line-height:1.7}
.nsteps li::before{content:counter(s);inline-size:30px;block-size:30px;border-radius:50%;background:var(--butter);color:var(--note-ink);font-weight:800;display:grid;place-items:center;font-size:.9rem;font-family:var(--f-head);border:2px solid var(--edge)}
[lang="ar"] .nsteps li::before{content:counter(s,arabic-indic)}
.tgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.tcell{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;display:grid;gap:2px}
.tcell b{font-size:.9rem} .tcell span{font-size:.86rem;color:var(--ink2)}
.rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.rule{background:var(--surface);border:1.5px solid var(--line);border-inline-start:5px solid var(--pri);border-radius:12px;padding:10px 14px;font-size:.92rem;line-height:1.9;overflow-x:auto}
.warn-card{border-inline-start:5px solid var(--coral)}
.accent-card{background:var(--deep);border:2px solid var(--edge);color:var(--deep-ink);box-shadow:4px 4px 0 var(--pink)} .accent-card h2{color:var(--butter)} .accent-card li{color:var(--deep-ink)} .accent-card .m{background:var(--deep-2);color:var(--deep-ink)}
.bul{padding-inline-start:1.2em;margin:0;display:grid;gap:6px;line-height:1.75}
.exgrid{display:grid;gap:8px}
.excard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:0}
.excard summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between}
.excard summary::-webkit-details-marker{display:none}
.exq{font-family:var(--f-head);font-size:1rem;font-weight:600}
.reveal{font-family:var(--f-hand);font-size:1.05rem;color:var(--pink-t)}
.excard[open] .reveal{display:none}
.excard p{padding:0 16px 12px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.rcard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .1s}
a.rcard:hover{border-color:var(--pri);transform:translateY(-1px)}
.rc-body{display:grid;gap:4px;min-width:0;flex:1}
.rc-top{display:flex;justify-content:space-between;gap:8px;align-items:start}
.rcard h3{font-size:.96rem}
.rcard p{font-size:.86rem;color:var(--ink2);line-height:1.65}
.ricon{inline-size:40px;block-size:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--pri-soft);color:var(--pri)}
.ricon svg{inline-size:21px;block-size:21px}
.ricon.video{background:var(--coral-soft);color:var(--coral-t)} .ricon.book{background:var(--butter-soft);color:var(--warn-t)} .ricon.official{background:var(--deep);color:var(--butter)}
.vstats{display:flex;gap:18px;font-size:.92rem;align-items:baseline}
.vstats b{font-family:var(--f-head);font-size:1.4rem;color:var(--pink-t)}
.vcard{font:inherit;inline-size:100%;max-width:520px;min-block-size:230px;margin-inline:auto;display:grid;place-content:center;gap:12px;text-align:center;background:var(--n3);border:2px solid var(--edge);border-radius:6px 6px 18px 6px;box-shadow:5px 5px 0 var(--edge);cursor:pointer;color:var(--note-ink);padding:24px;transform:rotate(-1deg)}
.vcard.flipped{background:var(--n1);cursor:default}
.v-word{font-family:var(--f-head);font-size:2.1rem;font-weight:800}
.v-mean{font-size:1.15rem}
.v-hint{font-family:var(--f-hand);font-size:1.05rem;opacity:.7}
.vbtns{display:flex;gap:10px;justify-content:center}

/* practice */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;align-content:space-between}
.pcard>div{display:grid;gap:6px}
.pcard p{font-size:.9rem;color:var(--ink2);line-height:1.65}
.pcard .btn{justify-self:start}
.pcard.feature{background:var(--n0);border:2px solid var(--edge);box-shadow:var(--pop);color:var(--note-ink)} .pcard.feature p{color:rgba(29,24,56,.8)}
.pcard.dark{background:var(--deep);border:2px solid var(--edge);color:var(--deep-ink);box-shadow:4px 4px 0 var(--pink)} .pcard.dark p{color:color-mix(in srgb,var(--deep-ink) 80%,transparent)} .pcard.dark h3{color:#fff}
.due-n b{font-family:var(--f-head);font-size:1.5rem;color:var(--pink-t)}
.models{display:grid;gap:12px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mbox{font:inherit;display:grid;justify-items:center;gap:0;padding:10px 6px;background:var(--surface);border:2px solid var(--line);border-radius:14px;cursor:pointer;color:var(--ink);min-block-size:44px;transition:transform .1s,border-color .15s}
.mbox:hover{border-color:var(--pri);transform:translateY(-2px)}
.mbox b{font-family:var(--f-head);font-size:1.5rem;line-height:1.2}
.mb-n{font-size:.72rem;color:var(--muted);font-weight:700}
.mb-s{font-size:.76rem;color:var(--muted)}
.mbox.done{background:var(--pri-soft);border-color:var(--pri)} .mbox.done .mb-s{color:var(--pri);font-weight:800}
.mbox.star{background:var(--n0);border-color:var(--edge);box-shadow:var(--pop);color:var(--note-ink)} .mbox.star .mb-s,.mbox.star .mb-n{color:var(--note-ink)}
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.skbtn{font:inherit;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;color:var(--ink);display:grid;gap:6px;min-block-size:44px}
.skbtn:hover{border-color:var(--pri)}
.sk-n{font-weight:800}
.skbtn small{color:var(--muted);font-size:.78rem}

/* progress */
.demo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--butter-soft);border:2px dashed var(--warn);border-radius:14px;padding:10px 14px;font-size:.92rem}
.kpis{display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:10px}
.kpi{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:2px;align-content:start}
.kpi.big{display:flex;align-items:center;gap:12px;border:2px solid var(--edge);box-shadow:var(--pop)}
.kpi.big>div{display:grid;gap:4px}
.kl{font-size:.8rem;color:var(--muted);font-weight:700}
.kv{font-family:var(--f-head);font-size:1.6rem;line-height:1.3;font-weight:800}
.ks{font-size:.78rem;color:var(--muted)}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.kpi.big{grid-column:1 / -1}}
@media (max-width:520px){.kpis{grid-template-columns:1fr 1fr}}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dgrid .wide{grid-column:1 / -1}
@media (max-width:860px){.dgrid{grid-template-columns:1fr}}
.reco{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.reco li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;background:var(--surface2);border-inline-start:5px solid var(--muted)}
.reco li.bad{border-color:var(--coral)} .reco li.warn{border-color:var(--warn)} .reco li.good{border-color:var(--ok)}
.reco p{font-size:.86rem;color:var(--ink2);line-height:1.65}
.stable{display:grid;gap:2px}
.srow{display:grid;grid-template-columns:minmax(120px,1.1fr) 130px minmax(120px,2fr) 110px;gap:12px;align-items:center;padding:8px 6px;border-radius:10px;text-decoration:none;color:var(--ink)}
.srow:hover{background:var(--surface2)}
.sn{font-weight:800;font-size:.92rem}
.sl{display:grid;gap:2px} .sl small{font-size:.74rem;color:var(--muted)}
.stime{font-size:.84rem;color:var(--ink2);text-align:end} .stime.slow{color:var(--warn-t);font-weight:800}
@media (max-width:620px){.srow{grid-template-columns:1fr auto;grid-template-areas:"n l" "b b" "t t"}.sn{grid-area:n}.sl{grid-area:l}.sb{grid-area:b}.stime{grid-area:t;text-align:start}}
.bar-row{display:grid;grid-template-columns:minmax(100px,150px) 1fr 46px;align-items:center;gap:10px;padding-block:5px}
.bar-row.nolabel{grid-template-columns:1fr 46px}
.bar-row .bm{grid-column:1 / -1;font-size:.76rem;color:var(--muted);margin-block-start:-4px}
.bl{font-size:.9rem;min-inline-size:0;overflow-wrap:anywhere;line-height:1.45}
@media (max-width:480px){.bar-row{grid-template-columns:minmax(0,1.2fr) minmax(56px,1fr) 42px;gap:8px}}
.bt{position:relative;block-size:9px;background:var(--surface2);border-radius:99px;display:block}
.bf{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;display:block}
.bf.good{background:var(--pri)} .bf.warn{background:var(--warn)} .bf.bad{background:var(--coral)} .bf.none{background:transparent} .bf.sand{background:var(--pink)}
.b95{position:absolute;inset-block:-4px;inset-inline-start:95%;inline-size:2px;background:var(--ink);opacity:.45;border-radius:2px}
.bv{font-size:.84rem;text-align:end}
.cause-row{display:grid;gap:4px;padding-block:4px}
.cr-h{display:flex;justify-content:space-between}
.chart{overflow-x:auto}
.chart svg{inline-size:100%;min-width:360px;height:auto;display:block;stroke:none}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
.chart .tgt{stroke:var(--pink);stroke-width:1.8;stroke-dasharray:5 4}
.chart .area{fill:var(--pri);opacity:.12;stroke:none}
.chart .ln{fill:none;stroke:var(--pri);stroke-width:2.4}
.chart .pt circle{fill:var(--pri);stroke:var(--surface);stroke-width:2}
.chart .pt circle.hit{fill:transparent;stroke:none}
.chart .lab{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--ink)}
.tbl{overflow-x:auto;border:1.5px solid var(--line);border-radius:12px}
table{border-collapse:collapse;inline-size:100%;font-size:.9rem}
th,td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--surface2);font-weight:800;font-size:.82rem}
tr:last-child td{border-bottom:0}
.bk{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bk textarea{flex:1;min-width:200px;font-family:var(--f-mono);font-size:.8rem}

/* guide */
.toc{display:flex;flex-wrap:wrap;gap:6px}
.toc a{background:var(--surface);border:1.5px solid var(--line);border-radius:99px;padding:5px 13px;text-decoration:none;color:var(--ink2);font-size:.86rem;font-weight:700}
.toc a:hover{border-color:var(--pri);color:var(--pri)}
.guide-body{display:grid;gap:16px;max-width:900px}
.gsec{scroll-margin-top:84px}
.gsec p{color:var(--ink2)}
.gsec .steps{padding-inline-start:1.3em;margin:0;display:grid;gap:8px}
details:not(.excard):not(.rev-p):not(.mini-flash){background:var(--surface2);border-radius:12px;padding:10px 14px}
details:not(.excard):not(.mini-flash) summary{cursor:pointer;font-weight:800}
details:not(.excard):not(.mini-flash) p{margin-block-start:8px}

/* exam */
#exam{position:fixed;inset:0;z-index:50;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;overflow-y:auto;padding-block:env(safe-area-inset-top,0px) 0}
.ex-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px var(--gut);background:var(--surface);border-bottom:2px solid var(--line)}
.ex-title{flex:1;display:grid;line-height:1.35;min-width:0}
.ex-title strong{font-family:var(--f-head);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-title span{font-size:.8rem;color:var(--muted)}
.ex-timer{font-family:var(--f-mono);font-size:1.25rem;font-weight:600;padding:5px 12px;border-radius:12px;background:var(--deep);color:var(--butter);font-variant-numeric:tabular-nums;border:2px solid var(--edge)}
.ex-timer.low{background:var(--coral);color:#fff}
.ex-bar{block-size:4px;background:var(--surface2);position:sticky;top:64px;z-index:3}
.ex-bar span{display:block;block-size:100%;background:linear-gradient(90deg,var(--pink),var(--pri));transition:inline-size .2s}
.ex-confirm{max-width:900px;margin:12px auto 0;margin-inline:var(--gut);padding:12px 16px;background:var(--butter-soft);border:2px solid var(--warn);border-radius:14px;display:grid;gap:10px}
@media (min-width:932px){.ex-confirm{margin-inline:auto}}
.ex-confirm.inline{margin:10px 0}
.ex-mapwrap{max-width:900px;margin:12px auto 0;padding-inline:var(--gut)}
.ex-map{display:flex;flex-wrap:wrap;gap:6px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px}
.dot{font:inherit;font-size:.8rem;inline-size:40px;block-size:40px;border-radius:50%;border:2px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;position:relative;font-weight:700}
.dot.ans{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dot.cur{outline:3px solid var(--pri);outline-offset:1px}
.dot.fl::after{content:"";position:absolute;top:0;inset-inline-end:0;inline-size:10px;block-size:10px;border-radius:50%;background:var(--pink);border:2px solid var(--surface)}
.ex-body{max-width:820px;margin:0 auto;padding:22px var(--gut) 130px;display:grid;gap:20px}
.ex-body.with-passage{max-width:1160px;grid-template-columns:1fr 1fr}
@media (max-width:860px){.ex-body.with-passage{grid-template-columns:1fr}}
.ex-passage{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;line-height:2.05;align-self:start;position:sticky;top:84px;max-block-size:calc(100vh - 210px);overflow-y:auto}
@media (max-width:860px){.ex-passage{position:static;max-block-size:none}}
.ex-q{display:grid;gap:16px;align-content:start}
.ex-qhead{display:flex;gap:8px;align-items:center}
.ex-stem{font-size:1.2rem;font-family:var(--f-head);font-weight:600;line-height:1.9;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px}
.ex-stem.analogy{font-size:1.6rem;text-align:center;font-weight:800;background:var(--n0);color:var(--note-ink);border:2px solid var(--edge);box-shadow:var(--pop)}
.ex-opts{display:grid;gap:10px}
.opt{font:inherit;display:flex;align-items:center;gap:14px;text-align:start;padding:13px 15px;background:var(--surface);border:2px solid var(--line);border-radius:16px;cursor:pointer;color:var(--ink);font-size:1.03rem;min-block-size:56px;transition:border-color .12s,background .12s,transform .08s}
.opt:hover:not(:disabled){border-color:var(--pri);transform:translateX(0) translateY(-1px)}
.opt:disabled{cursor:default}
.bub{inline-size:34px;block-size:34px;border-radius:50%;border:2px solid var(--ink2);display:grid;place-items:center;font-size:.9rem;flex-shrink:0;font-weight:800;color:var(--ink2);background:var(--surface)}
.opt.sel{border-color:var(--ink);background:var(--pri-soft)} .opt.sel .bub{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)} .opt.right .bub{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--coral);background:var(--coral-soft)} .opt.wrong .bub{background:var(--coral);border-color:var(--coral);color:#fff}
.opt.dim{opacity:.5}
.fb{border-radius:6px 6px 16px 6px;padding:14px 16px;display:grid;gap:4px;background:var(--n3);color:var(--note-ink);transform:rotate(-.4deg);box-shadow:0 10px 18px -12px rgba(29,24,56,.45)}
.fb.bad{background:var(--n1)}
.fb p{color:rgba(29,24,56,.85)} .fb .m{background:rgba(255,255,255,.6);color:var(--note-ink)}
.ex-foot{position:fixed;inset-inline:0;bottom:0;z-index:4;background:var(--surface);border-top:2px solid var(--line);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px))}
.ex-foot-in{max-width:820px;margin:0 auto;display:flex;gap:8px}
.ex-foot-in #ex-next,.ex-foot-in #ex-end{margin-inline-start:auto;min-inline-size:110px}
@media (max-width:480px){.ex-foot-in{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}.ex-foot-in .btn{padding-inline:6px;font-size:.84rem;min-inline-size:0}.ex-foot-in #ex-next,.ex-foot-in #ex-end{min-inline-size:0;margin-inline-start:0}}
.btn.flagged{border-color:var(--pink);color:var(--pink-t);background:var(--pink-soft)}

/* results */
.rs{max-width:880px;margin:0 auto;padding:20px var(--gut) 48px;display:grid;gap:14px}
.rs-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;border:2px solid var(--edge);box-shadow:var(--pop)}
.rs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;flex:1}
.rs-kpis div{display:grid}
.rs-kpis b{font-family:var(--f-head);font-size:1.5rem}
.rs-kpis span{font-size:.8rem;color:var(--muted)}
.rs-rev-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg button{font:inherit;font-size:.86rem;font-weight:700;border:0;background:transparent;padding:7px 14px;cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--ink);color:var(--paper)}
.rev-list{display:grid;gap:10px}
.rev{background:var(--surface);border:1.5px solid var(--line);border-inline-start:5px solid var(--ok);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.rev.bad{border-inline-start-color:var(--coral)}
.rev-h{display:flex;justify-content:space-between;align-items:center}
.rev-stem{font-family:var(--f-head);font-size:1.04rem;font-weight:600}
.rev-opts{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.rev-opts li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;font-size:.94rem}
.rev-opts li .bub{inline-size:28px;block-size:28px;font-size:.78rem}
.rev-opts li.right{background:var(--ok-soft)}
.rev-opts li.yours{background:var(--coral-soft)}
.rev-opts em{font-style:normal;font-size:.74rem;font-weight:800;color:var(--muted);margin-inline-start:auto}
/* options are often bare numbers/expressions ("−3", "−5 + 2"): let each option pick its own direction so minus signs stay in front */
.opt .otx,.rev-opts li>.bub+span{unicode-bidi:plaintext;text-align:match-parent}
.rev-exp{font-size:.92rem;color:var(--ink2)}
.rev-p summary{font-size:.85rem;cursor:pointer} .rev-p p{font-size:.9rem;color:var(--ink2)}
.cause{display:grid;gap:6px}
.cchip{font:inherit;font-size:.82rem;font-weight:700;padding:6px 12px;border-radius:99px;border:2px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;min-block-size:36px}
.cchip.on{background:var(--pink);border-color:var(--pink);color:#fff}
.ai-slot{display:none;gap:6px}
body.has-ai .ai-slot{display:grid}
.ai-slot .btn{justify-self:start}
.ai-out{font-size:.92rem;white-space:pre-wrap}
.ai-out:not(:empty){background:var(--pri-soft);padding:10px 12px;border-radius:12px}

#toast{position:fixed;inset-inline:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));margin:0 auto;inline-size:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;z-index:80;font-size:.92rem;font-weight:700}
footer{border-top:1.5px solid var(--line);padding-block:20px;padding-inline:var(--gut);color:var(--muted);font-size:.82rem}
footer p{max-width:1160px;margin:0 auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* theme picker */
.theme-wrap{position:relative;flex-shrink:0}
.theme-pop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;inline-size:250px;background:var(--surface);border:2px solid var(--edge);border-radius:16px;box-shadow:var(--pop);padding:14px;display:grid;gap:10px}
.theme-pop h4{font-size:.85rem;color:var(--muted)}
.tp-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface2);padding:4px;border-radius:12px}
.tp-seg button{font:inherit;font-size:.84rem;font-weight:700;border:0;border-radius:9px;padding:7px 4px;background:transparent;color:var(--ink2);cursor:pointer;min-block-size:36px}
.tp-seg button.on{background:var(--ink);color:var(--paper)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{inline-size:40px;block-size:40px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--line);cursor:pointer;background:var(--c)}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.sw-label{font-size:.8rem;color:var(--muted)}
@media (max-width:520px){.brand small{display:none}.theme-pop{inset-inline-end:-60px}}
/* accents: light */
:root[data-accent="pink"]{--pri:#C41F66;--pri-2:#A8195A;--pri-soft:#FFE3EF;--hl:rgba(255,143,192,.55);--l4:#C41F66}
:root[data-accent="blue"]{--pri:#1F5AD6;--pri-2:#1A4BB8;--pri-soft:#E0EAFF;--hl:rgba(126,190,255,.55);--l4:#1F5AD6}
:root[data-accent="orange"]{--pri:#B34708;--pri-2:#963B06;--pri-soft:#FFEBDC;--hl:rgba(255,213,74,.7);--l4:#B34708}
:root[data-accent="ruby"]{--pri:#C22B4E;--pri-2:#A21F3F;--pri-soft:#FDE4EA;--hl:rgba(255,160,180,.55);--l4:#C22B4E}
:root[data-accent="navy"]{--pri:#27306B;--pri-2:#1C2354;--pri-soft:#E6E8F7;--hl:rgba(166,219,255,.7);--l4:#27306B}
/* accents: dark */
@media (prefers-color-scheme:dark){
 :root[data-accent="pink"]:not([data-theme="light"]){--pri:#FF79B0;--pri-2:#FF96C2;--pri-soft:#45213A;--pri-ink:#2A0D1C;--hl:rgba(255,121,176,.4);--l4:#FF79B0}
 :root[data-accent="blue"]:not([data-theme="light"]){--pri:#7FB2FF;--pri-2:#9CC4FF;--pri-soft:#1F2C57;--pri-ink:#0B1433;--hl:rgba(127,178,255,.4);--l4:#7FB2FF}
 :root[data-accent="orange"]:not([data-theme="light"]){--pri:#FFA25C;--pri-2:#FFB77E;--pri-soft:#442A17;--pri-ink:#2B1406;--hl:rgba(255,162,92,.4);--l4:#FFA25C}
 :root[data-accent="ruby"]:not([data-theme="light"]){--pri:#FF7A96;--pri-2:#FF98AE;--pri-soft:#46202B;--pri-ink:#2B0A12;--hl:rgba(255,122,150,.4);--l4:#FF7A96}
 :root[data-accent="navy"]:not([data-theme="light"]){--pri:#A9B4FF;--pri-2:#C1C9FF;--pri-soft:#262D5C;--pri-ink:#0E1233;--hl:rgba(169,180,255,.4);--l4:#A9B4FF}
}
:root[data-theme="dark"][data-accent="pink"]{--pri:#FF79B0;--pri-2:#FF96C2;--pri-soft:#45213A;--pri-ink:#2A0D1C;--hl:rgba(255,121,176,.4);--l4:#FF79B0}
:root[data-theme="dark"][data-accent="blue"]{--pri:#7FB2FF;--pri-2:#9CC4FF;--pri-soft:#1F2C57;--pri-ink:#0B1433;--hl:rgba(127,178,255,.4);--l4:#7FB2FF}
:root[data-theme="dark"][data-accent="orange"]{--pri:#FFA25C;--pri-2:#FFB77E;--pri-soft:#442A17;--pri-ink:#2B1406;--hl:rgba(255,162,92,.4);--l4:#FFA25C}
:root[data-theme="dark"][data-accent="ruby"]{--pri:#FF7A96;--pri-2:#FF98AE;--pri-soft:#46202B;--pri-ink:#2B0A12;--hl:rgba(255,122,150,.4);--l4:#FF7A96}
:root[data-theme="dark"][data-accent="navy"]{--pri:#A9B4FF;--pri-2:#C1C9FF;--pri-soft:#262D5C;--pri-ink:#0E1233;--hl:rgba(169,180,255,.4);--l4:#A9B4FF}
/* save */
.save-dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--ok);flex-shrink:0;box-shadow:0 0 0 3px var(--ok-soft)}
.save-dot.bad{background:var(--coral);box-shadow:0 0 0 3px var(--coral-soft)}
.save-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.save-grid{grid-template-columns:1fr}}
.save-opt{background:var(--surface2);border-radius:14px;padding:14px;display:grid;gap:8px;align-content:start;border-inline-start:5px solid var(--pri)}
.save-opt.ok{border-color:var(--ok)} .save-opt.bad{border-color:var(--coral)}
.save-opt p{color:var(--ink2);line-height:1.65}
.file-lbl{cursor:pointer}
.save-card .bk textarea{min-width:0;flex-basis:100%}
/* account */
#acct-btn{position:relative}
#acct-btn.on::after{content:"";position:absolute;bottom:4px;inset-inline-end:4px;inline-size:9px;block-size:9px;border-radius:50%;background:var(--ok);border:2px solid var(--surface)}
#acct{position:fixed;inset:0;z-index:70;background:rgba(21,17,42,.45);display:grid;place-items:center;padding:16px}
#acct[hidden]{display:none}
.acct-box{position:relative;inline-size:100%;max-width:420px;max-block-size:calc(100vh - 32px);overflow-y:auto;background:var(--surface);border:2px solid var(--edge);border-radius:20px;box-shadow:5px 5px 0 var(--edge);padding:24px 20px 20px;display:grid;gap:12px}
.acct-x{position:absolute;top:10px;inset-inline-end:10px}
.acct-box h2{padding-inline-end:44px}
.acct-mail{font-weight:800;direction:ltr;text-align:start;unicode-bidi:plaintext}
.acct-seg{justify-self:start}
.acct-form{display:grid;gap:10px}
.acct-form label{display:grid;gap:4px;font-size:.86rem;font-weight:700;color:var(--ink2)}
.acct-form .chkl{display:flex;gap:8px;align-items:flex-start;font-weight:400;line-height:1.6}
.acct-form .chkl input{min-block-size:auto;margin-top:5px;inline-size:18px;block-size:18px;accent-color:var(--pri)}
.linkbtn{font:inherit;font-size:.86rem;background:none;border:0;color:var(--pri);cursor:pointer;justify-self:start;padding:4px 0;font-weight:700}
.acct-priv{font-size:.86rem}
.acct-err{background:var(--coral-soft);color:var(--coral-t);border-radius:10px;padding:8px 12px;font-weight:700;font-size:.9rem}
.acct-info{background:var(--ok-soft);color:var(--ok-t);border-radius:10px;padding:8px 12px;font-weight:700;font-size:.9rem}
.save-opt.cloud{border-color:var(--pink)} .save-opt.cloud.ok{border-color:var(--ok)}
@media (max-width:520px){.top-in{gap:6px}.brand{gap:6px}.brand b{font-size:.98rem}.logo{inline-size:34px;block-size:34px;font-size:11px}.top .icon-btn{inline-size:38px;block-size:38px}#lang-btn{padding-inline:9px;min-block-size:38px}.save-dot{display:none}}
.restart{grid-template-columns:1fr auto;align-items:center}
.restart #pl-confirm{grid-column:1 / -1}
@media (max-width:560px){.restart{grid-template-columns:1fr}}
.reset-box{gap:12px}
.rs-list{display:grid;gap:6px}
.rs-opt{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.rs-opt input{inline-size:20px;block-size:20px;min-block-size:auto;margin-top:3px;accent-color:var(--coral);flex-shrink:0}
.rs-opt span{display:grid;gap:2px} .rs-opt small{color:var(--muted);font-size:.8rem}
.rs-opt:has(input:checked){border-color:var(--coral);background:var(--coral-soft)}
/* review from history */
.mcell{display:grid;gap:4px}
.mb-rev{font:inherit;font-size:.76rem;font-weight:800;border:0;background:none;color:var(--pri);cursor:pointer;padding:2px;min-block-size:28px;text-decoration:underline;text-underline-offset:3px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--pri-soft)}
tr.clickable:focus-visible{outline:3px solid var(--butter);outline-offset:-3px}
.rev-link{font-weight:800;color:var(--pri);font-size:.84rem;white-space:nowrap}
/* touch devices: comfortable tap targets (≥44px) without changing the desktop look */
@media (pointer:coarse){
  .btn.sm{min-block-size:44px;min-inline-size:44px}
  details:not(.excard):not(.mini-flash)>summary{padding-block:8px}
  .top .icon-btn{inline-size:44px;block-size:44px} #lang-btn{min-block-size:44px}
  .toc a{display:inline-block;padding-block:10px}
  .back{display:inline-block;padding-block:9px;margin-block:-9px}
  .pill a,#main a[href^="#"]:not([class]){display:inline-block;padding-block:9px;margin-block:-9px}
}
/* empty state (no real data yet) — calm, not a warning */
.demo.empty-state{background:var(--surface);border:2px dashed color-mix(in srgb,var(--pri) 45%,transparent);color:var(--ink)}
/* sign-up gate before the first test */
.gate-msg{background:color-mix(in srgb,var(--pri) 10%,var(--surface));border-inline-start:4px solid var(--pri);padding:10px 12px;border-radius:10px;color:var(--ink);line-height:1.7}
/* signed-in student's name in the header */
#acct-btn.has-name{inline-size:auto;padding-inline:8px 12px;gap:6px;display:inline-flex;align-items:center;border-radius:999px}
#acct-btn .acct-name{max-inline-size:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.9rem;color:var(--ink)}
@media (max-width:520px){#acct-btn.has-name{padding-inline:6px 9px;gap:4px}#acct-btn .acct-name{max-inline-size:5.5em;font-size:.82rem}}
@media (max-width:370px){#acct-btn .acct-name{max-inline-size:4.2em}}
#acct-btn.has-name.on::after{bottom:auto;top:-3px;inset-inline-end:auto;inset-inline-start:-3px}