:root{
  --bg:#141719; --panel:#1B1F22; --ink:#E8E6E1; --muted:#9A968F; --rule:#2C3034;
  --accent:#8FD6FF; --warm:#FFC98F; --fill:#20262A; --fill2:#262D32;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body{padding:16px;max-width:1100px;margin:0 auto}

.eyebrow{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
a.home{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a.home:hover{color:var(--accent);border-bottom-color:var(--accent)}
h1{font-size:clamp(22px,4vw,30px);font-weight:600;margin:0 0 4px;line-height:1.15}
.lede{color:var(--muted);margin:0 0 16px;font-size:15px;max-width:60ch;line-height:1.45}

/* Polygon left, readout right; stacked when narrow. */
.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.main{grid-template-columns:minmax(0,1fr)}}

.stage{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:8px}
.stage svg{display:block;width:100%;height:auto;max-height:70vh}
.poly-fill{fill:var(--fill);stroke:none}
.poly-fill.alt{fill:var(--fill2)}
.poly-fill.mark{fill:var(--accent);fill-opacity:.35}
.poly-edge{fill:none;stroke:var(--ink);stroke-width:.02;stroke-linejoin:round}
.chir{fill:none;stroke:var(--warm);stroke-width:.03;stroke-linecap:round}
.chir-head{fill:var(--warm)}
.axis{stroke:var(--muted);stroke-width:.012;stroke-dasharray:.05 .04}
.axis.live{stroke:var(--warm);stroke-width:.02}
.axis[hidden]{display:none}
.vlabel{fill:var(--ink);font-size:.13px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.vlabel.first{fill:var(--accent);font-weight:600}

.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
button{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:6px 12px;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.4;cursor:default;border-color:var(--rule);color:var(--ink)}
button.gen{font-weight:600}
.nstep{display:flex;align-items:center;gap:6px;margin-right:auto}
.nstep output{min-width:3.5em;text-align:center;font-variant-numeric:tabular-nums}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px}
.panel h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 6px}
.panel section+section{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.cur{font-size:34px;font-weight:600;margin:0;font-family:ui-serif,Georgia,serif}
.desc{margin:4px 0 0;line-height:1.4}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
dt{color:var(--muted)}
dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.word{font-family:ui-serif,Georgia,serif;font-size:16px;overflow-wrap:anywhere;margin:0}
.note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.4}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{font-family:ui-serif,Georgia,serif;font-size:15px;min-width:3em;padding:4px 8px}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.rowlabel{font-size:12px;color:var(--muted);margin:8px 0 4px}

/* Tabs switch the right-hand panel; the polygon and its controls are shared. */
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.panel[hidden]{display:none}
.cur2{font-family:ui-serif,Georgia,serif;font-size:22px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}

.ones{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.one{display:flex;gap:8px;align-items:baseline;border:1px solid var(--rule);border-radius:6px;padding:4px 10px;
  font-variant-numeric:tabular-nums}
.one .v{min-width:2.2em;text-align:right;font-weight:600}
.one .v.neg{color:var(--warm)}
.irn{font-family:ui-serif,Georgia,serif;font-size:15px}

.dials{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.dial{margin:0;border:1px solid var(--rule);border-radius:8px;padding:6px 8px 8px}
.dial svg{display:block;width:100%;max-width:120px;height:auto;margin:0 auto}
.dial figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;font-size:13px}
.ring{fill:none;stroke:var(--rule);stroke-width:.03}
.orbit{fill:var(--muted)}
.flag line{stroke:var(--ink);stroke-width:.07;stroke-linecap:round}
.flag line.tick{stroke:var(--warm)}
.flag polygon{fill:var(--ink)}
.chi{color:var(--muted);font-variant-numeric:tabular-nums}

.tablewrap{overflow-x:auto}
table.ct{border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.ct th,.ct td{padding:4px 8px;text-align:center;white-space:nowrap}
.ct th[scope="row"]{text-align:left;font-weight:400}
.ct thead th{vertical-align:bottom;font-weight:400}
.ct thead button{font-size:14px;padding:2px 6px;display:block;margin:0 auto}
.ct .size{display:block;font-size:11px;color:var(--muted)}
.ct .on{background:rgba(143,214,255,.14)}
.ct tbody.perm tr{border-top:1px solid var(--rule)}
.ct tbody.perm th{color:var(--muted)}
.tp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px}
select{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:5px 8px}
select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* KaTeX: size the root only. Never style its inner spans (see build.py). */
.katex{text-transform:none;letter-spacing:normal}
.ct .katex,.chip .katex,.one .katex,.dial .katex{font-size:1.1em}
.cur .katex{font-size:1em}

footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--muted)}