/* Prism — Academics. Layered on site.css, which owns the tokens and the chrome. */

.lwrap{width:min(1240px,calc(100vw - 32px));margin-inline:auto;padding-top:22px}

/* ── class / subject / chapter browsing ─────────────────────────── */
.lhero{max-width:74ch;margin-bottom:26px}
.lhero h1{font-size:clamp(28px,3.8vw,42px);letter-spacing:-.03em;margin-top:8px}
.lhero p{margin-top:12px;font-size:15.5px;color:var(--txt-2);line-height:1.7}

.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 8px}
.tabs .tl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.tab{font-family:inherit;font-size:13.5px;padding:9px 17px;border-radius:11px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--txt-2);transition:.16s}
.tab:hover{color:var(--txt);border-color:var(--edge-strong)}
.tab.on{background:#34d399;border-color:#34d399;color:#04211a;font-weight:650}

.lfind{position:relative;margin:14px 0 26px;max-width:520px}
.lfind input{width:100%;font-family:inherit;font-size:14px;padding:11px 14px 11px 38px;border-radius:12px;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--txt)}
.lfind input:focus{outline:none;border-color:#34d399;background:rgba(255,255,255,.07)}
.lfind input::placeholder{color:var(--faint)}
.lfind svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  stroke:var(--faint);fill:none;stroke-width:2;pointer-events:none}

.subj{margin-bottom:34px}
.subj > header{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--edge)}
.subj > header .si{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--sa) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--sa) 36%,transparent)}
.subj > header .si svg{width:21px;height:21px;stroke:var(--sa);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.subj > header h2{font-size:20px;letter-spacing:-.02em}
.subj > header .cnt{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--faint)}

.chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.chap{position:relative;display:flex;flex-direction:column;gap:9px;padding:15px 17px;
  border:1px solid var(--edge);border-radius:15px;background:rgba(255,255,255,.024);
  text-decoration:none;color:inherit;transition:transform .18s,border-color .18s,background .18s}
.chap:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sa) 50%,transparent);
  background:rgba(255,255,255,.05)}
.chap .top{display:flex;align-items:baseline;gap:9px}
.chap .num{font-family:var(--mono);font-size:11px;color:var(--sa);flex:none}
.chap h3{font-size:14.6px;line-height:1.35;letter-spacing:-.01em;flex:1}
.chap .cdesc{font-size:12.4px;line-height:1.55;color:var(--txt-2);margin:0;
  /* three lines, so cards in a row stay the same height whatever the text */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chap .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--faint);
  font-family:var(--mono);margin-top:auto;padding-top:8px;border-top:1px solid var(--edge)}
.chap .labpin{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 7px;
  border-radius:20px;background:rgba(127,196,255,.15);color:#7fc4ff;font-family:var(--sans)}
.chap .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.chap .bar i{display:block;height:100%;background:var(--sa);border-radius:2px}
.chap.done{border-color:color-mix(in srgb,var(--sa) 40%,transparent)}
.chap .tick{position:absolute;top:13px;right:14px;width:16px;height:16px;border-radius:50%;
  background:var(--sa);display:none;place-items:center}
.chap.done .tick{display:grid}
.chap .tick svg{width:9px;height:9px;stroke:#04211a;stroke-width:3.4;fill:none}

/* ── the chapter page ───────────────────────────────────────────── */
.crumb{display:flex;gap:7px;align-items:center;font-size:12.2px;color:var(--faint);
  flex-wrap:wrap;margin-bottom:10px}
.crumb a{color:var(--txt-2);text-decoration:none}
.crumb a:hover{color:var(--txt)}
.chead h1{font-size:clamp(25px,3.4vw,36px);letter-spacing:-.03em}
.chead .sup{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:11px;
  font-size:12.4px;color:var(--faint);font-family:var(--mono)}

.modes{display:flex;gap:6px;margin:20px 0 18px;padding:5px;border-radius:14px;
  border:1px solid var(--edge);background:rgba(255,255,255,.03);width:fit-content}
.modes button{font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 22px;border-radius:10px;
  cursor:pointer;border:0;background:transparent;color:var(--txt-2);transition:.16s}
.modes button:hover{color:var(--txt)}
.modes button.on{background:var(--sa,#34d399);color:#04211a}

.creader{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:34px;align-items:start}
@media (max-width:940px){ .creader{grid-template-columns:minmax(0,1fr)} .ctoc{display:none} }
.ctoc{position:sticky;top:78px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;
  border-left:1px solid var(--edge);padding-left:16px}
.ctoc .th{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  margin-bottom:10px;font-weight:600}
.ctoc a{display:block;font-size:12.4px;line-height:1.45;color:var(--dim);text-decoration:none;
  padding:5px 0 5px 10px;border-left:2px solid transparent;transition:.15s}
.ctoc a:hover{color:var(--txt)}
.ctoc a.l3{padding-left:22px;font-size:11.8px}
.ctoc a.here{color:var(--sa,#34d399);border-left-color:var(--sa,#34d399)}

/* ── prose: what the markdown renders into ──────────────────────── */
.prose{font-size:15.2px;line-height:1.78;color:var(--txt-2);max-width:76ch}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:23px;letter-spacing:-.025em;color:var(--txt);margin:38px 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--edge);scroll-margin-top:84px}
.prose h3{font-size:17.5px;letter-spacing:-.015em;color:var(--txt);margin:28px 0 10px;scroll-margin-top:84px}
.prose h4{font-size:15px;color:var(--txt);margin:20px 0 8px}
.prose p{margin:0 0 15px}
.prose strong{color:var(--txt);font-weight:650}
.prose em{color:var(--txt-2)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--sa,#34d399)}
.prose a{color:var(--sa,#34d399)}
.prose hr{border:0;border-top:1px solid var(--edge);margin:30px 0}
.prose code{font-family:var(--mono);font-size:.9em;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.07);color:var(--txt)}
.prose pre{overflow-x:auto;padding:14px 16px;border-radius:12px;border:1px solid var(--edge);
  background:rgba(255,255,255,.03);margin:0 0 16px}
.prose pre code{background:none;padding:0}
/* the notes lean on blockquotes for memory tricks, key facts and worked steps */
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-radius:0 13px 13px 0;
  border-left:3px solid var(--sa,#34d399);background:rgba(255,255,255,.032)}
.prose blockquote p{margin-bottom:9px}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote strong:first-child{color:var(--sa,#34d399)}
.prose table{width:100%;border-collapse:collapse;font-size:13.4px;margin:0 0 18px;display:block;
  overflow-x:auto;white-space:nowrap}
.prose th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--edge-strong)}
.prose td{padding:9px 12px;border-bottom:1px solid var(--edge)}
.prose .katex{font-size:1.03em}
.prose .katex-display{overflow-x:auto;overflow-y:hidden;padding:6px 0;margin:18px 0}
.prose .math-err{color:#fb7185}

/* ── the lab banner ─────────────────────────────────────────────────
   Sits above the chapter body in both Read and Practise, because a lab is
   worth knowing about before you read rather than after. */
.labxs{margin:0 0 22px;padding:18px 20px;border-radius:18px;
  border:1px solid color-mix(in srgb,#7fc4ff 26%,var(--edge));
  background:linear-gradient(122deg,rgba(127,196,255,.10),rgba(167,139,250,.07) 62%,transparent)}
.labxs .lx-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.labxs .lx-badge{flex:none;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:20px;margin-top:1px;
  background:rgba(127,196,255,.18);color:#7fc4ff;border:1px solid rgba(127,196,255,.34)}
.labxs .lx-h{font-size:15px;color:var(--txt);font-weight:650;letter-spacing:-.015em;margin-bottom:3px}
.labxs .lx-s{font-size:12.8px;color:var(--txt-2);line-height:1.6}
.labxs .lx-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.labxs a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--edge);background:rgba(255,255,255,.05);text-decoration:none;
  color:var(--txt-2);transition:transform .17s,border-color .17s,background .17s}
.labxs a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--la,#7fc4ff) 60%,transparent);
  background:rgba(255,255,255,.09)}
.labxs .lx-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--la,#7fc4ff) 17%,transparent);
  border:1px solid color-mix(in srgb,var(--la,#7fc4ff) 36%,transparent)}
.labxs .lx-ic svg{width:22px;height:22px;stroke:var(--la,#7fc4ff);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.labxs .lx-tx{flex:1;min-width:0}
.labxs .lx-tx b{display:block;color:var(--txt);font-size:13.8px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:1px}
.labxs .lx-tx span{display:block;font-size:11.6px;color:var(--faint);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.labxs .lx-go{flex:none;color:var(--la,#7fc4ff);font-size:16px;transition:transform .17s}
.labxs a:hover .lx-go{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .labxs a:hover{transform:none} .labxs a:hover .lx-go{transform:none}
}

/* ── practice ───────────────────────────────────────────────────── */
.pfilt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.pfilt .fl{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.chip{font-family:inherit;font-size:12px;padding:6px 13px;border-radius:20px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--txt-2);transition:.15s}
.chip:hover{color:var(--txt);border-color:var(--edge-strong)}
.chip.on{background:var(--sa,#34d399);border-color:var(--sa,#34d399);color:#04211a;font-weight:650}
.chip.easy.on{background:#4ade80;border-color:#4ade80}
.chip.medium.on{background:#fbbf24;border-color:#fbbf24;color:#291705}
.chip.hard.on{background:#fb7185;border-color:#fb7185;color:#2b0710}

.qbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 17px;margin-bottom:14px;
  border:1px solid var(--edge);border-radius:14px;background:rgba(255,255,255,.028)}
.qbar .qn{font-size:13.4px;color:var(--txt);font-weight:600}
.qbar .qn i{font-style:normal;color:var(--faint);font-weight:400}
.qbar .prog{flex:1;min-width:120px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);
  overflow:hidden}
.qbar .prog i{display:block;height:100%;background:var(--sa,#34d399);transition:width .3s}
.qbar .sc{font-family:var(--mono);font-size:12.5px;color:var(--txt-2)}

.qcard{border:1px solid var(--edge);border-radius:18px;padding:22px 24px;
  background:rgba(255,255,255,.024);margin-bottom:14px}
.qcard .qh{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.qcard .qh .badge{font-size:10.5px;padding:3px 9px;border-radius:20px;border:1px solid var(--edge);
  color:var(--dim)}
.qcard .qh .badge.d-easy{color:#4ade80;border-color:rgba(74,222,128,.35)}
.qcard .qh .badge.d-medium{color:#fbbf24;border-color:rgba(251,191,36,.35)}
.qcard .qh .badge.d-hard{color:#fb7185;border-color:rgba(251,113,133,.35)}
.qcard .qt{font-size:16px;line-height:1.6;color:var(--txt);margin-bottom:18px}
.qcard .qt .katex{font-size:1em}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:12px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.03);transition:.15s;
  font-size:14.2px;color:var(--txt-2);text-align:left;font-family:inherit;width:100%}
.opt:hover:not(:disabled){border-color:var(--edge-strong);background:rgba(255,255,255,.06);color:var(--txt)}
.opt .mk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--edge-strong);flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:1px}
.opt.picked{border-color:var(--sa,#34d399);background:color-mix(in srgb,var(--sa,#34d399) 12%,transparent)}
.opt.picked .mk{border-color:var(--sa,#34d399);color:var(--sa,#34d399)}
.opt.right{border-color:#4ade80;background:rgba(74,222,128,.12);color:var(--txt)}
.opt.right .mk{background:#4ade80;border-color:#4ade80;color:#04211a}
.opt.wrong{border-color:#fb7185;background:rgba(251,113,133,.12);color:var(--txt)}
.opt.wrong .mk{background:#fb7185;border-color:#fb7185;color:#2b0710}
.opt:disabled{cursor:default}

.tfin{width:100%;font-family:var(--mono);font-size:14.5px;padding:13px 16px;border-radius:12px;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--txt)}
.tfin:focus{outline:none;border-color:var(--sa,#34d399)}
.wans{width:100%;min-height:120px;resize:vertical;font-family:inherit;font-size:14.2px;line-height:1.6;
  padding:13px 16px;border-radius:12px;border:1px solid var(--edge);
  background:rgba(255,255,255,.04);color:var(--txt)}
.wans:focus{outline:none;border-color:var(--sa,#34d399)}

.qacts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px}
.qbtn{font-family:inherit;font-size:13px;padding:9px 17px;border-radius:11px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--txt-2);transition:.16s}
.qbtn:hover{color:var(--txt);border-color:var(--edge-strong)}
.qbtn.primary{background:var(--sa,#34d399);border-color:var(--sa,#34d399);color:#04211a;font-weight:650}
.qbtn:disabled{opacity:.4;cursor:not-allowed}
.qbtn.ghost{background:transparent}

.verdict{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;border-radius:12px;
  font-size:13.6px;font-weight:600}
.verdict.ok{background:rgba(74,222,128,.13);color:#4ade80}
.verdict.no{background:rgba(251,113,133,.13);color:#fb7185}
.verdict.self{background:rgba(127,196,255,.13);color:#7fc4ff}

.expl{margin-top:14px;padding:16px 18px;border-radius:13px;border:1px solid var(--edge);
  background:rgba(255,255,255,.03);font-size:13.8px;line-height:1.72;color:var(--txt-2);
  white-space:pre-wrap}
.expl h5{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  margin-bottom:9px;font-weight:600}
.model{margin-top:14px;padding:16px 18px;border-radius:13px;
  border:1px solid color-mix(in srgb,var(--sa,#34d399) 34%,transparent);
  background:color-mix(in srgb,var(--sa,#34d399) 8%,transparent);font-size:14px;line-height:1.7;
  color:var(--txt)}
.model h5{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--sa,#34d399);margin-bottom:9px;font-weight:600}
.selfmark{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;align-items:center}
.selfmark span{font-size:12.6px;color:var(--txt-2);margin-right:3px}

.pdone{border:1px solid var(--edge);border-radius:18px;padding:30px;text-align:center;
  background:rgba(255,255,255,.028)}
.pdone .big{font-family:var(--mono);font-size:44px;letter-spacing:-.03em;color:var(--txt)}
.pdone .lab2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin-top:6px}
.pdone p{font-size:13.8px;color:var(--txt-2);margin:14px auto 18px;max-width:52ch;line-height:1.7}

.loading{padding:60px 20px;text-align:center;color:var(--faint);font-size:13.5px}
.empty{padding:44px 20px;text-align:center;color:var(--faint);font-size:13.5px;
  border:1px dashed var(--edge);border-radius:16px}

@media (prefers-reduced-motion:reduce){
  .chap:hover{transform:none}
  .qbar .prog i{transition:none}
}
@media print{
  .site-header,.site-footer,.modes,.pfilt,.qacts,.ctoc,.labxs,.qbar{display:none!important}
  .creader{grid-template-columns:1fr}
  .prose{max-width:none;color:#000}
}

/* ── figures ────────────────────────────────────────────────────────
   Generated as SVG at build time from the equation or the data itself,
   so a chart cannot disagree with the sentence next to it. Colours are
   tokens rather than baked in, so figures follow the site theme. */
.prose .fig{margin:24px 0;padding:16px 14px 12px;border:1px solid var(--edge);border-radius:16px;
  background:rgba(255,255,255,.028);
  --fig-1:#7fc4ff; --fig-2:#f0abfc; --fig-3:#4ade80; --fig-4:#fbbf24; --fig-5:#fb7185}
.prose .fig svg{display:block;width:100%;height:auto;overflow:visible;color:var(--dim)}
.prose .fig figcaption{margin-top:10px;font-size:12.2px;line-height:1.55;color:var(--faint);
  text-align:center;font-style:italic}
.fg-grid{stroke:currentColor;stroke-opacity:.16;stroke-width:1}
.fg-axis{stroke:currentColor;stroke-opacity:.55;stroke-width:1.4}
.fg-tick{fill:var(--faint);font-family:var(--mono);font-size:11px}
.fg-axlab{fill:var(--txt-2);font-size:12px;font-weight:500}
.fg-leg{fill:var(--txt-2);font-size:12px}
.fg-line{stroke:var(--c,var(--fig-1));stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.fg-fill{fill:var(--c,var(--fig-1));fill-opacity:.14;stroke:none}
.fg-dot{fill:var(--c,var(--fig-1))}
.fg-bar{fill:var(--c,var(--fig-1));fill-opacity:.72;
  stroke:var(--c,var(--fig-1));stroke-width:1.2}
.fg-val{fill:var(--txt-2);font-family:var(--mono);font-size:11px}
.fg-note{fill:var(--c,var(--txt-2));font-size:11.5px;font-weight:600}
.fg-sym{fill:var(--fig-1);font-size:19px}
.fg-sym.fg-half{opacity:.45}
.fg-arc{stroke:var(--c,var(--fig-1));stroke-width:2;fill:none;stroke-dasharray:4 3}
@media print{
  .prose .fig{break-inside:avoid;background:none}
  .fg-tick,.fg-axlab,.fg-leg,.fg-val{fill:#000}
}

/* ── chapter illustrations ──────────────────────────────────────── */
.chero{margin:0 0 20px;border-radius:18px;overflow:hidden;border:1px solid var(--edge);
  background:rgba(255,255,255,.02);line-height:0;position:relative}
.chero::after{content:"";position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(to bottom,transparent,var(--bg,#06080f) 96%);pointer-events:none}
.chero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cthumb{display:block;margin:-15px -17px 4px;border-radius:14px 14px 0 0;overflow:hidden;
  line-height:0;border-bottom:1px solid var(--edge)}
.cthumb img{display:block;width:100%;height:104px;object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.chap:hover .cthumb img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){ .chap:hover .cthumb img{transform:none} }
@media print{ .chero,.cthumb{display:none} }

/* ── class picker ───────────────────────────────────────────────────
   The class is the first real decision on this page. It used to be a
   filter chip the same size as the search box; it is now a card each. */
.classpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin:24px 0 20px;max-width:760px}
.cbtn{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  font-family:inherit;padding:15px 18px;border-radius:16px;
  border:1px solid var(--edge);background:rgba(255,255,255,.028);color:var(--txt-2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,background .18s}
.cbtn:hover{transform:translateY(-2px);border-color:var(--edge-strong);
  background:rgba(255,255,255,.055)}
.cbtn .cb-n{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em;
  background:rgba(255,255,255,.055);color:var(--txt-2);border:1px solid var(--edge);
  transition:.18s}
.cbtn .cb-t{flex:1;min-width:0;display:block}
.cbtn .cb-t b{display:block;font-size:15.5px;color:var(--txt);letter-spacing:-.015em;
  font-weight:650;margin-bottom:2px}
.cbtn .cb-t span{display:block;font-size:11.8px;color:var(--faint)}
.cbtn .cb-m{flex:none;text-align:right;font-family:var(--mono);font-size:11px;
  color:var(--faint);line-height:1.5}
.cbtn .cb-m i{display:block;font-style:normal;opacity:.75}
.cbtn.on{border-color:#34d399;background:color-mix(in srgb,#34d399 12%,transparent)}
.cbtn.on .cb-n{background:#34d399;color:#04211a;border-color:#34d399}
.cbtn.on .cb-t b{color:var(--txt)}
.cbtn.on .cb-m{color:#34d399}
@media (prefers-reduced-motion:reduce){ .cbtn:hover{transform:none} }