/* Shared styling for the interactive figures.  Literal colours, one stylesheet, no
   framework and no CDN: the figures must keep working unattended for as long as the
   record does. */
:root{
  --bg:#ffffff; --panel:#f6f8fa; --fg:#1f2328; --mut:#6e7781; --line:#d0d7de;
  --acc:#0969da; --warn:#bc4c00; --cond:#8250df; --ok:#1a7f37; --fill:#ddf4ff;
  --cfill:#f3eefc; --banner:#fff8c5; --bline:#d4a72c;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --panel:#161b22; --fg:#e6edf3; --mut:#8d96a0; --line:#30363d;
    --acc:#4493f8; --warn:#db6d28; --cond:#c297ff; --ok:#3fb950; --fill:#0c2d6b;
    --cfill:#2a1f45; --banner:#282215; --bline:#9e6a03;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
main{max-width:1000px;margin:0 auto;padding:24px 16px 64px}
a{color:var(--acc)}
h1{font-size:1.5rem;margin:.2em 0 .1em}
h2{font-size:1.05rem;margin:1.8em 0 .4em}
.sub{color:var(--mut);margin:0 0 1.2em}
.banner{background:var(--banner);border:1px solid var(--bline);border-radius:6px;
  padding:10px 14px;font-size:.86rem;margin:0 0 20px}
.banner b{font-weight:600}
figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:14px}
svg{display:block;width:100%;height:auto}
.controls{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.ctl{display:flex;flex-direction:column;gap:2px;min-width:190px;flex:1}
.ctl label{font-size:.78rem;color:var(--mut);display:flex;justify-content:space-between;
  gap:10px}
.ctl label b{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
input[type=range]{width:100%;accent-color:var(--acc)}
.toggle{display:flex;align-items:center;gap:8px;font-size:.84rem;cursor:pointer;
  user-select:none}
.readout{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:8px 10px;
  margin-top:12px;white-space:pre-wrap}
.note{color:var(--mut);font-size:.86rem}
.cite{font-size:.8rem;color:var(--mut)}
nav.crumbs{font-size:.84rem;margin-bottom:16px}
nav.crumbs a{text-decoration:none}
ul.figs{list-style:none;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
ul.figs li{border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  background:var(--panel)}
ul.figs a{font-weight:600;text-decoration:none}
ul.figs p{margin:.3em 0 0;font-size:.85rem;color:var(--mut)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}