/* Plain article layout in the spirit of Tufte CSS and Distill:
   one text column, figures that can run wider, numbered captions. */

:root {
  color-scheme: light;
  --paper: #fffff8;
  --ink: #111;
  --ink-2: #444;
  --rule: #ccc;
  --faint: #e8e6dc;
  --link: #1a4b8c;
  --red: #a4161a;
  --probe: rgb(168, 168, 168);
  --stage-bg: rgb(145, 145, 145);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --code: "Source Code Pro", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #151515;
    --ink: #ddd;
    --ink-2: #aaa;
    --rule: #444;
    --faint: #262626;
    --link: #8fb4e8;
    --red: #e5675b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151515;
  --ink: #ddd;
  --ink-2: #aaa;
  --rule: #444;
  --faint: #262626;
  --link: #8fb4e8;
  --red: #e5675b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 19px; }
@media (max-width: 600px) { html { font-size: 17px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  font-variant-numeric: oldstyle-nums;
}

article { max-width: 680px; margin: 0 auto; padding: 64px 16px 48px; }

h1 { font-size: 2.1rem; line-height: 1.15; font-weight: 400; margin: 0 0 0.4em; }
.subtitle { font-style: italic; font-size: 1.15rem; color: var(--ink-2); margin: 0 0 0.8em; line-height: 1.4; }
.byline { font-size: 0.9rem; color: var(--ink-2); margin: 0 0 2.5em; }
h2 { font-size: 1.35rem; font-weight: 400; font-style: italic; margin: 2.4em 0 0.6em; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.code, kbd { font-family: var(--code); font-size: 0.82em; font-variant-numeric: normal; }
kbd { border: 1px solid var(--rule); padding: 0 4px; }

button {
  font: 0.9rem var(--serif);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-2);
  padding: 4px 14px;
  cursor: pointer;
}
button:hover { background: var(--faint); }
button:disabled { color: var(--ink-2); border-color: var(--rule); cursor: default; background: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.textbtn { border: 0; padding: 0; background: none; color: var(--link); text-decoration: underline; text-underline-offset: 2px; font-size: 0.8rem; margin-top: 8px; }
.textbtn:hover { background: none; }
.textbtn:disabled { color: var(--ink-2); text-decoration: none; }

/* ---------- figures ---------- */
figure { margin: 1.8em 0; }
figure.wide { width: min(980px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); }
figcaption { font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); margin-top: 0.8em; max-width: 680px; }
figure.wide figcaption { margin-left: auto; margin-right: auto; }
figcaption b { font-weight: 600; color: var(--ink); }

.note {
  font-size: 0.82rem; line-height: 1.45; color: var(--ink-2);
  border-left: 1px solid var(--rule); padding-left: 12px; margin: 1.4em 0;
}

.pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 820px) { .pair { grid-template-columns: 1fr; } }

/* booktabs style tables: three rules, nothing else */
.booktabs { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: lining-nums tabular-nums; }
.booktabs thead th { border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; text-align: left; padding: 5px 8px; }
.booktabs td { padding: 3px 8px; text-align: left; white-space: nowrap; }
.booktabs tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
.booktabs .n { text-align: right; }
.booktabs .empty td { color: var(--ink-2); font-style: italic; }

.readout { font-size: 0.8rem; color: var(--ink-2); margin: 8px 0 0; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- 1. task ---------- */
.lab { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 820px) { .lab { grid-template-columns: 1fr; } }

.stage {
  position: relative; min-height: 430px; background: var(--stage-bg); color: #111;
  display: grid; place-items: center; padding: 20px; outline: none; user-select: none;
  font-family: Arial, Helvetica, sans-serif;
}
.stage:focus-visible { box-shadow: 0 0 0 2px var(--link); }
.stage button { font-family: Arial, Helvetica, sans-serif; background: #b5b5b5; color: #111; border-color: #333; }
.stage button:hover { background: #c2c2c2; }
.stage-idle, .stage-done { display: grid; justify-items: center; gap: 14px; text-align: center; font-size: 15px; }
.stage-idle p, .stage-done p { margin: 0; }
.stage-run { display: grid; justify-items: center; gap: 16px; width: 100%; }
.slot { height: 290px; display: grid; place-items: center; }
.fix { font-size: 40px; line-height: 1; }
.word { font-size: 28px; }
.probe { width: min(250px, 60vw); aspect-ratio: 1; background: var(--probe); }
.probe.small { width: 110px; }
.answer { display: flex; gap: 10px; visibility: hidden; }
.answer.live { visibility: visible; }
.stage .key { min-width: 120px; padding: 8px 14px; font-size: 14px; }
.counter { position: absolute; top: 10px; right: 12px; font-size: 12px; }

.log { max-height: 430px; overflow: auto; }
.log .booktabs thead th { position: sticky; top: 0; background: var(--paper); }

#bars { max-width: 520px; }
.bar-row { display: grid; grid-template-columns: 76px 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; font-size: 0.85rem; }
.bar-track { position: relative; height: 14px; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); transition: width 0.5s; }
.bar-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--red); }
.bar-val { text-align: right; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- 2. frames ---------- */
#frames { width: 100%; height: 150px; display: block; border-bottom: 1px solid var(--ink); }
.slider { display: block; font-size: 0.85rem; margin-bottom: 14px; }
.slider input { display: block; width: 100%; margin-top: 4px; accent-color: var(--ink-2); }
.quant tr.mine td { font-weight: 600; }
.quant td.off { color: var(--red); }

/* ---------- 3. power ---------- */
.controls button { margin-top: 2px; }
.chart { width: 100%; display: block; overflow: visible; }
#hist { height: 190px; }
#curve { height: 160px; margin-top: 18px; }
.chart text { font: 11px var(--serif); fill: var(--ink-2); font-variant-numeric: lining-nums; }
.chart .grid { stroke: var(--faint); }
.chart .base { stroke: var(--ink); }
.chart .h-non { fill: var(--rule); }
.chart .h-sig { fill: var(--ink-2); }
.chart .zero { stroke: var(--ink); }
.chart .truth { stroke: var(--red); stroke-dasharray: 3 3; }
.chart .eighty { stroke: var(--ink-2); stroke-dasharray: 2 3; }
.chart .curve { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart .now { stroke: var(--rule); }
.chart .dot { fill: var(--red); }

/* ---------- 4. implementation ---------- */
.files dt { font-family: var(--code); font-size: 0.8rem; margin-top: 1em; }
.files dd { margin: 0.2em 0 0 0; }

.refs ol { padding-left: 1.4em; font-size: 0.85rem; line-height: 1.45; }
.refs li { margin-bottom: 0.6em; padding-left: 0.2em; }

footer { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--ink-2); }