/* EC120 Study: one column of reading, graph-paper stage for explainers, question cards for practice */
:root{
  --bg:#eef0f6; --paper:#fafbfd; --card:#ffffff; --ink:#1c2140; --muted:#5d6482; --grid:#e1e6ef; --line:#cfd4e3;
  --dem:#2361c7; --sup:#cf4329; --tax:#b98000; --sub:#1d8656; --accent:#4b2e83; --onfill:#ffffff;
  --good:#1d8656; --bad:#c23b22; --goodbg:#e4f4ec; --badbg:#fbe9e5; --hlbg:#f6edd6;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f111c; --paper:#171a2a; --card:#1e2235; --ink:#e7e9f4; --muted:#9aa1bf; --grid:#242840; --line:#353b58;
  --dem:#6f9ff2; --sup:#f27d62; --tax:#e6b63d; --sub:#52c48f; --accent:#ad96e6; --onfill:#10131f;
  --good:#52c48f; --bad:#f27d62; --goodbg:#16302a; --badbg:#3a1f1c; --hlbg:#332a14; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f111c; --paper:#171a2a; --card:#1e2235; --ink:#e7e9f4; --muted:#9aa1bf; --grid:#242840; --line:#353b58;
  --dem:#6f9ff2; --sup:#f27d62; --tax:#e6b63d; --sub:#52c48f; --accent:#ad96e6; --onfill:#10131f;
  --good:#52c48f; --bad:#f27d62; --goodbg:#16302a; --badbg:#3a1f1c; --hlbg:#332a14; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--tax);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:56px;flex-wrap:wrap}
.brand{font:800 19px var(--display);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.brand i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--onfill);font:800 13px var(--mono);font-style:normal}
.topbar nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topbar nav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--ink);background:var(--card)}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,6vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.6vw,36px);font-weight:800}
h3{font-size:21px;font-weight:800}
.eb{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.lede{color:var(--muted);font-size:19px;max-width:62ch;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;min-height:42px;padding:0 16px;font:700 15px var(--body);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--onfill)}
.btn.small{min-height:34px;padding:0 12px;font-size:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--mono);letter-spacing:.04em;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.bar{height:8px;border-radius:99px;background:var(--grid);overflow:hidden;display:flex}
.bar span{display:block;height:100%}
.bar .ok{background:var(--good)} .bar .no{background:var(--bad)}
footer{color:var(--muted);font-size:14px;padding-block:40px 60px;border-top:1px solid var(--line);margin-top:60px}

/* home */
.hero{padding-block:44px 28px;display:grid;gap:16px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font:800 30px var(--display);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:14px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding-block:8px 20px}
.mod{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s,transform .15s}
.mod:hover{border-color:var(--accent);transform:translateY(-2px)}
.mod .num{font:800 13px var(--mono);color:var(--accent);letter-spacing:.1em}
.mod h3{font-size:22px}
.mod p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
.mod .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.mod .prog{display:flex;align-items:center;gap:10px;font:500 13px var(--mono);color:var(--muted)}
.mod .prog .bar{flex:1}
.section-h{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:26px}

/* module page */
.mhead{padding-block:36px 18px;display:grid;gap:12px}
.tabs{position:sticky;top:57px;z-index:15;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;text-decoration:none;color:var(--muted);font-weight:700;font-size:15px;padding:12px 14px;border-bottom:3px solid transparent}
.tabs a.on{color:var(--ink);border-color:var(--accent)}
.sec{padding-block:40px 10px;display:grid;gap:18px}
.sec>header{display:grid;gap:6px}

/* player */
.player{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.player:fullscreen{border-radius:0;justify-content:center;background:var(--paper)}
.stage{position:relative;background:var(--paper);cursor:pointer}
.stage svg{display:block;width:100%;height:auto}
.bigplay{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 20px 12px 16px;background:var(--accent);color:var(--onfill);font:700 15px var(--body);cursor:pointer;box-shadow:0 6px 20px rgb(0 0 0 / .18)}
.bigplay svg{width:18px;height:18px}
.cap{min-height:4.4em;padding:14px 20px;border-top:1px solid var(--line);font-size:clamp(16px,2.2vw,19px);line-height:1.45;display:flex;gap:12px;align-items:flex-start}
.cap .tag{flex:none;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:6px;min-width:5.5em}
.cap p{margin:0;min-width:0}
.ctrl{display:flex;align-items:center;gap:10px;padding:10px 14px 14px;flex-wrap:wrap}
.ib{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;height:40px;min-width:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 13px var(--mono);cursor:pointer}
.ib svg{width:18px;height:18px}
.ib.main{background:var(--accent);color:var(--onfill);border-color:transparent;width:48px;height:48px;border-radius:50%}
.time{font:500 13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{position:relative;flex:1 1 240px;min-width:0;height:28px;display:flex;align-items:center}
.track input{width:100%;margin:0;accent-color:var(--accent);position:relative;z-index:1;background:transparent}
.ticks{position:absolute;left:0;right:0;top:50%;height:12px;transform:translateY(-50%);pointer-events:none}
.ticks i{position:absolute;top:0;width:2px;height:12px;background:var(--muted);opacity:.45;border-radius:1px}
.chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.ch{width:100%;text-align:left;display:flex;gap:10px;align-items:baseline;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;font-size:15px}
.ch .n{font:700 12px var(--mono);color:var(--muted)}
.ch .t{font-weight:700;flex:1;min-width:0}
.ch .d{font:500 12px var(--mono);color:var(--muted)}
.ch[aria-current="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.hint{color:var(--muted);font-size:14px;margin:0}
@media (max-width:560px){.cap .tag{display:none}.time{order:3}}

/* notes */
.notes{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:start}
.notes .toc{position:sticky;top:130px;display:grid;gap:4px;font-size:14px;border-left:2px solid var(--line);padding-left:14px}
.notes .toc a{color:var(--muted);text-decoration:none;line-height:1.35;padding:3px 0}
.notes .toc a:hover{color:var(--ink)}
.prose{min-width:0;max-width:70ch;display:grid;gap:14px}
.prose h3{font-size:25px;margin-top:22px}
.prose h4{font:800 18px var(--display);margin:8px 0 0}
.prose p,.prose ul,.prose ol{margin:0}
.prose li+li{margin-top:4px}
.prose strong{font-weight:700}
.prose code,.f{font-family:var(--mono);font-size:.92em;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.formula{font-family:var(--mono);font-size:17px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;overflow-x:auto;white-space:nowrap}
.call{border-radius:12px;padding:14px 16px;display:grid;gap:6px;border:1px solid var(--line);background:var(--card)}
.call .k{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.call.trap{background:var(--badbg);border-color:color-mix(in srgb,var(--bad) 40%,transparent)} .call.trap .k{color:var(--bad)}
.call.key{background:var(--hlbg);border-color:color-mix(in srgb,var(--tax) 45%,transparent)} .call.key .k{color:var(--tax)}
.call.beyond{border-style:dashed} .call.beyond .k{color:var(--accent)}
.call p{margin:0}
.fig{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:6px}
.fig svg{width:100%;height:auto;display:block;max-height:420px}
.fig figcaption{color:var(--muted);font-size:14px;padding:0 6px 4px}
.tw{overflow-x:auto}
table.t{border-collapse:collapse;font-size:15px;min-width:100%;font-variant-numeric:tabular-nums}
table.t th{font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:2px solid var(--line)}
table.t td{padding:8px 12px;border-bottom:1px solid var(--line)}
table.t td.n{font-family:var(--mono)}
table.t tr.hl td{background:var(--hlbg)}
@media (max-width:900px){.notes{grid-template-columns:1fr}.notes .toc{display:none}}

/* worked examples */
.ex{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px}
.ex .src{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ex .steps{display:grid;gap:10px;counter-reset:s}
.ex .step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start}
.ex .step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font:700 13px var(--mono);color:var(--accent)}
.ex .step p{margin:0}
.ex .ans{background:var(--goodbg);border-radius:10px;padding:10px 14px;font-weight:700}
.ex-grid{display:grid;gap:14px}

/* quiz */
.qbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);font:700 14px var(--body);padding:7px 12px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--onfill)}
.qlist{display:grid;gap:14px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:14px;min-width:0}
.q.ok{border-color:color-mix(in srgb,var(--good) 55%,transparent)} .q.no{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.q .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.q .qt{font-size:18px;font-weight:700;line-height:1.45}
.q .qt p{margin:0 0 8px}
.opts{display:grid;gap:8px}
.opts.gr{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;padding:11px 14px;font:inherit;font-size:16px;cursor:pointer;line-height:1.4}
.opt:hover:not([disabled]){border-color:var(--accent)}
.opt .L{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--card);border:1px solid var(--line);font:700 13px var(--mono);color:var(--muted)}
.opt.gopt{flex-direction:column;align-items:stretch}
.opt.gopt svg{width:100%;height:auto}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--good);background:var(--goodbg)} .opt.right .L{background:var(--good);color:var(--onfill);border-color:transparent}
.opt.wrong{border-color:var(--bad);background:var(--badbg)} .opt.wrong .L{background:var(--bad);color:var(--onfill);border-color:transparent}
.opt.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--paper))}
.num{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.num input{font:600 17px var(--mono);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:9px 12px;width:180px;max-width:100%}
.fb{border-radius:12px;padding:12px 16px;display:grid;gap:4px}
.fb.ok{background:var(--goodbg)} .fb.no{background:var(--badbg)}
.fb b{font-size:16px} .fb.ok b{color:var(--good)} .fb.no b{color:var(--bad)}
.fb p{margin:0}
.qfig{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px;max-width:560px}
.qfig svg{width:100%;height:auto;display:block}
.qtable{max-width:640px}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted)}
/* practice */
.setup{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:18px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 12px;font-weight:700;font-size:15px;cursor:pointer}
.checks input{accent-color:var(--accent);width:18px;height:18px}
.examhead{position:sticky;top:57px;z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.clock{font:700 20px var(--mono);font-variant-numeric:tabular-nums}
.clock.low{color:var(--bad)}
.score{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.score b{font:800 52px var(--display)}
/* SVG vocabulary */
.grid{stroke:var(--grid);stroke-width:1}
.ax{stroke:var(--ink);stroke-width:2;fill:none}
.tick{fill:var(--muted);font:500 13px var(--mono)}
.axt{fill:var(--muted);font:700 14px var(--body)}
.dem{stroke:var(--dem);stroke-width:4;fill:none;stroke-linecap:round}
.sup{stroke:var(--sup);stroke-width:4;fill:none;stroke-linecap:round}
.ghost{stroke-width:2.5;stroke-dasharray:7 7}
.ctl{stroke:var(--accent);stroke-width:4;fill:none;stroke-linecap:round}
.ctl.dash{stroke-dasharray:8 7;stroke-width:3}
.guide{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 5;fill:none}
.dot{fill:var(--ink);stroke:var(--paper);stroke-width:3}
.dot.d{fill:var(--dem)} .dot.s{fill:var(--sup)}
.lab{font:700 17px var(--body)}
.plab{font:700 14px var(--mono);fill:var(--ink)}
.halo{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.t-dem{fill:var(--dem)} .t-sup{fill:var(--sup)} .t-tax{fill:var(--tax)} .t-sub{fill:var(--sub)} .t-acc{fill:var(--accent)} .t-ink{fill:var(--ink)} .t-mut{fill:var(--muted)}
.c-dem{color:var(--dem)} .c-sup{color:var(--sup)} .c-tax{color:var(--tax)} .c-sub{color:var(--sub)} .c-acc{color:var(--accent)} .c-ink{color:var(--ink)}
.arw line,.br path{stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round}
.arw polygon{fill:currentColor}
.br text{fill:currentColor;font:700 14px var(--body)}
.sb{font-size:.72em}
.card{fill:var(--card);stroke:var(--line);stroke-width:1}
.card.hl{stroke:var(--tax);stroke-width:2}
.pl{fill:var(--muted);font:700 11px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.pv{fill:var(--ink);font:700 25px var(--mono)}
.pv.s{font:700 16px var(--body)}
.pd{font:700 15px var(--mono)}
.eyebrow{fill:var(--accent);font:700 14px var(--mono);letter-spacing:.14em}
.h-big{fill:var(--ink);font:800 66px var(--display);letter-spacing:-.01em}
.h-mid{fill:var(--ink);font:800 40px var(--display)}
.h-mini{fill:var(--ink);font:800 21px var(--display)}
.h-sub{fill:var(--muted);font:400 22px var(--body)}
.small{fill:var(--muted);font:400 14px var(--body)}
.rc{font:400 21px var(--body);fill:var(--ink)}
.fill-tax{fill:var(--tax);fill-opacity:.16} .fill-dem{fill:var(--dem);fill-opacity:.16} .fill-sup{fill:var(--sup);fill-opacity:.16} .fill-sub{fill:var(--sub);fill-opacity:.18} .fill-acc{fill:var(--accent);fill-opacity:.16}
.bar-d{stroke:var(--dem);stroke-width:5;stroke-linecap:round} .bar-s{stroke:var(--sup);stroke-width:5;stroke-linecap:round} .bar-g{stroke:var(--sub);stroke-width:6;stroke-linecap:round} .bar-r{stroke:var(--sup);stroke-width:6;stroke-linecap:round}
.pie-a{fill:var(--tax);stroke:var(--paper);stroke-width:3} .pie-b{fill:var(--dem)} .pie-c{fill:var(--sup)}
.ico{fill:var(--paper);stroke:var(--ink);stroke-width:4} .ico2{fill:var(--grid)} .ico3{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.th{fill:var(--muted);font:700 15px var(--body)} .td{fill:var(--ink);font:500 20px var(--mono)} .tdn{fill:var(--ink);font:700 20px var(--body)} .tline{stroke:var(--line);stroke-width:1.5}
.cellhl{fill:var(--tax);fill-opacity:.16;stroke:var(--tax);stroke-width:2} .seg-t{fill:var(--tax)} .seg-p{fill:var(--dem)}
.barf-d{fill:var(--dem)} .barf-s{fill:var(--sup)}
.bart{fill:var(--onfill);font:700 14px var(--body)}

.inkl{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round} .subl{stroke:var(--sub);stroke-width:4;fill:none;stroke-linecap:round} .taxl{stroke:var(--tax);stroke-width:4;fill:none;stroke-linecap:round}
.seg-g{fill:var(--muted)}
.bx{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.bx.a{stroke:var(--accent);stroke-width:2.5} .bx.dem{fill:color-mix(in srgb,var(--dem) 13%,var(--card));stroke:var(--dem);stroke-width:2}
.bx.sup{fill:color-mix(in srgb,var(--sup) 13%,var(--card));stroke:var(--sup);stroke-width:2} .bx.tax{fill:color-mix(in srgb,var(--tax) 15%,var(--card));stroke:var(--tax);stroke-width:2}
.bx.sub{fill:color-mix(in srgb,var(--sub) 14%,var(--card));stroke:var(--sub);stroke-width:2} .bx.acc{fill:color-mix(in srgb,var(--accent) 14%,var(--card));stroke:var(--accent);stroke-width:2}
.bx.ghost{fill:none;stroke-dasharray:6 6}
.bxt{fill:var(--ink);font:800 19px var(--display)} .bxs{fill:var(--muted);font:400 14px var(--body)}
.cn{stroke:var(--muted);stroke-width:2.5;stroke-linecap:round}
.cn.dem{stroke:var(--dem)} .cn.sup{stroke:var(--sup)} .cn.tax{stroke:var(--tax)} .cn.sub{stroke:var(--sub)} .cn.acc{stroke:var(--accent)} .cn.dash{stroke-dasharray:6 6}
.chipbg{fill:var(--card);stroke:var(--line);stroke-width:1.5} .chipbg.dem{fill:var(--dem);stroke:none} .chipbg.sup{fill:var(--sup);stroke:none} .chipbg.tax{fill:var(--tax);stroke:none} .chipbg.sub{fill:var(--sub);stroke:none} .chipbg.acc{fill:var(--accent);stroke:none}
.chipt{fill:var(--ink);font:700 14px var(--body)} .chipt.dem,.chipt.sup,.chipt.tax,.chipt.sub,.chipt.acc{fill:var(--onfill)}
/* accounts */
.acct{border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 14px var(--body);border-radius:999px;padding:6px 14px;cursor:pointer;margin-left:6px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct.on{border-color:var(--accent);color:var(--accent)}
.acct.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:7px;vertical-align:1px}
.authdlg{border:1px solid var(--line);border-radius:18px;padding:0;background:var(--card);color:var(--ink);width:min(440px,calc(100vw - 32px));box-shadow:0 24px 60px rgb(0 0 0 / .25)}
.authdlg::backdrop{background:rgb(15 17 28 / .45);backdrop-filter:blur(2px)}
.authbox{display:grid;gap:10px;padding:24px}
.authbox h3{font-size:24px}
.authbox label{font-weight:700;font-size:14px;margin-top:4px}
.authbox input{font:500 16px var(--body);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:10px 12px;width:100%}
.authbox input:focus{border-color:var(--accent);outline:none}
.amsg{margin:0;min-height:1.2em;font-size:14px;color:var(--good)} .amsg.bad{color:var(--bad)}
.aswitch{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:640px){.topbar{position:static}.tabs,.examhead{top:0}html{scroll-padding-top:70px}.notes .toc{display:none}}
.course .code{display:inline-flex;align-self:flex-start;font:800 13px var(--mono);letter-spacing:.08em;color:#fff;background:var(--ca,var(--accent));border-radius:8px;padding:5px 10px}
.course.soon{opacity:.72}
.course.soon:hover{opacity:1}
/* sign-in gate */
html.gated #app,html.gated footer{display:none}
.gate{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:40px 16px}
.gate .authbox{background:var(--card);border:1px solid var(--line);border-radius:18px;width:min(440px,100%);box-shadow:0 18px 50px rgb(0 0 0 / .12)}
.gate .gatelede{color:var(--muted);margin:0 0 4px;font-size:15px}
[hidden]{display:none!important}
/* entry screen teaser */
.gatewrap{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"head form" "body form";gap:26px 48px;align-items:start}
.t-head{grid-area:head;display:grid;gap:12px}
.t-head h1{font-size:clamp(34px,5vw,54px)}
.gateform{grid-area:form;position:sticky;top:90px}
.t-body{grid-area:body;display:grid;gap:22px;min-width:0}
.t-courses{display:flex;gap:8px;flex-wrap:wrap}
.t-courses span{font:800 13px var(--mono);letter-spacing:.08em;color:#fff;background:var(--ca);border-radius:8px;padding:6px 11px}
.t-demo{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;gap:6px}
.t-demo svg{width:100%;height:auto;display:block}
.t-demo figcaption{color:var(--muted);font-size:14px;padding:0 6px 4px}
.t-feats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.t-feats li{padding-left:28px;position:relative;line-height:1.45}
.t-feats li::before{content:"";position:absolute;left:4px;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.t-try{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:12px}
.t-try .qt{margin:0;font-weight:700;font-size:17px;line-height:1.45}
@media (max-width:860px){.gatewrap{grid-template-columns:1fr;grid-template-areas:"head" "form" "body"}.gateform{position:static}.gate{padding-block:24px}}
.gate .authbox{width:100%}