/* ===== Colour schemes: Royal Navy · Blue · Aqua · Purple · Magenta · Midnight HC · Ruby HC · Graphite HC  x  light / dark =====
   Each theme is DUAL-COLOUR: one primary hue + one companion hue taken from the colour wheel
   (analogous neighbours, 25-45 degrees apart). No orange, yellow or green anywhere.
   "Correct" answers use a cool cyan-blue, "wrong" a rose-crimson; both carry a text label.
   Text pairs are contrast-checked (WCAG AA, most 7:1+). */
:root,[data-scheme=navy]{--bg:#f8f9fc;--surface:#ffffff;--soft:#eff1f8;--chip:#e5e8f1;--line:#d4d9e8;--line2:#a3acc7;--text:#0a1024;--text2:#343b51;--mut:#494f65;--ac:#2d4aa9;--ac-d:#1f3784;--ac2:#607bd2;--tint:#e6ebf9;--btn:#2a459d;--deep:#17234a;--deep2:#0e1731;--b2:#469ace;--b3:#c3deef;--b-tint:#e9f4fb;--t1:#304ca6;--t2:#3079a6;--t1t:#2e4cad;--t2t:#205779;--t3:#656a7b;--star:#205779;--glow1:#d3dcf8;--glow2:#dceef9;--hero2:#eef1f9;--hdr:rgba(248,249,252,.94);--tools:rgba(239,241,248,.92);--sel-bg:#e9f4fb;--ok:#1d759a;--ok-btn:#135976;--ok-bg:#e7f5fb;--ok-soft:#e7f3f8;--ok-text:#0d4d68;--ok-bd:#a3cee0;--bad-bg:#fdedef;--bad-text:#9c1c31;--stat:linear-gradient(120deg,#17234a,#20445b);--g:#135976;--gold:#607bd2}
[data-mode=dark][data-scheme=navy]{--bg:#0a0d19;--surface:#121726;--soft:#0e121f;--chip:#1d2235;--line:#252b41;--line2:#3a4464;--text:#e8eaf3;--text2:#b6bbce;--mut:#959bb2;--ac:#95abf3;--ac-d:#c2cffa;--ac2:#4a69cf;--tint:#18213e;--btn:#3d5dc7;--deep:#171f3b;--deep2:#060913;--b2:#3fa5e4;--b3:#2e4d60;--b-tint:#182d39;--t1:#4e6cd0;--t2:#62acda;--t1t:#9aaff4;--t2t:#63b8ee;--t3:#70778f;--star:#63b8ee;--glow1:#141f43;--glow2:#112b3b;--hero2:#0c101d;--hdr:rgba(10,13,25,.9);--tools:rgba(10,13,25,.9);--sel-bg:#18303f;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#112b36;--ok-soft:#0f212a;--ok-text:#94d4f0;--ok-bd:#295365;--bad-bg:#3b161d;--bad-text:#f9b4bf;--stat:linear-gradient(120deg,#171f3b,#1e3848);--g:#166688;--gold:#4a69cf}
[data-scheme=blue]{--bg:#f8fafc;--surface:#ffffff;--soft:#eff3f8;--chip:#e5ebf1;--line:#d4dde8;--line2:#a3b4c7;--text:#0a1624;--text2:#303c4b;--mut:#475362;--ac:#245389;--ac-d:#19406b;--ac2:#6095d2;--tint:#e6eff9;--btn:#214c7d;--deep:#172f4a;--deep2:#0e1f31;--b2:#725ed4;--b3:#cac3ef;--b-tint:#ece9fb;--t1:#3067a6;--t2:#4430a6;--t1t:#25568d;--t2t:#4e36c9;--t3:#656f7b;--star:#4e36c9;--glow1:#d3e4f8;--glow2:#e1dcf9;--hero2:#eef3f9;--hdr:rgba(248,250,252,.94);--tools:rgba(239,243,248,.92);--sel-bg:#ece9fb;--ok:#1d759a;--ok-btn:#135976;--ok-bg:#e7f5fb;--ok-soft:#e7f3f8;--ok-text:#0d4d68;--ok-bd:#a3cee0;--bad-bg:#fdedef;--bad-text:#9c1c31;--stat:linear-gradient(120deg,#172f4a,#2a205b);--g:#135976;--gold:#6095d2}
[data-mode=dark][data-scheme=blue]{--bg:#0a1119;--surface:#121b26;--soft:#0e161f;--chip:#1d2835;--line:#253241;--line2:#3a4e64;--text:#e8edf3;--text2:#b6c1ce;--mut:#95a2b2;--ac:#88b9f2;--ac-d:#bdd9fa;--ac2:#4a88cf;--tint:#182a3e;--btn:#3067a6;--deep:#17283b;--deep2:#060c13;--b2:#a394f0;--b3:#372e60;--b-tint:#1e1839;--t1:#4e8ad0;--t2:#7662da;--t1t:#7eb4f1;--t2t:#b5a8f5;--t3:#707e8f;--star:#b5a8f5;--glow1:#142a43;--glow2:#18113b;--hero2:#0c141d;--hdr:rgba(10,17,25,.9);--tools:rgba(10,17,25,.9);--sel-bg:#1e183f;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#112b36;--ok-soft:#0f212a;--ok-text:#94d4f0;--ok-bd:#295365;--bad-bg:#3b161d;--bad-text:#f9b4bf;--stat:linear-gradient(120deg,#17283b,#251e48);--g:#166688;--gold:#4a88cf}
[data-scheme=aqua]{--bg:#f8fcfc;--surface:#ffffff;--soft:#eff6f8;--chip:#e5eff1;--line:#d4e3e8;--line2:#a3bfc7;--text:#0a1e24;--text2:#2e4248;--mut:#42565c;--ac:#1e5d71;--ac-d:#144757;--ac2:#359cbb;--tint:#e6f5f9;--btn:#1a5061;--deep:#173e4a;--deep2:#0e2931;--b2:#5e76d4;--b3:#c3cbef;--b-tint:#e9edfb;--t1:#308ba6;--t2:#3048a6;--t1t:#1d5a6d;--t2t:#304bb5;--t3:#65767b;--star:#304bb5;--glow1:#d3eff8;--glow2:#dce2f9;--hero2:#eef6f9;--hdr:rgba(248,252,252,.94);--tools:rgba(239,246,248,.92);--sel-bg:#e9edfb;--ok:#1d759a;--ok-btn:#135976;--ok-bg:#e7f5fb;--ok-soft:#e7f3f8;--ok-text:#0d4d68;--ok-bd:#a3cee0;--bad-bg:#fdedef;--bad-text:#9c1c31;--stat:linear-gradient(120deg,#173e4a,#202c5b);--g:#135976;--gold:#359cbb}
[data-mode=dark][data-scheme=aqua]{--bg:#0a1519;--surface:#122126;--soft:#0e1b1f;--chip:#1d2f35;--line:#253b41;--line2:#3a5a64;--text:#e8f0f3;--text2:#b6c8ce;--mut:#92a9b0;--ac:#63cdee;--ac-d:#bdebfa;--ac2:#4ab0cf;--tint:#18363e;--btn:#277086;--deep:#17323b;--deep2:#061013;--b2:#879bee;--b3:#2e3860;--b-tint:#181f39;--t1:#4eb2d0;--t2:#627ada;--t1t:#43c3ea;--t2t:#a3b4f5;--t3:#70888f;--star:#a3b4f5;--glow1:#143843;--glow2:#111a3b;--hero2:#0c191d;--hdr:rgba(10,21,25,.9);--tools:rgba(10,21,25,.9);--sel-bg:#18203f;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#112b36;--ok-soft:#0f212a;--ok-text:#94d4f0;--ok-bd:#295365;--bad-bg:#3b161d;--bad-text:#f9b4bf;--stat:linear-gradient(120deg,#17323b,#1e2648);--g:#166688;--gold:#4ab0cf}
[data-scheme=purple]{--bg:#faf8fc;--surface:#ffffff;--soft:#f3eff8;--chip:#ebe5f1;--line:#ddd4e8;--line2:#b4a3c7;--text:#160a24;--text2:#413451;--mut:#564965;--ac:#692ead;--ac-d:#512088;--ac2:#9560d2;--tint:#efe6f9;--btn:#652ca5;--deep:#2f174a;--deep2:#1f0e31;--b2:#5e6ed4;--b3:#c3c8ef;--b-tint:#e9ecfb;--t1:#6730a6;--t2:#3040a6;--t1t:#6e30b5;--t2t:#3346c1;--t3:#6f657b;--star:#3346c1;--glow1:#e4d3f8;--glow2:#dce0f9;--hero2:#f3eef9;--hdr:rgba(250,248,252,.94);--tools:rgba(243,239,248,.92);--sel-bg:#e9ecfb;--ok:#1d759a;--ok-btn:#135976;--ok-bg:#e7f5fb;--ok-soft:#e7f3f8;--ok-text:#0d4d68;--ok-bd:#a3cee0;--bad-bg:#fdedef;--bad-text:#9c1c31;--stat:linear-gradient(120deg,#2f174a,#20285b);--g:#135976;--gold:#9560d2}
[data-mode=dark][data-scheme=purple]{--bg:#110a19;--surface:#1b1226;--soft:#160e1f;--chip:#281d35;--line:#322541;--line2:#4e3a64;--text:#ede8f3;--text2:#c1b6ce;--mut:#a295b2;--ac:#c49af4;--ac-d:#dcc2fa;--ac2:#884acf;--tint:#2a183e;--btn:#8345c9;--deep:#28173b;--deep2:#0c0613;--b2:#8b98ee;--b3:#2e3560;--b-tint:#181d39;--t1:#8a4ed0;--t2:#6272da;--t1t:#c79ff4;--t2t:#9faaf4;--t3:#7e708f;--star:#9faaf4;--glow1:#2a1443;--glow2:#11173b;--hero2:#140c1d;--hdr:rgba(17,10,25,.9);--tools:rgba(17,10,25,.9);--sel-bg:#181d3f;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#112b36;--ok-soft:#0f212a;--ok-text:#94d4f0;--ok-bd:#295365;--bad-bg:#3b161d;--bad-text:#f9b4bf;--stat:linear-gradient(120deg,#28173b,#1e2348);--g:#166688;--gold:#884acf}
[data-scheme=magenta]{--bg:#fcf8fb;--surface:#ffffff;--soft:#f8eff4;--chip:#f1e5ec;--line:#e8d4df;--line2:#c7a3b7;--text:#240a19;--text2:#4e3242;--mut:#624756;--ac:#912763;--ac-d:#701a4b;--ac2:#d260a1;--tint:#f9e6f1;--btn:#85235b;--deep:#4a1734;--deep2:#310e22;--b2:#a15ed4;--b3:#dcc3ef;--b-tint:#f3e9fb;--t1:#a63073;--t2:#7330a6;--t1t:#952866;--t2t:#762ead;--t3:#7b6572;--star:#762ead;--glow1:#f8d3e8;--glow2:#eddcf9;--hero2:#f9eef4;--hdr:rgba(252,248,251,.94);--tools:rgba(248,239,244,.92);--sel-bg:#f3e9fb;--ok:#1d759a;--ok-btn:#135976;--ok-bg:#e7f5fb;--ok-soft:#e7f3f8;--ok-text:#0d4d68;--ok-bd:#a3cee0;--bad-bg:#fdedef;--bad-text:#9c1c31;--stat:linear-gradient(120deg,#4a1734,#41205b);--g:#135976;--gold:#d260a1}
[data-mode=dark][data-scheme=magenta]{--bg:#190a12;--surface:#26121d;--soft:#1f0e18;--chip:#351d2a;--line:#412535;--line2:#643a52;--text:#f3e8ee;--text2:#ceb6c3;--mut:#b295a5;--ac:#f391c8;--ac-d:#fac2e2;--ac2:#cf4a95;--tint:#3e182e;--btn:#b2347b;--deep:#3b172b;--deep2:#13060e;--b2:#c187ee;--b3:#4b2e60;--b-tint:#2b1839;--t1:#d04e97;--t2:#a662da;--t1t:#f391c8;--t2t:#cd9af4;--t3:#8f7082;--star:#cd9af4;--glow1:#43142f;--glow2:#29113b;--hero2:#1d0c16;--hdr:rgba(25,10,18,.9);--tools:rgba(25,10,18,.9);--sel-bg:#2e183f;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#112b36;--ok-soft:#0f212a;--ok-text:#94d4f0;--ok-bd:#295365;--bad-bg:#3b161d;--bad-text:#f9b4bf;--stat:linear-gradient(120deg,#3b172b,#361e48);--g:#166688;--gold:#cf4a95}
[data-scheme=midnight]{--bg:#fcfcfd;--surface:#ffffff;--soft:#efeff6;--chip:#dfdfec;--line:#a3a2c3;--line2:#6f6db0;--text:#060514;--text2:#1f1f33;--mut:#383753;--ac:#130eaf;--ac-d:#09066b;--ac2:#4d47eb;--tint:#e1e1fa;--btn:#140fb3;--deep:#0a0830;--deep2:#05041b;--b2:#1271de;--b3:#a8caf0;--b-tint:#dfecfb;--t1:#130eaf;--t2:#0f60bd;--t1t:#1811d4;--t2t:#0a417f;--t3:#605f81;--star:#0a417f;--glow1:#d7d6fa;--glow2:#daeafb;--hero2:#f1f1f9;--hdr:rgba(255,255,255,.97);--tools:rgba(255,255,255,.96);--sel-bg:#daeafb;--ok:#076188;--ok-btn:#034d6d;--ok-bg:#dff3fb;--ok-soft:#e5f4fa;--ok-text:#02354b;--ok-bd:#1797cf;--bad-bg:#fde7eb;--bad-text:#6f0617;--stat:linear-gradient(120deg,#0a0830,#102c4c);--g:#034d6d;--gold:#4d47eb}
[data-mode=dark][data-scheme=midnight]{--bg:#040409;--surface:#0d0c18;--soft:#080811;--chip:#18172b;--line:#36355a;--line2:#7977b6;--text:#f9f9fb;--text2:#dedde9;--mut:#babacf;--ac:#c4c2ff;--ac-d:#dcdbff;--ac2:#8e8bf9;--tint:#13113b;--btn:#362fee;--deep:#0f0e2f;--deep2:#04040e;--b2:#6fb0fb;--b3:#2d4f76;--b-tint:#122336;--t1:#8e8bf9;--t2:#6fb0fb;--t1t:#bfbdff;--t2t:#99c9ff;--t3:#8b8aa8;--star:#99c9ff;--glow1:#100e39;--glow2:#0c1d31;--hero2:#06060e;--hdr:rgba(0,0,0,.92);--tools:rgba(0,0,0,.92);--sel-bg:#12273f;--ok:#0dadf2;--ok-btn:#075a7e;--ok-bg:#0b232d;--ok-soft:#091920;--ok-text:#afe6fd;--ok-bd:#1f83ad;--bad-bg:#330f15;--bad-text:#ffc2cc;--stat:linear-gradient(120deg,#0f0e2f,#162a41);--g:#075a7e;--gold:#8e8bf9}
[data-scheme=ruby]{--bg:#fdfcfc;--surface:#ffffff;--soft:#f6eff0;--chip:#ecdfe2;--line:#c3a2aa;--line2:#a85d6e;--text:#140509;--text2:#301d21;--mut:#4c3339;--ac:#710921;--ac-d:#440413;--ac2:#e11948;--tint:#fae1e6;--btn:#6d0920;--deep:#300812;--deep2:#1b0409;--b2:#c012e2;--b3:#e4a8f0;--b-tint:#f7dffb;--t1:#710921;--t2:#a410c1;--t1t:#840b27;--t2t:#700b84;--t3:#785960;--star:#700b84;--glow1:#fad6de;--glow2:#f5dafb;--hero2:#f9f1f3;--hdr:rgba(255,255,255,.97);--tools:rgba(255,255,255,.96);--sel-bg:#f5dafb;--ok:#076188;--ok-btn:#034d6d;--ok-bg:#dff3fb;--ok-soft:#e5f4fa;--ok-text:#02354b;--ok-bd:#1797cf;--bad-bg:#fde7eb;--bad-text:#6f0617;--stat:linear-gradient(120deg,#300812,#42104c);--g:#034d6d;--gold:#e11948}
[data-mode=dark][data-scheme=ruby]{--bg:#090405;--surface:#180c0f;--soft:#11080a;--chip:#2b171c;--line:#5a353d;--line2:#af6a7a;--text:#fbf9f9;--text2:#ebe0e3;--mut:#cfbabf;--ac:#ffb8c8;--ac-d:#ffe0e8;--ac2:#f7698a;--tint:#3b111b;--btn:#aa0e32;--deep:#2f0e16;--deep2:#0e0406;--b2:#e988fc;--b3:#6a2d76;--b-tint:#301236;--t1:#f7698a;--t2:#e988fc;--t1t:#ffb2c4;--t2t:#f1adff;--t3:#a4848b;--star:#f1adff;--glow1:#390e18;--glow2:#2b0c31;--hero2:#0e0608;--hdr:rgba(0,0,0,.92);--tools:rgba(0,0,0,.92);--sel-bg:#38123f;--ok:#0dadf2;--ok-btn:#075a7e;--ok-bg:#0b232d;--ok-soft:#091920;--ok-text:#afe6fd;--ok-bd:#1f83ad;--bad-bg:#330f15;--bad-text:#ffc2cc;--stat:linear-gradient(120deg,#2f0e16,#3a1641);--g:#075a7e;--gold:#f7698a}
[data-scheme=graphite]{--bg:#fcfcfd;--surface:#ffffff;--soft:#eff2f6;--chip:#dfe4ec;--line:#a2afc3;--line2:#5775a2;--text:#050b14;--text2:#1d2430;--mut:#333d4c;--ac:#0a3576;--ac-d:#04214e;--ac2:#1e6ee6;--tint:#e1ebfa;--btn:#093371;--deep:#081830;--deep2:#040d1b;--b2:#0d7f9c;--b3:#a8e1f0;--b-tint:#dff6fb;--t1:#0a3576;--t2:#0b6c84;--t1t:#0b3d89;--t2t:#074555;--t3:#576375;--star:#074555;--glow1:#d6e4fa;--glow2:#daf4fb;--hero2:#f1f4f9;--hdr:rgba(255,255,255,.97);--tools:rgba(255,255,255,.96);--sel-bg:#daf4fb;--ok:#076188;--ok-btn:#034d6d;--ok-bg:#dff3fb;--ok-soft:#e5f4fa;--ok-text:#02354b;--ok-bd:#1797cf;--bad-bg:#fde7eb;--bad-text:#6f0617;--stat:linear-gradient(120deg,#081830,#10404c);--g:#034d6d;--gold:#1e6ee6}
[data-mode=dark][data-scheme=graphite]{--bg:#040609;--surface:#0c1118;--soft:#080b11;--chip:#171f2b;--line:#35445a;--line2:#6380ab;--text:#f9fafb;--text2:#e3e7ed;--mut:#b7c0cd;--ac:#b2d1ff;--ac-d:#dbeaff;--ac2:#5a99f6;--tint:#11223b;--btn:#0f50b3;--deep:#0e1b2f;--deep2:#04080e;--b2:#06bcea;--b3:#2d6876;--b-tint:#122e36;--t1:#5a99f6;--t2:#06bcea;--t1t:#a3c8ff;--t2t:#33d6ff;--t3:#818ea2;--star:#33d6ff;--glow1:#0e1f39;--glow2:#0c2a31;--hero2:#06090e;--hdr:rgba(0,0,0,.92);--tools:rgba(0,0,0,.92);--sel-bg:#12363f;--ok:#12aff3;--ok-btn:#075a7e;--ok-bg:#0b232d;--ok-soft:#091920;--ok-text:#afe6fd;--ok-bd:#1f83ad;--bad-bg:#330f15;--bad-text:#ffc2cc;--stat:linear-gradient(120deg,#0e1b2f,#163841);--g:#075a7e;--gold:#5a99f6}
[data-mode=dark]{color-scheme:dark}
/* shared overrides */
body{background:var(--bg);color:var(--text);transition:background .35s,color .35s}
.hero{background:radial-gradient(circle at 88% 16%,var(--glow1) 0,transparent 34%),radial-gradient(circle at 6% 92%,var(--glow2) 0,transparent 36%),linear-gradient(135deg,var(--bg),var(--hero2))}
.stats{background:var(--stat)}.stat-grid div{border-right-color:rgba(255,255,255,.12)}footer{background:var(--deep2)}.copyright{border-top-color:rgba(255,255,255,.1)}
.btn.primary{background:var(--btn);color:#fff}.btn.primary:hover{filter:brightness(.93)}.btn.secondary{color:var(--text)}
.pill,.tag{background:var(--tint);color:var(--ac-d)}.eyebrow{color:var(--ac)}.brand b{color:var(--ac)}
.soft{background:var(--soft)}.sy{background:linear-gradient(var(--surface),var(--soft))}.qb{background:var(--soft)}.soft .mod-in{background:var(--surface)}
.sy-prog div i{background:linear-gradient(90deg,var(--ac2),var(--b2))}
.unit.mod.active{border-color:var(--b2);box-shadow:0 14px 32px color-mix(in srgb,var(--b2) 28%,transparent)}
.qb-chip.on,.qb-u.on,.sy-chip.on{background:var(--btn);border-color:var(--btn);color:#fff}.qb-saved.on{color:var(--ac)}
input,select,textarea{color:var(--text)}input::placeholder{color:var(--mut)}.menu-toggle{color:var(--text)}
.nav nav.open{background:var(--surface);border-bottom-color:var(--line)}
.hero h1 span{color:var(--ac)}.text-link,.unit a,.note a{color:var(--ac)}

/* accessibility */
.skip{position:absolute;left:-9999px;top:8px;background:var(--btn);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;z-index:300;text-decoration:none}.skip:focus{left:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--b2);outline-offset:2px}
.copyright{color:#a9b4c9}.stat-grid span{color:#d4dce6}.footer-grid a{padding:8px 0;margin:0}
.qb-opt .mk{font-size:.8125rem;font-weight:800;white-space:nowrap;padding-left:12px;opacity:1;margin-left:auto}
.rev .qb-opt.ok .mk::before{content:"✓ Correct";color:var(--ok-text)}
.rev .qb-opt.sel:not(.ok) .mk::before{content:"✗ Incorrect";color:var(--bad-text)}
.qb-ic{width:44px;height:44px}.qb-meta b{color:var(--ok-text)}.mod-score{color:var(--ok-text)}
.qb-all,.qb-saved,.mod-x,.qb-more,.qb-u,.sy-chip,.sy-seg button,.menu-toggle{min-height:44px}.menu-toggle{min-width:44px}
.sy-t{min-height:44px;align-items:center}.sy-t input{width:20px;height:20px;margin-top:0}
.sy-stars{color:var(--star)}.tm-agree{background:var(--ok-btn)}.tm-agree:hover{background:#12597a}
/* theme picker */
.theme-ctl{display:flex;align-items:center;gap:8px;margin-left:16px;position:relative}
.pal-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:1px solid var(--line2);border-radius:99px;background:var(--surface);color:var(--text);font:inherit;font-weight:700;font-size:.8125rem;cursor:pointer;transition:background .2s}.pal-btn:hover{background:var(--soft)}
.pal-dot,.sw-opt i{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1px var(--line2)}
[data-scheme=navy] .pal-dot,.sw-opt[data-s=navy] i{background:#607bd2}[data-scheme=blue] .pal-dot,.sw-opt[data-s=blue] i{background:#6095d2}[data-scheme=aqua] .pal-dot,.sw-opt[data-s=aqua] i{background:#359cbb}[data-scheme=purple] .pal-dot,.sw-opt[data-s=purple] i{background:#9560d2}[data-scheme=magenta] .pal-dot,.sw-opt[data-s=magenta] i{background:#d260a1}[data-scheme=midnight] .pal-dot,.sw-opt[data-s=midnight] i{background:#4d47eb}[data-scheme=ruby] .pal-dot,.sw-opt[data-s=ruby] i{background:#e11948}[data-scheme=graphite] .pal-dot,.sw-opt[data-s=graphite] i{background:#1e6ee6}
.pal-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:210px;padding:8px;background:var(--surface);border:1px solid var(--line2);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:grid;gap:2px}.pal-pop[hidden]{display:none}
.pal-cap{margin:4px 12px 6px;font-size:.6875rem;font-weight:800;letter-spacing:.08em;color:var(--mut)}
.sw-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;background:none;color:var(--text);font:inherit;font-weight:600;font-size:.9375rem;border-radius:10px;cursor:pointer;text-align:left;width:100%}.sw-opt:hover{background:var(--soft)}
.sw-opt[aria-pressed=true]{background:var(--tint)}.sw-opt[aria-pressed=true]::after{content:"✓";margin-left:auto;color:var(--ac-d);font-weight:800}
.mode-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .25s,transform .2s}.mode-btn:hover{transform:rotate(15deg);background:var(--soft)}
.mode-btn .ic-sun{display:none}[data-mode=dark] .mode-btn .ic-sun{display:block}[data-mode=dark] .mode-btn .ic-moon{display:none}
@media(max-width:900px){.theme-ctl{order:2;margin-left:auto}.menu-toggle{order:3;margin-left:4px}}
@media(max-width:600px){.pal-txt{display:none}.pal-btn{padding:0 10px;width:44px;justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ===== New strong themes: Magenta and Royal Gold (light + dark) ===== */
/* Strong identity */
[data-scheme=magenta] .site-header{border-bottom:3px solid var(--ac2)}
[data-scheme=magenta] .hero{background:radial-gradient(circle at 88% 12%,var(--glow1) 0,transparent 46%),radial-gradient(circle at 4% 96%,var(--glow2) 0,transparent 46%),linear-gradient(135deg,var(--bg),var(--hero2))}
[data-scheme=magenta] .hero h1 span{background:linear-gradient(90deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-scheme=magenta] :is(.unit,.note,.resource,.hero-card,.mt-card){border-top:4px solid var(--ac2)}
[data-scheme=magenta] :is(.unit,.note,.resource,.hero-card,.mt-card,.qb-card,.sy-card,.mt-q,.mt-pal){border-radius:20px}
[data-scheme=magenta] .btn{border-radius:99px}
[data-scheme=magenta] .btn.primary{box-shadow:0 10px 24px color-mix(in srgb,var(--btn) 38%,transparent)}
/* ===== Royal Navy (light + dark) ===== */
[data-scheme=navy] .site-header{border-bottom:3px solid var(--ac2)}
[data-scheme=navy] .hero{background:radial-gradient(circle at 88% 12%,var(--glow1) 0,transparent 46%),radial-gradient(circle at 4% 96%,var(--glow2) 0,transparent 46%),linear-gradient(135deg,var(--bg),var(--hero2))}
[data-scheme=navy] :is(.unit,.note,.resource,.hero-card,.mt-card){border-top:3px solid var(--ac2)}
[data-scheme=navy] :is(.btn,.unit,.note,.resource,.hero-card,.mt-card,.qb-card,.sy-card,.mt-q,.mt-pal,.pal-btn){border-radius:10px}

/* =====================================================================
   MOBILE & TABLET OPTIMISATION (appended; every rule is inside a media query,
   so desktop widths above 1024px are untouched).
   The "html body" prefix lifts specificity so these win over component CSS
   that loads after theme.css and over styles injected by nl-nav.js.
   ===================================================================== */

/* ---------- Tablet and below (max 1024px) ---------- */
@media (max-width:1024px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html body img,html body video,html body svg,html body canvas{max-width:100%;height:auto}
  html body h1,html body h2,html body h3,html body p,html body li,html body td,html body th{overflow-wrap:break-word}
  html body pre,html body code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
  html body table{max-width:100%}
  html body{-webkit-tap-highlight-color:color-mix(in srgb,var(--ac) 18%,transparent)}

  /* Touch targets: at least 44 x 44 */
  html body .brand{min-height:44px}
  html body .nav nav.open>a,html body .nav nav.open .nav-dd-btn,html body .nav-dd-in a{min-height:44px;display:flex;align-items:center}
  html body .nl-pb{min-width:44px;min-height:44px}
  html body .nl-rg,html body .nl-pg select,html body .nl-j{min-height:44px}
  html body .nl-j{min-width:44px}
  html body .faq-copy{min-height:44px;min-width:44px;padding:8px 12px}
  html body .faq-btn{min-height:44px;padding:10px 16px}
  html body .faq-nav a{min-height:44px}
  html body .mt-back{display:inline-flex;align-items:center;min-height:44px}
  /* the sticky timer bar used to slide under the sticky site header; sit just below it instead */
  html body .mt-top{top:73px}
  html body .cc-arrow{width:44px;height:44px}
  html body .cc-dot{min-width:28px;height:44px}
  html body .mt-p:not(i){min-height:44px;min-width:44px}
  html body .mt-pg{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
  html body .mt-opt input,html body .sy-t input,html body .qb-o input{width:22px;height:22px;flex:none}
  html body .syllabus-topic input{width:22px;height:22px;flex:none}
  html body select,html body .sy-search,html body input[type=search],html body input[type=text]{min-height:44px;font-size:1rem}
  html body .footer-grid a,html body .copyright a,html body .tm-foot a,html body .faq-crumb a,html body .pl-crumb a,html body .faq-pop a,html body .faq-links a,html body .note a,html body .unit a{display:inline-flex;align-items:center;min-height:44px}
  html body .nl-dg-g{min-height:44px;gap:8px}
  html body .nl-dg-g select,html body .nl-gt input{min-height:44px}

  /* Layout safety */
  html body .mt-intro,html body .mt-res{max-width:100%}
  html body .quiz-shell{max-width:100%}
  html body .faq-search input,html body .faq-search{max-width:100%}
  html body .mt-tw,html body .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  html body .mt-tb{min-width:560px}

  /* Visible focus (also on dark / coloured buttons) */
  html body a:focus-visible,html body button:focus-visible,html body select:focus-visible,html body input:focus-visible,html body summary:focus-visible,html body [tabindex]:focus-visible{outline:3px solid var(--b2,var(--ac));outline-offset:2px}
}

/* Tablets only: two columns at most */
@media (min-width:601px) and (max-width:1024px){
  html body .unit-grid,html body .resource-grid,html body .notes-grid,html body .mt-cards,html body .plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .stat-grid div:nth-child(2n){border-right:0}
}

/* ---------- Phone (max 600px) ---------- */
@media (max-width:600px){
  html body{font-size:1rem;line-height:1.6}
  html body :is(p,li,dd):not(#_){font-size:1rem}
  html body :is(.cc-foot,.nlt-foot,.mt-foot,.mt-st,.mt-ct,.mt-note,.mt-meta,.mt-cnt,.mt-leg,.nl-info,.faq-stamp,.faq-note,.sy-note,.copyright,.tm-foot,.sc,.m):not(#_){font-size:.875rem}
  html body .unit p,html body .resource p,html body .note p,html body .mt-ct,html body .mt-mini,html body .faq-a p,html body .faq-a li{font-size:1rem}
  html body .mt-st,html body .mt-foot,html body .mt-note,html body .mt-meta,html body .mt-id span,html body .mt-leg,html body .mt-cnt{font-size:.875rem}
  html body .eyebrow,html body .pill,html body .tag,html body .sy-tier,html body .mt-hard,html body .mt-mod{font-size:.75rem}
  html body .nl-rg,html body .qb-u,html body .sy-chip,html body .qb-chip,html body .faq-btn,html body .faq-copy,html body .btn,html body .mt-chip{font-size:.9375rem}
  html body .nl-info,html body .nl-pp-t span{font-size:.875rem}

  /* Headings scale down so they never overflow */
  html body .hero h1{font-size:clamp(2.125rem,10vw,3.125rem);line-height:1.08}
  html body .section-head h2{font-size:clamp(1.625rem,7vw,2.1rem)}
  html body h1{font-size:clamp(1.625rem,7.5vw,2.25rem);line-height:1.15}
  html body h2{font-size:clamp(1.375rem,6vw,1.75rem)}
  html body .mt-intro h1,html body .mt-rh h1{font-size:clamp(1.5rem,7vw,2rem)}
  html body .hero-text{font-size:1.0625rem}
  html body .mt-big b{font-size:2.5rem}

  /* One column everywhere */
  html body .unit-grid,html body .resource-grid,html body .notes-grid,html body .mt-cards,html body .plan-cards,html body .stat-grid,html body .mt-two,html body .footer-grid{grid-template-columns:minmax(0,1fr)}
  html body .stat-grid div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  html body .stat-grid div:last-child{border-bottom:0}
  html body .section{padding:56px 0}
  html body .hero-actions .btn,html body .btn{min-height:48px}
  html body .quiz-shell,html body .hero-card{padding:20px}
  html body .mt-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Floating helpers: rail hidden on phones, jump buttons kept 44px, tucked into the corner */
  html body #nl-rail{display:none}
  html body #nl-jump{right:8px;bottom:8px;gap:8px}
  html body #nl-jump .nl-j{width:44px;height:44px;opacity:.9}
  html body #nl-pomo{left:8px;bottom:8px}
  html body .nl-t{display:none}
  html body .nl-pb{min-width:44px;padding:0 10px}
  html body .nl-pg{gap:6px}
  /* leave room at the foot of the page so the buttons never hide the last line */
  html body main,html body footer,html body .w{scroll-padding-bottom:80px}
  html body footer{padding-bottom:84px}

  /* Hero carousel: arrows + swipe + option rail; the 8px dots are too small to tap */
  html body .cc-dots{display:none}
  html body .cc-ctrl{gap:28px;justify-content:center}
  html body .cc-card{overflow-wrap:break-word}

  /* Mock tests */
  html body .mt-page{padding-top:16px;padding-bottom:96px}
  html body .mt-top{padding:6px 10px;gap:8px;flex-wrap:nowrap;background:var(--surface);border-radius:0 0 13px 13px}
  html body .mt-top .mt-id{flex:1 1 auto;min-width:0;font-size:.9375rem;line-height:1.25}
  html body .mt-top .mt-btn{min-height:44px;padding:0 12px;font-size:.875rem;flex:none}
  html body .mt-timer{font-size:1.25rem;padding:4px 10px;flex:none}
  html body .mt-q{padding:16px}
  html body .mt-qt{font-size:1.125rem;line-height:1.55}
  html body .mt-opt{min-height:56px;padding:12px 14px;gap:14px;font-size:1rem}
  html body .mt-btn{min-height:48px;font-size:1rem}
  html body .mt-acts{position:sticky;bottom:0;z-index:12;margin:20px -16px -16px;padding:10px 16px;gap:8px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 14px 14px}
  html body .mt-acts .mt-btn{flex:1 1 calc(50% - 4px)}
  html body .mt-acts .pri{margin-left:0}
  html body .mt-pal{padding:14px}
  html body .mt-pg{max-height:none}
  html body .mt-dlg{max-width:calc(100% - 32px);padding:20px}
  html body .mt-toast{max-width:calc(100% - 32px);bottom:80px;text-align:center}
  /* On a test page the palette and the sticky action bar replace the page jump buttons */
  html body:has(.mt-page) #nl-jump{display:none}

  /* FAQ */
  html body .faq-fact strong{font-size:1.15rem}
  html body .faq-btns{flex-wrap:wrap}
  html body .faq-nav a{font-size:.9375rem}

  /* Plan pages */
  html body .route a,html body .pc-go,html body .plan-card a{min-height:44px;display:inline-flex;align-items:center}
  html body .pc-line,html body .pc-go{font-size:.9375rem}

  /* Syllabus / question bank */
  html body .sy-t,html body .qb-opt{min-height:48px}
  html body .qb-tools{top:64px}
}

/* Very small phones */
@media (max-width:360px){
  html body .mt-q{padding:14px}
  html body .mt-acts{margin:20px -14px -14px;padding:10px 14px}
  html body .nl-pb{min-width:44px}
}

/* =====================================================================
   ACCENT LAYER (v2, dual-colour)  -  primary + one companion hue per theme
   ---------------------------------------------------------------------
   Every theme keeps its own brand colour (--c3 is a tone of it) and one companion
   hue (--c2) from the neighbouring part of the colour wheel; nothing else. Nothing here changes layout,
   content or meaning. Correct / wrong / hard colours are untouched.
   Text on tinted backgrounds always uses the "-ink" tokens (WCAG AA, 5:1+).
   TO REVERT: delete everything from this banner to the end of the
   "END OF VIBRANT LAYER" marker. Nothing else in the file depends on it.
   ===================================================================== */

/* ---- 1. Colour tokens: c2 = primary contrast, c3 = balancing colour ----
   -c2 / -c3   vivid colour: borders, bars, dots, glows, big graphics
   -ink        text-safe version (use on tints and white)
   -deep       fill for white text (badges, buttons)
   -hi         bright version for the dark stats strip and footer            */
:root,[data-scheme=navy]{--c2:#3996d0;--c2-ink:#1a5275;--c2-deep:#215d83;--c2-hi:#9fd6f9;--c3:#607bd2;--c3-ink:#1f3784;--c3-deep:#2a459d;--c3-hi:#a9bcf9;--c2-num:#1c5578;--c3-num:#2948ae;--t2:#3079a6;--t2t:#205779;--star:#205779}
[data-mode=dark][data-scheme=navy]{--c2:#6ab7e7;--c2-ink:#add9f5;--c2-deep:#2c6d96;--c2-hi:#97d2f7;--c3:#6c88e5;--c3-ink:#bac8f7;--c3-deep:#3d5dc7;--c3-hi:#a1b5f7;--c2-num:#add9f5;--c3-num:#bac8f7;--t2:#62acda;--t2t:#63b8ee;--star:#63b8ee}
[data-scheme=blue]{--c2:#6f5ad8;--c2-ink:#452bc5;--c2-deep:#543bce;--c2-hi:#ae9ff9;--c3:#6095d2;--c3-ink:#19406b;--c3-deep:#214c7d;--c3-hi:#a9cef9;--c2-num:#492fca;--c3-num:#21538c;--t2:#4430a6;--t2t:#4e36c9;--star:#4e36c9}
[data-mode=dark][data-scheme=blue]{--c2:#7f6ae7;--c2-ink:#cdc4f8;--c2-deep:#6651cd;--c2-hi:#a797f7;--c3:#6ca4e5;--c3-ink:#b6d4f7;--c3-deep:#3067a6;--c3-hi:#a1c9f7;--c2-num:#cdc4f8;--c3-num:#b6d4f7;--t2:#7662da;--t2t:#b5a8f5;--star:#b5a8f5}
[data-scheme=aqua]{--c2:#5a73d8;--c2-ink:#2640ab;--c2-deep:#304dc0;--c2-hi:#9fb1f9;--c3:#359cbb;--c3-ink:#144757;--c3-deep:#1a5061;--c3-hi:#a9e7f9;--c2-num:#2b46b6;--c3-num:#19586b;--t2:#3048a6;--t2t:#304bb5;--star:#304bb5}
[data-mode=dark][data-scheme=aqua]{--c2:#6a83e7;--c2-ink:#c9d2f8;--c2-deep:#415cc8;--c2-hi:#97aaf7;--c3:#6cc9e5;--c3-ink:#b6e8f7;--c3-deep:#277086;--c3-hi:#a1e3f7;--c2-num:#c9d2f8;--c3-num:#b6e8f7;--t2:#627ada;--t2t:#a3b4f5;--star:#a3b4f5}
[data-scheme=purple]{--c2:#5a6bd8;--c2-ink:#283cb8;--c2-deep:#3347cc;--c2-hi:#9fabf9;--c3:#9560d2;--c3-ink:#512088;--c3-deep:#652ca5;--c3-hi:#cea9f9;--c2-num:#2d40be;--c3-num:#6c2bb6;--t2:#3040a6;--t2t:#3346c1;--star:#3346c1}
[data-mode=dark][data-scheme=purple]{--c2:#6a7be7;--c2-ink:#bbc3f7;--c2-deep:#495aca;--c2-hi:#97a4f7;--c3:#a46ce5;--c3-ink:#d7baf7;--c3-deep:#8345c9;--c3-hi:#c9a1f7;--c2-num:#bbc3f7;--c3-num:#d7baf7;--t2:#6272da;--t2t:#9faaf4;--star:#9faaf4}
[data-scheme=magenta]{--c2:#a15ad8;--c2-ink:#6c24a3;--c2-deep:#7c2eb8;--c2-hi:#d29ff9;--c3:#d260a1;--c3-ink:#701a4b;--c3-deep:#85235b;--c3-hi:#f9a9d6;--c2-num:#7128a9;--c3-num:#952363;--t2:#7330a6;--t2t:#762ead;--star:#762ead}
[data-mode=dark][data-scheme=magenta]{--c2:#b16ae7;--c2-ink:#dfbff7;--c2-deep:#8e41c8;--c2-hi:#cd97f7;--c3:#e56cb0;--c3-ink:#f7badd;--c3-deep:#b2347b;--c3-hi:#f7a1d2;--c2-num:#dfbff7;--c3-num:#f7badd;--t2:#a662da;--t2t:#cd9af4;--star:#cd9af4}
[data-scheme=midnight]{--c2:#1271de;--c2-ink:#052b57;--c2-deep:#0a417f;--c2-hi:#a3ceff;--c3:#4d47eb;--c3-ink:#09066b;--c3-deep:#140fb3;--c3-hi:#b0adff;--c2-num:#053266;--c3-num:#0e09aa;--t2:#0f60bd;--t2t:#0a417f;--star:#0a417f}
[data-mode=dark][data-scheme=midnight]{--c2:#6fb0fb;--c2-ink:#d6e9ff;--c2-deep:#0d54a5;--c2-hi:#a3ceff;--c3:#8e8bf9;--c3-ink:#e1e0ff;--c3-deep:#362fee;--c3-hi:#b0adff;--c2-num:#d6e9ff;--c3-num:#e1e0ff;--t2:#6fb0fb;--t2t:#99c9ff;--star:#99c9ff}
[data-scheme=ruby]{--c2:#c012e2;--c2-ink:#490557;--c2-deep:#700b84;--c2-hi:#f0a3ff;--c3:#e11948;--c3-ink:#440413;--c3-deep:#6d0920;--c3-hi:#ffadc0;--c2-num:#560566;--c3-num:#66051c;--t2:#a410c1;--t2t:#700b84;--star:#700b84}
[data-mode=dark][data-scheme=ruby]{--c2:#e988fc;--c2-ink:#fbe5ff;--c2-deep:#900eaa;--c2-hi:#f0a3ff;--c3:#f7698a;--c3-ink:#ffdbe4;--c3-deep:#aa0e32;--c3-hi:#ffadc0;--c2-num:#fbe5ff;--c3-num:#ffdbe4;--t2:#e988fc;--t2t:#f1adff;--star:#f1adff}
[data-scheme=graphite]{--c2:#0d7f9c;--c2-ink:#03333f;--c2-deep:#074555;--c2-hi:#a3edff;--c3:#1e6ee6;--c3-ink:#04214e;--c3-deep:#093371;--c3-hi:#adceff;--c2-num:#043744;--c3-num:#06306f;--t2:#0b6c84;--t2t:#074555;--star:#074555}
[data-mode=dark][data-scheme=graphite]{--c2:#06bcea;--c2-ink:#bdf2ff;--c2-deep:#095c71;--c2-hi:#a3edff;--c3:#5a99f6;--c3-ink:#d6e7ff;--c3-deep:#0f50b3;--c3-hi:#adceff;--c2-num:#bdf2ff;--c3-num:#d6e7ff;--t2:#06bcea;--t2t:#33d6ff;--star:#33d6ff}

/* derived tints (follow the active light/dark surface) */
:root{--c2-tint:color-mix(in srgb,var(--c2) 16%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 16%,var(--surface))}
[data-mode=dark]{--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface))}

/* ---- 2. Rotating accent: items cycle brand -> c2 -> c3 ----
   Sets --k (decor), --ki (text), --kd (fill for white text), --kt (tint).    */
html:root body :is(.cc-slide,.cc-opt-btn,.cc-dot,.unit-grid>.unit,.notes-grid>.note,.resource-grid>.resource,.mt-cards>.mt-card,.cycle>li,.phases>li,.route>li):nth-child(3n+1){--k:var(--ac2);--ki:var(--ac-d);--kd:var(--btn);--kt:var(--tint)}
html:root body :is(.cc-slide,.cc-opt-btn,.cc-dot,.unit-grid>.unit,.notes-grid>.note,.resource-grid>.resource,.mt-cards>.mt-card,.cycle>li,.phases>li,.route>li):nth-child(3n+2){--k:var(--c2);--ki:var(--c2-ink);--kd:var(--c2-deep);--kt:var(--c2-tint)}
html:root body :is(.cc-slide,.cc-opt-btn,.cc-dot,.unit-grid>.unit,.notes-grid>.note,.resource-grid>.resource,.mt-cards>.mt-card,.cycle>li,.phases>li,.route>li):nth-child(3n){--k:var(--c3);--ki:var(--c3-ink);--kd:var(--c3-deep);--kt:var(--c3-tint)}

/* ---- 3. Header: gradient accent line, spark on the logo, live clock ---- */
html:root body .site-header{border-bottom:1px solid var(--line)}
html:root body .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--ac2) 0%,var(--c2) 36%,var(--c3) 70%,var(--ac2) 100%)}
html:root body .brand-mark{position:relative;background:linear-gradient(135deg,var(--deep),var(--ac))}
html:root body .brand-mark::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 2px var(--surface)}
html:root body .hdr-clock{border-color:color-mix(in srgb,var(--c2) 42%,var(--line2))}
html:root body .hdr-clock .hc-dot{background:var(--c2);animation-name:hc-pulse-v}
@keyframes hc-pulse-v{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c2) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@supports(-webkit-background-clip:text) or (background-clip:text){html:root body .hdr-clock .t{background:linear-gradient(90deg,var(--ac),var(--c3-ink));-webkit-background-clip:text;background-clip:text;color:transparent}}

/* theme picker: swatches now show the whole palette, not one dot */
html:root body .pal-dot{background:conic-gradient(var(--ac2) 0 50%,var(--c2) 0)}
html:root body .sw-opt[data-s=navy] i{background:conic-gradient(#607bd2 0 50%,#469ace 0)}
html:root body .sw-opt[data-s=blue] i{background:conic-gradient(#6095d2 0 50%,#725ed4 0)}
html:root body .sw-opt[data-s=aqua] i{background:conic-gradient(#359cbb 0 50%,#5e76d4 0)}
html:root body .sw-opt[data-s=purple] i{background:conic-gradient(#9560d2 0 50%,#5e6ed4 0)}
html:root body .sw-opt[data-s=magenta] i{background:conic-gradient(#d260a1 0 50%,#a15ed4 0)}
html:root body .sw-opt[data-s=midnight] i{background:conic-gradient(#4d47eb 0 50%,#1271de 0)}
html:root body .sw-opt[data-s=ruby] i{background:conic-gradient(#e11948 0 50%,#c012e2 0)}
html:root body .sw-opt[data-s=graphite] i{background:conic-gradient(#1e6ee6 0 50%,#0d7f9c 0)}

/* ---- 4. Hero: a warm and a cool glow join the brand glow ---- */
html:root body .hero{background:radial-gradient(circle at 90% 8%,var(--glow1) 0,transparent 38%),radial-gradient(circle at 4% 94%,var(--glow2) 0,transparent 40%),radial-gradient(circle at 58% 112%,color-mix(in srgb,var(--c2) 20%,transparent) 0,transparent 42%),radial-gradient(circle at 26% -12%,color-mix(in srgb,var(--c3) 16%,transparent) 0,transparent 40%),linear-gradient(135deg,var(--bg),var(--hero2))}

/* ---- 5. Buttons: brand fill + a contrasting rim (draws the eye to the action) ---- */
html:root body .btn.primary,html:root body .nlt-btn.pri{background-image:linear-gradient(135deg,transparent,color-mix(in srgb,var(--deep) 30%,transparent));box-shadow:0 10px 20px -10px color-mix(in srgb,var(--btn) 75%,transparent),inset 0 -3px 0 var(--c2);transition:transform .18s ease,box-shadow .18s ease,filter .18s}
html:root body .btn.primary:hover,html:root body .nlt-btn.pri:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 24px -10px color-mix(in srgb,var(--btn) 80%,transparent),inset 0 -3px 0 var(--c2)}
html:root body .btn.primary.cc-cta{background-color:var(--kd);border-color:var(--kd)}

/* ---- 6. Hero carousel: each slide has its own colour, rail matches ---- */
html:root body .cc-card{border-top-color:var(--k,var(--ac2));background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--k,var(--ac2)) 14%,transparent),transparent 48%),var(--surface)}
html:root body .cc-feat .cc-card{border-color:color-mix(in srgb,var(--k,var(--ac2)) 45%,var(--line));border-top-color:var(--k,var(--ac2));background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--k,var(--ac2)) 20%,transparent),transparent 52%),linear-gradient(135deg,var(--kt,var(--tint)),var(--surface) 62%)}
html:root body .cc-tag{background:var(--kt,var(--tint));color:var(--ki,var(--ac-d))}
html:root body .cc-multi small{color:var(--ki,var(--ac-d))}
html:root body .cc-opt.on{border-color:var(--k,var(--ac));background:var(--kt,var(--tint))}
html:root body .cc-opt.on b{background:var(--kd,var(--ac))}
html:root body .cc-opt em{color:var(--ki,var(--ac))}
html:root body .cc-note{border-left-color:var(--k,var(--ac))}
html:root body .cc-clock .p{stroke:var(--k,var(--ac))}
html:root body .cc-mock-h{background:var(--kd,var(--btn))}
html:root body .cc-sheet.s2{background:var(--kt,var(--tint))}
html:root body .cc-sheet.s1 b{color:var(--ki,var(--ac-d))}
/* chips: each topic gets its own hue */
html:root body .cc-chips span:nth-child(3n+1),html:root body .cc-note li:nth-child(3n+1){background:var(--tint);color:var(--ac-d);border-color:color-mix(in srgb,var(--ac) 28%,transparent)}
html:root body .cc-chips span:nth-child(3n+2),html:root body .cc-note li:nth-child(3n+2){background:var(--c2-tint);color:var(--c2-ink);border-color:color-mix(in srgb,var(--c2) 38%,transparent)}
html:root body .cc-chips span:nth-child(3n),html:root body .cc-note li:nth-child(3n){background:var(--c3-tint);color:var(--c3-ink);border-color:color-mix(in srgb,var(--c3) 38%,transparent)}
/* stat boxes inside slides: three colours */
html:root body .cc-stats{border-color:color-mix(in srgb,var(--c2) 45%,var(--line2))}
html:root body .cc-stats div+div{border-left-color:color-mix(in srgb,var(--c2) 45%,var(--line2))}
html:root body .cc-stats div:nth-child(3n+1) b{color:var(--ac-d)}
html:root body .cc-stats div:nth-child(3n+2) b{color:var(--c2-num)}
html:root body .cc-stats div:nth-child(3n) b{color:var(--c3-num)}
/* daily quiz clock runs warm: time is the point */
html:root body .dq-clock{border-color:var(--c2);background:var(--c2-tint);color:var(--c2-ink)}
/* rail */
html:root body .cc-opt-btn::before{background:color-mix(in srgb,var(--k,var(--ac)) 62%,var(--line2))}
html:root body .cc-opt-btn:hover{border-color:color-mix(in srgb,var(--k,var(--ac)) 55%,var(--line2))}
html:root body .cc-opt-btn[aria-current=true]{background:var(--kt,var(--tint));border-color:var(--k,var(--ac2))}
html:root body .cc-opt-btn[aria-current=true]::before{background:var(--k,var(--ac))}
html:root body .cc-opt-btn[aria-current=true] .co-s{color:var(--ki,var(--ac-d))}
html:root body .co-bar{background:var(--k,var(--ac))}
/* dots */
html:root body .cc-dot i{background:color-mix(in srgb,var(--k,var(--ac)) 36%,var(--line2))}
html:root body .cc-dot[aria-current=true] i{background:var(--k,var(--ac))}

/* ---- 7. Countdown + 7-minute challenge: two cards, two contrasting tops ---- */
html:root body .hero-row .nl-cd{border-top-color:var(--c3)}
html:root body .nl-cd-g div:nth-child(1){background:var(--tint)}
html:root body .nl-cd-g div:nth-child(1) strong{color:var(--ac-d)}
html:root body .nl-cd-g div:nth-child(2){background:var(--c2-tint)}
html:root body .nl-cd-g div:nth-child(2) strong{color:var(--c2-num)}
html:root body .nl-cd-g div:nth-child(3){background:var(--c3-tint)}
html:root body .nl-cd-g div:nth-child(3) strong{color:var(--c3-num)}
html:root body .nl-cd-g div:nth-child(4){background:linear-gradient(135deg,var(--btn),var(--deep));box-shadow:inset 0 -3px 0 var(--c2)}
html:root body .nl-cd-g div:nth-child(4) strong{color:#fff}
html:root body .nl-cd-g div:nth-child(4) small{color:rgba(255,255,255,.86)}
html:root body .nlt{border-color:color-mix(in srgb,var(--c2) 42%,var(--line));border-top-color:var(--c2);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--c2) 18%,transparent),transparent 50%),linear-gradient(135deg,var(--c2-tint),var(--surface) 62%)}
html:root body .nlt-tag{border-color:color-mix(in srgb,var(--c2) 50%,var(--line2));color:var(--c2-ink)}
html:root body .nlt-stats{border-color:color-mix(in srgb,var(--c2) 45%,var(--line2))}
html:root body .nlt-stats div+div{border-left-color:color-mix(in srgb,var(--c2) 45%,var(--line2))}
html:root body .nlt-stats div:nth-child(3n+1) b{color:var(--ac-d)}
html:root body .nlt-stats div:nth-child(3n+2) b{color:var(--c2-num)}
html:root body .nlt-stats div:nth-child(3n) b{color:var(--c3-num)}
html:root body .nlt-bar i{background:linear-gradient(90deg,var(--ac),var(--c2))}

/* ---- 8. Section rhythm: accent bars, gently tinted bands ---- */
html:root body .eyebrow::before,html:root body .pl-body h2 small::before{content:"";display:inline-block;vertical-align:middle;width:24px;height:3px;margin-right:10px;border-radius:3px;background:linear-gradient(90deg,var(--c2),var(--c3))}
html:root body .section-head h2::after{content:"";display:block;width:58px;height:4px;margin-top:14px;border-radius:4px;background:linear-gradient(90deg,var(--ac),var(--c2) 62%,var(--c3))}
html:root body .section.soft{background:linear-gradient(180deg,color-mix(in srgb,var(--c3) 5%,var(--soft)),var(--soft) 50%,color-mix(in srgb,var(--c2) 5%,var(--soft)))}
html:root body .section.sy{background:linear-gradient(var(--surface),color-mix(in srgb,var(--c3) 8%,var(--soft)))}
html:root body .section.qb{background:linear-gradient(180deg,color-mix(in srgb,var(--c3) 5%,var(--soft)),var(--soft) 40%)}

/* ---- 9. Stats strip + footer ---- */
html:root body .stats{position:relative}
html:root body .stats::before,html:root body footer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--ac2),var(--c2),var(--c3))}
html:root body .stat-grid strong::before{content:"";display:block;width:24px;height:3px;margin-bottom:10px;border-radius:3px;background:currentColor}
html:root body .stat-grid div:nth-child(odd) strong{color:var(--c2-hi)}
html:root body .stat-grid div:nth-child(even) strong{color:var(--c3-hi)}
html:root body footer{position:relative}
html:root body .footer-grid strong{color:var(--c2-hi)}
html:root body .footer-grid a:hover{color:var(--c3-hi)}

/* ---- 10. Cards: coloured top edge + matching number / chip / link ---- */
html:root body :is(.unit-grid>.unit,.notes-grid>.note,.resource-grid>.resource){border-top:4px solid var(--k,var(--ac2))}
html:root body :is(.unit-grid>.unit,.resource-grid>.resource)>span{color:var(--ki,var(--ac))}
html:root body .unit-grid>.unit .cnt{background:var(--kt,var(--chip));color:var(--ki,var(--mut))}
html:root body .unit-grid>.unit .go,html:root body .notes-grid>.note a,html:root body .resource-grid>.resource a{color:var(--ki,var(--ac))}
html:root body .unit-grid>.unit:hover{border-color:color-mix(in srgb,var(--k,var(--ac)) 55%,var(--line));box-shadow:0 14px 28px -16px color-mix(in srgb,var(--k,var(--ac)) 55%,transparent)}
html:root body .unit.mod.active{border-color:var(--k,var(--b2));box-shadow:0 14px 32px color-mix(in srgb,var(--k,var(--b2)) 30%,transparent)}
html:root body :is(.notes-grid>.note,.resource-grid>.resource) .tag{background:var(--kt,var(--tint));color:var(--ki,var(--ac-d))}
/* mock-test cards (the red HARD card keeps its red edge) */
html:root body .mt-cards>.mt-card:not(.hard){border-top:4px solid var(--k,var(--ac2))}
html:root body .mt-cards>.mt-card:not(.hard) .tag{background:var(--kt,var(--tint));color:var(--ki,var(--ac-d))}
html:root body .mt-cards>.mt-card:not(.hard):hover{box-shadow:0 14px 30px -14px color-mix(in srgb,var(--k,var(--ac)) 50%,transparent)}

/* ---- 11. Study plans: cool = lots of time, warm = urgency ---- */
html:root body .plan-card{border-top:4px solid var(--pk,var(--ac2))}
html:root body .plan-card[data-plan="6"]{--pk:var(--c3);--pi:var(--c3-ink);--pn:var(--c3-num);--pt:var(--c3-tint)}
html:root body .plan-card[data-plan="3"]{--pk:var(--ac2);--pi:var(--ac-d);--pn:var(--ac);--pt:var(--tint)}
html:root body .plan-card[data-plan="1"]{--pk:var(--c2);--pi:var(--c2-ink);--pn:var(--c2-num);--pt:var(--c2-tint)}
html:root body .plan-card[data-plan="2"],html:root body .plan-card[data-plan="0.5"],html:root body .plan-card[data-plan="2w"]{--pk:var(--c2-deep);--pi:var(--c2-ink);--pn:var(--c2-num);--pt:var(--c2-tint)}
html:root body .plan-card .pc-time,html:root body .plan-card .pc-go{color:var(--pi,var(--ac))}
html:root body .plan-card .pc-time b{color:var(--pn,var(--ac))}
html:root body .plan-card:hover,html:root body .plan-card:focus-visible,html:root body .plan-card.is-fit{border-color:var(--pk,var(--ac))}
html:root body .plan-card .pc-flag{background:var(--pt,var(--tint));color:var(--pi,var(--ac-d))}
html:root body .plan-card:hover{box-shadow:0 16px 30px -18px color-mix(in srgb,var(--pk,var(--ac)) 60%,transparent)}
html:root body .cycle>li::before{background:var(--kd,var(--ac))}
html:root body .cycle>li:not(:last-child)::after{color:var(--k,var(--ac2))}
html:root body .cycle>li:last-child{background:var(--kt,var(--tint));border-color:var(--k,var(--ac2))}
html:root body .phases>li::before{background:var(--k,var(--ac))}
html:root body .route>li::before{background:var(--kt,var(--tint));color:var(--ki,var(--ac-d))}
html:root body .pl-hero{background:radial-gradient(circle at 92% 0,color-mix(in srgb,var(--c2) 18%,transparent),transparent 42%),radial-gradient(circle at 0 100%,color-mix(in srgb,var(--c3) 14%,transparent),transparent 44%),linear-gradient(180deg,var(--tint),var(--bg) 92%)}

/* ---- 12. Progress: bars blend brand into the contrast colours ---- */
html:root body .sy-prog div i,html:root body .syllabus-track div,html:root body .progress div,html:root body .quiz-progress div{background:linear-gradient(90deg,var(--ac2),var(--c2),var(--c3))}

/* ===== END OF VIBRANT LAYER ===== */

/* ===== HIGH-CONTRAST themes (Midnight HC, Ruby HC, Graphite HC) =====
   Same dual-colour rule, but near-black ink on near-white (and the reverse in dark mode),
   deep saturated accents (text pairs 7:1+, AAA), firmer borders and thicker focus rings. ===== */
[data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]{--hc:1}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(.unit,.note,.resource,.hero-card,.mt-card,.qb-card,.sy-card,.mt-q,.mt-pal,.plan-card,.nlt,.nl-cd,.cc-card,.cc-opt-btn,.quiz-shell,.faq-item,.mt-opt,.qb-opt,.option){border-left-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2)}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(input,select,textarea,.pal-btn,.mode-btn,.btn.secondary){border-color:var(--line2);border-width:2px}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body .btn.primary{border:2px solid var(--deep)}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(.text-link,.unit a,.note a,.faq-a a,.pl-body a){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(a,button,select,input,summary,[tabindex]):focus-visible{outline:4px solid var(--b2);outline-offset:3px}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(.eyebrow,.tag,.pill,.cc-tag){font-weight:800}
html:is([data-scheme=midnight],[data-scheme=ruby],[data-scheme=graphite]) body :is(p,li,.hero-text,.faq-a p){color:var(--text)}
/* ===== BALANCED LIGHT MODE (begin, generated) =====
   In light mode the five standard themes keep light content but wear a rich dark band:
   top bar, header, home hero and page title bands re-use that theme's own dark palette,
   so light and dark are balanced and text stays high-contrast. Dark mode is unchanged.
   High-contrast themes are left as they are. ===== */
html[data-scheme=navy]:not([data-mode=dark]) :is(#a11y-bar,.site-header,.hero .cc,.faq-hero,.pl-hero){--bg:#11182f;--surface:#19213b;--soft:#0e1425;--chip:#242d4c;--line:#2f395b;--line2:#475685;--text:#f4f6fa;--text2:#d0d4e2;--mut:#acb3c8;--ac:#a5b9f8;--ac-d:#cfd9fc;--ac2:#5a77d8;--tint:#1d284e;--btn:#3658c9;--deep:#151d38;--deep2:#0a0f1f;--b2:#4caeeb;--b3:#34586f;--b-tint:#1b3546;--t1:#4e6cd0;--t2:#62acda;--t1t:#a5b9f8;--t2t:#71c2f4;--t3:#70778f;--star:#71c2f4;--glow1:#172963;--glow2:#163d55;--hero2:#0d1221;--hdr:rgba(17,24,47,.94);--tools:rgba(17,24,47,.94);--sel-bg:#1e3e52;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#143543;--ok-soft:#122b36;--ok-text:#addff5;--ok-bd:#295365;--bad-bg:#471a22;--bad-text:#fbbcc6;--stat:linear-gradient(120deg,#151d38,#1f3e51);--g:#166688;--gold:#5a77d8;--c2:#6ab7e7;--c2-ink:#c4e4f8;--c2-deep:#2c6d96;--c2-hi:#97d2f7;--c3:#6c88e5;--c3-ink:#cdd7f9;--c3-deep:#3658c9;--c3-hi:#a1b5f7;--c2-num:#c4e4f8;--c3-num:#cdd7f9;--t2:#62acda;--t2t:#71c2f4;--star:#71c2f4;--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface));color:var(--text)}
html[data-scheme=blue]:not([data-mode=dark]) :is(#a11y-bar,.site-header,.hero .cc,.faq-hero,.pl-hero){--bg:#111f2f;--surface:#19293b;--soft:#0e1925;--chip:#24374c;--line:#2f435b;--line2:#476485;--text:#f4f7fa;--text2:#d9e0e8;--mut:#b3becc;--ac:#a1c9f7;--ac-d:#d3e7fd;--ac2:#5a95d8;--tint:#1d344e;--btn:#2b62a1;--deep:#152538;--deep2:#0a141f;--b2:#ad9ff4;--b3:#3e346f;--b-tint:#221b46;--t1:#4e8ad0;--t2:#7662da;--t1t:#97c4f7;--t2t:#c3b8f9;--t3:#707e8f;--star:#c3b8f9;--glow1:#173b63;--glow2:#211655;--hero2:#0d1621;--hdr:rgba(17,31,47,.94);--tools:rgba(17,31,47,.94);--sel-bg:#271e52;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#143543;--ok-soft:#122b36;--ok-text:#addff5;--ok-bd:#295365;--bad-bg:#471a22;--bad-text:#fbbcc6;--stat:linear-gradient(120deg,#152538,#281f51);--g:#166688;--gold:#5a95d8;--c2:#7f6ae7;--c2-ink:#d8d2f9;--c2-deep:#6651cd;--c2-hi:#a797f7;--c3:#6ca4e5;--c3-ink:#d6e7fa;--c3-deep:#2b62a1;--c3-hi:#a1c9f7;--c2-num:#d8d2f9;--c3-num:#d6e7fa;--t2:#7662da;--t2t:#c3b8f9;--star:#c3b8f9;--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface));color:var(--text)}
html[data-scheme=aqua]:not([data-mode=dark]) :is(#a11y-bar,.site-header,.hero .cc,.faq-hero,.pl-hero){--bg:#11282f;--surface:#19333b;--soft:#0e1f25;--chip:#24434c;--line:#2f515b;--line2:#477685;--text:#f4f9fa;--text2:#e9eff1;--mut:#b9cbd0;--ac:#8edef6;--ac-d:#ecfafe;--ac2:#5abbd8;--tint:#1d434e;--btn:#226b81;--deep:#153038;--deep2:#0a1a1f;--b2:#9aacf4;--b3:#34406f;--b-tint:#1b2446;--t1:#4eb2d0;--t2:#627ada;--t1t:#76d7f4;--t2t:#bdc9fa;--t3:#70888f;--star:#bdc9fa;--glow1:#175163;--glow2:#162355;--hero2:#0d1c21;--hdr:rgba(17,40,47,.94);--tools:rgba(17,40,47,.94);--sel-bg:#1e2952;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#143543;--ok-soft:#122b36;--ok-text:#addff5;--ok-bd:#295365;--bad-bg:#471a22;--bad-text:#fbbcc6;--stat:linear-gradient(120deg,#153038,#1f2951);--g:#166688;--gold:#5abbd8;--c2:#6a83e7;--c2-ink:#dfe5fb;--c2-deep:#415cc8;--c2-hi:#97aaf7;--c3:#6cc9e5;--c3-ink:#edf9fd;--c3-deep:#226b81;--c3-hi:#a1e3f7;--c2-num:#dfe5fb;--c3-num:#edf9fd;--t2:#627ada;--t2t:#bdc9fa;--star:#bdc9fa;--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface));color:var(--text)}
html[data-scheme=purple]:not([data-mode=dark]) :is(#a11y-bar,.site-header,.hero .cc,.faq-hero,.pl-hero){--bg:#1f112f;--surface:#29193b;--soft:#190e25;--chip:#37244c;--line:#432f5b;--line2:#644785;--text:#f7f4fa;--text2:#d8d0e2;--mut:#b9acc8;--ac:#ceaaf8;--ac-d:#e4cffc;--ac2:#955ad8;--tint:#341d4e;--btn:#803ecc;--deep:#251538;--deep2:#140a1f;--b2:#919ef3;--b3:#343c6f;--b-tint:#1b2146;--t1:#8a4ed0;--t2:#6272da;--t1t:#ceaaf8;--t2t:#aab4f8;--t3:#7e708f;--star:#aab4f8;--glow1:#3b1763;--glow2:#161f55;--hero2:#160d21;--hdr:rgba(31,17,47,.94);--tools:rgba(31,17,47,.94);--sel-bg:#1e2552;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#143543;--ok-soft:#122b36;--ok-text:#addff5;--ok-bd:#295365;--bad-bg:#471a22;--bad-text:#fbbcc6;--stat:linear-gradient(120deg,#251538,#1f2651);--g:#166688;--gold:#955ad8;--c2:#6a7be7;--c2-ink:#c9cff8;--c2-deep:#495aca;--c2-hi:#97a4f7;--c3:#a46ce5;--c3-ink:#dfc8f9;--c3-deep:#803ecc;--c3-hi:#c9a1f7;--c2-num:#c9cff8;--c3-num:#dfc8f9;--t2:#6272da;--t2t:#aab4f8;--star:#aab4f8;--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface));color:var(--text)}
html[data-scheme=magenta]:not([data-mode=dark]) :is(#a11y-bar,.site-header,.hero .cc,.faq-hero,.pl-hero){--bg:#2f1122;--surface:#3b192c;--soft:#250e1b;--chip:#4c243b;--line:#5b2f48;--line2:#85476a;--text:#faf4f8;--text2:#e4d3dc;--mut:#caafbe;--ac:#f8aad6;--ac-d:#fdd3eb;--ac2:#d85aa1;--tint:#4e1d39;--btn:#ad2e76;--deep:#381529;--deep2:#1f0a16;--b2:#c891f3;--b3:#56346f;--b-tint:#331b46;--t1:#d04e97;--t2:#a662da;--t1t:#f7a1d2;--t2t:#d6aaf8;--t3:#8f7082;--star:#d6aaf8;--glow1:#631742;--glow2:#3a1655;--hero2:#210d18;--hdr:rgba(47,17,34,.94);--tools:rgba(47,17,34,.94);--sel-bg:#3c1e52;--ok:#2f99c6;--ok-btn:#166688;--ok-bg:#143543;--ok-soft:#122b36;--ok-text:#addff5;--ok-bd:#295365;--bad-bg:#471a22;--bad-text:#fbbcc6;--stat:linear-gradient(120deg,#381529,#3b1f51);--g:#166688;--gold:#d85aa1;--c2:#b16ae7;--c2-ink:#e6cdf9;--c2-deep:#8e41c8;--c2-hi:#cd97f7;--c3:#e56cb0;--c3-ink:#fad1e8;--c3-deep:#ad2e76;--c3-hi:#f7a1d2;--c2-num:#e6cdf9;--c3-num:#fad1e8;--t2:#a662da;--t2t:#d6aaf8;--star:#d6aaf8;--c2-tint:color-mix(in srgb,var(--c2) 20%,var(--surface));--c3-tint:color-mix(in srgb,var(--c3) 20%,var(--surface));color:var(--text)}
html:not([data-mode=dark]):not([data-scheme=midnight]):not([data-scheme=ruby]):not([data-scheme=graphite]) :is(.site-header,.faq-hero,.pl-hero){border-bottom:1px solid rgba(255,255,255,.08)}
html:not([data-mode=dark]):not([data-scheme=midnight]):not([data-scheme=ruby]):not([data-scheme=graphite]) #a11y-bar{background:var(--soft);border-bottom:1px solid var(--line)}
html:not([data-mode=dark]):not([data-scheme=midnight]):not([data-scheme=ruby]):not([data-scheme=graphite]) #a11y-bar button[aria-pressed=true]{background:var(--chip)}
/* ===== BALANCED LIGHT MODE (end) ===== */