/* GATE Prep — one stylesheet. Four type sizes, four spacings, one accent colour. Mobile-first where it matters. */
:root{
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;
  --t1:13px;--t2:16px;--t3:22px;--t4:32px;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,"SF Mono","Courier New",monospace;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --gx:var(--s4);--rail:232px;--top:52px;
  --bg:#fbfaf7;--bg2:#f4f2ec;--line:#e6e2d8;--line2:#d4cfc2;--ink:#1c1b19;--mut:#6b675f;
  --acc:#1f4fd8;--acch:#173db0;--accbg:#eaf0ff;--onacc:#fff;--ok:#1a7f4b;--okbg:#e7f4ec;--bad:#b3261e;--badbg:#fbe9e7;--warn:#a86a00;--warnbg:#fff3d6;
  --pal-ok:#1f9d57;--pal-no:#d4483f;--pal-mk:#7c3aed;--sel:#d9e4ff;
  /* names used by the lesson widgets */
  --txt:var(--ink);--mut2:var(--mut);--card:transparent;--card2:var(--bg2);--acc2:var(--acc);--easy:var(--ok);--med:var(--warn);--hard:var(--bad);--grad:none;--glow:none;--bolt:var(--warn);
  color-scheme:light}
html[data-theme=sepia]{--bg:#f4ecd8;--bg2:#ebe1c8;--line:#dccfae;--line2:#c9b98f;--ink:#3b2f1e;--mut:#6e5d44;--acc:#8a4b12;--acch:#6d3a0b;--accbg:#ecdcb8;--ok:#3f7a2a;--okbg:#e2e8cc;--bad:#a63a1c;--badbg:#f1d9c8;--warn:#9a6200;--warnbg:#f3e2a8;--pal-ok:#3f7a2a;--pal-no:#b0452a;--sel:#e6cf93}
html[data-theme=mist]{--bg:#f3f6fa;--bg2:#e9eef5;--line:#dae1ec;--line2:#c3cddc;--ink:#17202e;--mut:#556274;--acc:#0b63ce;--acch:#084c9e;--accbg:#dcebfb;--ok:#12804f;--okbg:#e0f3e8;--bad:#c0262d;--badbg:#fbe4e2;--sel:#cfe2fb}
html[data-theme=forest]{--bg:#f3f7f1;--bg2:#e7efe3;--line:#d5e2cf;--line2:#b9cdb1;--ink:#1b2a1d;--mut:#55665a;--acc:#1d7a4a;--acch:#14603a;--accbg:#d9eddf;--ok:#1d7a4a;--okbg:#d9efd9;--badbg:#f9e3df;--warnbg:#fbf0cc;--sel:#c5e3cf;--pal-mk:#6d4bb5}
html[data-theme=slate]{--bg:#1b1f27;--bg2:#151920;--line:#2b323e;--line2:#3a4352;--ink:#e6e9ef;--mut:#a0a9b8;--acc:#6f93f7;--acch:#9bb3fa;--accbg:#263353;--onacc:#0b1020;--ok:#4cc38a;--okbg:#1d3a2b;--bad:#f0706b;--badbg:#432326;--warn:#e0a63a;--warnbg:#433a1c;--sel:#34508f;color-scheme:dark}
html[data-theme=midnight]{--bg:#0d1220;--bg2:#0a0e1a;--line:#1e2745;--line2:#2a3562;--ink:#e4e9fb;--mut:#97a3c7;--acc:#8a8df5;--acch:#aaacf8;--accbg:#1c2250;--onacc:#0b1020;--ok:#41c98f;--okbg:#11332a;--bad:#f26d83;--badbg:#3a1a28;--warn:#e2ab3f;--warnbg:#3a3216;--sel:#3b3f9a;color-scheme:dark}
html[data-size=sm]{font-size:92%}html[data-size=lg]{font-size:110%}html[data-size=xl]{font-size:122%}
html[data-density=compact]{--s2:12px;--s3:18px;--s4:28px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:var(--t2)/1.6 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sel)}
.mono{font-family:var(--mono)}.mut{color:var(--mut)}.sm{font-size:var(--t1)}
.h1{font:700 var(--t4)/1.15 var(--mono);letter-spacing:-.02em;overflow-wrap:anywhere}
.h2{font:700 var(--t3)/1.25 var(--mono);letter-spacing:-.01em}
.h3{font:700 var(--t2)/1.3 var(--mono)}
.eyebrow{font:600 var(--t1) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--bg);border-radius:8px}::-webkit-scrollbar-track{background:transparent}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:var(--bg2);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2);overflow:auto}
.logo{font:700 var(--t2) var(--mono);padding:var(--s1) var(--s1) 0;white-space:nowrap}.logo b{color:var(--acc)}
.subjbtn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s1);background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:var(--s1) 12px;cursor:pointer;text-align:left}
.subjbtn small{display:block;color:var(--mut);font-size:var(--t1);line-height:1.2}
.subjbtn span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{display:grid;gap:2px}
.nav a{padding:9px 12px;border-radius:4px;color:var(--mut);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.nav a:hover{color:var(--ink)}
.nav a.on{background:var(--accbg);color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.nav .n{font:700 var(--t1) var(--mono);background:var(--acc);color:var(--onacc);border-radius:99px;padding:0 8px;min-width:22px;text-align:center}
.rail .grow{flex:1}
.status{font:var(--t1) var(--mono);color:var(--mut);padding:0 var(--s1)}
.railbtn{width:100%;text-align:left;background:none;border:1px solid var(--line2);border-radius:4px;padding:var(--s1) 12px;cursor:pointer;color:var(--mut)}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:var(--s1);min-height:var(--top);padding:0 var(--gx);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.crumbs{flex:1;min-width:0;color:var(--mut);font-size:var(--t1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crumbs b{color:var(--ink)}
.kbd{font:600 var(--t1) var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:3px;padding:0 6px;color:var(--mut);background:var(--bg)}
.ghost{background:none;border:1px solid var(--line2);border-radius:4px;padding:5px 12px;cursor:pointer;color:var(--mut);font-size:var(--t1);white-space:nowrap}
.ghost:hover{border-color:var(--acc);color:var(--acc)}
.only-m{display:none}
.page{width:100%;max-width:980px;margin:0 auto;padding:var(--s4) var(--gx) calc(var(--s4) * 2)}
.page.wide{max-width:1240px}
.tabbar{display:none}

/* ---------- primitives ---------- */
.btn{background:none;border:1px solid var(--line2);border-radius:4px;padding:9px 18px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);text-align:center;min-height:40px}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.btn.pri:hover{background:var(--acch);border-color:var(--acch);color:var(--onacc)}
.btn.sm{padding:4px 12px;min-height:32px;font-size:var(--t1)}
.btn:disabled{opacity:.45;cursor:default}
.link{color:var(--acc);font-weight:600;background:none;border:0;cursor:pointer;padding:0}.link:hover{text-decoration:underline}
.bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc)}
.rule{border:0;border-top:1px solid var(--line);margin:var(--s3) 0}
.stack>*+*{margin-top:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s2)}.row.sp{justify-content:space-between}.row.wrap{flex-wrap:wrap}
input[type=text],input[type=number],input[type=search],select,textarea{background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:4px;padding:8px 10px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.tag{font:600 var(--t1) var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}

/* ---------- home ---------- */
.next{padding:var(--s3) 0 var(--s4)}
.next .h1{margin:var(--s1) 0}
.next p{color:var(--mut);max-width:56ch;margin-bottom:var(--s3)}
.also{border-top:1px solid var(--line)}
.also a{display:flex;justify-content:space-between;gap:var(--s2);padding:12px 0;border-bottom:1px solid var(--line)}
.also a span:last-child{color:var(--mut);white-space:nowrap}
.also a:hover span:first-child{color:var(--acc)}
.stats{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap;margin-top:var(--s3);font:var(--t1) var(--mono);color:var(--mut)}.stats b{color:var(--ink);font-size:var(--t2)}

/* ---------- rows & tabs ---------- */
.tabs{display:flex;gap:var(--s3);border-bottom:1px solid var(--line);margin:var(--s3) 0 0;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:var(--s1) 0;margin-bottom:-1px;color:var(--mut);font-weight:600;cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--acc);border-color:var(--acc)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.trow b{display:block;overflow-wrap:anywhere}
.trow .st{font-size:var(--t1);color:var(--mut)}
.trow .acts{display:flex;gap:var(--s1);justify-content:flex-end;flex-wrap:wrap}
.trow.k2{grid-template-columns:minmax(0,1fr) auto}
.chapter{margin-top:var(--s4)}
.chapter>.eyebrow{margin-bottom:var(--s1)}
.lrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s2);align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.lrow .dot{width:22px;height:22px;border:2px solid var(--line2);border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff}
.lrow .dot.done{background:var(--ok);border-color:var(--ok)}
.lrow b{display:block}
.lrow:hover b{color:var(--acc)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{border:1px solid var(--line2);border-radius:3px;padding:1px 8px;font:600 var(--t1) var(--mono);color:var(--mut);background:none;cursor:pointer}
.chip.done{border-color:var(--ok);color:var(--ok)}
.chip:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- lesson ---------- */
.read{position:fixed;left:var(--rail);right:0;top:0;height:3px;z-index:40}.read i{display:block;height:100%;background:var(--acc);width:0}
.lesson{display:grid;grid-template-columns:minmax(0,700px) 200px;gap:var(--s4);justify-content:center}
.lesson article{min-width:0}
.lesson .toc{position:sticky;top:calc(var(--top) + var(--s2));align-self:start;font-size:var(--t1);display:grid;gap:8px;border-left:1px solid var(--line);padding-left:var(--s2);max-height:calc(100vh - 100px);overflow:auto}
.lesson .toc a{color:var(--mut);cursor:pointer}.lesson .toc a.on{color:var(--acc);font-weight:700}
.lesson .toc a.done::after{content:" ✓";color:var(--ok)}
.tocm{display:none}
.sec{padding-top:var(--s4);scroll-margin-top:calc(var(--top) + 16px)}
.sec>h2{margin-bottom:var(--s2)}
.sec p,.sec li{line-height:1.8}
.sec p{margin-bottom:var(--s2)}
.sec ul,.sec ol{margin:0 0 var(--s2);padding-left:22px}.sec li{margin:4px 0}
.callout{border-left:3px solid var(--line2);padding:2px 0 2px var(--s2);margin:var(--s2) 0}
.callout.key{border-color:var(--acc)}.callout.tip{border-color:var(--ok)}.callout.warn,.callout.trap{border-color:var(--bad)}
.callout .t{display:block;font:700 var(--t1) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.callout.key .t{color:var(--acc)}.callout.tip .t{color:var(--ok)}.callout.warn .t,.callout.trap .t{color:var(--bad)}
.callout p{margin:0 0 6px}
.analogy{display:flex;gap:var(--s2);font-style:italic;margin:var(--s2) 0}.analogy .em{font-size:1.8rem;line-height:1}
.formula{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0;margin:var(--s2) 0;text-align:center}
.formula small{display:block;color:var(--mut);margin-top:2px}
.texd{margin:var(--s2) 0;overflow-x:auto;overflow-y:hidden;max-width:100%}
.tex{font-size:1.04em}
code{font-family:var(--mono);background:var(--bg2);border-radius:3px;padding:1px 5px;font-size:.92em}
pre{background:var(--bg2);border-left:3px solid var(--line2);padding:var(--s2);overflow:auto;font:var(--t1)/1.6 var(--mono);margin:var(--s2) 0;max-width:100%}
pre code{background:none;padding:0}
.tw{overflow-x:auto;margin:var(--s2) 0}
table.rt{border-collapse:collapse;width:100%}
.rt th{font:600 var(--t1) var(--mono);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);color:var(--mut)}
.rt td{padding:8px 10px;border-bottom:1px solid var(--line)}
details{border-top:1px solid var(--line);margin:var(--s1) 0}
summary{cursor:pointer;color:var(--acc);font-weight:600;padding:var(--s1) 0;list-style:none}
summary::-webkit-details-marker{display:none}summary::before{content:"▸ "}details[open] summary::before{content:"▾ "}
.steps{counter-reset:s;list-style:none;padding:0!important;margin:var(--s2) 0}
.steps li{counter-increment:s;display:flex;gap:var(--s2);padding:var(--s1) 0}
.steps li::before{content:counter(s);color:var(--acc);font:700 var(--t2) var(--mono);flex:none;width:22px}
.steps li>div{min-width:0}
.deep{margin:var(--s3) 0}
.deep h3{font:700 var(--t2) var(--mono);margin-bottom:var(--s1)}
.deep h3::before{content:"∎ ";color:var(--acc)}
.book h3.bk{font:700 var(--t3)/1.3 var(--mono);margin:var(--s4) 0 var(--s1);padding-top:var(--s2);border-top:1px solid var(--line)}
.wgt{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:var(--s2) 0;margin:var(--s2) 0;overflow-x:auto}
.check{border-top:1px solid var(--line2);margin-top:var(--s3);padding-top:var(--s2)}
.fin{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line2)}
.pn{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* ---------- questions ---------- */
.q{max-width:760px}
.q .text{white-space:pre-wrap;line-height:1.7;margin-bottom:var(--s2);overflow-wrap:anywhere}
.q .text pre{white-space:pre}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin-bottom:var(--s1);cursor:pointer;min-height:44px}
.opt:hover{border-color:var(--acc)}
.opt>span:last-child{min-width:0;overflow-wrap:anywhere}
.opt .k{font:700 var(--t1) var(--mono);width:26px;height:26px;border:1.5px solid var(--line2);border-radius:50%;display:grid;place-items:center;flex:none;color:var(--mut)}
.opt.multi .k{border-radius:4px}
.opt.sel{border-color:var(--acc);background:var(--accbg)}.opt.sel .k{background:var(--acc);border-color:var(--acc);color:var(--onacc)}
.opt.right{border-color:var(--ok);background:var(--okbg)}.opt.right .k{background:var(--ok);border-color:var(--ok);color:var(--onacc)}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}.opt.wrong .k{background:var(--bad);border-color:var(--bad);color:var(--onacc)}
.opt:disabled{cursor:default;color:inherit}
.nat{font:700 var(--t2) var(--mono);width:200px;max-width:100%;padding:10px 12px;background:var(--bg);color:var(--ink);border:1px solid var(--line2);border-radius:4px}
.fb{border-left:3px solid var(--line2);padding:2px 0 2px var(--s2);margin:var(--s2) 0}
.fb.ok{border-color:var(--ok)}.fb.no{border-color:var(--bad)}
.fb b.ok{color:var(--ok)}.fb b.no{color:var(--bad)}
.fb p{margin-bottom:6px}
.qhead{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;color:var(--mut);font:var(--t1) var(--mono);margin-bottom:var(--s2)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin:var(--s2) 0 var(--s3)}
.tiers div{border-top:3px solid var(--line2);padding-top:6px;font:var(--t1) var(--mono);color:var(--mut)}
.tiers b{display:block;color:var(--ink);font-size:var(--t3)}
.tiers div.due{border-color:var(--acc)}

/* ---------- runner (practice + CBT) ---------- */
.run{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}
.run .head{display:flex;align-items:center;gap:var(--s2);min-height:56px;padding:var(--s1) var(--s3);border-bottom:2px solid var(--acc);flex-wrap:wrap}
.run .head .grow{flex:1;min-width:0}
.run .head .ti{min-width:0}.run .head .ti b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer{font:700 var(--t2) var(--mono);border:1px solid var(--line2);border-radius:4px;padding:5px 14px;white-space:nowrap}.timer.low{color:var(--bad);border-color:var(--bad)}
.run .body{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1}
.run main{padding:var(--s3) var(--s4);min-width:0}
.qpanel{border:1px solid var(--line2);border-radius:4px}
.qpanel .qhead{padding:12px var(--s3);border-bottom:1px solid var(--line2);margin:0;background:var(--bg2)}
.qpanel .q{padding:var(--s3);max-width:none}
.acts{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s2);align-items:center}
.acts .grow{flex:1}
.run aside{border-left:1px solid var(--line2);background:var(--bg2);min-width:0}
.run aside h3{font:700 var(--t1) var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px var(--s2);border-bottom:1px solid var(--line2)}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1);padding:var(--s2)}
.pal{height:38px;border-radius:3px;border:1px solid transparent;font:700 var(--t1) var(--mono);color:#fff;cursor:pointer;background:#8a8f99}
.pal.nv{background:var(--bg);color:var(--mut);border-color:var(--line2)}.pal.na{background:var(--pal-no)}.pal.an{background:var(--pal-ok)}.pal.mk{background:var(--pal-mk);border-radius:50%}
.pal.ok{background:var(--pal-ok)}.pal.no{background:var(--pal-no)}
.pal.cur{outline:2px solid var(--acc);outline-offset:2px}
.legend{padding:var(--s1) var(--s2) var(--s2);display:grid;gap:6px;font-size:var(--t1);color:var(--mut)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:8px}
.palbtn{display:none}
.sheetov{position:fixed;inset:0;background:rgba(10,14,24,.5);display:grid;place-items:center;z-index:100;padding:var(--s2)}
.sheet{background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:var(--s3);width:min(560px,100%);max-height:86vh;overflow:auto;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.sheet h2{margin-bottom:var(--s2)}
.sheet .opts button{display:flex;width:100%;justify-content:space-between;gap:var(--s2);padding:11px 12px;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.sheet .opts button:hover{background:var(--accbg)}
.sheet .opts button.on{color:var(--acc);font-weight:700}
.sheet .opts button.off{color:var(--mut);cursor:default}.sheet .opts button.off:hover{background:none}
.sheet .opts hr{border:0;border-top:1px solid var(--line);margin:var(--s1) 0}
table.t{width:100%;border-collapse:collapse;font:var(--t1) var(--mono)}
table.t th{text-align:left;color:var(--mut);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line2)}
table.t td{padding:8px;border-bottom:1px solid var(--line)}
.tw2{overflow-x:auto}

/* ---------- results ---------- */
.score{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap;margin:var(--s3) 0}
.score div b{display:block;font:700 var(--t4) var(--mono)}
.score div span{font:var(--t1) var(--mono);color:var(--mut)}
.cols{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-start}
.cols>div{flex:1 1 340px;min-width:0}
.tbars{display:grid;gap:6px}
.tbar{display:grid;grid-template-columns:44px minmax(0,1fr) 46px 18px;gap:var(--s1);align-items:center;font:var(--t1) var(--mono)}
.tbar .tr{height:14px;background:var(--bg2);border-radius:2px;position:relative}
.tbar .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--line2)}
.tbar .tr i.slow{background:var(--warn)}
.tbar .tr u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.5}
.tbar .ck.ok{color:var(--ok)}.tbar .ck.no{color:var(--bad)}

/* ---------- progress ---------- */
.cal{display:grid;grid-template-columns:repeat(7,28px);gap:5px;margin:var(--s1) 0}
.cal i{width:28px;height:28px;border-radius:3px;background:var(--bg2);border:1px solid var(--line)}
.cal .l1{background:color-mix(in srgb,var(--acc) 22%,var(--bg))}.cal .l2{background:color-mix(in srgb,var(--acc) 45%,var(--bg))}
.cal .l3{background:color-mix(in srgb,var(--acc) 70%,var(--bg))}.cal .l4{background:var(--acc)}
.dow{display:grid;grid-template-columns:repeat(7,28px);gap:5px;font:var(--t1) var(--mono);color:var(--mut);text-align:center}
.heat{display:grid;gap:0}
.heat .hr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s2);align-items:start;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.heat .hr>b{font-size:var(--t1)}
.hcs{display:flex;flex-wrap:wrap;gap:6px}
.hc{display:inline-flex;align-items:center;min-height:30px;border-radius:3px;font:700 var(--t1) var(--mono);color:#fff;background:#8a8f99;padding:2px 10px;border:0;cursor:pointer;max-width:100%;text-align:left}
.hc.g{background:var(--pal-ok)}.hc.m{background:var(--warn)}.hc.b{background:var(--pal-no)}.hc.z{background:var(--bg2);color:var(--mut);border:1px solid var(--line)}

/* ---------- command bar ---------- */
.cmd{align-items:start;padding-top:10vh}
.cmd .sheet{padding:0;overflow:hidden}
.cmd input{width:100%;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:var(--s2) var(--s3);font:600 var(--t2) var(--sans);background:var(--bg);outline:none}
.cmd ul{list-style:none;margin:0;padding:var(--s1) 0;max-height:52vh;overflow:auto}
.cmd li{display:flex;gap:var(--s2);padding:9px var(--s3);cursor:pointer}
.cmd li .k{font:600 var(--t1) var(--mono);color:var(--mut);width:64px;flex:none;text-transform:uppercase}
.cmd li span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd li.on{background:var(--accbg);box-shadow:inset 3px 0 0 var(--acc)}
.toast{position:fixed;bottom:var(--s3);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px var(--s3);border-radius:4px;font-size:var(--t1);z-index:300;max-width:90vw}
.loading{padding:var(--s4);color:var(--mut)}
.err{border-left:3px solid var(--bad);padding:var(--s1) var(--s2);margin:var(--s2) 0}

/* ---------- small screens ---------- */
@media(max-width:1100px){.lesson{grid-template-columns:minmax(0,1fr)}.lesson .toc{display:none}.tocm{display:block;margin-bottom:var(--s2)}}
@media(max-width:900px){
  :root{--gx:var(--s2);--rail:0px;--t4:26px;--t3:20px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .only-m{display:inline-block}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{padding:10px 2px 9px;text-align:center;font:600 11px var(--mono);color:var(--mut);position:relative}
  .tabbar a.on{color:var(--acc);box-shadow:inset 0 3px 0 var(--acc)}
  .tabbar .n{position:absolute;top:4px;margin-left:4px;background:var(--acc);color:var(--onacc);border-radius:99px;padding:0 6px;font-size:10px}
  .page{padding:var(--s3) var(--gx) calc(var(--s4) * 2 + 56px)}
  .top{padding:0 var(--gx)}
  .read{left:0}
  .trow{grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s2)}
  .trow .bar{grid-column:1/-1;order:3}
  .trow .acts{justify-content:flex-start}
  .heat .hr{grid-template-columns:1fr;gap:var(--s1)}
  .next .btn.pri{width:100%}
  .run .head{padding:var(--s1) var(--s2)}
  .run .body{grid-template-columns:minmax(0,1fr)}
  .run main{padding:var(--s2) var(--gx) calc(var(--s4) * 2)}
  .run aside{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:70vh;overflow:auto;border-left:0;border-top:2px solid var(--acc);transform:translateY(105%);transition:transform .2s}
  .run aside.open{transform:none}
  .palbtn{display:inline-flex}
  .qpanel .q{padding:var(--s2)}.qpanel .qhead{padding:10px var(--s2)}
  .acts .btn{flex:1 1 40%}
  .acts .grow{display:none}
  .tbar{grid-template-columns:34px minmax(0,1fr) 42px 16px}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .stats{gap:var(--s2) var(--s3)}
  .sheetov{align-items:end;padding:0}
  .sheet{border-radius:12px 12px 0 0;width:100%;max-height:82vh;padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
  .cmd{align-items:start;padding-top:0}.cmd .sheet{border-radius:0 0 12px 12px;max-height:80vh}
  .toast{bottom:76px}
}
@media(max-width:380px){.pgrid{grid-template-columns:repeat(4,1fr)}.btn{padding:9px 12px}}
@media print{.rail,.top,.tabbar{display:none}.shell{display:block}}
@media(max-width:900px){.only-d{display:none!important}}
@media(min-width:901px){.only-m{display:none!important}}
@media(max-width:900px){.crumbs .cr{display:none}.sec{padding-top:var(--s3)}.crumbs b{font-size:var(--t2)}}