/* Layout: an alphabet of plates. The 26 words run across the top as an index; one plate at a time below,
   the world on the left (a field of bits you can touch) and on the right what the plate is, what to try,
   and what was measured. The same world, the same law, all the way down. */
:root {
  --paper: #eceee9;
  --plate: #f9faf7;
  --field: #f4f5f1;
  --ink: #14171a;
  --soft: #464c52;
  --mid: #737980;
  --hair: #cfd3cd;
  --grid: #e1e4de;
  --event: #b97f00;
  --damage: #c8412f;
  --ask: #2a78d6;
  --good: #1f8a5b;
  --hole: #14171a;
  --focus: #2a78d6;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1113; --plate: #16191c; --field: #0b0d10; --ink: #e5e7e2; --soft: #b7bcc2; --mid: #8d939a; --hair: #2b3036; --grid: #1a1e22;
    --event: #e0a61a; --damage: #ff6a4a; --ask: #7aa7ff; --good: #3fb37d; --hole: #e5e7e2; --focus: #7aa7ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1113; --plate: #16191c; --field: #0b0d10; --ink: #e5e7e2; --soft: #b7bcc2; --mid: #8d939a; --hair: #2b3036; --grid: #1a1e22;
  --event: #e0a61a; --damage: #ff6a4a; --ask: #7aa7ff; --good: #3fb37d; --hole: #e5e7e2; --focus: #7aa7ff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: 16px; padding-block: 22px 60px; display: grid; gap: 18px; }
header { display: grid; gap: 8px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 6vw, 60px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; text-wrap: balance; }
h2 { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.deck { margin: 0; color: var(--soft); max-width: 74ch; }
p { margin: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the index of words */
.words { display: flex; flex-wrap: wrap; gap: 4px; }
.words button { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--hair); background: transparent; color: var(--ink); border-radius: 4px; padding: 3px 8px 4px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; }
.words button .n { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0; color: var(--mid); }
.words button.pred { border-color: var(--soft); }
.words button[aria-current="true"] { background: var(--ink); color: var(--plate); border-color: var(--ink); }
.words button[aria-current="true"] .n { color: var(--hair); }

/* one plate */
.plate { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .plate { grid-template-columns: minmax(0, 1fr); } }
.stage { display: grid; gap: 10px; min-width: 0; }
.screen { position: relative; width: 100%; max-width: 640px; background: var(--field); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; touch-action: none; }
.screen canvas { display: block; width: 100%; height: auto; cursor: crosshair; }
.screen .tag { position: absolute; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--soft); background: color-mix(in srgb, var(--field) 82%, transparent); padding: 1px 6px; border-radius: 3px; pointer-events: none; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-height: 36px; }
.btn { border: 1px solid var(--hair); background: transparent; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 11px; border-radius: 5px; cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--plate); border-color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 1px solid var(--hair); background: transparent; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--plate); }
.slider { display: inline-grid; grid-template-columns: auto minmax(90px, 180px) auto; gap: 8px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; }
.slider input { width: 100%; accent-color: var(--ink); }
.field { display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 13px; color: var(--soft); }
.field input { font-family: var(--mono); font-size: 14px; padding: 4px 7px; border: 1px solid var(--hair); border-radius: 5px; background: var(--plate); color: var(--ink); width: 9em; text-transform: uppercase; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--soft); }
.check input { accent-color: var(--ink); }
.clock { font-family: var(--mono); font-size: 13px; color: var(--soft); font-variant-numeric: tabular-nums; margin-left: auto; }

.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start; }
.plate-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: end; }
.plate-head .num { font-family: var(--mono); font-size: 14px; color: var(--mid); grid-row: 1; }
.plate-head .kind { grid-row: 1; justify-self: start; }
.plate-head .word { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7vw, 76px); line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hair); white-space: nowrap; color: var(--soft); }
.chip.held { color: var(--good); border-color: currentColor; }
.chip.failed { color: var(--damage); border-color: currentColor; }
.plate-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 62ch; }
.plate-text .try { font-size: 15.5px; color: var(--soft); border-left: 3px solid var(--hair); padding-left: 10px; }
.plate-text .try b { font-family: var(--display); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; color: var(--ink); }
.plate-text .epigraph { font-style: italic; color: var(--soft); font-size: 15.5px; }
.plate-text .epigraph span { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--mid); }
.plate-text .math { font-family: var(--mono); font-size: 13.5px; color: var(--soft); background: var(--plate); border: 1px solid var(--hair); border-radius: 5px; padding: 6px 9px; overflow-x: auto; }
.readout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; margin: 0; }
.readout dt { color: var(--mid); }
.readout dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border: 1px solid var(--hair); background: var(--plate); border-radius: 6px; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; }
.result h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.result table { border-collapse: collapse; width: 100%; font-size: 13px; }
.result td, .result th { padding: 3px 6px 3px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.result th { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid); }
.result tr:last-child td { border-bottom: 0; }
.result .n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.result-scroll { overflow-x: auto; }
.nextprev { display: flex; gap: 8px; flex-wrap: wrap; }
.ok { color: var(--good); }
.no { color: var(--damage); }
footer { color: var(--soft); font-size: 14.5px; border-top: 1px solid var(--hair); padding-top: 14px; display: grid; gap: 8px; max-width: 90ch; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }