/* ============================================================
   Interactive study lessons — shared design system
   Used by every lesson page. No dependencies.
   ============================================================ */

:root{
  --bg:#f5f6fa;
  --panel:#ffffff;
  --ink:#1d2233;
  --muted:#5d6477;
  --accent:#4f46e5;
  --accent-ink:#3730c4;
  --accent-soft:#edeefc;
  --ok:#0e9f5d;
  --ok-ink:#0b7a47;
  --ok-soft:#e5f6ed;
  --warn:#b45309;
  --warn-soft:#fdf1df;
  --bad:#dc2626;
  --bad-soft:#fdecec;
  --line:#e3e6ef;
  --code-bg:#181c2e;
  --code-ink:#d9e0fb;
  --radius:14px;
  --shadow:0 1px 2px rgba(22,26,44,.05),0 10px 28px -16px rgba(22,26,44,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{background:var(--accent-soft);color:var(--accent-ink);padding:1px 5px;border-radius:5px;font-size:.88em}
a{color:var(--accent)}
b,strong{font-weight:650}
section{margin:46px 0;scroll-margin-top:64px}
h1{font-size:30px;line-height:1.2;margin:8px 0 6px}
h2{font-size:22px;margin:0 0 4px;display:flex;align-items:center;gap:10px}
h3{font-size:16.5px;margin:0 0 8px}
p{margin:8px 0}
sup,sub{line-height:0}
.secno{
  font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border-radius:8px;padding:2px 8px;letter-spacing:.04em;
}
.sec-sub{color:var(--muted);margin:2px 0 16px;font-size:14.5px}

/* ---------- top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;gap:2px;align-items:center;height:48px;overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav-title{font-weight:750;margin-right:12px;white-space:nowrap;color:var(--accent);font-size:14.5px}
.topnav a{
  color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;
  font-size:13.5px;white-space:nowrap;
}
.topnav a:hover{background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- hero ---------- */
.hero{padding:34px 22px 4px}
.crumbs{font-size:13px;color:var(--muted);letter-spacing:.02em}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.badge{
  font-size:12.5px;font-weight:650;padding:3px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid #d8dbf8;
}
.badge.hot{background:var(--bad-soft);color:var(--bad);border-color:#f6c9c9}
.badge.side{background:var(--ok-soft);color:var(--ok-ink);border-color:#bfe6cf}
.quote{
  margin:16px 0;padding:13px 18px;border-left:4px solid var(--accent);
  background:var(--panel);border-radius:0 12px 12px 0;box-shadow:var(--shadow);
}
.quote .ro{font-style:italic}
.quote .en{color:var(--muted);font-size:14px;margin-top:4px}
.quote .takeaway{margin-top:8px;font-size:14.5px;font-weight:650;color:var(--accent-ink)}
.howto{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;align-items:center;
  font-size:13.5px;color:var(--muted);
}
.howto .hstep{
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;white-space:nowrap;
}
.howto .hstep a{text-decoration:none;color:var(--ink)}
.howto .hstep b{color:var(--accent)}
.rostrip{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 8px}
.roterm{
  font-size:12.5px;background:#fff;border:1px dashed #c9cfe6;border-radius:8px;
  padding:3px 9px;color:var(--muted);
}
.roterm b{color:var(--ink);font-weight:650}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin:14px 0}
.cards-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.cards-2col{grid-template-columns:1fr}}
.cards-1col{grid-template-columns:1fr}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.card h3{display:flex;gap:8px;align-items:baseline}
.card .k{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.card ul{margin:6px 0 0;padding-left:20px}
.card li{margin:5px 0;font-size:14.5px}
.card p{font-size:14.5px}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);margin:14px 0;
}

/* ---------- callouts ---------- */
.note,.warncall{
  border-radius:12px;padding:11px 16px;margin:12px 0;font-size:14.5px;
}
.note{background:var(--accent-soft);border:1px solid #d8dbf8}
.warncall{background:var(--warn-soft);border:1px solid #f2dcb8}

/* ---------- pseudocode ---------- */
pre.code{
  background:var(--code-bg);color:var(--code-ink);padding:14px 17px;margin:10px 0;
  border-radius:12px;font-size:13.5px;line-height:1.6;overflow-x:auto;
}
pre.code .kw{color:#8ab4ff;font-weight:600}
pre.code .cm{color:#7e88b5;font-style:italic}
pre.code .em{color:#ffd479;font-weight:600}

/* ---------- buttons / inputs / segmented ---------- */
.btn{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:9px;padding:6px 13px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.btn:hover{border-color:#c4cadd;background:#fafbff}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.primary.playing{background:var(--warn);border-color:var(--warn)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent-ink)}
.btn.small{padding:3px 10px;font-size:12.5px}
input.field,input.ndrill-in{
  border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:14px;
  font-family:ui-monospace,Menlo,monospace;background:#fff;color:var(--ink);
}
input.field:focus,input.ndrill-in:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.seg{display:inline-flex;background:#eceef6;border-radius:10px;padding:3px;gap:2px}
.seg-btn{
  appearance:none;border:0;background:transparent;border-radius:8px;padding:5px 13px;
  font-size:13px;font-weight:650;color:var(--muted);cursor:pointer;
}
.seg-btn.active{background:#fff;color:var(--accent-ink);box-shadow:0 1px 3px rgba(20,25,45,.14)}

/* ---------- tabs ---------- */
.tabbar{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin-bottom:14px}
.tab{
  appearance:none;background:transparent;border:0;border-bottom:2.5px solid transparent;
  margin-bottom:-2px;padding:8px 14px;font-size:14px;font-weight:650;color:var(--muted);
  cursor:pointer;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tabpane{display:none}
.tabpane.active{display:block}

/* ---------- stepper controls ---------- */
.stepctl{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0;outline:none}
.stepctl:focus-visible{box-shadow:0 0 0 2px var(--accent-soft);border-radius:10px}
.step-lbl{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}
.stepctl .hintkb{font-size:11.5px;color:#a6abc0;margin-left:auto}

/* ---------- machine board ---------- */
.board{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 14px 10px;
}
.stage{
  position:relative;display:flex;gap:14px;align-items:flex-end;
  padding:0 4px;border-bottom:2.5px solid #c5cbdd;
}
.lane{
  position:relative;flex:1;height:100%;
  background:linear-gradient(180deg,#fbfcff 0%,#f0f2fa 100%);
  border-radius:8px 8px 0 0;min-width:34px;
  transition:box-shadow .15s;
}
.lane.clickable{cursor:pointer}
.lane.clickable:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.lane.min-hint{box-shadow:inset 0 0 0 2.5px rgba(79,70,229,.6)}
.lane.min-hint::after{
  content:"min";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border-radius:6px;padding:0 6px;
}
.lane.deny{animation:shake .32s}
.lane.okflash{box-shadow:inset 0 0 0 3px var(--ok)}
.block{
  position:absolute;left:7%;width:86%;border-radius:5px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:650;text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.16);
}
.block.just{animation:pop .55s}
.hline{position:absolute;left:0;right:0;height:0;border-top:2px dashed #98a0bb;pointer-events:none;z-index:6}
.hline.l-lb2{border-top-style:dotted;border-top-color:#b07c2f}
.hline.l-opt{border-top:2.5px solid #15a060}
.hline-tag{
  position:absolute;font-size:10.5px;line-height:1.35;background:#fff;padding:0 6px;
  border:1px solid var(--line);border-radius:6px;color:var(--muted);white-space:nowrap;
}
.hline.l-opt .hline-tag{color:var(--ok-ink);border-color:#b5e2c8;font-weight:650}
.hline.l-lb2 .hline-tag{color:#946221;border-color:#ecd9b6}
.tag-above{bottom:3px}.tag-below{top:3px}
.tag-left{left:6px}.tag-right{right:6px}
.lane-labels{display:flex;gap:14px;padding:7px 4px 0}
.lane-label{flex:1;text-align:center;font-size:12.5px;color:var(--muted);min-width:34px}
.lane-label b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.lane-label.is-max b{color:var(--bad)}

/* job queue */
.queue{display:flex;flex-wrap:wrap;gap:6px;margin:12px 2px 2px;align-items:center;min-height:26px}
.queue .qlbl{font-size:12px;color:var(--muted);margin-right:4px}
.qchip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;font-size:12.5px;background:#fff;
  font-variant-numeric:tabular-nums;transition:opacity .2s;
}
.qchip .dot{width:10px;height:10px;border-radius:3px;flex:none}
.qchip.cur{box-shadow:0 0 0 2px var(--accent);font-weight:700}
.qchip.used{opacity:.32}

/* narration + result */
.narrate{min-height:24px;font-size:14px;margin:8px 2px;color:var(--ink)}
.narrate .okmsg{color:var(--ok-ink);font-weight:600}
.narrate .badmsg{color:var(--bad);font-weight:600}
.narrate .tiemsg{color:var(--warn);font-weight:600}
.result-line{display:flex;flex-wrap:wrap;gap:8px;margin:6px 2px;min-height:26px}
.rchip{
  font-size:12.5px;font-weight:650;border-radius:8px;padding:3px 10px;
  background:#eef0f7;color:var(--muted);font-variant-numeric:tabular-nums;
}
.rchip.good{background:var(--ok-soft);color:var(--ok-ink)}
.rchip.bad{background:var(--bad-soft);color:var(--bad)}
.rchip.acc{background:var(--accent-soft);color:var(--accent-ink)}

/* step log table */
.steplog{width:100%;border-collapse:collapse;margin:8px 0 2px;font-size:13px}
.steplog th{
  text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:4px 8px;border-bottom:1.5px solid var(--line);
}
.steplog td{
  padding:4px 8px;border-bottom:1px solid #eef0f6;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
}
.steplog tr.cur td{background:var(--accent-soft)}
.steplog .chg{font-weight:750;color:var(--accent-ink)}
.loghint{font-size:12px;color:var(--muted);margin:2px 2px 0}

/* meta chips for instance */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}
.mchip{
  font-size:13px;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:3px 10px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.mchip b{color:var(--ink)}
.mchip.opt{border-color:#b5e2c8;background:var(--ok-soft);color:var(--ok-ink)}
.mchip.opt b{color:var(--ok-ink)}

/* toolbar (presets + custom instance) */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.toolbar .tlbl{font-size:12.5px;color:var(--muted);font-weight:650;margin-right:2px}
.toolbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.toolbar .err{font-size:12.5px;color:var(--bad);font-weight:600}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 2px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:18px;height:0;border-top:2px dashed #98a0bb}
.legend .sw.dot{border-top-style:dotted;border-top-color:#b07c2f}
.legend .sw.opt{border-top:2.5px solid #15a060}
.legend .sw.blockex{width:12px;height:12px;border-radius:3px;background:#6366f1;border-top:0}

/* compare grid */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0}
.compare-cell h4{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:8px}
.compare-cell h4 .rchip{margin-left:auto}

/* ---------- worst-case lab ---------- */
.lab-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.lab-controls input[type=range]{width:200px;accent-color:var(--accent)}
.lab-readout{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.bigstat{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:8px 16px;text-align:center;min-width:96px;box-shadow:var(--shadow);
}
.bigstat .v{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums}
.bigstat .l{font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.bigstat.ratio .v{color:var(--bad)}
.lab-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.chartbox .cap{font-size:12px;color:var(--muted);text-align:center;margin-top:2px}

/* ---------- proof gym ---------- */
.proof-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start}
.proof-svgbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.prooflines{list-style:none;counter-reset:pf;margin:0;padding:0}
.prooflines li{
  counter-increment:pf;position:relative;margin:0 0 8px;padding:9px 13px 9px 40px;
  background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14px;
  opacity:.28;transition:opacity .25s,border-color .25s;
}
.prooflines li::before{
  content:counter(pf);position:absolute;left:11px;top:9px;width:20px;height:20px;
  border-radius:50%;background:#eceef6;color:var(--muted);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.prooflines li.on{opacity:1}
.prooflines li.curline{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.prooflines li.curline::before{background:var(--accent);color:#fff}
.qed{font-weight:750;color:var(--ok-ink)}

/* ---------- traps ---------- */
.traps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:14px 0}
.trap{
  background:var(--panel);border:1px solid #f0dcc0;border-left:4px solid var(--warn);
  border-radius:10px;padding:11px 15px;font-size:14px;
}
.trap > b{display:block;margin-bottom:2px}
.trap .body{color:var(--muted);font-size:13.5px}

/* ---------- drills ---------- */
.drill{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);margin:14px 0;
}
.drill h3{display:flex;align-items:center;gap:9px}
.drill .dno{
  font-size:11.5px;font-weight:750;background:var(--ink);color:#fff;
  border-radius:7px;padding:2px 8px;letter-spacing:.04em;
}
.drill .dtag{font-size:11.5px;color:var(--muted);font-weight:600;margin-left:auto}
details.reveal{margin:10px 0 0}
details.reveal summary{
  cursor:pointer;font-size:13.5px;font-weight:650;color:var(--accent-ink);
  user-select:none;list-style:none;display:inline-flex;align-items:center;gap:6px;
}
details.reveal summary::before{content:"▸";transition:transform .15s}
details.reveal[open] summary::before{transform:rotate(90deg)}
details.reveal .rbody{
  margin-top:8px;padding:11px 14px;background:#fafbff;border:1px solid var(--line);
  border-radius:10px;font-size:14px;
}

/* mcq */
.mcq{margin:8px 0}
.mcq-q{font-size:14.5px;margin-bottom:8px}
.mcq-opts{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.opt{
  appearance:none;text-align:left;border:1.5px solid var(--line);background:#fff;
  border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer;color:var(--ink);
  display:flex;gap:7px;align-items:baseline;transition:border-color .12s;
}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default}
.opt .opt-key{font-weight:750;color:var(--muted);font-size:12.5px}
.opt.correct{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.mcq-fb{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mcq-why{font-size:13.5px;padding:8px 12px;border-radius:9px}
.mcq-why.ok{background:var(--ok-soft)}
.mcq-why.bad{background:var(--bad-soft)}

/* numeric drill */
.ndrill{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:7px 0}
.ndrill-lbl{font-size:14px;min-width:150px}
.ndrill-in{width:110px}
.ndrill-fb{font-size:13px;font-weight:600}
.ndrill-fb.ok{color:var(--ok-ink)}
.ndrill-fb.bad{color:var(--bad)}

/* answer tables inside reveals */
.anstable{border-collapse:collapse;font-size:13px;margin:6px 0}
.anstable th,.anstable td{
  border:1px solid var(--line);padding:3px 10px;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
}
.anstable th{background:#f3f4fa;font-family:inherit;font-weight:650}

/* footer */
footer{margin:60px 0 40px;color:var(--muted);font-size:13.5px}
footer .topics{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
footer .tchip{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12.5px;background:#fff}
footer .tchip.here{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:650}
footer .tchip.soon{opacity:.5}

/* animations */
@keyframes pop{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(79,70,229,.55)}
  45%{transform:scale(1.05)}
  100%{transform:scale(1);box-shadow:0 0 0 9px rgba(79,70,229,0)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  55%{transform:translateX(5px)}
  80%{transform:translateX(-3px)}
}

/* responsive */
@media (max-width:760px){
  .compare-grid,.lab-grid,.proof-grid{grid-template-columns:1fr}
  h1{font-size:25px}
  .stage{gap:8px}
  .lane-labels{gap:8px}
}

/* ---------- geometry canvas (geom.js — topics 02/03/07/08) ---------- */
.gboard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.gboard svg{display:block;width:100%;height:auto}
.gsvg.clickable [data-pt]{cursor:pointer}
.geo-grid{display:grid;grid-template-columns:minmax(290px,460px) 1fr;gap:16px;align-items:start;margin:8px 0}
.geo-side{min-width:0}
.ggrid{stroke:#eef0f6;stroke-width:1}
.gaxis{stroke:#d6dae8;stroke-width:1.4}
.gtick{font-size:8.5px;fill:#b3b8cb}
.gpt circle.dotc{fill:#9aa1b6;stroke:#fff;stroke-width:1.6}
.gpt text{font-size:11px;font-weight:700;fill:#3a4053;paint-order:stroke;stroke:#fff;stroke-width:3px}
.gpt.inlist circle.dotc{fill:var(--accent)}
.gpt.inlist2 circle.dotc{fill:#0e94d2}
.gpt.popped circle.dotc{fill:#d4d9e6}
.gpt.popped text{fill:#a6abc0;text-decoration:line-through}
.gpt.hull circle.dotc{fill:var(--ok)}
.gpt.cur circle.dotc{fill:#e0492f;animation:gpulse 1.1s ease-in-out infinite}
@keyframes gpulse{0%,100%{r:5.5}50%{r:8}}
.gchain{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gchain-lower{stroke:var(--accent)}
.gchain-upper{stroke:#0e94d2}
.gchain.dim{opacity:.3}
.ghull{fill:rgba(14,159,93,.07);stroke:var(--ok);stroke-width:2}
.gtri{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.gtri.left{stroke:var(--ok)}
.gtri.right{stroke:var(--bad)}
.gtri.collinear{stroke:var(--warn)}
.gtri.neutral{stroke:#8b93ab;stroke-dasharray:7 5}
.gseg{stroke:#8b93ab;stroke-width:2}
.gseg.ray{stroke:var(--accent);stroke-width:2.2}
.gseg.probe{stroke:#8b93ab;stroke-width:2;stroke-dasharray:5 4}
.gseg.won{stroke:var(--ok);stroke-width:2.4}
.gbadge{font-size:11.5px;font-weight:750;paint-order:stroke;stroke:#fff;stroke-width:3.5px}
.gbadge.left{fill:var(--ok-ink)}
.gbadge.right{fill:var(--bad)}
.gbadge.collinear{fill:var(--warn)}
.gbadge.neutral{fill:#5d6477}
.qchip.inl{background:var(--accent-soft);border-color:#d8dbf8;color:var(--accent-ink);font-weight:700}
.qchip.inl2{background:#e3f2fb;border-color:#bfdff2;color:#09678f;font-weight:700}
footer a.tchip{text-decoration:none;color:inherit}
footer a.tchip:hover{border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){
  .geo-grid{grid-template-columns:1fr}
}
.legend .sw.box{width:13px;height:13px;border-top:none;border-radius:4px}

/* ---------- determinant matrix + vector chips ---------- */
.detwrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:6px 0;font-size:14.5px}
.det3{display:inline-flex;align-items:stretch}
.det3 .dmat{
  display:grid;grid-template-columns:repeat(3,minmax(28px,auto));gap:1px 12px;
  padding:5px 10px;text-align:center;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  border-left:2px solid var(--ink);border-right:2px solid var(--ink);border-radius:2px;
}
.det3 .dmat span{padding:0 3px;border-radius:4px}
.det3 .dmat span.hlA{background:var(--ok-soft)}
.det3 .dmat span.hlB{background:var(--bad-soft)}
.det3 .dmat span.hlC{background:var(--accent-soft)}
.det3 .dmat span.dimc{opacity:.3}
.vrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:5px 0;font-size:14px}
.vchip{
  background:#f2f3fa;border:1px solid var(--line);border-radius:8px;padding:2px 9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
}
.vchip.okv{background:var(--ok-soft);border-color:#bfe6cf}
.vchip.badv{background:var(--bad-soft);border-color:#f6c9c9}
.vchip.warnv{background:var(--warn-soft);border-color:#f2dcb8}