:root{
  --ink:#12203A; --ink-2:#1C2C4C; --heading:#12203A; --on-ink:#FFFFFF; --text:#1E2638; --text-2:#3A4660; --muted:#6B7280;
  --saffron:#F2A33A; --saffron-d:#B8690B; --saffron-l:#FDE7C4; --accent-b:#F3CF98; --accent-t:#7a4a08; --on-accent:#12203A;
  --paper:#F4F1EA; --card:#FFFFFF; --band:#FFFFFF; --line:#E3DED1; --track:#E7E3D8; --soft:#EEF0F4;
  --ok:#167A50; --ok-l:#E3F4EC; --bad:#B3261E; --bad-l:#FBE9E7;
  --head:rgba(255,255,255,.96); --panel:var(--ink); --cta:var(--ink); --hero-bg:transparent;
  --fh:'Bricolage Grotesque'; --fb:'DM Sans';
  --r:14px; --rb:999px; --shadow:0 1px 2px rgba(18,32,58,.06),0 6px 20px rgba(18,32,58,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fb),system-ui,sans-serif;color:var(--text);background:var(--paper);font-size:16px;line-height:1.55}
h1,h2,h3,.h{font-family:var(--fh),system-ui,sans-serif;color:var(--heading);letter-spacing:-.01em;margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
/* header */
.top{position:sticky;top:0;z-index:20;background:var(--head);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--fh);font-weight:800;font-size:24px;color:var(--heading)}
.brand b{color:var(--saffron-d);font-weight:700}
.nav{display:flex;gap:22px;margin-left:16px}
.nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--text-2);padding:6px 0;border-bottom:2px solid transparent}
.nav a.on,.nav a:hover{color:var(--heading);border-color:var(--saffron)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.mode select{font:inherit;font-size:14px;font-weight:500;color:var(--heading);background:var(--paper);border:1px solid var(--line);border-radius:var(--rb);padding:7px 12px;max-width:190px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;font-size:18px;padding:4px 10px;cursor:pointer}
/* buttons, chips, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--rb);padding:12px 22px;font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-saffron{background:var(--saffron);color:var(--on-accent)}
.btn-ghost{background:var(--card);color:var(--heading);border-color:var(--heading)}
.btn-sm{padding:8px 16px;font-size:14px}
.chip{display:inline-flex;align-items:center;border:1.5px solid var(--line);background:var(--card);border-radius:var(--rb);padding:8px 15px;font-size:14px;font-weight:500;cursor:pointer;color:var(--heading);text-decoration:none}
.chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--saffron-d)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--rb);background:var(--saffron-l);color:var(--saffron-d)}
.pill.soon{background:var(--soft);color:var(--text-2)}
.pill.ok{background:var(--ok-l);color:var(--ok)}
.app{min-height:70vh}
section{padding:56px 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:56px 0 64px}
.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02;font-weight:800}

.hero p.lead{font-size:18px;color:var(--text-2);max-width:560px;margin:18px 0 22px}
.panel{background:var(--panel);color:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 20px 50px rgba(18,32,58,.25)}
.panel .crumb{font-size:12px;opacity:.75}
.bar{height:7px;border-radius:9px;background:rgba(255,255,255,.12);margin:6px 0 14px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;background:var(--saffron)}
.row{display:flex;justify-content:space-between;font-size:14px}
.five .card{box-shadow:none}
.five .card.hl{background:var(--saffron-l);border-color:var(--accent-b)}
.steps .n{font-family:var(--fh);font-weight:800;font-size:34px;color:var(--saffron-d)}
.subj{display:block;text-decoration:none;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.subj.on{background:var(--panel);color:#fff}.subj.on h3{color:#fff}
.cta{background:var(--cta);color:#fff;border-radius:24px;padding:48px 24px;text-align:center}
.cta h2{color:#fff;font-size:clamp(26px,4vw,40px)}
/* page header */
.ph{padding:36px 0 8px}
.ph h1{font-size:clamp(30px,4.5vw,44px);font-weight:800}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:8px}
.crumbs a{text-decoration:none;color:var(--text-2)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:22px 0;overflow-x:auto}
.tab{padding:10px 16px;border:none;background:none;font:inherit;font-weight:700;color:var(--text-2);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.tab.on{color:var(--ink);border-color:var(--saffron)}
/* chapters / subtopics */
.chap{display:flex;gap:14px;align-items:flex-start;text-decoration:none;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.chap:hover{border-color:var(--saffron)}
.chap .num{font-family:var(--fh);font-weight:800;color:var(--saffron-d);font-size:20px;min-width:30px}
.chap small{display:block;color:var(--muted)}
.ladder{display:grid;gap:10px}
.st{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none}
.st:hover{border-color:var(--saffron)}
.st .code{font-weight:700;color:var(--saffron-d);min-width:44px}
.st .nm{flex:1}
.dots{display:flex;gap:4px}.dots i{width:10px;height:10px;border-radius:3px;background:var(--track)}
/* question */
.q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px}
.q .qh{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.q .qn{font-family:var(--fh);font-weight:800;color:var(--heading)}
.q .star{color:var(--saffron-d);font-weight:700;font-size:13px}
.q p{margin:6px 0}
.q img.fig{display:block;max-width:min(520px,100%);margin:10px 0;border-radius:6px}
.q table{border-collapse:collapse;margin:10px 0;font-size:15px}
.q td,.q th{border:1px solid var(--line);padding:6px 10px}
.opts{display:grid;gap:8px;margin:12px 0}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer;color:var(--text)}
.opt b{color:var(--heading)}
.opt:hover{border-color:var(--heading)}
.opt.ok{border-color:var(--ok);background:var(--ok-l)}
.opt.bad{border-color:var(--bad);background:var(--bad-l)}
.opt[disabled]{cursor:default}
.sol{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px;display:none}
.sol.open{display:block}
.sol .lab{font-weight:700;color:var(--heading)}
.sol .mist{color:var(--bad)}
.ans{font-weight:700;color:var(--ok)}
.toggle{background:none;border:none;color:var(--saffron-d);font:inherit;font-weight:700;cursor:pointer;padding:6px 0}
.note{background:var(--saffron-l);border:1px solid var(--accent-b);color:var(--accent-t);border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px}
.soon-box{text-align:center;padding:40px 20px}
.soon-box .h{font-size:24px;margin:8px 0}
.lock{opacity:.6}
.score{font-family:var(--fh);font-weight:800;font-size:36px;color:var(--heading)}
/* onboarding */
.ob{max-width:720px;margin:0 auto;padding:40px 0}
.ob h2{font-size:28px;margin:6px 0 16px}
.ob .group{margin:18px 0}
.ob .group h4{margin:0 0 8px;font-size:15px;color:var(--text-2)}
.choice{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:16px 18px;font:inherit;cursor:pointer;margin-bottom:10px}
.choice.on{border-color:var(--heading);box-shadow:inset 0 0 0 1px var(--heading)}
.choice b{display:block;color:var(--heading);font-size:17px}
.prog{display:flex;gap:6px;margin-bottom:10px}.prog i{flex:1;height:5px;border-radius:5px;background:var(--track)}.prog i.on{background:var(--saffron)}
/* footer */
.foot{border-top:1px solid var(--line);background:var(--card);margin-top:40px}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 20px;font-size:14px}
.foot nav{display:flex;gap:16px}.foot nav a{color:var(--text-2)}
.foot-brand{display:flex;align-items:center;gap:8px}
/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:32px}
  .g4,.g5{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--card);flex-direction:column;gap:0;margin:0;border-bottom:1px solid var(--line);padding:6px 20px}
  .nav.open{display:flex}.nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .mode select{max-width:120px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  #startBtn{display:none}
  section{padding:40px 0}
}
.nw{white-space:nowrap}

/* layout helpers */
.chgrid{grid-template-columns:2fr 1fr;gap:22px;align-items:start}
@media (max-width:900px){.chgrid{grid-template-columns:1fr}}
.hero{background:var(--hero-bg);border-radius:calc(var(--r) * 2)}

.examline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 22px;font-size:15px}
.examline .chip{cursor:default}
.examline a{color:var(--saffron-d);font-weight:700}
/* theme preview bar */
.tbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;display:flex;gap:6px;align-items:center;background:#111827;color:#fff;padding:8px 10px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);font:600 13px system-ui;max-width:calc(100vw - 24px);overflow-x:auto}
.tbar button{border:2px solid transparent;border-radius:999px;padding:6px 12px;font:inherit;cursor:pointer;white-space:nowrap;color:#111827}
.tbar button.on{border-color:#fff;box-shadow:0 0 0 2px #111827 inset}
.tbar .x{background:none;color:#9CA3AF;padding:4px 8px}
/* ---------- colour themes (preview: add ?theme=<name> to any URL) ---------- */
[data-theme=indigo]{--ink:#2E2A85;--ink-2:#3F3AA8;--heading:#1E1B4B;--text:#1F1D3A;--text-2:#4A4870;
  --saffron:#FF6B57;--saffron-d:#D63F29;--saffron-l:#FFE4DF;--accent-b:#FFC2B8;--accent-t:#8A2A1C;--on-accent:#FFFFFF;
  --paper:#F6F5FF;--line:#E3E1F4;--track:#E6E4F5;--soft:#EEEDFA;
  --panel:linear-gradient(135deg,#312E81,#4F46E5);--cta:linear-gradient(135deg,#312E81,#4F46E5);
  --hero-bg:radial-gradient(1200px 400px at 85% 10%,#E9E7FF 0,transparent 60%);
  --fh:'Plus Jakarta Sans';--fb:'Plus Jakarta Sans';--r:16px}
[data-theme=teal]{--ink:#0F4C5C;--ink-2:#127C83;--heading:#0B3440;--text:#17323A;--text-2:#3D5A61;
  --saffron:#FFC233;--saffron-d:#A86F00;--saffron-l:#FFF2C6;--accent-b:#FBDC85;--accent-t:#6B4A00;--on-accent:#0B3440;
  --paper:#EEF6F5;--line:#D3E6E3;--track:#DCEBE8;--soft:#E4F0EE;
  --panel:linear-gradient(135deg,#0F4C5C,#14868C);--cta:linear-gradient(135deg,#0F4C5C,#14868C);
  --fh:'Outfit';--fb:'Inter';--r:12px}
[data-theme=violet]{--ink:#5B21B6;--ink-2:#7C3AED;--heading:#2E1065;--text:#241634;--text-2:#5B4A72;
  --saffron:#EC4899;--saffron-d:#BE185D;--saffron-l:#FCE7F3;--accent-b:#F9A8D4;--accent-t:#831843;--on-accent:#FFFFFF;
  --paper:#FBF8FF;--line:#ECE4FA;--track:#EEE7FB;--soft:#F3EEFC;
  --panel:linear-gradient(135deg,#6D28D9,#DB2777);--cta:linear-gradient(120deg,#6D28D9,#DB2777);
  --hero-bg:radial-gradient(900px 420px at 90% 0,#F5D0FE 0,transparent 55%),radial-gradient(700px 380px at 0 100%,#E9D5FF 0,transparent 55%);
  --fh:'Poppins';--fb:'Poppins';--r:20px}
[data-theme=emerald]{--ink:#0B2545;--ink-2:#13315C;--heading:#0B2545;--text:#162235;--text-2:#45556B;
  --saffron:#10B981;--saffron-d:#047857;--saffron-l:#D1FAE5;--accent-b:#8EE5C4;--accent-t:#065F46;--on-accent:#04261A;
  --paper:#F4F7FA;--line:#DFE6EE;--track:#E3EAF1;--soft:#EAF0F5;
  --panel:linear-gradient(135deg,#0B2545,#1D4E89);--cta:linear-gradient(135deg,#0B2545,#1D4E89);
  --fh:'Sora';--fb:'Inter';--r:10px}
[data-theme=midnight]{--ink:#F2A33A;--ink-2:#F6B85E;--heading:#F5F7FB;--on-ink:#12203A;--text:#D7DCE8;--text-2:#A7B0C5;--muted:#8A93A8;
  --saffron:#F2A33A;--saffron-d:#F6B85E;--saffron-l:#2A2416;--accent-b:#5C4520;--accent-t:#F6C77D;--on-accent:#12203A;
  --paper:#0B1020;--card:#131A2E;--band:#0F1528;--line:#26304A;--track:#26304A;--soft:#1C2540;
  --ok:#4ADE80;--ok-l:#0F2A20;--bad:#F87171;--bad-l:#331617;
  --head:rgba(11,16,32,.92);--panel:#172142;--cta:linear-gradient(135deg,#172142,#2A1F45);
  --shadow:0 1px 2px rgba(0,0,0,.3)}

[data-theme=midnight] .q table td,[data-theme=midnight] .q table th{border-color:var(--line)}
[data-theme=midnight] .q img.fig{background:#fff;padding:6px}

/* brand: logo mark + wordmark (BRAND.md) */
:root{--pp:#C97A12}
[data-theme=indigo]{--pp:var(--saffron-d)}[data-theme=teal]{--pp:var(--saffron-d)}[data-theme=violet]{--pp:var(--saffron-d)}[data-theme=emerald]{--pp:var(--saffron-d)}[data-theme=midnight]{--pp:#F2A33A}
.mark{flex:none;fill:none;stroke:var(--heading);stroke-width:2.8}
.mark .top{stroke:var(--pp)}
.brand .mark{width:36px;height:36px}
.foot-brand .mark{width:22px;height:22px}
.wm,.wordmark>span{font-family:var(--fh);font-weight:500;letter-spacing:-.03em;color:var(--heading)}
.pp{color:var(--pp)}
.pp.up{display:inline-block;transform:translateY(-0.16em)}
.brand{font-size:26px;font-weight:500}
.hero{grid-template-columns:1fr;padding:64px 0 72px}
.hero>div{max-width:820px}
.wordmark{display:flex;align-items:center;gap:.18em;font-size:clamp(60px,10vw,120px);line-height:1;margin:6px 0 0}
.wordmark .mark{width:.95em;height:.95em;stroke-width:2.6}
.tagline{font-family:var(--fh);font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.2;color:var(--heading);margin:18px 0 0}
@media (max-width:560px){.hero{padding:36px 0 44px}}

/* more themes G–L */
[data-theme=maroon]{--ink:#6B1E2E;--ink-2:#9B2C3F;--heading:#4A1420;--text:#2E1A1E;--text-2:#6A4A50;--saffron:#E0A526;--saffron-d:#9A6A00;--saffron-l:#FBEFD2;--accent-b:#F0CF7A;--accent-t:#5C3F00;--on-accent:#3A0F18;--paper:#FBF6F0;--line:#EADFD3;--track:#EEE4D8;--soft:#F5ECE3;--panel:linear-gradient(135deg,#6B1E2E,#9B2C3F);--cta:linear-gradient(135deg,#6B1E2E,#9B2C3F);--fh:'Libre Franklin';--fb:'Libre Franklin';--r:14px;--pp:#9A6A00}
[data-theme=ocean]{--ink:#0B4F8A;--ink-2:#1279C9;--heading:#0A2E52;--text:#14263A;--text-2:#45607A;--saffron:#FF8A3D;--saffron-d:#C2560F;--saffron-l:#FFE8D8;--accent-b:#FFC49B;--accent-t:#7A3306;--on-accent:#2B1100;--paper:#F3F8FD;--line:#DCE7F2;--track:#E1EAF4;--soft:#EAF2FA;--panel:linear-gradient(135deg,#0B4F8A,#1279C9);--cta:linear-gradient(135deg,#0B4F8A,#1279C9);--fh:'Rubik';--fb:'Rubik';--r:16px;--pp:#C2560F}
[data-theme=forest]{--ink:#1F4D2B;--ink-2:#2F7A43;--heading:#163A20;--text:#1B2A1E;--text-2:#4A5E4E;--saffron:#A3D13B;--saffron-d:#4D7A0E;--saffron-l:#EEF7D6;--accent-b:#CBE58A;--accent-t:#34540A;--on-accent:#163A20;--paper:#F5F8F1;--line:#DFE7D6;--track:#E4EBDB;--soft:#EDF2E6;--panel:linear-gradient(135deg,#1F4D2B,#2F7A43);--cta:linear-gradient(135deg,#1F4D2B,#2F7A43);--fh:'Manrope';--fb:'Manrope';--r:12px;--pp:#4D7A0E}
[data-theme=charcoal]{--ink:#1F2329;--ink-2:#3A414B;--heading:#111418;--text:#1F2329;--text-2:#4B5563;--saffron:#2DD4BF;--saffron-d:#0F8F80;--saffron-l:#D9F7F2;--accent-b:#8EE8DA;--accent-t:#0B5E55;--on-accent:#062B27;--paper:#FAFAFA;--line:#E5E7EB;--track:#E9EBEE;--soft:#F1F2F4;--panel:linear-gradient(135deg,#1F2329,#3A414B);--cta:linear-gradient(135deg,#1F2329,#3A414B);--fh:'Space Grotesk';--fb:'Inter';--r:8px;--pp:#0F8F80}
[data-theme=plum]{--ink:#5A2A6E;--ink-2:#8E4585;--heading:#3B1A49;--text:#2A1B30;--text-2:#6A5570;--saffron:#FFA987;--saffron-d:#C4572F;--saffron-l:#FFEDE5;--accent-b:#FFCDB8;--accent-t:#7A2E12;--on-accent:#3B1A49;--paper:#FDF8F6;--line:#EFE2E4;--track:#F1E6E7;--soft:#F7EEEE;--panel:linear-gradient(135deg,#5A2A6E,#8E4585);--cta:linear-gradient(135deg,#5A2A6E,#8E4585);--fh:'Nunito';--fb:'Nunito';--r:18px;--pp:#C4572F}
[data-theme=royal]{--ink:#1D3FAF;--ink-2:#3358E0;--heading:#12235E;--text:#18203F;--text-2:#4A5578;--saffron:#FF9F1C;--saffron-d:#C46A00;--saffron-l:#FFEFD6;--accent-b:#FFD08A;--accent-t:#6E3B00;--on-accent:#12235E;--paper:#F5F7FF;--line:#DFE4F5;--track:#E3E8F7;--soft:#ECF0FB;--panel:linear-gradient(135deg,#1D3FAF,#3358E0);--cta:linear-gradient(135deg,#1D3FAF,#3358E0);--fh:'Lexend';--fb:'Lexend';--r:14px;--pp:#C46A00}
.tbar{flex-wrap:wrap;justify-content:center;border-radius:18px;width:max-content;max-width:min(1100px,calc(100vw - 24px))}
@media (max-width:700px){.tbar{flex-wrap:nowrap;justify-content:flex-start}}