/* Shared look for the animated figures embedded in blog posts. Paper and ink,
   one accent (Signal), the blog's own palette; dark when the reader's system is. */
:root {
  --paper: #F4F4F2; --stone: #E6E8E8; --line: #DEE0DF; --ink: #111418; --slate: #2A2F38;
  --ash: #8A9099; --mute: #616774; --signal: #2F6BFF; --card: #FFFFFF;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #111418; --stone: #1B1F25; --line: #2A2F38; --ink: #F4F4F2; --slate: #C5C9CE;
          --ash: #8A9099; --mute: #A3A9B2; --signal: #6C95FF; --card: #1B1F25; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.45 var(--sans); }
body { padding: 14px; }
.fig { display: grid; gap: 12px; }
.bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font: 12px var(--mono); color: var(--mute); }
.bar label { display: inline-flex; gap: 8px; align-items: center; }
.bar b { color: var(--ink); font-weight: 500; min-width: 1.6em; display: inline-block; }
button, .seg button {
  font: 12px var(--mono); color: var(--ink); background: transparent; border: 1px solid var(--ink);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
button:hover { background: var(--stone); }
button.on { background: var(--ink); color: var(--paper); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
input[type=range] { accent-color: var(--signal); width: 140px; }
canvas { width: 100%; display: block; background: var(--card); border: 1px solid var(--line); touch-action: none; }
.note { font: 12px/1.5 var(--mono); color: var(--mute); min-height: 2.9em; }
.note strong { color: var(--ink); font-weight: 500; }
.cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 620px) { .cols { grid-template-columns: 1fr; } }
table { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
th, td { text-align: right; padding: 5px 7px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--mute); font-weight: 400; }
td.hl, th.hl { color: var(--signal); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }