/* ===== CAT 2026 Playbook, futuristic dark design system ("GitHub-cool") ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* surfaces, warm editorial paper (made-by-ac) */
  --bg:#f6f3ee; --bg2:#efeae1; --surface:#fbf9f4; --surface2:#f3efe7; --surface3:#ece7dc;
  --line:#e4ded1; --line2:#d6cdbb; --glass:rgba(246,243,238,.85);
  /* text, near-black ink */
  --ink:#16150f; --muted:#6f685c; --faint:#a39a89;
  /* brand, minimal ink (UI), red is the rare pop, gold the stamp */
  --brand:#1b1a16; --brand2:#3a3833; --brand3:#1b1a16;
  --grad:linear-gradient(135deg,#2a2824,#15140f);
  --grad-soft:linear-gradient(135deg,rgba(27,26,22,.06),rgba(27,26,22,.035));
  --accent:#c8102e; --accent2:#c8a24b;
  --green:#3f7d4e; --amber:#b07d24; --red:#c8102e; --teal:#2f7a72;
  /* accents: red pop + gold stamp tint */
  --marker:rgba(200,162,75,.20); --marker-solid:#f2e8cd;
  --red-soft:rgba(200,16,46,.08);
  /* effects, soft, minimal */
  --radius:14px;
  --glow:0 1px 2px rgba(20,30,50,.05), 0 6px 18px rgba(20,30,50,.06);
  --glow-lg:0 12px 40px rgba(20,40,60,.12);
  --shadow:0 1px 2px rgba(20,30,50,.05), 0 6px 18px rgba(20,30,50,.06);
  --shadow-lg:var(--glow-lg);
  --sbw:264px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);line-height:1.66;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(700px 500px at -5% 8%, rgba(232,196,119,.07), transparent 55%),
    var(--bg);
}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:24px 24px;}
h1,h2,h3,h4,h5,.statn,.phpill,.cd-n,.fn{font-family:'Fraunces',Georgia,serif;}
.brand,.chip,.tag,.btn,.navlink,.crumb,.cn{font-family:'Inter',system-ui,sans-serif;}
a{color:var(--brand);text-decoration:none}
::selection{background:var(--marker);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#212c3e;border-radius:10px;border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:#2c3a52}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}
.sidebar{position:fixed;top:0;left:0;width:var(--sbw);height:100vh;z-index:60;overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,22,34,.96),rgba(9,12,19,.98));
  backdrop-filter:blur(14px);border-right:1px solid var(--line);display:flex;flex-direction:column;}
.sbrand{padding:22px 20px 14px;display:flex;align-items:center;gap:11px;}
.sbrand .logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;
  background:var(--grad);box-shadow:0 8px 22px rgba(16,185,129,.4),inset 0 0 0 1px rgba(255,255,255,.12);}
.sbrand .bt{font-weight:800;font-size:1.06rem;color:#fff;letter-spacing:-.01em;line-height:1.1}
.sbrand .bs{font-size:.66rem;color:var(--faint);letter-spacing:.18em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.countdown{margin:4px 16px 12px;padding:12px 15px;border-radius:13px;position:relative;overflow:hidden;
  background:var(--grad-soft);border:1px solid var(--line2);}
.countdown::after{content:"";position:absolute;right:-20px;top:-20px;width:70px;height:70px;border-radius:50%;background:var(--grad);filter:blur(28px);opacity:.4}
.countdown .cd-n{font-weight:800;font-size:1.55rem;color:#fff;line-height:1;letter-spacing:-.01em;position:relative}
.countdown .cd-l{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:5px;font-family:'JetBrains Mono',monospace;position:relative}
.navgroup{padding:10px 12px 2px;}
.navgroup .gl{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding:8px 12px 5px;font-family:'JetBrains Mono',monospace}
.navlink{display:flex;align-items:center;gap:11px;padding:9px 13px;margin:2px 4px;border-radius:10px;color:var(--muted);font-size:.88rem;font-weight:600;transition:.16s;cursor:pointer;position:relative;}
.navlink .ico{width:20px;text-align:center;font-size:.98rem;filter:grayscale(.3)}
.navlink:hover{background:var(--surface2);color:var(--ink);}
.navlink.active{color:#fff;background:linear-gradient(90deg,rgba(16,185,129,.22),rgba(232,196,119,.06));box-shadow:inset 0 0 0 1px var(--line2);}
.navlink.active::before{content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--grad);box-shadow:0 0 12px var(--brand)}
.navlink.active .ico{filter:none}
.sfoot{margin-top:auto;padding:14px 18px 20px;font-size:.72rem;color:var(--faint);border-top:1px solid var(--line);}
.sfoot b{color:var(--muted)}

/* ---------- Content ---------- */
.content{margin-left:var(--sbw);flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 30px;}
.hamb{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);font-size:1.1rem;cursor:pointer;}
.crumb{font-size:.82rem;color:var(--muted);font-weight:600;font-family:'JetBrains Mono',monospace}
.crumb b{color:var(--ink)}
.tb-spacer{margin-left:auto}
.tb-chip{font-size:.72rem;font-weight:700;color:var(--brand);background:var(--grad-soft);border:1px solid var(--line2);padding:6px 13px;border-radius:30px;font-family:'JetBrains Mono',monospace}
.page{max-width:1000px;width:100%;margin:0 auto;padding:30px 30px 70px;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-radius:22px;color:#fff;padding:42px 40px;margin-bottom:8px;
  background:linear-gradient(135deg,#10182b,#0a0e18);border:1px solid var(--line2);box-shadow:var(--glow-lg);}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 280px at 82% -20%, rgba(16,185,129,.35), transparent 60%),
  radial-gradient(500px 280px at 10% 120%, rgba(232,196,119,.22), transparent 60%);}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.hero>*{position:relative;z-index:1}
.hero .kick{display:inline-flex;gap:7px;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:6px 14px;border-radius:30px;color:#cbd6ff;font-family:'JetBrains Mono',monospace}
.hero h1{font-size:2.4rem;font-weight:800;letter-spacing:-.025em;margin:16px 0 10px;line-height:1.08}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero p{margin:0;max-width:720px;color:#aeb9cc}

/* ---------- Headings ---------- */
.ph{margin:38px 0 6px;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;color:#fff}
.ph .em{font-size:1.3rem}
.psub{color:var(--muted);font-size:.96rem;margin:0 0 18px;max-width:780px}
h3{font-size:1.16rem;font-weight:800;color:#fff;margin:30px 0 10px;display:flex;align-items:center;gap:10px}
h3::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--grad);box-shadow:0 0 10px var(--brand)}
h4{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin:18px 0 8px;font-family:'JetBrains Mono',monospace}
p{margin:9px 0}
b,strong{color:#fff;font-weight:700}
ul,ol{margin:9px 0;padding-left:22px}li{margin:6px 0;color:#cdd6e3}

/* ---------- Cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);margin:14px 0}
.card.tight{padding:16px 18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:15px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:15px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:13px}

/* link cards */
.lcard{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:.2s;position:relative;overflow:hidden}
.lcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:.2s;box-shadow:0 0 14px var(--brand)}
.lcard::after{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:.2s}
.lcard:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--glow-lg)}
.lcard:hover::before{opacity:1}.lcard:hover::after{opacity:.5}
.lcard>*{position:relative;z-index:1}
.lcard .ic{font-size:1.5rem}
.lcard .lt{font-family:'Inter';font-weight:800;font-size:1.02rem;color:#fff}
.lcard .ld{font-size:.86rem;color:var(--muted)}
.lcard .go{margin-top:auto;font-size:.76rem;font-weight:700;color:var(--brand);padding-top:8px;font-family:'JetBrains Mono',monospace}

/* ---------- Stat tiles ---------- */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:var(--shadow)}
.stat .statn{font-size:1.65rem;font-weight:800;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .statl{font-size:.66rem;color:var(--muted);margin-top:6px;letter-spacing:.08em;text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.hero .stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.hero .stat .statl{color:#9fb0cc}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0;font-size:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
th{background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(232,196,119,.1));color:#fff;font-family:'Inter';font-weight:700;text-align:left;padding:12px 15px;font-size:.8rem;letter-spacing:.02em;border-bottom:1px solid var(--line2)}
td{padding:11px 15px;border-top:1px solid var(--line);vertical-align:top;color:#cdd6e3}
tr:nth-child(even) td{background:rgba(255,255,255,.018)}
tr.hot td{background:rgba(255,194,75,.08)!important;color:#fff;font-weight:600}
.tcenter td,.tcenter th{text-align:center}

/* ---------- Tags & chips ---------- */
.tag{display:inline-block;white-space:nowrap;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:20px;color:#06101a;font-family:'JetBrains Mono',monospace}
.t-must,.t-done,.t-e{background:var(--green)}
.t-sel,.t-soon,.t-m{background:var(--amber)}
.t-skip,.t-plan{background:#56657d;color:#dbe3ef}
.t-core{background:var(--ink);color:#fff}
.t-h{background:var(--red);color:#1a0509}
.chip{display:inline-block;font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:30px;background:var(--surface3);color:var(--brand);border:1px solid var(--line2);font-family:'JetBrains Mono',monospace}
.chip.yr{background:var(--grad-soft);color:#cbd6ff;border-color:var(--line2)}

/* ---------- Callouts ---------- */
.callout{border:1px solid var(--line2);border-left:3px solid var(--accent);background:linear-gradient(90deg,rgba(52,226,196,.07),rgba(52,226,196,.01));border-radius:0 12px 12px 0;padding:14px 18px;margin:15px 0}
.callout.warn{border-left-color:var(--red);background:linear-gradient(90deg,rgba(255,107,129,.08),rgba(255,107,129,.01))}
.callout.good{border-left-color:var(--green);background:linear-gradient(90deg,rgba(63,224,138,.08),rgba(63,224,138,.01))}
.callout.info{border-left-color:var(--brand);background:linear-gradient(90deg,rgba(16,185,129,.09),rgba(16,185,129,.01))}
.callout b{display:block;margin-bottom:3px;font-family:'Inter';color:#fff}
.num{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--grad);color:#fff;font-weight:800;font-size:.78rem;margin-right:8px;box-shadow:0 4px 12px rgba(16,185,129,.35)}

/* ---------- Phase blocks ---------- */
.phase{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin:16px 0}
.phead{padding:16px 22px;color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;opacity:.4}
.phead>*{position:relative;z-index:1}
.p1{background:linear-gradient(135deg,#0e6b7a,#06303a)}
.p2{background:linear-gradient(135deg,#4733c9,#1c1248)}
.p3{background:linear-gradient(135deg,#a13a1a,#4d160a)}
.phpill{font-size:1.18rem;font-weight:800}
.pdates{font-size:.82rem;opacity:.92;font-family:'JetBrains Mono',monospace}
.pgoal{margin-left:auto;font-size:.8rem;background:rgba(255,255,255,.14);padding:5px 13px;border-radius:20px}
.pbody{padding:18px 22px}
.wk{display:flex;gap:14px;padding:11px 0;border-top:1px dashed var(--line2)}
.wk:first-child{border-top:none}
.wknum{flex:0 0 92px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.8rem;color:var(--brand)}
.wktext{font-size:.9rem;color:#cdd6e3}

/* ---------- Routine / checklist ---------- */
.routine{display:grid;grid-template-columns:128px 1fr;font-size:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.routine>div{padding:10px 13px;border-top:1px solid var(--line);color:#cdd6e3}
.routine>div:nth-child(1),.routine>div:nth-child(2){border-top:none}
.routine .rt{font-weight:700;color:var(--brand);font-family:'JetBrains Mono',monospace;background:rgba(255,255,255,.02)}
.check{list-style:none;padding-left:0}
.check li{position:relative;padding-left:30px;margin:9px 0;color:#cdd6e3}
.check li::before{content:"▢";position:absolute;left:0;top:-2px;font-size:1rem;color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;padding:9px 17px;border-radius:30px;border:1px solid transparent;cursor:pointer;color:#fff;background:var(--grad);box-shadow:0 8px 22px rgba(16,185,129,.35);transition:.16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(16,185,129,.5)}
.btn.ghost{background:var(--surface2);color:var(--brand);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);background:var(--surface3)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ---------- Misc ---------- */
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.pager a{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);transition:.16s}
.pager a:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--glow)}
.pager .pl{font-size:.66rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-family:'JetBrains Mono',monospace}
.pager .pt{font-family:'Inter';font-weight:800;color:#fff}
.pager a.next{text-align:right}
.kbd{font-family:'JetBrains Mono',monospace;font-size:.8rem;background:var(--surface3);border:1px solid var(--line2);border-radius:6px;padding:1px 7px;color:var(--ink)}
.overlay{display:none;position:fixed;inset:0;background:rgba(3,5,9,.66);backdrop-filter:blur(2px);z-index:55}
.backtop{position:fixed;right:22px;bottom:22px;z-index:50;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;background:var(--surface2);color:#fff;font-size:1.15rem;box-shadow:var(--glow-lg);opacity:0;pointer-events:none;transition:.25s}
.backtop:hover{background:var(--grad)}
.backtop.show{opacity:1;pointer-events:auto}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:var(--sbw);right:0;height:2px;z-index:45;background:transparent}
.progress .bar{height:100%;width:0;background:var(--grad);box-shadow:0 0 10px var(--brand);transition:width .08s linear}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Chapter pages ---------- */
.chero{position:relative;overflow:hidden;border-radius:22px;color:#fff;padding:36px 34px;margin-bottom:6px;border:1px solid var(--line2);box-shadow:var(--glow-lg);background:linear-gradient(135deg,#10182b,#0a0e18)}
.chero::before{content:"";position:absolute;inset:0;opacity:.9;background:
  radial-gradient(560px 240px at 84% -25%, var(--chero-glow,rgba(16,185,129,.4)), transparent 60%),
  radial-gradient(400px 220px at 6% 130%, rgba(232,196,119,.18), transparent 60%)}
.chero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;opacity:.5}
.chero>*{position:relative;z-index:1}
.chero.qa{--chero-glow:rgba(16,185,129,.42)}
.chero.dilr{--chero-glow:rgba(45,212,191,.4)}
.chero.varc{--chero-glow:rgba(255,140,60,.4)}
.chero .ctag{display:inline-flex;gap:7px;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:5px 13px;border-radius:30px;font-family:'JetBrains Mono',monospace;color:#cbd6ff}
.chero h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:12px 0 6px;line-height:1.12}
.chero p{margin:0;max-width:700px;color:#aeb9cc}
.chero .cmeta{display:flex;flex-wrap:wrap;gap:20px;margin-top:18px;font-size:.78rem}
.chero .cmeta b{color:#fff;font-family:'Inter';font-size:1.15rem;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chero .cmeta span{color:#9fb0cc;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* in-page chapter tabs */
.ctabs{position:sticky;top:54px;z-index:30;display:flex;gap:8px;flex-wrap:wrap;background:linear-gradient(180deg,var(--bg),rgba(8,11,17,.6));backdrop-filter:blur(8px);padding:12px 0;margin:0 0 6px}
.ctabs a{font-size:.8rem;font-weight:700;color:var(--brand);background:var(--surface);border:1px solid var(--line2);padding:8px 15px;border-radius:30px;font-family:'JetBrains Mono',monospace}
.ctabs a:hover{background:var(--grad);color:#fff;border-color:transparent}

/* formula cards */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:15px 17px;box-shadow:var(--shadow);transition:.18s}
.fcard:hover{border-color:var(--line2);box-shadow:var(--glow);transform:translateY(-2px)}
.fcard .fh{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.fcard .fn{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:8px;font-weight:800;font-size:.8rem;color:#fff;background:var(--grad);box-shadow:0 4px 12px rgba(16,185,129,.35)}
.fcard .ft{font-family:'Inter';font-weight:700;font-size:.96rem;color:#fff}
.fcard ul{margin:3px 0 0;padding-left:18px;font-size:.88rem}.fcard li{margin:5px 0}
.formula{display:block;background:#070b12;border:1px solid var(--line2);border-left:3px solid var(--brand);border-radius:8px;padding:8px 12px;margin:6px 0;font-family:'JetBrains Mono',monospace;font-size:.84rem;color:#aee0ff;overflow-x:auto}

/* PYQ accordion */
.q{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 16px;margin:11px 0;box-shadow:var(--shadow);border-left:3px solid var(--line2);transition:.16s}
.q:hover{border-color:var(--line2)}
.q.easy{border-left-color:var(--green)}.q.mod{border-left-color:var(--amber)}.q.hard{border-left-color:var(--red)}
.q .qm{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:7px;align-items:center}
.q .stem{font-size:.93rem;margin:0;color:#dde5f0}
.q .opts{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px}
.q .opts li{font-size:.86rem;padding:6px 10px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;color:#cdd6e3}
.q details{margin-top:10px}
.q summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.76rem;color:var(--accent);background:rgba(52,226,196,.08);border:1px solid var(--line2);padding:6px 13px;border-radius:30px;user-select:none;font-family:'JetBrains Mono',monospace}
.q summary::-webkit-details-marker{display:none}
.q summary::before{content:"▸";font-size:.7rem;transition:.2s}.q details[open] summary::before{transform:rotate(90deg)}
.q .sol{margin-top:9px;font-size:.89rem;color:#cfe9d8;background:linear-gradient(0deg,rgba(63,224,138,.05),rgba(63,224,138,.02));border:1px solid var(--line2);border-left:3px solid var(--green);padding:10px 13px;border-radius:9px}
.q .ans{font-family:'Inter';font-weight:800;color:var(--green)}.q .ans::before{content:"✓ "}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 4px}
.btnt{font-size:.78rem;font-weight:700;border:1px solid var(--line2);cursor:pointer;color:var(--brand);background:var(--surface2);padding:8px 15px;border-radius:30px;font-family:'JetBrains Mono',monospace}
.btnt:hover{background:var(--grad);color:#fff;border-color:transparent}
.toolbar .cnt{font-size:.8rem;color:var(--muted);margin-left:auto;font-family:'JetBrains Mono',monospace}

/* chapter index rows (hub pages) */
.crow{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);transition:.18s;margin:10px 0;position:relative;overflow:hidden}
.crow::after{content:"";position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:.18s}
.crow:hover{transform:translateX(4px);border-color:var(--line2);box-shadow:var(--glow)}
.crow:hover::after{opacity:.5}
.crow>*{position:relative;z-index:1}
.crow .cn{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:12px;font-weight:800;color:#fff;font-family:'Inter';background:var(--grad);box-shadow:0 6px 16px rgba(16,185,129,.35)}
.crow .cinfo{flex:1;min-width:0}
.crow .cttl{font-family:'Inter';font-weight:800;font-size:1.02rem;color:#fff}
.crow .cdsc{font-size:.84rem;color:var(--muted)}
.crow .cgo{font-size:.76rem;font-weight:700;color:var(--brand);white-space:nowrap;font-family:'JetBrains Mono',monospace}

/* ---------- Enhanced countdown ---------- */
.countdown .cd-top{display:flex;align-items:center;gap:12px;position:relative}
.countdown .cd-n{font-size:2.4rem;font-weight:800;line-height:.88;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.countdown .cd-meta{display:flex;flex-direction:column}
.countdown .cd-l{font-size:.6rem;color:#cbd6ff;text-transform:uppercase;letter-spacing:.16em;font-family:'JetBrains Mono',monospace;font-weight:700}
.countdown .cd-today{font-size:.62rem;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px}
.countdown .cd-bar{height:5px;border-radius:6px;background:rgba(255,255,255,.08);margin-top:11px;overflow:hidden;position:relative}
.countdown .cd-fill{height:100%;border-radius:6px;background:var(--grad);box-shadow:0 0 10px var(--brand);transition:width .6s ease}
.tb-chip.days{background:var(--grad-soft);color:#fff;border-color:var(--brand);font-weight:800}
.sfoot .tgt{margin-bottom:6px;color:var(--muted)}
.sfoot .tgt b{color:var(--brand)}
.tgt-edit{margin-left:4px;background:var(--surface2);border:1px solid var(--line2);color:var(--brand);font-size:.62rem;font-family:'JetBrains Mono',monospace;border-radius:20px;padding:2px 8px;cursor:pointer}
.tgt-edit:hover{background:var(--grad);color:#fff;border-color:transparent}

/* ---------- Collapsible nav groups ---------- */
.navgroup.coll .gtoggle{width:calc(100% - 8px);margin:0 4px;display:flex;align-items:center;justify-content:space-between;text-align:left;background:none;border:none;cursor:pointer;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:9px 12px 6px;font-family:'JetBrains Mono',monospace}
.navgroup.coll .gtoggle:hover{color:var(--muted)}
.navgroup.coll .gchev{transition:.2s;font-size:.7rem}
.navgroup.coll.open .gchev{transform:rotate(90deg)}
.navgroup.coll .gitems{display:none}
.navgroup.coll.open .gitems{display:block;animation:asIn .2s ease}

/* ---------- Practice timer ---------- */
.ptimer{position:fixed;left:calc(var(--sbw) + 18px);bottom:18px;z-index:50;width:188px;
  background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--glow-lg);overflow:hidden;font-family:'JetBrains Mono',monospace}
.ptimer .pt-head{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:.74rem;font-weight:700;color:var(--ink);
  background:var(--grad-soft);border-bottom:1px solid var(--line2)}
.ptimer .pt-ico{filter:drop-shadow(0 0 6px var(--brand))}
.ptimer .pt-min{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;line-height:1;font-size:.9rem}
.ptimer .pt-body{padding:12px;display:flex;flex-direction:column;gap:9px}
.ptimer.mini .pt-body{display:none}
.ptimer .pt-disp{font-size:2rem;font-weight:800;text-align:center;letter-spacing:.02em;color:#fff;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ptimer .pt-disp.warn{-webkit-text-fill-color:var(--amber);color:var(--amber);animation:ptpulse 1s infinite}
.ptimer .pt-disp.done{-webkit-text-fill-color:var(--red);color:var(--red);animation:ptflash .4s steps(2) infinite}
@keyframes ptpulse{50%{opacity:.45}}
@keyframes ptflash{50%{opacity:.2}}
.ptimer .pt-row{display:flex;gap:6px}
.ptimer .pt-b{flex:1;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;padding:7px 4px;border-radius:8px;
  border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:.14s}
.ptimer .pt-b:hover{color:#fff;border-color:var(--brand)}
.ptimer .pt-go{background:var(--grad);color:#fff;border-color:transparent}
.ptimer .pt-go.on{background:var(--surface3);color:var(--amber)}
@media(max-width:900px){.ptimer{left:auto;right:18px;bottom:74px;width:170px}}
@media print{.ptimer{display:none!important}}

/* ---------- Score & College planner ---------- */
.pl-slide{margin:4px 0 18px}
.pl-range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:6px;background:var(--surface3);outline:none;margin:10px 0 4px}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 0 12px var(--brand),0 0 0 4px rgba(16,185,129,.18)}
.pl-range::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--brand);cursor:pointer}
.pl-ticks{position:relative;height:1.2em;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--faint)}
.pl-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pl-out{margin:6px 0}
.pl-out .statn small{font-size:.6rem;color:var(--muted);font-weight:600;-webkit-text-fill-color:var(--muted)}
.pl-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px}
.pl-result{margin-top:8px}
.pl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.pl-table th[data-k]:hover{color:var(--accent)}
.pl-table td{font-size:.86rem}
@media(max-width:760px){.pl-form{grid-template-columns:1fr 1fr}}

/* ---------- Test generator ---------- */
.tg-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.tg-mode{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:.16s;position:relative}
.tg-mode input{position:absolute;opacity:0}
.tg-mode b{font-family:'Inter';font-size:1rem;color:#fff}
.tg-mode span{font-size:.82rem;color:var(--muted)}
.tg-mode.on{border-color:var(--brand);box-shadow:var(--glow);background:var(--grad-soft)}
.tg-secrow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.tg-secgrp{margin:10px 0}
.tg-sech{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.tg-allbtn{font-family:'JetBrains Mono',monospace;font-size:.66rem;background:var(--surface2);border:1px solid var(--line2);color:var(--muted);border-radius:20px;padding:3px 10px;cursor:pointer}
.tg-allbtn:hover{color:#fff;border-color:var(--brand)}
.tg-chips{display:flex;flex-wrap:wrap;gap:7px}
.tg-topic{cursor:pointer;font-family:'Manrope';font-weight:600}
.tg-topic i{font-style:normal;opacity:.6;font-size:.7rem}
.tg-topic.on{background:var(--grad);color:#fff;border-color:transparent}
.tg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tg-lab{display:block;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}
.tg-diffs{display:flex;gap:7px}
.tg-num,.tg-text{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 13px;color:var(--ink);font-family:'Manrope';font-size:.9rem;outline:none}
.tg-num:focus,.tg-text:focus{border-color:var(--brand)}
select.tg-text{-webkit-appearance:none;appearance:none;background-color:var(--bg2);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.tg-check{font-size:.84rem;color:#cdd6e3;display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.tg-status{font-size:.82rem;color:var(--muted);font-family:'JetBrains Mono',monospace}
.tg-out2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tg-code{width:100%;height:340px;background:#05080e;border:1px solid var(--line2);border-radius:10px;padding:12px;color:#aee0ff;font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.5;resize:vertical;white-space:pre;overflow:auto}
.tg-pv-sec{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin:12px 0 6px}
.tg-pv{font-size:.82rem;color:#cdd6e3;padding:6px 0;border-top:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
#previewBox{max-height:380px;overflow-y:auto}
@media(max-width:760px){.tg-modes,.tg-out2{grid-template-columns:1fr}}

/* ---------- Interactive answering ---------- */
.q .opts li.opt-click{cursor:pointer;transition:.12s;position:relative}
.q .opts li.opt-click:hover{border-color:var(--brand);color:#fff;transform:translateX(2px)}
.q .opts li.opt-correct{background:rgba(63,224,138,.18);border-color:var(--green);color:#c9f5dc;font-weight:600}
.q .opts li.opt-correct::after{content:" ✓";color:var(--green);font-weight:800}
.q .opts li.opt-wrong{background:rgba(255,107,129,.16);border-color:var(--red);color:#ffd2d9;font-weight:600}
.q .opts li.opt-wrong::after{content:" ✗";color:var(--red);font-weight:800}
.tita-box{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.tita-in{background:var(--bg2);border:1px solid var(--line2);border-radius:9px;padding:8px 13px;color:var(--ink);font-family:'Manrope';font-size:.88rem;outline:none;min-width:160px}
.tita-in:focus{border-color:var(--brand)}
.tita-box.ok .tita-in{border-color:var(--green)}.tita-box.no .tita-in{border-color:var(--red)}
.tita-check{border:1px solid var(--line2);background:var(--surface2);color:var(--brand);font-weight:700;border-radius:9px;padding:8px 16px;cursor:pointer;font-size:.82rem;font-family:'JetBrains Mono',monospace}
.tita-check:hover{background:var(--grad);color:#fff;border-color:transparent}
.tita-result{font-weight:700;font-size:.85rem;font-family:'Inter'}
.tita-result.r-ok{color:var(--green)}.tita-result.r-no{color:var(--red)}

/* ---------- Formula dropdown (sub-topic pages) ---------- */
.fdrop{margin:6px 0 14px}
.fdrop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem;color:var(--brand);background:var(--surface);border:1px solid var(--line2);padding:9px 16px;border-radius:30px;user-select:none}
.fdrop>summary::-webkit-details-marker{display:none}
.fdrop>summary::before{content:" ";}
.fdrop[open]>summary{margin-bottom:12px}
.fdrop>summary:hover{border-color:var(--brand)}

/* ---------- Sub-topic chip rows (hubs) ---------- */
.subt{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 14px;padding:0 2px}
.subt a.chip{font-family:'Manrope';font-weight:600;font-size:.76rem;cursor:pointer}
.subt a.chip:hover{background:var(--grad);color:#fff;border-color:transparent}

/* ---------- Difficulty filter ---------- */
.qfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.qfilter .qf-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-family:'JetBrains Mono',monospace}
.qf-b{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:30px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:.14s;display:inline-flex;gap:6px;align-items:center}
.qf-b i{font-style:normal;font-size:.68rem;opacity:.7}
.qf-b:hover{color:#fff;border-color:var(--brand)}
.qf-b.on{background:var(--grad);color:#fff;border-color:transparent}
.qf-b[data-f="easy"].on{background:var(--green);color:#06101a}
.qf-b[data-f="mod"].on{background:var(--amber);color:#06101a}
.qf-b[data-f="hard"].on{background:var(--red);color:#1a0509}

/* ---------- Offline assistant ---------- */
.as-launch{position:fixed;right:22px;bottom:80px;z-index:52;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;border:none;border-radius:50%;cursor:pointer;color:#fff;
  background:var(--grad);box-shadow:0 10px 30px rgba(16,185,129,.5),inset 0 0 0 1px rgba(255,255,255,.14);transition:.2s}
.as-launch .as-spark{display:inline-flex;align-items:center;justify-content:center}
.as-launch .as-spark svg{width:26px;height:26px;display:block}
.as-head .as-spark svg{width:20px;height:20px;color:var(--brand)}
.as-launch:hover{transform:translateY(-2px) scale(1.03)}
.as-launch.hide{opacity:0;pointer-events:none;transform:scale(.8)}
.as-spark{animation:asSpark 2.4s ease-in-out infinite;display:inline-block}
@keyframes asSpark{0%,100%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(1.25);opacity:.7}}
.as-panel{position:fixed;right:22px;bottom:22px;z-index:53;width:380px;max-width:calc(100vw - 32px);height:min(620px,82vh);
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(20px) scale(.97);transform-origin:bottom right;transition:.24s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(180deg,rgba(17,24,38,.96),rgba(9,12,19,.98));backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--glow-lg);overflow:hidden}
.as-panel.open{opacity:1;pointer-events:auto;transform:none}
.as-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line2);background:var(--grad-soft)}
.as-head .as-spark{font-size:1.2rem;color:var(--brand);filter:drop-shadow(0 0 8px var(--brand))}
.as-head b{font-family:'Inter';font-size:1rem;color:#fff;display:block;line-height:1.1}
.as-head .as-sub{font-size:.66rem;color:var(--accent);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.as-x{margin-left:auto;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;transition:background .15s,color .15s}
.as-x:hover{background:var(--surface2,rgba(0,0,0,.06));color:var(--ink)}
.as-msgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px}
.as-msg{max-width:90%;font-size:.88rem;line-height:1.55;padding:10px 13px;border-radius:13px;animation:asIn .25s ease}
@keyframes asIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.as-msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.as-msg.bot{align-self:flex-start;background:var(--surface2);border:1px solid var(--line);color:#dde5f0;border-bottom-left-radius:4px}
.as-msg.bot b{color:#fff}
.as-a{margin:0}
.as-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.as-links a{font-size:.76rem;font-weight:700;color:var(--brand);background:var(--surface3);border:1px solid var(--line2);padding:5px 11px;border-radius:30px;font-family:'JetBrains Mono',monospace}
.as-links a:hover{background:var(--grad);color:#fff;border-color:transparent}
.as-more{margin-top:9px;font-size:.78rem;color:var(--muted)}
.as-chip{font-family:'Manrope';font-size:.76rem;font-weight:600;color:var(--brand);background:transparent;border:1px solid var(--line2);padding:4px 10px;border-radius:30px;cursor:pointer;margin:3px 4px 0 0}
.as-chip:hover{background:var(--surface3);color:#fff}
.as-sugg{display:flex;gap:6px;flex-wrap:wrap;padding:2px 0 0;margin:0}
.as-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line2);background:var(--surface)}
.as-input input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:30px;padding:10px 15px;color:var(--ink);font-family:'Manrope';font-size:.88rem;outline:none}
.as-input input:focus{border-color:var(--brand)}
.as-input button{width:42px;border:none;border-radius:50%;background:var(--grad);color:#fff;font-size:1rem;cursor:pointer}
.as-gear{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;font-size:.9rem;margin-left:auto}
.as-head .as-x{flex:0 0 auto}
.as-settings{display:none;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line2);background:var(--bg2)}
.as-settings.open{display:flex;animation:asIn .2s ease}
.as-set-t{margin:0;font-family:'Inter';font-weight:800;color:#fff;font-size:.92rem}
.as-set-d{margin:0;font-size:.76rem;color:var(--muted);line-height:1.5}
.as-settings input{background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:9px 12px;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:.78rem;outline:none}
.as-settings input:focus{border-color:var(--brand)}
.as-set-row{display:flex;gap:8px}
.as-set-save{flex:1;border:none;border-radius:9px;background:var(--grad);color:#fff;font-weight:700;padding:9px;cursor:pointer;font-family:'Inter'}
.as-set-clear{border:1px solid var(--line2);border-radius:9px;background:var(--surface2);color:var(--muted);padding:9px 14px;cursor:pointer}
.as-web{margin-top:10px;border-top:1px dashed var(--line2);padding-top:9px}
.as-web-h{font-size:.72rem;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;margin-bottom:6px;letter-spacing:.04em}
.as-web-r{display:block;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;margin:6px 0;transition:.14s}
.as-web-r:hover{border-color:var(--brand);background:var(--surface3)}
.as-web-t{display:block;font-weight:700;font-size:.82rem;color:var(--brand)}
.as-web-s{display:block;font-size:.74rem;color:var(--muted);margin-top:2px;line-height:1.45}
.as-web-load{margin-top:9px;font-size:.78rem;color:var(--muted);font-family:'JetBrains Mono',monospace;animation:asPulse 1.2s infinite}
@keyframes asPulse{50%{opacity:.45}}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .overlay{display:block}
  .content{margin-left:0}
  .hamb{display:block}
  .page{padding:22px 18px 60px}
  .hero{padding:30px 22px}.hero h1{font-size:1.8rem}
  .progress{left:0}
  .ctabs{top:52px}
  .crow{flex-wrap:wrap}
  .ptimer{left:14px;right:auto;bottom:14px;width:158px}
  .as-launch{right:16px;bottom:74px;padding:11px 16px}
  .as-panel{right:10px;left:10px;width:auto;bottom:14px}
}
@media print{
  .sidebar,.topbar,.backtop,.pager,.overlay,.progress,.ctabs{display:none!important}
  .content{margin-left:0}
  body{background:#fff;color:#111}
  body::before{display:none}
  .reveal{opacity:1!important;transform:none!important}
  .q details>.sol{display:block!important}
  .q summary,.toolbar{display:none!important}
  .card,.phase,table,.hero,.chero,.fcard,.q{box-shadow:none;break-inside:avoid;border-color:#ccc}
  h1,h2,h3,h4,.ph,.fcard .ft,.crow .cttl,.pager .pt,b,strong{color:#111!important}
  p,li,td,.q .stem{color:#222!important}
  .hero,.chero,.phead{background:#1a1f3a!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;color:#fff!important}
}

/* ============================================================
   ULTRA POLISH, atmosphere, motion & micro-interactions
   ============================================================ */
/* animated aurora background */
.bg-aurora{position:fixed;inset:-25%;z-index:-3;pointer-events:none;filter:blur(90px);opacity:.42}
.bg-aurora::before,.bg-aurora::after{content:"";position:absolute;width:46vw;height:46vw;border-radius:50%;mix-blend-mode:screen}
.bg-aurora::before{left:6%;top:-5%;background:radial-gradient(circle,rgba(16,185,129,.6),transparent 60%);animation:aur1 26s ease-in-out infinite}
.bg-aurora::after{right:2%;bottom:-8%;background:radial-gradient(circle,rgba(232,196,119,.5),transparent 60%);animation:aur2 32s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14vw,16vh) scale(1.28)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1.12)}50%{transform:translate(-13vw,-12vh) scale(.82)}}
/* cursor spotlight */
.bg-spot{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(540px circle at var(--mx,50%) var(--my,35%),rgba(16,185,129,.12),transparent 60%)}

/* page entry */
.page{animation:pageIn .4s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* shimmering gradient text */
.hero h1 .hl,.chero h1 span,.stat .statn,.cd-n,.cmeta b{background-size:220% auto;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:220% center}}

/* staggered reveal */
.reveal{transition-delay:var(--d,0ms)}
.reveal{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}

/* button shine sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::after{left:140%}

/* card depth + hover lift everywhere */
.lcard,.crow,.fcard,.stat,.card,.phase{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s}
.fcard:hover,.stat:hover{transform:translateY(-3px);box-shadow:var(--glow-lg);border-color:var(--line2)}
.lcard{transform-style:preserve-3d;will-change:transform}

/* sheen sweep on link/chapter cards */
.lcard,.crow{}
.lcard::after,.crow::after{}
.lcard:hover{box-shadow:var(--glow-lg)}

/* nav micro-interactions */
.navlink{transition:background .16s,color .16s,padding-left .18s}
.navlink:hover{padding-left:17px}
.sbrand .logo{animation:logofloat 5s ease-in-out infinite}
@keyframes logofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* assistant launcher pulse ring */
.as-launch::before{content:"";position:absolute;inset:-3px;border-radius:30px;background:var(--grad);z-index:-1;opacity:.6;filter:blur(8px);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}

/* timer + chips subtle glow */
.tb-chip.days{box-shadow:0 0 0 1px rgba(16,185,129,.25),0 6px 18px rgba(16,185,129,.18)}

/* heading accent underline glow */
.ph{position:relative}

/* link hover underline shimmer for content links */
.page a:not(.btn):not(.navlink):not(.lcard):not(.crow):not(.chip):not(.qf-b):not(.as-web-r){background-image:linear-gradient(var(--brand),var(--brand));background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s;padding-bottom:1px}
.page a:not(.btn):not(.navlink):not(.lcard):not(.crow):not(.chip):not(.qf-b):not(.as-web-r):hover{background-size:100% 1.5px}

@media (prefers-reduced-motion: reduce){
  .bg-aurora,.sbrand .logo,.as-launch::before,.page{animation:none}
  .hero h1 .hl,.chero h1 span,.stat .statn,.cd-n,.cmeta b{animation:none}
  .reveal{transition:none}
}

/* brighter aurora + hero light sweep */
.bg-aurora{opacity:.55;filter:blur(74px)}
.bg-aurora::before{background:radial-gradient(circle,rgba(139,92,246,.72),transparent 60%)}
.bg-aurora::after{background:radial-gradient(circle,rgba(232,196,119,.6),transparent 60%)}
.hero::after,.chero::after{background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.08) 50%,transparent 64%)!important;background-size:260% 100%!important;background-repeat:no-repeat!important;opacity:1;animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
/* glow pulse on hero border */
.hero,.chero{animation:heroGlow 8s ease-in-out infinite}
@keyframes heroGlow{0%,100%{box-shadow:var(--glow-lg)}50%{box-shadow:0 0 0 1px rgba(16,185,129,.25),0 22px 70px rgba(0,0,0,.6),0 0 70px rgba(16,185,129,.28)}}
@media (prefers-reduced-motion: reduce){.hero,.chero{animation:none}.hero::after,.chero::after{animation:none}}

/* ============================================================
   EXTREME v2, emerald/gold glass, canvas, live countdown, themes
   ============================================================ */
/* heroes → deep emerald glass */
.hero,.chero{background:linear-gradient(135deg,#0c141a,#070b0f)!important}

/* glassmorphism, dialed up (cards float over the aurora) */
.card,.lcard,.fcard,.crow,.phase,.stat,.routine{background:rgba(13,18,24,.5)!important;backdrop-filter:blur(13px) saturate(1.35);-webkit-backdrop-filter:blur(13px) saturate(1.35);border-color:rgba(180,255,220,.08)!important}
.q{background:rgba(13,18,24,.46)!important}
table{background:rgba(13,18,24,.55)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sidebar{background:linear-gradient(180deg,rgba(10,18,15,.8),rgba(6,11,9,.84))!important;backdrop-filter:blur(20px) saturate(1.2)}
.topbar{backdrop-filter:blur(20px) saturate(1.3)}

/* hero constellation canvas */
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9}
.hero>*:not(.hero-canvas),.chero>*:not(.hero-canvas){position:relative;z-index:2}

/* home-hero live countdown */
.hcount{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hcount .ct{min-width:78px;text-align:center;padding:13px 15px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px)}
.hcount .cv{font-family:'Inter';font-weight:800;font-size:1.75rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:block}
.hcount .cl{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#bfe9cf;margin-top:7px;font-family:'JetBrains Mono',monospace}
.cd-live{font-size:.62rem;color:var(--accent);font-family:'JetBrains Mono',monospace;margin-top:6px;letter-spacing:.04em}

/* theme toggle */
.theme-tog{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;font-size:1.02rem;transition:.16s}
.theme-tog:hover{border-color:var(--brand);transform:rotate(18deg)}

/* a touch more life */
.stat:hover{transform:translateY(-4px) scale(1.02)}
.tb-chip.days{animation:chipGlow 4s ease-in-out infinite}
@keyframes chipGlow{0%,100%{box-shadow:0 0 0 1px rgba(52,211,153,.25),0 6px 16px rgba(52,211,153,.12)}50%{box-shadow:0 0 0 1px rgba(232,196,119,.35),0 6px 22px rgba(232,196,119,.22)}}

/* ---------- LIGHT THEME ---------- */
body.light{--bg:#eef3ee;--bg2:#e6ece5;--surface:#ffffff;--surface2:#f3f7f2;--surface3:#e9f0e8;
  --line:#dfe8dc;--line2:#cdd9c9;--ink:#12241b;--muted:#56655c;--faint:#8a988e;--glass:rgba(255,255,255,.72)}
body.light::before{background-image:radial-gradient(rgba(0,40,20,.05) 1px,transparent 1px)}
body.light .bg-aurora{opacity:.3}
body.light .bg-spot{background:radial-gradient(540px circle at var(--mx,50%) var(--my,35%),rgba(16,185,129,.10),transparent 60%)}
body.light p,body.light li,body.light td,body.light .q .stem,body.light .wktext,body.light .opts li,body.light .q .opts li,body.light .routine>div,body.light .crow .cdsc,body.light .lcard .ld,body.light .psub,body.light .stat .statl,body.light .fcard li,body.light .as-msg.bot{color:#243a2e}
body.light h1,body.light h2,body.light h3,body.light h4,body.light .ph,body.light b,body.light strong,body.light .fcard .ft,body.light .crow .cttl,body.light .lcard .lt,body.light .pager .pt,body.light .as-head b{color:#0f2017}
body.light .card,body.light .lcard,body.light .fcard,body.light .crow,body.light .phase,body.light .stat,body.light .q,body.light table,body.light .routine{background:rgba(255,255,255,.66)!important;border-color:rgba(20,50,35,.1)!important}
body.light td{border-top-color:rgba(20,50,35,.08)}
body.light tr:nth-child(even) td{background:rgba(20,60,40,.03)}
body.light .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(238,244,238,.92))!important}
body.light .navlink{color:#3b4b41}body.light .navlink:hover{background:rgba(20,60,40,.06);color:#0f2017}
body.light .topbar{background:rgba(255,255,255,.72)}
body.light .crumb{color:#56655c}body.light .crumb b{color:#0f2017}
body.light .formula{background:#eef6ec;color:#0e5a3e;border-color:#cfe6d4}
body.light .q summary{background:#eaf6ef;color:#0e6b46;border-color:#cfe6d4}
body.light .kbd{background:#eef3ec;color:#1c2b22}
body.light .hero p,body.light .chero p{color:#dfeee6}
body.light .as-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,244,.98))}
body.light .as-msg.bot{background:#f3f7f2}
body.light .tita-in,body.light .tg-num,body.light .tg-text,body.light .as-input input,body.light .pl-range{background:#f3f7f2;color:#12241b}

/* ============================================================
   PRO POLISH, line icons, custom cursor, intro splash
   ============================================================ */
/* line icons */
.ic-svg{width:1em;height:1em;display:inline-block;vertical-align:-0.16em}
.navlink .ico{display:inline-flex;align-items:center;justify-content:center;width:20px}
.navlink .ico .ic-svg{width:18px;height:18px}
.ph .em{display:inline-flex;align-items:center}
.ph .em .ic-svg{width:21px;height:21px;color:var(--brand)}
.lcard .ic{display:inline-flex;align-items:center;color:var(--brand)}
.lcard .ic .ic-svg{width:25px;height:25px}
.crow .cn,.num,.fcard .fn{font-family:'Inter',sans-serif}

/* custom cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:left,top}
.cursor-dot{width:7px;height:7px;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.cursor-ring{width:32px;height:32px;border:1.5px solid var(--brand);opacity:.55;transition:width .22s,height .22s,opacity .22s,border-color .22s}
.cursor-ring.hot{width:52px;height:52px;opacity:.9;border-color:var(--accent)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* intro splash */
#splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(circle at 50% 38%,#0c141a,#04070a);transition:opacity .6s ease}
#splash.hide{opacity:0;pointer-events:none}
#splash .sp-logo{width:76px;height:76px;border-radius:21px;display:grid;place-items:center;font-family:'Inter';font-weight:700;font-size:2.1rem;color:#04130d;
  background:var(--grad);box-shadow:0 16px 50px rgba(16,185,129,.55),inset 0 0 0 1px rgba(255,255,255,.2);animation:spPop .8s cubic-bezier(.2,.9,.3,1.5) both}
#splash .sp-t{font-family:'Inter';font-weight:700;font-size:1.55rem;color:#fff;letter-spacing:-.01em;opacity:0;animation:spFade .6s ease .25s both}
#splash .sp-s{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);opacity:0;animation:spFade .6s ease .45s both}
#splash .sp-bar{width:170px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
#splash .sp-bar i{display:block;height:100%;width:0;background:var(--grad);animation:spBar 1.3s ease .3s forwards}
@keyframes spPop{from{transform:scale(.55) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes spFade{to{opacity:1}}
@keyframes spBar{to{width:100%}}
@media (prefers-reduced-motion: reduce){#splash{display:none}}

/* ============================================================
   MAX POLISH, grain, scroll-snap, flip countdown, command palette
   ============================================================ */
/* subtle film grain */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll-padding for anchored jumps (scroll-snap removed: it fought normal scrolling) */
html{scroll-padding-top:80px}
.hero,.chero,.page>section,.page>h2.ph{scroll-margin-top:80px}

/* number-flip countdown */
.hcount .cv{display:inline-block;transform-origin:center}
.hcount .cv.flip{animation:flip3d .55s cubic-bezier(.2,.85,.25,1)}
@keyframes flip3d{0%{transform:perspective(340px) rotateX(-90deg);opacity:.1}55%{opacity:1}100%{transform:perspective(340px) rotateX(0);opacity:1}}

/* scroll hint in hero */
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:22px;height:34px;border:2px solid rgba(255,255,255,.35);border-radius:12px;display:flex;justify-content:center;padding-top:6px;transition:opacity .4s}
.scroll-hint i{width:3px;height:7px;border-radius:3px;background:#fff;animation:scrolldot 1.5s ease-in-out infinite}
.scroll-hint.hide{opacity:0;pointer-events:none}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%{opacity:0;transform:translateY(8px)}}

/* command palette (⌘K) */
.tb-kbd{font-size:.66rem;font-weight:700;color:var(--muted);background:var(--surface2);border:1px solid var(--line2);padding:6px 11px;border-radius:9px;cursor:pointer;font-family:'JetBrains Mono',monospace}
.tb-kbd:hover{border-color:var(--brand);color:var(--ink)}
.cmdk{position:fixed;inset:0;z-index:10001;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(4,8,6,.62);backdrop-filter:blur(7px)}
.cmdk.open{display:flex;animation:asIn .16s ease}
.cmdk-box{width:min(640px,92vw);background:var(--glass);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--glow-lg);overflow:hidden}
.cmdk-box input{width:100%;border:none;background:transparent;color:var(--ink);font-family:'Inter',sans-serif;font-size:1.12rem;padding:18px 22px;outline:none;border-bottom:1px solid var(--line2)}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:7px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;cursor:pointer}
.cmdk-item .ci-ic{width:18px;height:18px;color:var(--brand);display:inline-flex;flex:0 0 18px}
.cmdk-item .ci-t{color:var(--ink);font-weight:600;font-size:.93rem}
.cmdk-item .ci-g{margin-left:auto;font-size:.62rem;color:var(--faint);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.cmdk-item.sel,.cmdk-item:hover{background:var(--grad-soft)}
.cmdk-item.sel .ci-t{color:#fff}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted)}
.cmdk-foot{padding:10px 18px;border-top:1px solid var(--line2);font-size:.64rem;color:var(--faint);font-family:'JetBrains Mono',monospace;display:flex;gap:14px}

/* tighter, well-aligned text */
.page p{margin:.5em 0}
.page li{margin:.34em 0}
.callout{line-height:1.56}
.callout b{margin-bottom:2px}
.card>p:first-child,.callout>b:first-child{margin-top:0}
.card>p:last-child{margin-bottom:0}

/* ============================================================
   TIGHTEN, run-in callout titles, tap-to-expand, minutes timer
   ============================================================ */
/* run-in callout titles (no more title-on-its-own-line) */
.callout b{display:inline;color:var(--accent);margin:0}
.callout b:first-child::after{content:":";color:var(--accent);margin-right:6px}

/* long callouts render in full (tap-to-collapse removed; it clipped sentences mid-line) */

/* minutes input in timer */
.ptimer .pt-row{align-items:center}
.pt-min-in{width:44px;text-align:center;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:.82rem;padding:6px 2px;-moz-appearance:textfield}
.pt-min-in::-webkit-outer-spin-button,.pt-min-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pt-min-lbl{font-size:.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* keep paragraphs flush-left & tight */
.page p,.page li,.psub,.wktext,.cdsc,.ld{text-align:left}
.callout{text-align:left}

/* ============================================================
   LOGO + MENU ALIGNMENT FIX
   ============================================================ */
/* transparent logo mark (no background) */
.sbrand .logo{background:none!important;box-shadow:none!important;width:42px;height:42px;display:grid;place-items:center}
.logo-mk{width:36px;height:36px;display:block;filter:drop-shadow(0 3px 10px rgba(52,211,153,.45))}
#splash .sp-logo{background:none!important;box-shadow:none!important;width:auto;height:auto}
#splash .sp-logo .logo-mk{width:74px;height:74px;filter:drop-shadow(0 6px 22px rgba(52,211,153,.5))}

/* menu labels: keep one line, align icon + text cleanly */
.navlink{align-items:flex-start;line-height:1.25;font-size:.85rem}
.navlink .ico{margin-top:1px;flex:0 0 20px}
.navgroup.coll .gtoggle{align-items:flex-start;line-height:1.3;letter-spacing:.1em;font-size:.58rem}
.navgroup.coll .gchev{margin-top:1px;flex:0 0 auto}

/* ============================================================
   SIDEBAR TARGET-PERCENTILE SELECTOR (replaces countdown)
   ============================================================ */
.tgtsel{margin:4px 16px 14px;padding:13px 15px;border-radius:14px;background:var(--grad-soft);border:1px solid var(--line2);position:relative;overflow:hidden}
.tgtsel::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--grad);filter:blur(26px);opacity:.35}
.tgtsel .ts-l{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#bfe9cf;font-family:'JetBrains Mono',monospace;font-weight:700;position:relative}
.tgtsel .ts-n{display:flex;align-items:baseline;gap:5px;margin:5px 0 2px;position:relative}
.tgtsel .ts-n b{font-family:'Inter',sans-serif;font-weight:700;font-size:2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tgtsel .ts-n span{font-size:.68rem;color:var(--muted);font-family:'JetBrains Mono',monospace}
.ts-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:var(--surface3);outline:none;margin:9px 0 4px;position:relative}
.ts-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 0 8px var(--brand)}
.ts-range::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--brand);cursor:pointer}
.ts-presets{display:flex;gap:5px;margin-top:6px;position:relative}
.ts-p{flex:1;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;padding:5px 0;border-radius:7px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:.14s}
.ts-p:hover{color:#fff;border-color:var(--brand)}
.ts-p.on{background:var(--grad);color:#06140d;border-color:transparent}
.ts-sub{font-size:.54rem;color:var(--faint);font-family:'JetBrains Mono',monospace;margin-top:7px;letter-spacing:.04em;position:relative}

/* selector, high-contrast rebuild (number + steppers + presets) */
.tgtsel{margin:4px 16px 14px;padding:13px 15px 14px}
.tgtsel .ts-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 8px;position:relative}
.tgtsel .ts-n{display:flex;align-items:baseline;gap:5px}
.tgtsel .ts-n b{font-family:'Inter',sans-serif;font-weight:700;font-size:2rem;line-height:1;color:#fff;-webkit-text-fill-color:initial;background:none}
.tgtsel .ts-n span{font-size:.66rem;color:var(--accent);font-family:'JetBrains Mono',monospace}
.ts-step{width:32px;height:32px;flex:0 0 32px;border-radius:9px;border:1px solid var(--line2);background:var(--surface2);color:var(--brand);font-size:1.2rem;font-weight:700;cursor:pointer;line-height:1;transition:.14s}
.ts-step:hover{background:var(--grad);color:#06140d;border-color:transparent}
.ts-presets{display:flex;gap:5px;position:relative}
.ts-p{flex:1;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;padding:6px 0;border-radius:7px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;transition:.14s}
.ts-p:hover{color:#fff;border-color:var(--brand)}
.ts-p.on{background:var(--grad);color:#06140d;border-color:transparent}

/* ============================================================
   FIX: sidebar items must not shrink (was clipping the selector)
   ============================================================ */
.sidebar > *{flex-shrink:0}

/* animated, clickable brand logo */
.sbrand{cursor:pointer;user-select:none;transition:opacity .15s}
.sbrand:hover{opacity:.9}
.sbrand:hover .logo-mk{filter:drop-shadow(0 4px 16px rgba(52,211,153,.75))}
.logo-mk{animation:logobob 4.5s ease-in-out infinite}
.logo-mk path{stroke-dasharray:56;animation:logodraw 3.4s ease-in-out infinite}
.logo-mk circle{animation:logodot 3.4s ease-in-out infinite}
@keyframes logobob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes logodraw{0%{stroke-dashoffset:56}34%{stroke-dashoffset:0}72%{stroke-dashoffset:0}100%{stroke-dashoffset:-56}}
@keyframes logodot{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.logo-mk,.logo-mk path,.logo-mk circle{animation:none;stroke-dashoffset:0}}

/* ============================================================
   PRO LOGO (gauge) + refined wordmark + live readout
   ============================================================ */
/* neutralise the old arrow animations */
.logo-mk{animation:none!important}
.logo-mk path{animation:none!important;stroke-dasharray:none}
.logo-mk circle{animation:none!important}
/* gauge: arc draws once, dot pulses gently */
.logo-mk .lg-arc{stroke-dasharray:92;stroke-dashoffset:92;animation:arcDraw 1.5s cubic-bezier(.3,.8,.3,1) .15s forwards!important}
.logo-mk .lg-dot{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.6s ease-in-out 1.6s infinite!important}
@keyframes arcDraw{to{stroke-dashoffset:0}}
@keyframes dotPulse{0%,100%{opacity:.55}50%{opacity:1}}
.sbrand:hover .logo-mk{filter:drop-shadow(0 0 11px rgba(52,211,153,.65))}
@media (prefers-reduced-motion: reduce){.logo-mk .lg-arc{stroke-dashoffset:0!important;animation:none!important}.logo-mk .lg-dot{animation:none!important}}

/* refined wordmark */
.sbrand .logo{width:40px;height:40px}
.logo-mk{width:38px;height:38px}
.sbrand .bt{font-family:'Inter',sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:#fff;line-height:1.05}
.sbrand .bs{font-size:.58rem;color:var(--faint);letter-spacing:.34em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-top:2px}

/* selector live readout */
.ts-calc{font-size:.6rem;color:#cfe9d8;font-family:'JetBrains Mono',monospace;margin-top:9px;letter-spacing:.02em;position:relative}
.ts-calc b{color:var(--accent);font-weight:700;font-size:.72rem}

/* ============================================================
   TOP-NOTCH LOGO (A / summit peak) + clean wordmark
   ============================================================ */
.logo-mk .lg-peak{stroke-dasharray:66;stroke-dashoffset:66;animation:peakDraw 1.4s cubic-bezier(.3,.8,.3,1) .15s forwards!important}
.logo-mk .lg-bar{stroke-dasharray:16;stroke-dashoffset:16;animation:peakDraw .55s ease 1.05s forwards!important}
.logo-mk .lg-apex{transform-box:fill-box;transform-origin:center;animation:dotPulse 2.6s ease-in-out 1.7s infinite!important}
@keyframes peakDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.logo-mk .lg-peak,.logo-mk .lg-bar{stroke-dashoffset:0!important;animation:none!important}.logo-mk .lg-apex{animation:none!important}}
.sbrand{align-items:center}
.sbrand .logo{width:40px;height:40px}
.logo-mk{width:38px;height:38px}
.sbrand .bt{font-family:'Inter',sans-serif;font-weight:700;font-size:1.42rem;letter-spacing:-.015em;color:#fff;line-height:1}

/* ensure the full A renders (no draw-offset hiding the crossbar); subtle glow instead */
.logo-mk .lg-peak,.logo-mk .lg-bar{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
.logo-mk{animation:logoGlow 3.4s ease-in-out infinite!important}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 1px rgba(52,211,153,.15))}50%{filter:drop-shadow(0 0 7px rgba(52,211,153,.55))}}
.logo-mk .lg-apex{animation:dotPulse 2.6s ease-in-out infinite!important}

/* ============================================================
   APP-ICON LOGO (gradient tile + "A"), final, clean
   ============================================================ */
.sbrand .logo{width:42px;height:42px;background:none!important;box-shadow:none!important;display:grid;place-items:center}
.logo-mk{width:40px!important;height:40px!important;border-radius:12px;transition:transform .18s ease, filter .18s ease;animation:tileGlow 4.5s ease-in-out infinite!important}
.logo-mk rect,.logo-mk path,.logo-mk circle{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
@keyframes tileGlow{0%,100%{filter:drop-shadow(0 4px 12px rgba(16,185,129,.32))}50%{filter:drop-shadow(0 6px 18px rgba(232,196,119,.42))}}
.sbrand:hover .logo-mk{transform:scale(1.06) rotate(-2deg);filter:drop-shadow(0 6px 20px rgba(52,211,153,.6))!important}
#splash .sp-logo .logo-mk{width:76px!important;height:76px!important;border-radius:22px}

/* Percentyle wordmark sizing */
.sbrand .bt{font-size:1.24rem!important;letter-spacing:-.01em}

/* ============================================================
   SLEEK MINIMAL LIGHT THEME (final override), student-friendly
   ============================================================ */
body{
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(176,125,36,.05), transparent 60%),
    var(--bg)!important;
}
/* faint paper grain + editorial grid (made-by-ac) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(to right, rgba(22,21,15,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,21,15,.028) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size:96px 96px, 96px 96px, 180px 180px;
  display:block!important;}
.bg-aurora,.bg-spot,.grain,.hero-canvas{display:none!important}

/* editorial red accent on the hero keyword (made-by-ac style) */
.hero h1 .hl,.chero h1 span{
  -webkit-text-fill-color:initial!important;background:none!important;color:var(--accent)!important;
  padding:0;border-radius:0;animation:none!important;}
/* target rows: subtle gold-stamp tint, not a loud highlight */
tr.hot td{background:var(--marker-solid)!important;box-shadow:inset 2px 0 0 var(--accent2)}
mark,.mk{background:var(--marker);color:var(--ink);padding:0 .12em;border-radius:2px}
/* inline links carry the single red pop */
a{color:var(--accent)}
.page a:not(.btn):not(.navlink):not(.crumb):hover{text-decoration:underline;text-underline-offset:3px}
/* badges/kickers as gold stamps */
.hero .kick,.chero .ctag,.kick{background:transparent!important;border:1px solid var(--accent2)!important;color:#9c7f33!important;letter-spacing:.14em}

/* text */
h1,h2,h3,h4,.ph,b,strong,.fcard .ft,.crow .cttl,.lcard .lt,.pager .pt{color:var(--ink)}
p,li,td,.q .stem,.q .opts li,.routine>div,.wktext{color:#2b3645}
.psub,.crow .cdsc,.lcard .ld,.stat .statl,.cmeta span,.ts-sub,.ts-calc,.crumb{color:var(--muted)}
h4{color:var(--brand)}
h3::before{box-shadow:none}
/* gradient text -> solid accent */
.stat .statn,.cd-n,.cmeta b{-webkit-text-fill-color:initial!important;background:none!important;color:var(--brand)!important;animation:none!important}

/* sidebar */
.sidebar{background:#f1ece2!important;border-right:1px solid var(--line);backdrop-filter:none}
.navlink{color:var(--muted)}
.navlink:hover{background:var(--surface2);color:var(--ink)}
.navlink.active{background:var(--grad-soft);color:var(--brand);box-shadow:inset 0 0 0 1px var(--line2)}
.navlink.active::before{box-shadow:none}
.navlink .ico{filter:none}
.navgroup .gl,.navgroup.coll .gtoggle{color:var(--faint)}
.sfoot{color:var(--muted);border-top-color:var(--line)}.sfoot b{color:var(--ink)}

/* topbar */
.topbar{background:var(--glass);border-bottom:1px solid var(--line)}
.crumb b{color:var(--ink)}
.tb-kbd,.theme-tog,.hamb{background:var(--surface);color:var(--brand);border-color:var(--line2)}
.hamb{color:var(--ink)}
.tb-chip.days{background:var(--grad-soft);color:var(--brand);border-color:var(--line2);animation:none!important;box-shadow:none}

/* hero as a light card */
.hero,.chero{background:linear-gradient(135deg,#fbf9f4,#f0ebe1)!important;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);animation:none!important}
.hero::before,.hero::after,.chero::before,.chero::after{display:none!important}
.hero h1,.chero h1{color:var(--ink)}
.hero p,.chero p{color:var(--muted)}
.hero .kick,.chero .ctag{background:var(--grad-soft);border:1px solid var(--line2);color:var(--brand)}
.hero .stat{background:var(--surface2)!important;border-color:var(--line)!important}

/* surfaces */
.card,.lcard,.fcard,.crow,.phase,.stat,.q,table,.routine{background:var(--surface)!important;border-color:var(--line)!important;backdrop-filter:none!important;box-shadow:var(--shadow)}
.lcard::before,.lcard::after,.crow::after{display:none!important}
.lcard:hover,.fcard:hover,.stat:hover,.crow:hover{box-shadow:var(--glow-lg);transform:translateY(-2px)}
tr:nth-child(even) td{background:var(--surface2)}
th{background:var(--grad-soft);color:var(--brand);border-bottom:1px solid var(--line2)}
td{border-top-color:var(--line)}
.num,.fcard .fn,.crow .cn{background:var(--grad);color:#fff;box-shadow:none}

/* buttons */
.btn{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn::after{display:none}
.btn.ghost{background:var(--surface);color:var(--brand);border:1px solid var(--line2)}
.btnt,.qf-b,.tg-allbtn,.tita-check,.cmdk .tb-kbd{background:var(--surface);color:var(--brand);border-color:var(--line2)}
.qf-b.on{background:var(--grad);color:#fff;border-color:transparent}
.qf-b[data-f="easy"].on{background:var(--green)}.qf-b[data-f="mod"].on{background:var(--amber)}.qf-b[data-f="hard"].on{background:var(--red)}

/* formula / code / inputs */
.formula{background:#f1ece1;border-color:var(--line2);border-left-color:var(--brand);color:var(--brand2)}
.kbd{background:var(--surface2);border-color:var(--line2);color:var(--ink)}
.tita-in,.tg-num,.tg-text,.as-input input,.pt-min-in,.tg-code{background:var(--surface2);border-color:var(--line2);color:var(--ink)}

/* questions */
.q summary{background:var(--grad-soft);color:var(--brand);border-color:var(--line2)}
.q .sol{background:#eef5ec;border-color:#d3e3cf;border-left-color:var(--green);color:#283a2a}
.q .opts li{background:var(--surface2);border-color:var(--line)}
.q .opts li.opt-correct{background:#e7f3e4!important;border-color:var(--green)!important;color:#2c5a35}
.q .opts li.opt-wrong{background:#f8e7e3!important;border-color:var(--red)!important;color:#8a382e}

/* callouts */
.callout{border:1px solid var(--line2);border-left:3px solid var(--brand);background:var(--grad-soft)}
.callout.warn{border-left-color:var(--red);background:rgba(220,77,77,.06)}
.callout.good{border-left-color:var(--green);background:rgba(22,163,74,.06)}
.callout.info{border-left-color:var(--brand);background:var(--grad-soft)}
.callout b{color:var(--brand)}

/* phases */
.p1,.p2,.p3{color:#fff}
.wknum{color:var(--brand)}.wk{border-top-color:var(--line)}

/* selector */
.tgtsel{background:var(--grad-soft)!important;border-color:var(--line2)!important}
.tgtsel::after{display:none}
.tgtsel .ts-l{color:var(--brand)}
.tgtsel .ts-n b{color:var(--ink)!important}
.tgtsel .ts-n span{color:var(--brand)}
.ts-step,.ts-p{background:var(--surface);color:var(--brand);border-color:var(--line2)}
.ts-p.on{background:var(--grad);color:#fff;border-color:transparent}
.ts-calc b{color:var(--brand)}

/* logo (light, no tile, no glow) */
.sbrand .logo{background:none!important;box-shadow:none!important}
.logo-mk{width:34px!important;height:34px!important;border-radius:0;animation:none!important;filter:none!important;transition:transform .18s ease}
.logo-mk rect,.logo-mk path,.logo-mk circle{animation:none!important}
.sbrand:hover .logo-mk{transform:scale(1.08) rotate(-3deg);filter:none!important}
.sbrand .bt{color:var(--ink)}

/* command palette / assistant / timer / splash light */
.cmdk{background:rgba(20,30,45,.35)}
.cmdk-box{background:var(--surface);border-color:var(--line2)}
.cmdk-box input,.cmdk-item .ci-t{color:var(--ink)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--grad-soft)}
.as-panel{background:var(--surface);border-color:var(--line2)}
.as-head{background:var(--grad-soft)}
.as-msg.bot{background:var(--surface2);border-color:var(--line);color:var(--ink)}
.as-web-r{background:var(--surface2);border-color:var(--line)}
.ptimer{background:var(--glass);border-color:var(--line2)}
.ptimer .pt-disp{-webkit-text-fill-color:initial!important;background:none!important;color:var(--brand)!important}
.pt-b{background:var(--surface);color:var(--ink);border-color:var(--line2)}
.pt-head{background:var(--grad-soft)}
#splash{background:radial-gradient(circle at 50% 38%,#fbf9f4,#ece7dc)}
#splash .sp-t{color:var(--ink)}
#splash .sp-s{color:var(--brand)}
#splash .sp-bar{background:var(--surface3)}
#splash .sp-logo .logo-mk{filter:none!important}

/* cursor subtle */
.cursor-dot{background:var(--brand);box-shadow:none}
.cursor-ring{border-color:var(--brand);opacity:.35;mix-blend-mode:normal}

/* scrollbar */
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#d0c4a6;border:2px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:#bfb08c}

/* ============================================================
   ANIMATED PERCENTYLE WORDMARK + % logo intro
   ============================================================ */
.bt span,.sp-t span{display:inline-block;will-change:transform,opacity;
  animation:wIn .5s cubic-bezier(.2,.8,.2,1) both calc(.25s + var(--i)*.05s), wWave 5s ease-in-out infinite calc(var(--i)*.09s)}
@keyframes wIn{from{opacity:0;transform:translateY(10px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes wWave{0%,80%,100%{color:var(--ink)}86%{color:var(--brand)}}
.sp-t span{animation-duration:.6s,5s}

/* % mark intro: slash draws, squares pop */
.logo-mk path{stroke-dasharray:30;stroke-dashoffset:30;animation:lgSlash .6s ease .35s forwards!important}
.logo-mk rect:nth-of-type(1){transform-box:fill-box;transform-origin:center;animation:lgPop .5s cubic-bezier(.2,.9,.3,1.7) both .15s!important}
.logo-mk rect:nth-of-type(2){transform-box:fill-box;transform-origin:center;animation:lgPop .5s cubic-bezier(.2,.9,.3,1.7) both .55s!important}
@keyframes lgSlash{to{stroke-dashoffset:0}}
@keyframes lgPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.sbrand:hover .logo-mk path{animation:lgSlash .5s ease forwards!important}
@media (prefers-reduced-motion: reduce){.bt span,.sp-t span,.logo-mk path,.logo-mk rect{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}}

/* ============================================================
   BLEND THEME (final), editorial type + soft cards + paper
   serif headlines · mono labels · restrained red accent
   ============================================================ */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important}

/* serif display for headings + big numbers (Fraunces) */
h1,h2,h3,h4,h5,.ph,.brand .bt,.sbrand .bt,
.hero h1,.chero h1,.stat .statn,.lcard .lt,.crow .cttl,
.fcard .ft,.fcard .ftitle,.cd-n,.countdown .cd-n,.num,.crow .cn,.fcard .fn,
.pager .pt,.tgtsel .ts-n b,#tsN,.ptimer .pt-disp,#splash .sp-t,.hcount .cd-n{
  font-family:'Fraunces',Georgia,serif!important;font-weight:600!important;letter-spacing:-.01em}
.hero h1,.chero h1{font-size:3.4rem!important;line-height:1.04!important;letter-spacing:-.02em!important;font-weight:600!important}
.ph{font-size:1.8rem!important;font-weight:600!important}
.lcard .lt,.crow .cttl{font-size:1.15rem!important;font-weight:600!important}

/* mono small labels (IBM Plex Mono, uppercase) */
.hero .kick,.chero .ctag,.kick,.stat .statl,.hero .stat .statl,.navgroup .gl,
.tgtsel .ts-l,.crumb,.lcard .go,.crow .cgo,.chip,.tag,.q .yr,.q .qm,.ts-calc,
.tb-chip,.phpill,.fcard .fh .tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace!important}
.hero .kick,.chero .ctag,.kick,.stat .statl,.navgroup .gl,.tgtsel .ts-l,.crumb{
  text-transform:uppercase;letter-spacing:.14em!important;font-weight:500!important}
.lcard .go,.crow .cgo{text-transform:none;letter-spacing:.02em!important;font-weight:500!important;color:var(--accent)!important}

/* UI controls stay clean sans (override the blanket Space Grotesk) */
.btn,.navlink,.btnt,.qf-b,.ts-step,.ts-p,.tb-kbd,.cmdk-box input,.as-input input{
  font-family:'Inter',sans-serif!important}

/* hero keyword, restrained red italic serif */
.hero h1 .hl,.chero h1 span{
  font-style:italic!important;font-weight:600!important;color:var(--accent)!important;
  background:none!important;-webkit-text-fill-color:initial!important;animation:none!important;padding:0}

/* gold-stamp kickers */
.hero .kick,.chero .ctag,.kick{
  background:transparent!important;border:1px solid var(--accent2)!important;color:#9c7f33!important;border-radius:6px!important}

/* soft icon-chip on link cards (Notion comfort) */
.lcard .ic{display:inline-flex!important;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;background:var(--surface2);color:var(--ink)!important;margin-bottom:6px}
.lcard .ic .ic-svg,.lcard .ic svg{width:19px;height:19px}
.lcard::before,.lcard::after{display:none!important}
.lcard{border-radius:14px}

/* numbered badges: ink, serif, soft */
.num,.fcard .fn,.crow .cn{background:var(--grad)!important;color:#fbf9f4!important}

/* stats: hairline rhythm, serif numerals */
.stat .statn{color:var(--ink)!important}
.stat .statl{color:var(--muted)!important}

/* section headers a touch airier */
.ph{margin-top:48px!important}

/* breadcrumb uppercase mono */
.crumb{font-size:.72rem!important;letter-spacing:.08em!important}

/* sidebar active: soft card with red tick */
.navlink.active{box-shadow:var(--shadow)!important}
.navlink.active .ico,.navlink.active .ic-svg{color:var(--accent)!important}

/* ============================================================
   CONTRAST FIXES (paper theme), kill dark-era light text that
   was left invisible on the warm paper background.
   ============================================================ */

/* percentile/target highlight rows: dark ink on the gold stamp */
tr.hot td{color:var(--ink)!important}
tr.hot td b{color:var(--ink)!important}

/* scroll-to-top arrow: was white on a light disc -> ink, with a clear frame */
.backtop{background:var(--surface);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--glow-lg)}
.backtop:hover{background:var(--grad);color:#fbf9f4;border-color:transparent}

/* AI assistant: drop the emerald glow (clashed with the editorial red/gold)
   and fix the white-on-light text the light theme missed */
.as-launch{box-shadow:0 10px 28px rgba(27,26,22,.22),inset 0 0 0 1px rgba(255,255,255,.10)}
.as-launch:hover{box-shadow:0 14px 34px rgba(27,26,22,.28),inset 0 0 0 1px rgba(255,255,255,.12)}
.as-head b{color:var(--ink)}
.as-msg.bot b{color:var(--ink)}
.as-set-t{color:var(--ink)}
.as-chip:hover{background:var(--surface3);color:var(--ink)}

/* planner slider thumb: ink halo instead of the old emerald one */
.pl-range::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(27,26,22,.12)}
.pl-range::-moz-range-thumb{box-shadow:0 0 0 4px rgba(27,26,22,.12)}

/* sticky chapter tab bar: opaque paper bg (was a see-through dark gradient that
   let scrolling text bleed through it, looked broken on every chapter page) */
.ctabs{background:var(--bg)!important;backdrop-filter:none!important;box-shadow:0 10px 16px -12px rgba(22,18,12,.28)}

/* remaining white-on-light text the theme migration missed */
.tg-mode b{color:var(--ink)!important}
.cmdk-item.sel .ci-t{color:var(--ink)!important}

/* home hero countdown: pale-mint labels + white-translucent tiles were dark-era;
   make labels readable and tiles solid on the light hero */
.hcount .cl{color:var(--muted)!important}
.hcount .ct{background:var(--surface2)!important;border-color:var(--line)!important;backdrop-filter:none!important}

/* ============================================================
   FORM CONTROLS, native select/checkbox/radio restyled to the
   editorial paper theme (was raw OS chrome)
   ============================================================ */
/* dropdowns: kill OS chrome, add a paper box + ink chevron */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:var(--surface)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316150f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 13px center!important;background-size:11px!important;
  border:1px solid var(--line2);border-radius:10px;
  padding:9px 34px 9px 13px!important;color:var(--ink);
  font-family:'Inter',sans-serif;font-size:.9rem;line-height:1.4;cursor:pointer;outline:none;transition:.14s}
select:hover{border-color:var(--ink)}
select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--red-soft)}

/* checkboxes: paper square, red tick when on */
input[type=checkbox]:not([hidden]){
  -webkit-appearance:none;appearance:none;width:18px;height:18px;flex:0 0 18px;margin:0;
  border:1px solid var(--line2);border-radius:5px;background:var(--surface);
  cursor:pointer;position:relative;vertical-align:middle;transition:.12s}
input[type=checkbox]:not([hidden]):hover{border-color:var(--ink)}
input[type=checkbox]:not([hidden]):checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:not([hidden]):checked::after{content:"";position:absolute;left:5px;top:2px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=checkbox]:not([hidden]):focus-visible{box-shadow:0 0 0 3px var(--red-soft)}

/* radios: paper circle, red dot when on (hidden ones unaffected) */
input[type=radio]:not([hidden]){
  -webkit-appearance:none;appearance:none;width:18px;height:18px;flex:0 0 18px;margin:0;
  border:1px solid var(--line2);border-radius:50%;background:var(--surface);
  cursor:pointer;position:relative;vertical-align:middle;transition:.12s}
input[type=radio]:not([hidden]):checked{border-color:var(--accent)}
input[type=radio]:not([hidden]):checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}

/* number steppers + their checkbox-label text colour fix */
input[type=number]{accent-color:var(--accent)}
.tg-check{color:var(--ink);align-items:center}

/* clickable answer options: keep ink text on hover/select (was flipping to
   invisible white on the light theme) */
.q .opts li.opt-click:hover{color:var(--ink);background:var(--surface3);border-color:var(--ink)}

/* ============================================================
   THEMED MODAL, replaces native confirm()/alert()
   ============================================================ */
.uic-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(22,18,12,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.uic-overlay.show{opacity:1}
.uic-box{background:var(--surface);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--glow-lg);
  max-width:430px;width:100%;padding:22px 22px 18px;transform:translateY(10px) scale(.98);transition:transform .18s}
.uic-overlay.show .uic-box{transform:none}
.uic-msg{margin:0 0 20px;font-family:'Inter',sans-serif;font-size:1rem;line-height:1.55;color:var(--ink);font-weight:500}
.uic-row{display:flex;justify-content:flex-end;gap:10px}
.uic-btn{font-family:'Inter',sans-serif;font-size:.86rem;font-weight:600;padding:8px 20px;border-radius:30px;
  cursor:pointer;border:1px solid var(--line2);transition:.14s}
.uic-cancel{background:var(--surface);color:var(--ink)}
.uic-cancel:hover{border-color:var(--ink)}
.uic-ok{background:var(--accent);color:#fff;border-color:var(--accent)}
.uic-ok:hover{filter:brightness(1.08)}
.uic-ok:focus-visible{box-shadow:0 0 0 3px var(--red-soft)}

/* ============================================================
   IN-PAGE TEST RUNNER + RESULTS (mock-platform style)
   ============================================================ */
.rn-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:54px;z-index:30;background:var(--bg);padding:12px 0;margin-bottom:4px;border-bottom:1px solid var(--line)}
.rn-tl{display:flex;align-items:center;gap:14px}
.rn-pos{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;color:var(--ink)}
.rn-sec{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rn-tr{display:flex;align-items:center;gap:12px}
.rn-timer{font-family:'JetBrains Mono',monospace;font-size:1.15rem;font-weight:700;color:var(--accent);min-width:64px;text-align:center}
.rn-grid{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:start}
@media(max-width:760px){.rn-grid{grid-template-columns:1fr}}
.rn-qcard{margin:0}
.rn-qhead{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.rn-stem{font-size:1.04rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;margin-bottom:18px}
.rn-opts{display:flex;flex-direction:column;gap:9px}
.rn-opt{text-align:left;font-size:.95rem;padding:12px 15px;border:1px solid var(--line2);border-radius:11px;
  background:var(--surface);color:var(--ink);cursor:pointer;transition:.12s;font-family:'Inter',sans-serif}
.rn-opt:hover{border-color:var(--ink);background:var(--surface2)}
.rn-opt.sel{border-color:var(--accent);background:var(--red-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.rn-titawrap{display:flex;flex-direction:column;gap:6px}
.rn-titalbl{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rn-tita{max-width:280px}
.rn-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.rn-nav .btn{margin-left:0}.rn-nav #rnNext{margin-left:auto}
.rn-side{margin:0;position:sticky;top:120px}
.rn-sidet{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.rn-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.rn-pbtn{aspect-ratio:1;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink);
  font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;cursor:pointer;transition:.1s}
.rn-pbtn:hover{border-color:var(--ink)}
.rn-pbtn.seen{background:var(--surface3)}
.rn-pbtn.done{background:var(--green);color:#fff;border-color:var(--green)}
.rn-pbtn.marked{background:var(--amber);color:#fff;border-color:var(--amber)}
.rn-pbtn.cur{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)}
.rn-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:.72rem;color:var(--muted)}
.rn-legend span{display:flex;align-items:center;gap:5px}
.rn-legend .lg{width:12px;height:12px;border-radius:3px;border:1px solid var(--line2);background:var(--surface)}
.rn-legend .lg.done{background:var(--green);border-color:var(--green)}
.rn-legend .lg.marked{background:var(--amber);border-color:var(--amber)}
.rn-legend .lg.seen{background:var(--surface3)}

/* results */
.rn-score{text-align:center}
.rn-bigscore{font-family:'Fraunces',serif;font-size:3.4rem;font-weight:600;color:var(--ink);line-height:1}
.rn-bigscore small{font-size:1rem;color:var(--muted);font-family:'Inter',sans-serif;margin-left:6px}
.rn-scgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}
@media(max-width:620px){.rn-scgrid{grid-template-columns:repeat(2,1fr)}}
.rn-scgrid .statn{font-family:'Fraunces',serif}
.rv{border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--surface)}
.rv.rv-right{border-left-color:var(--green)}
.rv.rv-wrong{border-left-color:var(--accent)}
.rv.rv-skip{border-left-color:var(--amber)}
.rv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rv-n{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink)}
.rv-badge{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:700}
.rv-right .rv-badge{color:var(--green)}.rv-wrong .rv-badge{color:var(--accent)}.rv-skip .rv-badge{color:var(--amber)}
.rv-stem{font-size:.95rem;line-height:1.55;color:var(--ink);white-space:pre-wrap;margin-bottom:8px}
.rv-opts{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px}
.rv-opts li{font-size:.86rem;padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink)}
.rv-opts li.opt-correct{background:#e7f3e4;border-color:var(--green);color:#2c5a35;font-weight:600}
.rv-opts li.opt-wrong{background:#f8e7e3;border-color:var(--accent);color:#8a382e;font-weight:600}
.rv-ans{font-size:.86rem;color:var(--muted);margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
.rv-ans b{color:var(--ink)}

/* ============================================================
   TEST GENERATOR, collapsible topic accordion
   ============================================================ */
.tg-secband{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:20px 0 8px}
.tg-acc{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--surface);overflow:hidden}
.tg-acch{display:flex;align-items:center;gap:11px;padding:12px 15px;cursor:pointer;user-select:none;transition:.12s}
.tg-acch:hover{background:var(--surface2)}
.tg-accchev{color:var(--muted);font-size:.78rem;transition:transform .15s}
.tg-acc.open .tg-accchev{transform:rotate(90deg)}
.tg-accname{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.02rem;color:var(--ink)}
.tg-acccount{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted)}
.tg-acccount b{color:var(--accent)}
.tg-acch .tg-allbtn{margin-left:auto}
.tg-accbody{display:none;flex-wrap:wrap;gap:7px;padding:2px 15px 14px}
.tg-acc.open .tg-accbody{display:flex}

/* DILR set caselet (runner) + solution (review) */
.rn-caselet{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:.92rem;line-height:1.55;color:var(--ink);max-height:340px;overflow:auto}
.rn-cstag{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.rn-caselet table,.rv-cs table{margin:8px 0;font-size:.84rem}
.rn-caselet p{margin:6px 0}
.rv-cs{margin:0 0 8px;font-size:.9rem}
.rv-cs summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:.82rem;font-family:'IBM Plex Mono',monospace}
.rv-cs p{margin:6px 0}
.rv-sol{font-size:.88rem;line-height:1.55;color:#283a2a;margin-top:8px;padding:9px 12px;background:#eef5ec;
  border:1px solid #d3e3cf;border-left:3px solid var(--green);border-radius:8px}

/* full-screen test mode */
body.tg-fs #runner{position:fixed;inset:0;z-index:1000;background:var(--bg);overflow-y:auto;padding:14px 24px 48px;margin:0}
body.tg-fs #runner .rn-grid{max-width:1120px;margin:0 auto}
body.tg-fs .rn-top{top:0;padding-top:6px}
body.tg-fs .rn-stem{font-size:1.12rem}
.rn-timer.urgent{color:#fff!important;background:var(--accent);border-radius:8px;padding:2px 10px;animation:rnPulse 1s ease-in-out infinite}
@keyframes rnPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* CAT-style sectional header */
.rn-top{flex-direction:column;align-items:stretch}
.rn-toprow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rn-stabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.rn-stab{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.74rem;font-weight:600;
  padding:6px 15px;border-radius:8px;border:1px solid var(--line2);color:var(--muted);background:var(--surface)}
.rn-stab.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.rn-stab.done{background:var(--surface3);color:var(--faint);text-decoration:line-through}
.rn-stab.lock{opacity:.45}

/* per-section time inputs (mock) */
.tg-minirow{display:flex;gap:10px;flex-wrap:wrap}
.tg-mini{display:flex;flex-direction:column;gap:4px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tg-mini .tg-num{width:74px}

.chip.tg-topic.is-set i{color:var(--accent)}

/* ============================================================
   FINAL faint-text cleanup, kill leftover light text on light bg
   (white kept only where it sits on a dark/coloured chip/button)
   ============================================================ */
.check li{color:var(--ink)}
.q .stem,.q .opts li,.routine>div,.wktext,.tg-pv,.as-msg.bot{color:var(--ink)}
.chip.yr{color:var(--brand)}
.tgtsel .ts-l,.tg-pv .muted{color:var(--muted)}

/* ============================================================
   PRACTICE widget (generated warm-up questions per chapter)
   ============================================================ */
.practice{margin:8px 0}
.pr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pr-lab{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-pill{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:30px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer;transition:.14s}
.pr-pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pr-bar .pr-gen{margin-left:auto}
.pr-q{border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin:10px 0;background:var(--surface)}
.pr-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pr-n{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--muted);font-size:.82rem}
.pr-stem{font-size:1rem;line-height:1.55;color:var(--ink)}
.pr-q details{margin-top:9px}
.pr-q summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.82rem;font-family:'IBM Plex Mono',monospace;list-style:none;user-select:none}
.pr-q summary::-webkit-details-marker{display:none}
.pr-a{margin-top:8px;font-size:.93rem;color:#283a2a;background:#eef5ec;border:1px solid #d3e3cf;border-left:3px solid var(--green);border-radius:8px;padding:9px 12px}
.pr-a b{color:#1f3a26}
.pr-w{color:var(--muted);font-size:.84rem;margin-top:4px}

.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto;border-radius:9px;background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700}

/* ============================================================
   SCROLL PERFORMANCE, kill repaint-on-scroll jank
   ============================================================ */
.topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--bg)!important}
.ctabs{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body::before{will-change:auto}
* { scrollbar-width: thin; }

/* ============================================================
   Chapter PYQ attempt, clickable options + result flags
   ============================================================ */
.q.q-attempt .opts li{cursor:pointer;border:1px solid transparent;border-radius:8px;padding:4px 8px;transition:background .12s,border-color .12s}
.q.q-attempt .opts li:hover{background:var(--surface2)}
.q.q-attempt.attempted .opts li{cursor:default}
.q .opts li.opt-correct{background:#e7f6ec!important;border-color:#bfe3cb!important;color:#1f3a26!important}
.q .opts li.opt-wrong{background:#fbe9ec!important;border-color:#f0c4cd!important;color:#7a1f2b!important}
.opt-flag{margin-left:10px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.68rem;font-weight:700;white-space:nowrap}
.opt-flag.ok{color:var(--green)}
.opt-flag.no{color:var(--accent)}
.attempt-hint{background:var(--red-soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:4px 0 12px}

/* ============================================================
   Cloud account chip (sidebar footer)
   ============================================================ */
.cloud-acct{margin-top:auto;padding:10px 12px;border-top:1px solid var(--line)}
.cloud-acct .navlink{font-size:.84rem;color:var(--muted)}
.ca-in{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink);font-family:'IBM Plex Mono',ui-monospace,monospace}
.ca-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px;box-shadow:0 0 0 3px rgba(45,138,90,.18)}
.ca-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-out{margin-top:7px;background:none;border:1px solid var(--line2);color:var(--muted);font-size:.74rem;padding:4px 10px;border-radius:7px;cursor:pointer;font-family:'IBM Plex Mono',monospace}
.ca-out:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   Custom cursor: precise dot + soft lagging glow (native hidden)
   ============================================================ */
body.cursor-none, body.cursor-none *{cursor:none !important}
.cur-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:9999;opacity:0;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);will-change:transform;transition:opacity .3s ease,background-color .2s ease,width .18s ease,height .18s ease}
.cur-dot.on{opacity:1}
.cur-dot.hot{background:var(--accent);width:9px;height:9px}
.cur-glow{position:fixed;top:0;left:0;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,rgba(22,21,15,.13),rgba(22,21,15,0) 70%);pointer-events:none;z-index:9998;opacity:0;transform:translate3d(-100px,-100px,0) translate(-50%,-50%);will-change:transform;transition:opacity .35s ease,width .25s ease,height .25s ease,background .25s ease}
.cur-glow.on{opacity:1}
.cur-glow.hot{width:64px;height:64px;background:radial-gradient(circle,rgba(200,16,46,.2),rgba(200,16,46,0) 70%)}
.cur-glow.press{width:30px;height:30px}

/* ============================================================
   Topbar icon buttons + sidebar collapse + bigger in-test fullscreen
   ============================================================ */
.tb-icon{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.16s}
.tb-icon:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){ .tb-collapse{display:none} }

/* collapse the side menu away so content goes full width */
.sidebar{transition:transform .28s ease}
.content{transition:margin-left .28s ease}
body.nav-collapsed .sidebar{transform:translateX(-100%)}
body.nav-collapsed .content{margin-left:0}
body.nav-collapsed .progress{left:0}
body.nav-collapsed .ptimer{left:18px}

/* in-test full screen: make the test as large as possible */
body.tg-fs #runner .rn-grid{max-width:1440px}
body.tg-fs .rn-stem{font-size:1.24rem;line-height:1.7}
body.tg-fs .rn-caselet{font-size:1.08rem;line-height:1.78}
body.tg-fs .rn-opt{font-size:1.08rem;padding:14px 16px}
body.tg-fs .rn-qcard{padding:26px 30px}

/* ============================================================
   Unique back control, circle that expands into a "Back" pill
   ============================================================ */
.tb-back{display:inline-flex;align-items:center;height:38px;width:38px;padding:0;border-radius:30px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;overflow:hidden;white-space:nowrap;flex:0 0 auto;transition:width .26s cubic-bezier(.4,0,.2,1),background .2s,border-color .2s,color .2s}
.tb-back:hover{width:114px;background:var(--surface);border-color:var(--accent);color:var(--accent)}
.tb-back-ico{flex:0 0 38px;display:grid;place-items:center;transition:transform .26s ease}
.tb-back-ico svg{width:17px;height:17px}
.tb-back:hover .tb-back-ico{transform:translateX(-1px) rotate(-18deg)}
.tb-back:active .tb-back-ico{transform:translateX(-4px) rotate(-28deg)}
.tb-back-txt{font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateX(-6px);transition:opacity .2s ease .04s,transform .22s ease .04s;padding-right:16px}
.tb-back:hover .tb-back-txt{opacity:1;transform:translateX(0)}

/* collapse icon flips to point outward (=> "open") when the menu is hidden */
body.nav-collapsed .tb-collapse{transform:scaleX(-1)}

/* ============================================================
   Resume banner + past-tests history rows (Test Generator)
   ============================================================ */
.resume-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-left:3px solid var(--accent)}
.past-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:9px 0;background:var(--surface)}
.past-meta{display:flex;flex-direction:column;gap:2px;min-width:120px}
.past-type{font-weight:700;font-family:'Fraunces',serif}
.past-date{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;color:var(--muted)}
.past-score{font-size:.9rem;color:var(--ink);flex:1;min-width:190px}
.past-score b{font-size:1.05rem}
.past-act{display:flex;gap:8px;flex-wrap:wrap}

.past-old{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted)}

/* delete button in past-test rows */
.past-act .del{color:var(--muted)}
.past-act .del:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   Per-test breakdown (results / review)
   ============================================================ */
.bd-chips{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.bd-chip{flex:1;min-width:120px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface);text-align:center}
.bd-acc{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1}
.bd-lab{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.bd-sub{font-size:.78rem;color:var(--muted);margin-top:3px}
.bd-topics-h{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.bd-row{display:flex;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line)}
.bd-tname{flex:0 0 38%;font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-tbar{flex:1;height:8px;border-radius:6px;background:var(--surface2);overflow:hidden}
.bd-tbar i{display:block;height:100%;border-radius:6px;background:var(--green)}
.bd-weak .bd-tbar i{background:var(--accent)} .bd-mid .bd-tbar i{background:var(--amber,#c98a14)}
.bd-tpct{flex:0 0 44px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--ink)}
.bd-tn{flex:0 0 46px;text-align:right;font-size:.76rem;color:var(--muted)}
.bd-fix{margin-top:14px;padding:11px 14px;border-radius:10px;background:var(--red-soft);border:1px solid var(--line);font-size:.9rem}
.bd-fix.bd-good{background:#e7f6ec;border-color:#bfe3cb;color:#1f3a26}

.cloud-acct .ca-row{display:flex;gap:8px;margin-top:7px}
.cloud-acct .ca-row .ca-out{margin-top:0;flex:1;text-align:center}

/* ============================================================
   Progress bars, chapter PYQs + test runner
   ============================================================ */
.ch-prog{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:6px 0 16px;background:var(--surface)}
.ch-prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch-prog-lab{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ch-prog-n{font-size:.85rem;font-weight:700;color:var(--ink)}
.ch-prog-bar{height:9px;background:var(--surface2);border-radius:6px;overflow:hidden;margin-top:9px}
.ch-prog-bar i{display:block;height:100%;width:0;background:var(--green);border-radius:6px;transition:width .35s ease}
.rn-prog{height:4px;background:var(--line);border-radius:4px;margin-top:8px;overflow:hidden}
.rn-prog i{display:block;height:100%;width:0;background:var(--green);transition:width .25s ease}

/* ============================================================
   First-run onboarding overlay (home page)
   ============================================================ */
.ob-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(20,18,12,.55);backdrop-filter:blur(4px)}
.ob-overlay.show{display:flex}
.ob-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;max-width:440px;width:100%;padding:30px 28px;box-shadow:0 24px 70px rgba(0,0,0,.32);text-align:center;animation:obrise .4s ease}
.ob-close{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--bg);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:.95rem;line-height:1;transition:.14s}
.ob-close:hover{border-color:var(--accent);color:var(--accent)}
@keyframes obrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ob-logo{width:54px;height:54px;border-radius:14px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 14px}
.ob-logo svg{width:34px;height:34px}
.ob-card h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.6rem}
.ob-sub{color:var(--muted);font-size:.95rem;margin:6px 0 22px}
.ob-q{text-align:left;margin-bottom:18px}
.ob-q label{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.ob-opts{display:flex;gap:8px;flex-wrap:wrap}
.ob-opts button{flex:1;min-width:60px;padding:11px 8px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:600;font-size:.95rem;cursor:pointer;transition:.14s;font-family:inherit}
.ob-opts button:hover{border-color:var(--accent)}
.ob-opts button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ob-go{width:100%;margin-top:8px}
.ob-skip{display:block;margin-top:14px;color:var(--muted);font-size:.85rem;cursor:pointer}
.ob-skip:hover{color:var(--accent)}

/* ============================================================
   Sidebar per-chapter progress + done checkbox
   ============================================================ */
.navlink.chap{position:relative}
.navlink.chap.has-bar{padding-bottom:13px}
.cl-chk{width:15px;height:15px;border:1.5px solid var(--line2);border-radius:4px;flex:0 0 auto;cursor:pointer;position:relative;transition:.15s}
.cl-chk:hover{border-color:var(--accent)}
.cl-chk.on{background:var(--green);border-color:var(--green)}
.cl-chk.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cl-bar{position:absolute;left:36px;right:14px;bottom:4px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.cl-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .4s ease}
.navlink.chap-done{opacity:.72}

/* ============================================================
   Chapter TITA attempt input
   ============================================================ */
.ca-tita{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 4px}
.ca-tinput{flex:0 0 210px;max-width:62%;padding:9px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem}
.ca-tinput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.ca-tinput:disabled{opacity:.7}
.ca-tcheck{padding:9px 16px;border:1px solid var(--ink);border-radius:9px;background:var(--ink);color:#fbf9f4;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.ca-tcheck:disabled{opacity:.5;cursor:default}
.ca-tres{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;font-weight:700}
.ca-tres.ok{color:var(--green)} .ca-tres.no{color:var(--accent)}

/* chapter page: slim hint + count (progress bar now lives in the sidebar) */
.ch-hintbar{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:6px 0 16px}
.ch-count{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.82rem;color:var(--ink);font-weight:700;white-space:nowrap}

/* sidebar per-chapter percentage label */
.cl-pct{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;font-weight:700;color:var(--muted);flex:0 0 auto;padding-left:6px}
.navlink.chap-done .cl-pct{color:var(--green)}

/* ============================================================
   Account chip (sidebar footer), redesigned
   ============================================================ */
.cloud-acct{margin-top:auto;padding:10px 12px;border-top:1px solid var(--line)}
.ca-signin{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line2);border-radius:12px;background:var(--surface2);transition:transform .16s,border-color .16s,background .16s}
.ca-signin:hover{border-color:var(--accent);background:var(--surface);transform:translateY(-1px)}
.ca-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--accent);flex:0 0 auto}
.ca-ic.on{color:var(--green);border-color:rgba(45,138,90,.32)}
.ca-ic svg{width:17px;height:17px}
.ca-tx,.ca-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ca-tx b,.ca-who b{font-size:.84rem;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-tx small,.ca-who small{font-size:.66rem;color:var(--muted);display:flex;align-items:center}
.ca-acct{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.ca-row{display:flex;gap:7px;margin-top:9px}
.ca-out{flex:1;text-align:center;background:var(--surface2);border:1px solid var(--line2);color:var(--muted);font-size:.72rem;font-weight:600;padding:7px 8px;border-radius:8px;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,monospace;transition:.14s}
.ca-out:hover{border-color:var(--accent);color:var(--accent)}
.ca-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;flex:0 0 auto}

/* account chip links to profile */
a.ca-acct{color:inherit;text-decoration:none;cursor:pointer;border-radius:8px;transition:opacity .15s}
a.ca-acct:hover{opacity:.85}

/* account chip avatar (profile launcher) */
.ca-av{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:#fbf9f4;background:linear-gradient(150deg,var(--ink),#3a2f22)}
a.ca-acct:hover .ca-who small{color:var(--accent)}

/* avatar photo support (chip) */
.ca-av.has-img{background-size:cover;background-position:center;color:transparent}

/* home: personalized plan panel + section strength badges */
.pers{margin:18px 0 6px}
.pers-top{display:flex;flex-wrap:wrap;gap:14px 30px}
.pers-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pers-v{font-family:'Fraunces',serif;font-weight:600;font-size:1.7rem;line-height:1.1}
.pers-v small{font-size:.8rem;color:var(--muted);font-family:'Inter',system-ui,sans-serif;font-weight:500;margin-left:2px}
.pers-guide{margin:14px 0 0;color:var(--ink);line-height:1.6}
.pers-act{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.sec-badge{position:absolute;top:12px;right:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;display:none}
.sec-badge.strong{display:inline-block;background:rgba(45,138,90,.14);color:var(--green)}
.sec-badge.weak{display:inline-block;background:rgba(200,16,46,.12);color:var(--accent)}

/* ============================================================
   Global loading overlay (window.uiLoading) + page-enter fade
   ============================================================ */
.ld-overlay{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;background:var(--bg);opacity:0;transition:opacity .25s ease}
.ld-overlay.show{display:flex;opacity:1}
.ld-box{display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-logo{width:62px;height:62px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;animation:ldpulse 1.3s ease-in-out infinite}
.ld-logo svg{width:36px;height:36px}
.ld-bar{width:168px;height:4px;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.ld-bar i{position:absolute;top:0;left:-42%;width:42%;height:100%;border-radius:4px;background:var(--accent);animation:ldslide 1.05s cubic-bezier(.5,0,.5,1) infinite}
.ld-txt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ld-txt::after{content:'…';animation:lddots 1.4s steps(4,end) infinite;display:inline-block;width:1.2em;text-align:left;overflow:hidden;vertical-align:bottom}
@keyframes ldpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(200,16,46,.20)}50%{transform:scale(1.07);box-shadow:0 0 0 12px rgba(200,16,46,0)}}
@keyframes ldslide{0%{left:-42%}100%{left:100%}}
@keyframes lddots{0%{width:0}100%{width:1.2em}}
@media (prefers-reduced-motion: reduce){ .page{animation:none} .ld-logo,.ld-bar i,.ld-txt::after{animation:none} }

/* ============================================================
   Toast notifications (window.uiToast)
   ============================================================ */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:9600;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:11px 15px;box-shadow:0 12px 34px rgba(20,18,12,.18);font-size:.9rem;font-weight:500;color:var(--ink);transform:translateX(125%);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .34s;max-width:330px}
.toast.in{transform:none;opacity:1}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--accent)}
.toast.info{border-left-color:var(--amber)}
.toast-ic{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;color:var(--green)}
.toast.err .toast-ic{color:var(--accent)}
.toast.info .toast-ic{color:var(--amber)}
.toast-ic svg{width:18px;height:18px}

/* ============================================================
   Skeleton shimmer placeholders (window.uiSkeleton)
   ============================================================ */
.skel-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.skel-line{height:12px;border-radius:6px;margin:9px 0;background:linear-gradient(90deg,var(--line) 0%,var(--bg) 50%,var(--line) 100%);background-size:200% 100%;animation:skelsh 1.3s ease-in-out infinite}
.skel-line.w40{width:40%}.skel-line.w55{width:55%}.skel-line.w75{width:75%}
@keyframes skelsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){ .skel-line{animation:none} }

/* chip avatar progress ring (% to next level) */
.ca-avr{width:38px;height:38px;border-radius:11px;padding:2px;display:grid;place-items:center;flex:0 0 auto}
.ca-avr .ca-av{width:34px;height:34px}

/* ============================================================
   Empty-state illustrations (window.uiEmpty)
   ============================================================ */
.empty{text-align:center;padding:42px 24px}
.empty-art{width:96px;height:96px;margin:0 auto 16px;color:var(--ink);opacity:.92}
.empty-art svg{width:100%;height:100%}
.empty h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;margin-bottom:6px}
.empty p{color:var(--muted);font-size:.95rem;margin:0 auto 16px;max-width:42ch}

/* ============================================================
   Saved questions: star control + bookmark cards
   ============================================================ */
.q-attempt{position:relative}
.q-star{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;transition:.15s;z-index:2}
.q-star:hover{border-color:var(--amber);color:var(--amber)}
.q-star.on{color:var(--amber);border-color:var(--amber)}
.q-star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.q-star.on svg{fill:currentColor}
.bm-card{margin-bottom:14px}
.bm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.bm-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bm-chap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;color:var(--muted)}
.q-star.bm-rm{position:static;width:28px;height:28px;flex:0 0 auto}
.bm-stem{font-size:1.02rem;line-height:1.55;margin-bottom:10px}
.rv-sol-d summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent);padding:6px 0}
.rv-sol-d .rv-sol{margin-top:6px}

/* star inside the test review header (inline, not absolute) */
.rv-h{display:flex;align-items:center;gap:8px}
.rv-star{position:static;margin-left:auto;width:26px;height:26px;flex:0 0 auto}

/* home: "Recommended for you" cards */
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.rec-card{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:.18s}
.rec-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.rec-ic{width:34px;height:34px;border-radius:9px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.rec-ic svg,.rec-ic .ic-svg{width:18px;height:18px}
.rec-tx{min-width:0}
.rec-t{font-weight:700;font-size:.98rem;margin-bottom:3px}
.rec-d{color:var(--muted);font-size:.84rem;line-height:1.45}
.rec-cta{display:inline-block;margin-top:8px;color:var(--accent);font-weight:600;font-size:.85rem}
@media(max-width:860px){ .rec-grid{grid-template-columns:1fr} }

/* home: today's goal + streak card */
.today-card{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:18px 0 6px}
.today-ringwrap{position:relative;width:64px;height:64px;flex:0 0 auto}
.today-ring{transform:rotate(-90deg);width:64px;height:64px;display:block}
.tr-bg{fill:none;stroke:var(--line);stroke-width:6}
.tr-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.today-num{position:absolute;inset:0;display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem}
.today-info{flex:1;min-width:160px}
.today-h{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.today-sub{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;margin-top:2px}
.today-streak{font-size:.85rem;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:6px}
.today-streak svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.today-goal{margin-left:auto;text-align:right}
.today-presets{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.today-presets button{padding:6px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink)}
.today-presets button:hover,.today-presets button.on{border-color:var(--accent);color:var(--accent)}
@media(max-width:620px){ .today-goal{margin-left:0} }

/* home: question of the day */
.qotd{margin-top:8px}
.qotd-meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.qotd-stem{font-size:1.06rem;line-height:1.6;margin-bottom:14px}
.qotd-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.qotd-opt{text-align:left;padding:12px 15px;border:1px solid var(--line2);border-radius:11px;background:var(--bg);font:inherit;font-size:.96rem;color:var(--ink);cursor:pointer;transition:.15s}
.qotd-opt:hover:not(:disabled){border-color:var(--accent)}
.qotd-opt:disabled{cursor:default}
.qotd-opt.ok{background:#e7f6ec;border-color:#bfe3cb;color:#1f3a26;font-weight:600}
.qotd-opt.no{background:#fbe9ec;border-color:#f0c4cd;color:#7a1f2b}
.qotd-sol{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
.qotd-sol .qg{color:var(--green)} .qotd-sol .qb{color:var(--accent)} .qotd-sol b{color:var(--ink)}
@media(max-width:620px){ .qotd-opts{grid-template-columns:1fr} }

/* home: exam readiness gauge */
.ready-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ready-gauge{position:relative;width:88px;height:88px;flex:0 0 auto}
.ready-gauge svg{width:88px;height:88px;transform:rotate(-90deg);display:block}
.rg-bg{fill:none;stroke:var(--line);stroke-width:7}
.rg-fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.ready-pct{position:absolute;inset:0;display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem}
.ready-body{flex:1;min-width:230px}
.ready-h{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ready-verdict{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;margin:2px 0 13px}
.ready-bars{display:flex;flex-direction:column;gap:8px}
.rb-row{display:flex;align-items:center;gap:10px}
.rb-lab{flex:0 0 132px;font-size:.78rem;color:var(--muted)}
.rb-track{flex:1;height:7px;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rb-fill{display:block;height:100%;width:0;border-radius:6px;background:var(--teal)}
.rb-fill{transition:width .9s cubic-bezier(.2,.7,.2,1)}
.rb-val{flex:0 0 32px;text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;font-weight:700}
@media(max-width:620px){ .rb-lab{flex:0 0 110px} }

/* question image (error-log image mistakes carried into practice) */
.rn-qimg{display:block;max-width:100%;max-height:340px;border:1px solid var(--line2);border-radius:10px;margin:0 0 14px;background:#fff}

/* ===== #3 focus / #4 responsive / #5 reduced-motion / #10 skip-link ===== */
:where(a,button,.btn,.btnt,.navlink,.qf-b,select,summary,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:9999;font-weight:600}
.skip-link:focus{left:8px}
@media(max-width:560px){.hero h1,.page h1{font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.12}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ================= DESIGN SYSTEM v2 (11 elements) ================= */
:root{ --sec:var(--accent); --r-md:12px; --r-lg:16px; --r-pill:30px; }
body.sec-v{--sec:var(--teal)} body.sec-d{--sec:var(--amber)} body.sec-q{--sec:var(--accent)}
/* #1 + #3: section-tinted diamond before section headings, kicker + progress tint */
.page h2.ph::before{content:"\25C6";color:var(--sec);font-size:.56em;opacity:.9}
.hero .kick{color:var(--sec)}
.cl-bar i{background:var(--sec)}
/* #3 divider utility */
.edivider{display:flex;align-items:center;gap:14px;margin:30px 0}
.edivider::before,.edivider::after{content:"";flex:1;height:1px;background:var(--line)}
.edivider b{color:var(--sec);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:.95rem}
/* #4 callout: unify radius (keep existing colored rules) */
.callout{border-radius:var(--r-md)}
/* #5 reading progress: reuse the existing #pbar, tint it by section */
.progress .bar{background:var(--sec)}
/* #6 prose measure, drop-cap, pull-quote */
.page p,.page li{max-width:72ch}
.psub,.lead,.pers-guide{max-width:62ch}
body.article .page>p:first-of-type::first-letter{float:left;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:3.3rem;line-height:.78;padding:8px 12px 2px 0;color:var(--sec)}
.pullquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.32rem;line-height:1.4;border-left:3px solid var(--sec);padding:4px 0 4px 18px;margin:22px 0;max-width:60ch;color:var(--ink)}
/* #2 reveal-on-scroll (JS reveals all as a fallback, never permanently hidden) */
.has-reveal .rvl{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.has-reveal .rvl.in{opacity:1;transform:none}
/* #7 section-hub watermark letter */
.sec-wm{position:absolute;right:1%;top:-18px;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:12rem;line-height:1;color:var(--sec);opacity:.06;pointer-events:none;user-select:none;z-index:0}
.hero>*{position:relative;z-index:1}
/* #8 unified radii on the main building blocks */
.card,.lcard,.pstat,.out-card,.bm-card,.w-card,.rc-q,.ready-card,.today-card,.pers,.qotd{border-radius:var(--r-lg)}
.btn,.btnt,.qf-b{border-radius:var(--r-pill)}
/* #9 streak flame flicker (ties into existing flame svg) */
.today-streak svg{display:inline-block;transform-origin:bottom center;animation:flameflick 2.4s ease-in-out infinite}
@keyframes flameflick{0%,100%{transform:scale(1) rotate(-1.5deg)}50%{transform:scale(1.09) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.today-streak svg{animation:none}}

/* draggable study timer */
.ptimer .pt-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.ptimer.dragging .pt-head{cursor:grabbing}
.ptimer.dragging{opacity:.94;box-shadow:0 24px 54px rgba(20,18,12,.24);transition:none}
.ptimer .pt-min{cursor:pointer}

.page h2.ph:has(.em)::before{content:none}

/* ===== top search bar (#9) ===== */
.tb-search{position:relative;display:flex;align-items:center;margin:0 4px}
.tb-search-btn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.tb-search-btn:hover{background:var(--surface2,rgba(0,0,0,.05));color:var(--accent)}
.tb-search-btn svg{width:18px;height:18px}
.tb-search.open .tb-search-btn{display:none}
.tb-search.open{height:36px;width:300px;max-width:46vw;background:var(--surface);border:1px solid var(--line2);border-radius:9px;padding:0 8px 0 12px;gap:8px}
.tb-search.open:focus-within{border-color:var(--muted)}
.tb-search-ic{display:none;width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.tb-search.open .tb-search-ic{display:flex}
.tb-search-ic svg{width:16px;height:16px;display:block}
.tb-search input{display:none}
.tb-search.open input{display:block;flex:1 1 auto;min-width:0;height:100%;border:none;background:none;outline:none;font-size:.86rem;color:var(--ink);font-family:inherit;padding:0;-webkit-appearance:none}
.tb-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.tb-search input::placeholder{color:var(--muted);opacity:.9}
.tb-search-x{display:none;width:22px;height:22px;border:none;background:none;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:6px;flex:0 0 auto;padding:0}
.tb-search.open .tb-search-x{display:grid;place-items:center}
.tb-search-x:hover{color:var(--ink)}
.tb-results{position:absolute;top:calc(100% + 7px);left:0;right:0;min-width:300px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,18,12,.18);max-height:64vh;overflow:auto;z-index:80;display:none}
.tb-results.show{display:block}
.tb-rsec{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 15px 4px}
.tb-r{display:flex;align-items:center;gap:11px;padding:9px 15px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.tb-rsec + .tb-r{border-top:none}
.tb-r:hover,.tb-r:focus{background:var(--surface2,rgba(0,0,0,.05))}
.tb-r-ic{width:18px;height:18px;color:var(--accent);flex:0 0 auto}.tb-r-ic svg{width:18px;height:18px}
.tb-r-t{flex:1;font-size:.86rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-rq .tb-r-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tb-r-g{font-size:.68rem;color:var(--muted);flex:0 0 auto;text-transform:capitalize}
.tb-rempty{padding:16px;color:var(--muted);font-size:.85rem;text-align:center}
@media(max-width:760px){.tb-search.open input{width:56vw;max-width:none}.tb-results{min-width:0;left:auto;right:0;width:74vw}}

/* ===== #12 notes (side drawer) ===== */
.notes-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line2);border-right:none;border-radius:12px 0 0 12px;padding:13px 9px;cursor:pointer;color:var(--ink);box-shadow:0 8px 22px rgba(20,18,12,.10);transition:transform .24s cubic-bezier(.2,.7,.2,1),background .15s,color .15s}
.notes-tab:hover{background:var(--surface2,var(--surface));color:var(--accent)}
.notes-tab .nt-ic{color:var(--sec,var(--accent))}.notes-tab .nt-ic svg{width:18px;height:18px;display:block}
.notes-tab .nt-lbl{font-family:var(--mono,monospace);font-size:10px;text-transform:uppercase;letter-spacing:.1em;writing-mode:vertical-rl}
.notes-tab .nt-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
body.notes-open .notes-tab{transform:translateY(-50%) translateX(-360px)}
.notes-drawer{position:fixed;top:0;right:0;height:100%;width:360px;max-width:88vw;background:var(--surface);border-left:1px solid var(--line2);box-shadow:-16px 0 44px rgba(20,18,12,.16);z-index:56;display:flex;flex-direction:column;padding:18px 18px 22px;transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.7,.2,1)}
body.notes-open .notes-drawer{transform:none}
.notes-drawer .nd-head{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.notes-drawer .nd-head b{font-family:'Fraunces',Georgia,serif;font-size:1.12rem}
.notes-drawer .nd-ic{color:var(--sec,var(--accent))}.notes-drawer .nd-ic svg{width:18px;height:18px}
.notes-drawer .nd-all{margin-left:auto;font-size:.8rem;color:var(--accent);font-weight:600}
.notes-drawer .nd-x{background:none;border:none;font-size:1.55rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px;margin-left:4px}
.notes-drawer .nd-x:hover{color:var(--ink)}
.notes-drawer .nd-ch{font-family:var(--mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:8px 0 12px}
.notes-drawer .nd-ta{flex:1;width:100%;border:1px solid var(--line2);border-radius:12px;background:var(--bg);padding:12px 14px;font-size:14.5px;line-height:1.6;color:var(--ink);font-family:inherit;resize:none}
.notes-drawer .nd-ta:focus{outline:none;border-color:var(--sec,var(--accent))}
.notes-drawer .nd-status{font-size:12px;color:var(--muted);margin-top:10px;min-height:16px}
@media(max-width:560px){.notes-tab .nt-lbl{display:none} .notes-drawer{width:320px}}
@media print{.notes-tab,.notes-drawer{display:none!important}}

/* ===== #3 time-management bars ===== */
.tm-h{font-family:var(--mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.tm-row{display:flex;align-items:center;gap:12px;margin:7px 0}
.tm-l{flex:0 0 86px;font-weight:600;font-size:.9rem}
.tm-bar{flex:1;height:9px;background:var(--line);border-radius:6px;overflow:hidden}
.tm-bar i{display:block;height:100%;background:var(--sec,var(--accent));border-radius:6px}
.tm-bar i.tm-slow{background:var(--accent)}
.tm-bar i.tm-fast{background:var(--amber)}
.tm-v{flex:0 0 46px;text-align:right;font-family:var(--mono,monospace);font-size:.85rem;color:var(--ink)}

/* ===== #8 vs last attempt ===== */
.rn-vslast{margin:10px 0 0;font-size:.92rem;padding:9px 14px;border-radius:10px;border:1px solid var(--line2);line-height:1.5}
.rn-vslast b{font-weight:700}
.rn-vslast.up{background:rgba(31,122,107,.10);border-color:rgba(31,122,107,.32);color:var(--green,#1f7a6b)}
.rn-vslast.down{background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.30);color:var(--accent)}
.rn-vslast.flat{color:var(--muted)}

/* ===== #5 vocab review ===== */
.w-review{margin:0 0 18px}
.w-review .wr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.w-review .wr-top b{font-family:'Fraunces',Georgia,serif;font-size:1.05rem}
.w-review .wr-n{font-family:var(--mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.w-review .wr-word{font-family:'Fraunces',Georgia,serif;font-size:2rem;font-weight:600;color:var(--ink);margin:4px 0}
.w-review .wr-hint{color:var(--muted);font-size:.9rem;margin:6px 0 14px}
.w-review .wr-mean{font-size:1.05rem;line-height:1.55;color:var(--ink);margin:8px 0 16px}
.w-review .wr-grade{display:flex;gap:10px}
.w-review.wr-done{color:var(--muted)}.w-review.wr-done b{color:var(--ink);margin-right:6px}

/* roadmap start-date control */
.rm-startcard{margin-bottom:20px}
.rm-sc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rm-date{font-family:inherit;font-size:.92rem;padding:8px 12px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--ink);outline:none}
.rm-date:focus{border-color:var(--accent)}

/* percentile-vs-marks target marker */
.pt-mark{font-family:var(--mono,monospace);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);border:1px solid var(--amber);background:var(--marker-solid,rgba(214,158,46,.18));padding:1px 6px;border-radius:5px;margin-left:6px;white-space:nowrap}

/* ===== test-generator question mix ===== */
#mixPanel{margin:16px 0 0;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--surface)}
#mixPanel .mix-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-family:var(--mono,monospace);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#mixPanel .mix-total{margin-left:auto}#mixPanel .mix-total b{color:var(--ink);font-size:1rem}
#mixPanel .mix-even{border:1px solid var(--line2);background:var(--bg);border-radius:20px;padding:3px 11px;font-size:.68rem;cursor:pointer;color:var(--ink);font-family:inherit;text-transform:none;letter-spacing:0}
#mixPanel .mix-even:hover{border-color:var(--accent);color:var(--accent)}
#mixPanel .mix-row{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid var(--line)}
#mixPanel .mix-sec{font-family:var(--mono,monospace);font-size:.58rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);flex:0 0 30px}
#mixPanel .mix-name{flex:1;min-width:0;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mixPanel .mix-cap{font-size:.7rem;color:var(--muted);flex:0 0 auto}
#mixPanel .mix-step{display:flex;align-items:center;gap:9px;flex:0 0 auto}
#mixPanel .mix-step b{min-width:18px;text-align:center;font-family:var(--mono,monospace);font-size:.92rem}
#mixPanel .mix-b{width:24px;height:24px;border:1px solid var(--line2);border-radius:6px;background:var(--bg);cursor:pointer;color:var(--ink);font-size:1.05rem;line-height:1;display:grid;place-items:center;padding:0}
#mixPanel .mix-b:hover{border-color:var(--accent);color:var(--accent)}

#mixPanel .mix-secband{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--mono,monospace);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line2)}
#mixPanel .mix-head + .mix-secband{margin-top:8px}
#mixPanel .mix-secn{color:var(--muted)}
#mixPanel .mix-secband + .mix-row{border-top:none}