/* Oddsky. Two registers: the night sky (the home page, dynamic) and the journal (case files, the
   ledger, the docket: calm, dense, precise). Cobalt is the instrument; pink is always the odd one.
   Red-light mode keeps night vision, as in a control room. Series colours were validated with the
   dataviz validator against both surfaces. */
@import url("../fonts/fonts.css");

:root {
  color-scheme: light;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper: #f5f6f8;
  --paper-2: #ffffff;
  --paper-3: #eceef3;
  --ink: #0c0e13;
  --ink-2: #3a3f4b;
  --muted: #676d7c;
  --rule: #d3d7df;
  --rule-2: #e5e8ee;
  --accent: #2836d9;          /* cobalt: cyanotype plates, blueprint ink */
  --link: #2836d9;
  --odd: #e0145a;             /* the odd one out */
  --night: #04050a;
  --night-ink: #e9ecff;
  --night-odd: #ff3d82;
  --shadow: 0 1px 0 rgba(12, 18, 40, .04), 0 10px 26px -16px rgba(12, 18, 60, .28);
  --blend: multiply;

  /* figure chrome */
  --fig-bg: var(--paper-2);
  --grid: #eceef3;
  --axis: #8a90a0;

  /* series: colour follows the photometric band */
  --c-B: #2b62c4;
  --c-V: #17866a;
  --c-R: #d9482b;
  --c-I: #8e3a78;
  --c-W1: #c27c00;
  --c-W2: #b5304f;
  --c-colour: #3d3a35;
  --c-vis: #8f8676;
  --c-tess: #2b62c4;
  --c-x1: #5a6e1f;
  --c-x2: #1f7f9a;
  --c-x3: #7a5c2e;

  /* epistemic inks */
  --st-observed: #1f4e9c;
  --st-computed: #1d6b45;
  --st-inferred: #74368a;
  --st-speculated: #b8352a;

  /* check status (always shown with a glyph and a word) */
  --ok: #2e6f31;
  --warn: #94600a;
  --fail: #b3261e;

  /* envelopes: glassine, sealed in cobalt */
  --kraft: #eef1f7;
  --kraft-2: #e2e7f0;
  --kraft-edge: #c3cad8;
  --wax: #2836d9;
  --wax-2: #5563f2;

  --noise: none;
  --worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #140d0b;
  --paper-2: #1c1310;
  --paper-3: #261915;
  --ink: #f4b49a;
  --ink-2: #d4917a;
  --muted: #a87562;
  --rule: #4a2b23;
  --rule-2: #2f1c17;
  --accent: #ff7a5a;
  --link: #ffb08a;
  --odd: #ff5a7a;
  --night: #050100;
  --night-ink: #ffb9a6;
  --night-odd: #ff6a4a;
  --shadow: 0 0 0 1px rgba(255, 120, 80, .04), 0 10px 30px -14px rgba(0, 0, 0, .8);
  --blend: screen;

  --grid: #24150f;
  --axis: #6e4334;

  --c-B: #6a85d0;
  --c-V: #5a9a5a;
  --c-R: #e06a3a;
  --c-I: #b85c9a;
  --c-W1: #b8842a;
  --c-W2: #d2505e;
  --c-colour: #d4917a;
  --c-vis: #9a6a58;
  --c-tess: #6a85d0;
  --c-x1: #9a9a40;
  --c-x2: #4f9aa8;
  --c-x3: #b08a5a;

  --st-observed: #e9c46a;
  --st-computed: #9fbf86;
  --st-inferred: #ef8a78;
  --st-speculated: #cf9ab8;

  --ok: #9fbf86;
  --warn: #e9c46a;
  --fail: #ff7a6a;

  --kraft: #2a1a14;
  --kraft-2: #33201a;
  --kraft-edge: #5a3426;
  --wax: #7a1f14;
  --wax-2: #b0402a;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .5 0 0 0 0 .3 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper) var(--noise);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
code, pre, .mono { font-family: var(--mono); font-feature-settings: "tnum", "zero" 0; }
code { font-size: .84em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.muted { color: var(--muted); }
.small { font-size: .85em; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 3.2vw, 40px); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper-2); padding: 6px 10px; z-index: 10; }
.skip:focus { left: 8px; }
.loading { font-style: italic; color: var(--muted); padding: 80px 0; }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (max-width: 1500px) { .hide-md { display: none; } }

/* ---- masthead ------------------------------------------------------------------------------- */
.masthead { border-bottom: 3px double var(--rule); }
.masthead-inner { display: flex; align-items: baseline; gap: 22px; padding-top: 18px; padding-bottom: 12px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; line-height: 1; }
.wm-text { font-family: var(--sans); font-size: 27px; font-weight: 640; font-stretch: 116%; letter-spacing: -.03em; }
/* The mark is a finding chart: two tick marks pointing at one star in a field, the way every
   variable-star paper marks its target. */
.wm-mark { width: 34px; height: 34px; overflow: visible; }
.wm-field { fill: currentColor; opacity: .45; }
.wm-ticks line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.wm-odd { fill: var(--odd); transform-origin: 18px 18px; transition: transform .45s; }
.wordmark:hover .wm-tx { transform: translateX(2.5px); }
.wordmark:hover .wm-ty { transform: translateY(2.5px); }
.wordmark:hover .wm-odd { transform: scale(1.18); }
@media (prefers-reduced-motion: no-preference) {
  :root.at-home .wm-tx { animation: acquire-x 1.4s .3s cubic-bezier(.2, 1.2, .4, 1) both; }
  :root.at-home .wm-ty { animation: acquire-y 1.4s .45s cubic-bezier(.2, 1.2, .4, 1) both; }
}
@keyframes acquire-x { from { transform: translateX(-9px); opacity: 0; } }
@keyframes acquire-y { from { transform: translateY(-9px); opacity: 0; } }
.wordmark:hover { color: var(--ink); }
.tagline { margin: 0; font-style: italic; color: var(--ink-2); font-size: 16px; flex: 1; }
.nav { display: flex; align-items: center; gap: 20px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--rule); border-radius: 99px; padding: 3px 10px 3px 7px; cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-dot { width: 9px; height: 9px; border-radius: 50%; background: #d23a1e; box-shadow: 0 0 6px #ff5a3a; }
:root[data-theme="dark"] .theme-dot { background: #f6e7c8; box-shadow: none; }
@media (max-width: 640px) {
  .masthead-inner { gap: 4px 14px; padding-top: 14px; }
  .wm-text { font-size: 28px; }
  .tagline { order: 3; flex-basis: 100%; font-size: 14.5px; }
  .nav { margin-left: auto; gap: 14px; font-size: 11px; }
  .theme-label { display: none; }
  .theme-toggle { padding: 5px; }
}

/* ---- case header ---------------------------------------------------------------------------- */
.case { padding: 22px 0 40px; }
.case-head { grid-area: head; min-width: 0; }
.home-intro { margin: 0 0 16px; max-width: 100ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.home-intro strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .home-intro { font-size: 14.5px; } }
.case-tabline { display: flex; align-items: flex-end; gap: 4px 16px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; flex-wrap: wrap; }
.case-tab { display: inline-flex; gap: 10px; align-items: baseline; padding: 5px 14px 4px; margin-bottom: -1px; border: 1px solid var(--rule); border-bottom-color: var(--paper); border-radius: 6px 6px 0 0; background: var(--paper); font-size: 13px; }
.case-tab-k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.case-tab .mono { font-weight: 600; letter-spacing: .04em; }
.case-coords { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); padding-bottom: 6px; }
.case-coords .target-name { color: var(--ink); font-weight: 600; }
.case-title { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -.015em; font-weight: 600; margin: 2px 0 8px; text-wrap: balance; }
.case-status { margin-left: auto; padding-bottom: 2px; }
.case-status .ladder { margin: 0; }
.case-hook { font-size: clamp(17.5px, 1.5vw, 20.5px); font-style: italic; color: var(--ink-2); margin: 0 0 18px; max-width: 64ch; text-wrap: pretty; }

/* ---- the discovery ladder ------------------------------------------------------------------- */
.ladder { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin: 14px 0 6px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ladder-track, .ladder-exits { display: flex; list-style: none; margin: 0; padding: 0; }
.rung, .exit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 88px; text-align: center; }
.rung::before { content: ""; position: absolute; top: 5px; left: -50%; right: 50%; height: 1.5px; background: var(--rule); }
.rung:first-child::before { display: none; }
.rung.is-past::before, .rung.is-here::before { background: var(--ink-2); }
.rung-dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--axis); background: var(--paper); }
.rung.is-past .rung-dot { background: var(--ink-2); border-color: var(--ink-2); }
.is-here .rung-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--accent); }
.is-here .rung-label { color: var(--ink); font-weight: 700; }
.ladder-exits { padding-left: 16px; border-left: 1px dashed var(--rule); gap: 0; }
.exit { width: 70px; }
.exit .rung-dot { border-style: dashed; }
.ladder.is-exited .rung .rung-dot { opacity: .5; }
.ladder.is-compact { margin: 12px 0 4px; font-size: 9px; }
.ladder.is-compact .rung, .ladder.is-compact .exit { width: 46px; }
.case-status .ladder.is-compact .rung, .case-status .ladder.is-compact .exit { width: 34px; }
.case-status .ladder.is-compact { gap: 10px; }
.case-status .ladder-exits { padding-left: 8px; }
.ladder.is-compact .rung-label { display: none; }
.ladder.is-compact .is-here .rung-label { display: block; position: absolute; top: 18px; white-space: nowrap; }
.ladder.is-compact .ladder-exits .rung-label { display: none; }
.ladder.is-compact .rung:first-child.is-here .rung-label { left: 4px; }
.ladder.is-compact { padding-bottom: 16px; }
.case-status .ladder.is-compact { padding-bottom: 14px; }
@media (max-width: 640px) {
  .rung { width: 64px; }
  .exit { width: 58px; }
  .ladder { font-size: 8.5px; letter-spacing: .06em; }
}

/* ---- layout grid ---------------------------------------------------------------------------- */
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head rail" "fig rail" "body rail"; column-gap: 44px; }
.case-fig { grid-area: fig; min-width: 0; margin-top: 8px; }
.rail { grid-area: rail; min-width: 0; padding-top: 6px; }
.rail-sticky { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 26px; }
.case-body { grid-area: body; min-width: 0; max-width: 820px; }
@media (max-width: 1080px) {
  .case-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "rail" "body"; }
  .rail { margin: 30px 0 0; padding: 0; }
  .rail-sticky { position: static; }
  .rail .toc { display: none; }
  .agent { max-width: 640px; }
}
.facts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 36px; margin-top: 26px; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ---- figure --------------------------------------------------------------------------------- */
.fig { margin: 0; }
.fig-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.fig-controls-below { margin-top: 6px; }
.fig-legend { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.legend-item:hover { border-color: var(--rule); }
.legend-item[aria-pressed="false"] { color: var(--muted); }
.legend-item[aria-pressed="false"] .key { opacity: .25; }
.legend-item[aria-pressed="false"] .legend-label { text-decoration: line-through; }
.fig-legend-extra .legend-item[aria-pressed="false"] .legend-label { text-decoration: none; }
.fig-legend-extra .legend-item[aria-pressed="false"] .key { opacity: .45; }
.legend-n { color: var(--muted); font-size: 10.5px; }
.legend-item.is-visual .legend-label { font-style: italic; }
.legend-more { border: 1px dashed var(--rule); background: none; border-radius: 4px; padding: 3px 9px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); cursor: pointer; }
.legend-more:hover { border-color: var(--ink-2); color: var(--ink); }
.fig-legend-extra { padding: 6px 0 2px; border-top: 1px dashed var(--rule-2); }
.tess-strip { margin-top: 22px; }
.tess-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 14.5px; flex-wrap: wrap; }
.tess-head .mono { font-size: 10.5px; }
.panel-letter-html { font-style: italic; font-weight: 700; color: var(--accent); }
.tess-plot { position: relative; }
.key { flex: none; overflow: visible; }
.fig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fig-tools-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; margin-right: 2px; }
.chip { border: 1px solid var(--rule); background: transparent; border-radius: 99px; padding: 2px 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; color: var(--ink-2); }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fig-range { color: var(--ink-2); margin-left: 4px; }
.fig-hint { margin-left: auto; font-style: normal; }
.fig-flag { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.fig-flag input { accent-color: var(--accent); margin: 0; }
.fig-flag:has(input:disabled) { cursor: default; opacity: .75; }
@media (max-width: 640px) { .fig-hint { display: none; } .fig-flag { margin-left: auto; } }

.fig-plot { position: relative; margin: 0 -4px; }
.fig-plot:has(.overlay:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.fig-svg { display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.fig-svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.fig-svg .panel-title { font-family: var(--serif); font-size: 14.5px; font-weight: 600; fill: var(--ink); }
.fig-svg .panel-sub { font-family: var(--mono); font-size: 10.5px; font-weight: 400; fill: var(--muted); }
.fig-svg .panel-letter { font-family: var(--serif); font-size: 14.5px; font-style: italic; font-weight: 700; fill: var(--accent); }
.fig-svg .panel-dir { fill: var(--ink-2); font-family: var(--mono); font-size: 10.5px; font-weight: 400; font-style: normal; }
.fig-svg .anno-leader { stroke: var(--accent); stroke-width: 1; opacity: .6; }
.fig-svg .tick-label.x { fill: var(--ink-2); font-size: 11px; }
.fig-svg .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.fig-svg .frame { fill: none; stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.fig-svg .tick { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.fig-svg .tick.minor { opacity: .7; }
.fig-svg .zero { stroke: var(--axis); stroke-width: 1; opacity: .7; shape-rendering: crispEdges; }
.fig-svg .dots { stroke-opacity: .82; }
.fig-svg .dots.vis { stroke-opacity: .38; }
.fig-svg .gaia-ext { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 5 4; opacity: .38; }
.fig-svg .gaia-epoch { stroke: var(--ink); stroke-width: 2; opacity: .85; stroke-linecap: round; }
.fig-svg .gaia-label { font-family: var(--serif); font-style: italic; font-size: 11.5px; fill: var(--ink); paint-order: stroke; stroke: var(--fig-bg); stroke-width: 3.5px; stroke-linejoin: round; }
.fig-svg .frame.is-empty { stroke-dasharray: 3 3; }
.fig-svg .empty-note { font-family: var(--serif); font-style: italic; font-size: 13px; fill: var(--ink-2); }
.fig-svg .tess-title { font-size: 10.5px; fill: var(--muted); }
.fig-svg .tess-sector { fill: var(--ink); font-weight: 700; }
.fig-svg path.dots[style*="fill"] { fill-opacity: .82; }
.fig-svg .connect { fill: none; stroke-width: 1.1; opacity: .45; stroke-linejoin: round; }
.fig-svg .errbar { fill: none; stroke-width: 1; opacity: .75; }
.fig-svg .pt { stroke: var(--fig-bg); stroke-width: 1.6; }
.fig-svg .flagged { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .9; }
.fig-svg .direct-label { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.fig-svg .anno-window { fill: var(--accent); opacity: .06; }
.fig-svg .anno-window.is-resolved { opacity: .04; }
.fig-svg .anno-edge { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.fig-svg .anno-bracket { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.fig-svg .anno-label { fill: var(--accent); font-weight: 700; font-size: 10.5px; }
.fig-svg .anno-label.baseline { fill: var(--muted); font-weight: 400; font-size: 9.5px; }
.fig-svg .anno-baseline { fill: var(--ink); opacity: .035; }
.fig-svg .today { stroke: var(--ink-2); stroke-width: 1; opacity: .35; }
.fig-svg .today-label { fill: var(--ink-2); font-size: 9.5px; font-style: italic; font-family: var(--serif); }
.fig-svg .crosshair { stroke: var(--ink); stroke-width: 1; opacity: .5; pointer-events: none; }
.fig-svg .hi { pointer-events: none; }
.fig-svg .hi-pt { stroke: var(--fig-bg); stroke-width: 2; }
.fig-svg .hi-flag { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fig-svg .brush { fill: var(--ink); opacity: .08; pointer-events: none; }
.fig-svg .overlay { fill: transparent; cursor: crosshair; outline: none; touch-action: pan-y; }

.fig-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 300px; padding: 8px 10px 7px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.35; }
.tip-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--rule-2); font-family: var(--mono); font-size: 11.5px; }
.tip-head .muted { font-size: 10.5px; }
.tip-rows { display: grid; gap: 3px; }
.tip-row { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 7px; }
.tip-row strong { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.tip-row .pm { font-weight: 400; color: var(--muted); font-size: 10.5px; }
.tip-label { color: var(--ink-2); font-size: 11.5px; }
.tip-row.is-flagged strong { color: var(--muted); }
.key-flag { width: 9px; height: 9px; border: 1.2px solid var(--muted); border-radius: 50%; justify-self: center; }
.tip-empty { font-style: italic; }

.fig-caption { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; max-width: 92ch; }
.fig-num { font-weight: 700; color: var(--ink); }
.fig-caption em { font-style: italic; color: var(--ink); }
.fig-empty { padding: 60px 24px; text-align: center; border: 1px dashed var(--rule); border-radius: 6px; }
.fig-table { margin-top: 12px; font-size: 14px; }
.fig-table > summary, details > summary { cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
details > summary:hover { color: var(--ink); }
.table-title { font-size: 14px; margin: 16px 0 6px; font-weight: 600; }
.table-scroll { overflow-x: auto; margin-top: 8px; }
.data-table { border-collapse: collapse; font-family: var(--mono); font-size: 12px; width: 100%; }
.data-table th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--ink-2); white-space: nowrap; }
.data-table td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.data-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: var(--mono); font-size: 12px; }

/* ---- rail ----------------------------------------------------------------------------------- */
.agent { position: relative; background: var(--paper-2); border: 1px solid var(--ink-2); border-radius: 3px; padding: 18px 18px 16px; box-shadow: var(--shadow), 4px 4px 0 -1px var(--paper), 4px 4px 0 0 var(--rule); }
.agent-kicker { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.agent-title { font-size: 21px; line-height: 1.2; margin: 4px 0 12px; font-weight: 600; }
.agent-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.agent-steps > li { counter-increment: step; }
.step-label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.step-label::before { content: counter(step) "."; font-family: var(--mono); font-size: 11px; color: var(--accent); margin-right: 6px; font-weight: 700; }
.copy-row { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-3); }
.copy-row .cmd { flex: 1; padding: 8px 10px; font-size: 12px; line-height: 1.45; word-break: break-word; color: var(--ink); }
.cmd-dollar { color: var(--muted); user-select: none; }
.copy-row.is-prompt { background: var(--paper); }
.prompt-text { flex: 1; margin: 0; padding: 9px 11px; font-style: italic; font-size: 15px; line-height: 1.45; }
.copy { flex: none; border: 0; border-left: 1px solid var(--rule); background: transparent; padding: 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; min-width: 60px; }
.copy:hover { background: var(--ink); color: var(--paper); }
.copy.is-copied { color: var(--ok); }
.copy.is-copied:hover { color: var(--paper); }
.agent-note { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.agent-fork { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); padding-top: 12px; border-top: 1px dashed var(--rule); }

.rail-h { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.facts-lede { font-size: 14.5px; font-style: italic; color: var(--ink-2); margin: 0 0 10px; line-height: 1.45; }
.facts-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 18px; font-size: 12.5px; }
.facts-col:first-child .facts-dl { grid-template-columns: auto 1fr auto 1fr; }
@media (max-width: 640px) { .facts-col:first-child .facts-dl { grid-template-columns: auto 1fr; } }
.facts-dl > div { display: contents; }
.facts-dl dt { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-top: 1px; }
.facts-dl dd { margin: 0; font-family: var(--mono); color: var(--ink); }
.facts-dl dd .muted { font-size: 11px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc-link { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--serif); font-size: 15px; color: var(--ink-2); text-align: left; }
.toc-link:hover { color: var(--accent); }
.toc-n { font-size: 11px; color: var(--muted); }

/* ---- sections ------------------------------------------------------------------------------- */
.sec { margin-top: 56px; scroll-margin-top: 20px; }
.summary { margin-top: 34px; font-size: 18px; }
.summary .md p:first-child::first-letter { font-size: 1.1em; }
.section-head { border-top: 1.5px solid var(--ink); padding-top: 10px; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.section-head .count { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); border: 1px solid var(--rule); border-radius: 99px; padding: 0 7px; }
.section-lede { margin: 4px 0 0; color: var(--ink-2); font-style: italic; font-size: 16px; max-width: 70ch; }
.mini-h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.empty { border: 1px dashed var(--rule); border-radius: 4px; padding: 16px 18px; color: var(--ink-2); font-size: 15.5px; background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.empty p { margin: 0 0 6px; }
.empty p:last-child { margin-bottom: 0; }
.empty-title { font-weight: 600; color: var(--ink); }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 16%, transparent); } 100% { background: transparent; } }

/* ---- stamps --------------------------------------------------------------------------------- */
.stamp {
  --ink-c: var(--muted);
  display: inline-block; flex: none;
  font-family: var(--mono); font-weight: 800; font-size: 10px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-c); border: 1.75px solid var(--ink-c); border-radius: 2px;
  padding: 4px 6px 3px 8px;
  transform: rotate(var(--rot, -2deg));
  mix-blend-mode: var(--blend);
  -webkit-mask-image: var(--worn); mask-image: var(--worn);
  -webkit-mask-size: 90px 40px; mask-size: 90px 40px;
  white-space: nowrap; user-select: none;
}
.stamp-observed { --ink-c: var(--st-observed); }
.stamp-computed { --ink-c: var(--st-computed); border-style: double; border-width: 3.5px; padding: 3px 5px 2px 7px; }
.stamp-inferred { --ink-c: var(--st-inferred); border-radius: 99px; padding-left: 10px; padding-right: 8px; }
.stamp-speculated { --ink-c: var(--st-speculated); border-style: dashed; border-width: 1.5px; font-weight: 600; opacity: .8; letter-spacing: .2em; filter: blur(.25px); }
.stamp-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 4px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.stamp-legend > div { display: flex; align-items: center; gap: 12px; }
.stamp-legend dt { width: 112px; flex: none; }
.stamp-legend dd { margin: 0; font-size: 14px; color: var(--ink-2); font-style: italic; line-height: 1.3; }
@media (max-width: 640px) { .stamp-legend { grid-template-columns: 1fr; } .stamp-legend dt { width: 104px; } }
.inline-stamps .stamp { margin: 4px 6px 4px 0; }

/* ---- claims --------------------------------------------------------------------------------- */
.claims { list-style: none; margin: 0; padding: 0; }
.claim { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 18px; padding: 14px 6px 14px 0; border-bottom: 1px solid var(--rule-2); border-radius: 3px; }
.claim:first-child { border-top: 1px solid var(--rule-2); }
.claim-gutter { display: flex; align-items: flex-start; gap: 10px; padding-top: 3px; }
.claim-id { font-size: 11.5px; color: var(--muted); width: 22px; padding-top: 2px; }
.claim-text { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.claim-speculated .claim-text { font-style: italic; color: var(--ink-2); }
.claim-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.claim-meta .by { color: var(--ink-2); }
.receipts { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.receipt-btn { border: 1px solid var(--rule); background: var(--paper-2); border-radius: 2px; padding: 1px 6px; font-size: 11px; cursor: pointer; color: var(--link); position: relative; }
.receipt-btn::before { content: ""; position: absolute; inset: auto 3px -3px 3px; border-bottom: 1px dotted var(--rule); }
.receipt-btn:hover { border-color: var(--link); }
.receipt-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.receipt-btn.is-missing { color: var(--fail); border-style: dashed; }
.no-receipt { font-style: italic; }
.receipt { margin-top: 10px; }
.ledger { position: relative; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; padding: 12px 14px 10px; font-size: 13px;
  /* a torn till-receipt edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 6px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 6px repeat-x;
  padding-bottom: 16px; }
.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-family: var(--mono); font-size: 11.5px; padding-bottom: 6px; border-bottom: 1px dashed var(--rule); }
.ledger-id { font-weight: 700; }
.ledger-tool { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.ledger-args { margin: 8px 0; font-size: 11.5px; line-height: 1.45; overflow-x: auto; color: var(--ink-2); }
.ledger-digest { margin: 0; font-family: var(--mono); font-size: 11px; }
.ledger.missing { color: var(--fail); }

/* ---- hypotheses ----------------------------------------------------------------------------- */
.hyps { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .hyps { grid-template-columns: 1fr; } }
.hyp { display: flex; flex-direction: column; gap: 10px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
.hyp-favored { border-color: var(--ink-2); box-shadow: var(--shadow), inset 3px 0 0 var(--ink); }
.hyp-disfavored { background: transparent; box-shadow: none; }
.hyp-rejected { background: transparent; box-shadow: none; border-style: dashed; }
.hyp-rejected .hyp-statement { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); color: var(--muted); }
.hyp-disfavored .hyp-statement { color: var(--ink-2); }
.hyp-head { display: flex; align-items: center; gap: 10px; }
.hyp-id { font-size: 11.5px; color: var(--muted); }
.hyp-klass { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink); flex: 1; }
.hyp-statement { margin: 0; font-size: 16.5px; line-height: 1.45; text-wrap: pretty; }
.pill { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: 2px 8px; border: 1px solid var(--ink-2); color: var(--ink-2); white-space: nowrap; }
.pill-favored { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill-disfavored { border-color: var(--rule); color: var(--muted); }
.pill-rejected { border-color: var(--rule); color: var(--muted); text-decoration: line-through; }
.conf { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.conf-label { text-transform: uppercase; letter-spacing: .1em; }
.conf-track { height: 6px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.conf-fill { display: block; height: 100%; border-radius: 99px; background: var(--ink-2); }
.hyp-favored .conf-fill { background: var(--ink); }
.conf-val { color: var(--ink); font-size: 12px; }
.hyp-links { margin: 0; display: grid; gap: 4px; font-size: 13px; }
.hyp-links > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hyp-links dt { font-style: italic; color: var(--muted); min-width: 102px; }
.hyp-links dd { margin: 0; display: flex; gap: 5px; flex-wrap: wrap; }
.claim-ref { font-size: 11px; padding: 0 6px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); cursor: pointer; color: var(--ink); }
.claim-ref.is-for { border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); }
.claim-ref.is-for::before { content: "+ "; color: var(--ok); }
.claim-ref.is-against { border-color: color-mix(in srgb, var(--fail) 45%, var(--rule)); }
.claim-ref.is-against::before { content: "− "; color: var(--fail); }
.claim-ref.is-missing { border-style: dashed; color: var(--muted); }
.claim-ref:hover { background: var(--ink); color: var(--paper); }
.falsify { margin: 2px 0 0; padding-top: 9px; border-top: 1px dashed var(--rule); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.falsify-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: block; margin-bottom: 2px; }
.hyp-by { margin: 0; font-family: var(--mono); font-size: 10.5px; margin-top: auto; }

/* ---- predictions: sealed envelopes ---------------------------------------------------------- */
.envelopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px 18px; padding-top: 6px; align-items: start; }
@media (max-width: 640px) { .envelopes { grid-template-columns: 1fr; } }
.envelope { position: relative; background: var(--kraft) var(--noise); border: 1px solid var(--kraft-edge); border-radius: 4px; box-shadow: var(--shadow); }
.env-flap { position: absolute; left: -1px; right: -1px; top: -1px; height: 58px; background: var(--kraft-2) var(--noise); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; z-index: 1; }
.env-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--kraft-edge) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), var(--kraft-edge) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.env-paper { position: relative; padding: 14px 18px 14px; }
.envelope.is-sealed .env-paper { padding-top: 14px; }
.env-head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 40px; margin-bottom: 30px; }
.env-id { font-weight: 700; font-size: 13px; }
.env-hyp { display: block; margin: 0 0 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button.env-hyp:hover { color: var(--accent); }
.env-prob { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.env-prob .mono { font-size: 20px; font-weight: 700; color: var(--ink); }
.env-prob-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.env-statement { margin: 0 0 10px; font-size: 17px; line-height: 1.42; text-wrap: pretty; }
.env-check { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); padding: 8px 10px; background: color-mix(in srgb, var(--paper-2) 75%, transparent); border-left: 2px solid var(--accent); }
.env-check-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-right: 4px; }
.env-check.is-missing { border-left-style: dashed; font-style: italic; }
.env-raw { margin: 4px 0 8px; }
.env-raw pre { font-size: 11px; margin: 6px 0 0; overflow-x: auto; color: var(--ink-2); }
.env-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 12.5px; }
.env-meta > div { display: flex; gap: 6px; align-items: baseline; }
.env-meta dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.env-meta dd { margin: 0; font-family: var(--mono); font-size: 11.5px; }
.env-seal { position: absolute; left: 50%; top: 33px; width: 46px; height: 46px; margin-left: -23px; z-index: 3; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wax-2), var(--wax) 62%, color-mix(in srgb, var(--wax) 70%, #000) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25), inset 0 0 0 4px color-mix(in srgb, var(--wax) 85%, #000), inset 0 0 0 5px color-mix(in srgb, var(--wax-2) 60%, transparent);
  display: grid; place-items: center; transform: rotate(-8deg);
  border-radius: 52% 48% 50% 50% / 50% 53% 47% 50%; }
.env-seal span { font-family: var(--serif); font-weight: 700; font-style: italic; font-size: 15px; color: color-mix(in srgb, var(--wax) 40%, #000); text-shadow: 0 1px 0 color-mix(in srgb, var(--wax-2) 80%, #fff); }
:root[data-theme="dark"] .env-seal span { color: #2a0a05; text-shadow: 0 1px 0 #c25a40; }
/* opened: the flap folds up and the letter is pulled out */
.envelope.is-open { margin-top: 50px; background-color: var(--kraft); }
.envelope.is-open .env-flap { top: auto; bottom: 100%; height: 50px; clip-path: polygon(0 100%, 100% 100%, 50% 0); background-color: var(--kraft-2); filter: brightness(.97); }
.envelope.is-open .env-flap::after { display: none; }
.envelope.is-open .env-paper { margin: -26px 12px 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .3); z-index: 2; }
.envelope.is-open .env-head { margin-bottom: 8px; min-height: 0; }
.env-result { display: flex; align-items: flex-start; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.env-result p { margin: 0; font-size: 14px; color: var(--ink-2); }
.verdict { display: inline-block; flex: none; font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px 4px; border: 2px solid currentColor; border-radius: 2px; transform: rotate(-3deg); mix-blend-mode: var(--blend); -webkit-mask-image: var(--worn); mask-image: var(--worn); -webkit-mask-size: 90px 40px; mask-size: 90px 40px; white-space: nowrap; }
.verdict-true { color: var(--ok); }
.verdict-false { color: var(--fail); }
.verdict-unresolvable { color: var(--muted); border-style: dashed; }
.trials-empty { margin-top: 36px; max-width: 520px; }
.envelope.big .env-paper { padding: 24px 26px 22px; }
.envelope.big .env-statement { margin-top: 66px; }

/* ---- skeptic -------------------------------------------------------------------------------- */
.skeptic-summary { margin-bottom: 14px; }
.skeptic-summary p { margin: 0 0 6px; font-size: 16px; }
.tally { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 12px; }
.tally-item .glyph { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; font-size: 11px; font-weight: 800; }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.check-box { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 1.75px solid currentColor; border-radius: 3px; font-family: var(--mono); font-weight: 800; font-size: 14px; line-height: 1; }
.st-pass { color: var(--ok); }
.st-warn { color: var(--warn); }
.st-fail { color: var(--fail); }
.st-skip { color: var(--muted); }
.check.st-fail .check-box { background: var(--fail); color: var(--paper); border-color: var(--fail); }
.check.st-skip .check-box { border-style: dashed; }
.check-main { color: var(--ink); }
.check-title { margin: 0; font-size: 16.5px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.check-status { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.check.st-pass .check-status { color: var(--ok); }
.check.st-warn .check-status { color: var(--warn); }
.check.st-fail .check-status { color: var(--fail); }
.check.st-skip .check-status { color: var(--muted); }
.check-finding { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.check-nums { margin-top: 6px; }
.kv { border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.kv th { text-align: left; font-family: var(--mono); font-weight: 400; color: var(--muted); padding: 2px 16px 2px 0; vertical-align: top; white-space: nowrap; }
.kv td { padding: 2px 0; }
.kv pre { margin: 0; font-size: 11px; white-space: pre-wrap; }
.kv .kv { margin-top: 0; }
.kv-scroll { max-height: 220px; overflow: auto; border: 1px solid var(--rule-2); border-radius: 2px; padding: 4px 8px; background: var(--paper-2); max-width: 520px; }
.kv-scroll .kv { margin: 0; }
.kv-count { margin: 0 0 2px; font-family: var(--mono); font-size: 10.5px; }
.credit p { margin: 0; }
.observers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.observers li { display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--rule); border-radius: 2px; padding: 1px 7px; background: var(--paper); font-size: 11px; }
.obs-code { font-weight: 700; color: var(--ink); }

/* ---- provenance ----------------------------------------------------------------------------- */
.credit { display: flex; gap: 14px; align-items: baseline; margin: 0 0 18px; padding: 14px 18px; background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 2px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.credit strong { color: var(--ink); font-weight: 600; }
.credit-k { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
@media (max-width: 640px) { .credit { flex-direction: column; gap: 4px; } }
.prov-list { display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.prov { padding: 12px 0 12px; border-bottom: 1px solid var(--rule-2); }
.prov-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.prov-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.prov-status { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 99px; padding: 0 7px; }
.prov-status.st-ok { color: var(--ok); }
.prov-status.st-empty { color: var(--muted); border-style: dashed; }
.prov-status.st-unavailable { color: var(--warn); }
.prov-archive { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.prov-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.prov-rows .arrow { color: var(--muted); }
.kept-bar { display: inline-block; width: 90px; height: 5px; margin: 0 0 0 8px; background: var(--paper-3); border-radius: 99px; overflow: hidden; }
.kept-bar span { display: block; height: 100%; background: var(--ink-2); }
.prov-when { font-family: var(--mono); font-size: 11px; margin-left: 10px; }
.prov-cuts, .prov-notes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.prov-cuts li { list-style: "− "; }
.prov-cuts code { font-size: 11.5px; }
.prov-notes li { list-style: "※ "; font-style: italic; }
.prov-query { margin-top: 6px; }
.prov-query pre { font-size: 11px; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); margin: 6px 0 0; padding: 8px 10px; background: var(--paper-2); border: 1px solid var(--rule-2); }
.prov.st-empty .prov-head h3, .prov.st-unavailable .prov-head h3 { color: var(--ink-2); }

/* ---- investigations: notebook pages --------------------------------------------------------- */
.notebook { position: relative; margin: 0 0 22px; background-color: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--shadow); padding: 0 24px 18px 56px;
  background-image: linear-gradient(to right, transparent 39px, color-mix(in srgb, var(--accent) 40%, transparent) 39px, color-mix(in srgb, var(--accent) 40%, transparent) 40px, transparent 40px), linear-gradient(to right, transparent 43px, color-mix(in srgb, var(--accent) 22%, transparent) 43px, color-mix(in srgb, var(--accent) 22%, transparent) 44px, transparent 44px); }
.notebook-head { margin: 0 -24px 0 -56px; padding: 9px 24px 9px 56px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--rule); background: var(--paper-3); }
@media (max-width: 640px) { .notebook { padding: 0 16px 14px 34px; background-image: linear-gradient(to right, transparent 21px, color-mix(in srgb, var(--accent) 40%, transparent) 21px, color-mix(in srgb, var(--accent) 40%, transparent) 22px, transparent 22px); } .notebook-head { margin: 0 -16px 0 -34px; padding-left: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.md { font-size: 16.5px; line-height: 1.65; }
.md > :first-child { margin-top: 14px; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table { margin: 0 0 14px; }
.md h3, .md h4, .md h5 { line-height: 1.3; margin: 24px 0 8px; font-weight: 600; }
.md h3 { font-size: 20px; }
.md h4 { font-size: 17px; }
.md h5, .md h6 { font-size: 15px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 0; }
.md code { background: var(--paper-3); padding: 1px 4px; border-radius: 2px; }
.md pre { background: var(--paper-3); padding: 10px 12px; overflow-x: auto; line-height: 1.5; border-radius: 2px; font-size: 12.5px; }
.md pre code { background: none; padding: 0; font-size: inherit; }
.md blockquote { border-left: 2px solid var(--rule); padding-left: 14px; color: var(--ink-2); font-style: italic; }
.md hr { border: 0; border-top: 1px dashed var(--rule); margin: 18px 0; }
.md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 13.5px; line-height: 1.4; background: var(--paper-2); }
.md th, .md td { border-bottom: 1px solid var(--rule); padding: 5px 14px 5px 0; text-align: left; }
.md th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-bottom-color: var(--ink-2); }
.summary .md { font-size: 18px; line-height: 1.6; }
.summary .md p { margin-bottom: 12px; max-width: 68ch; }
.lit { padding-left: 18px; font-size: 15px; }
.lit a { font-size: 13px; }
.inline-prompt { white-space: normal; }

/* ---- pages ---------------------------------------------------------------------------------- */
.page { padding: 34px 0 60px; }
.page-head { max-width: 760px; margin-bottom: 30px; }
.kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.page-head h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 12px; font-weight: 600; text-wrap: balance; }
.page-lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.ladder-key { max-width: 860px; padding: 14px 18px; border: 1px solid var(--rule-2); border-radius: 4px; margin-bottom: 28px; font-size: 15px; color: var(--ink-2); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.ladder-key p { margin: 0; }
.ladder-key strong { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.case-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.case-cards > li.is-featured { grid-column: span 2; }
@media (max-width: 760px) { .case-cards { grid-template-columns: 1fr; } .case-cards > li.is-featured { grid-column: auto; } }
.case-card { display: flex; flex-direction: column; height: 100%; padding: 16px 20px 14px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.case-card:hover { color: var(--ink); border-color: var(--ink-2); transform: translateY(-2px); }
.case-card:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.card-top { display: flex; gap: 12px; align-items: baseline; font-size: 12px; }
.card-id { font-weight: 700; }
.card-target { color: var(--muted); }
.card-featured { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 99px; padding: 0 7px; }
.card-title { font-size: 24px; line-height: 1.18; margin: 8px 0 6px; font-weight: 600; text-wrap: balance; }
.is-featured .card-title { font-size: 30px; }
.card-hook { margin: 0 0 12px; font-style: italic; color: var(--ink-2); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.is-featured .card-hook { font-size: 18px; max-width: 60ch; }
.card-thumb { margin-top: auto; min-height: 82px; border-top: 1px solid var(--rule-2); padding-top: 8px; }
.is-featured .card-thumb { min-height: 114px; }
.card-thumb.is-failed { min-height: 0; border: 0; padding: 0; }
.thumb-svg { display: block; width: 100%; overflow: visible; }
.thumb-dots { stroke: var(--ink-2); stroke-opacity: .7; fill: none; }
.case-card:hover .thumb-dots { stroke: var(--accent); }
.thumb-cap { display: flex; justify-content: space-between; margin: 2px 0 0; font-size: 10px; color: var(--muted); }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.card-foot .ladder { margin: 0; flex-wrap: nowrap; gap: 8px; }
.card-foot .ladder.is-compact .rung, .card-foot .ladder.is-compact .exit { width: 30px; }
.card-foot .ladder-exits { padding-left: 6px; }
.card-counts { display: flex; gap: 16px; margin: 0; }
.card-counts > div { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.card-counts .is-zero dd { color: var(--muted); }
.card-counts dt { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card-counts dd { margin: 0; font-size: 17px; line-height: 1.1; }
.card-series { margin: 8px 0 0; font-size: 10px; color: var(--muted); letter-spacing: .06em; }

.trial-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 900px) { .trial-modes { grid-template-columns: 1fr; } }
.mode { padding: 14px 18px; border-top: 1.5px solid var(--ink); }
.mode h2 { font-size: 20px; margin: 0 0 6px; font-weight: 600; }
.mode-k { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.mode p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.scorecard { margin-top: 44px; padding: 20px 22px 22px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; align-items: flex-end; }
.sc-trial { font-size: 22px; margin: 0; letter-spacing: 0; }
.sc-who p { margin: 0; text-align: right; font-size: 14.5px; }
.sc-who .muted { font-family: var(--mono); font-size: 11px; }
.sha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; padding: 8px 10px; border: 1px dashed var(--rule); border-radius: 2px; font-size: 12px; }
.sha-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sha-v { font-size: 11.5px; word-break: break-all; color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 16px 0 16px; }
.tile { padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--paper); }
.tile dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile dd { margin: 2px 0 0; font-size: 28px; font-weight: 600; line-height: 1.1; }
.tile-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.3; }
.trial-cases td { font-size: 12px; }
.trial-cases .notes { font-family: var(--serif); font-size: 13.5px; color: var(--ink-2); min-width: 200px; }
.klass { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); white-space: nowrap; }
.ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; min-width: 260px; }
.ranked li { display: grid; grid-template-columns: 140px 1fr 36px; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11px; }
.ranked li.is-truth { color: var(--ink); font-weight: 700; }
.ranked li.is-truth .rk-bar span { background: var(--ok); }
.rk-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.rk-bar { display: block; height: 6px; background: var(--paper-3); border-radius: 99px; overflow: hidden; min-width: 50px; }
.rk-bar span { display: block; height: 100%; background: var(--ink-2); border-radius: 99px; }
.rk-p { text-align: right; }
.mark { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: 1.5px solid currentColor; border-radius: 3px; font-weight: 800; font-size: 12px; }
.mark.ok { color: var(--ok); }
.mark.half { color: var(--warn); font-size: 10px; }
.mark.no { color: var(--fail); }
.hind-preds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.hp { display: grid; grid-template-columns: 44px minmax(0, 1fr) 130px 130px; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.hp-case { font-size: 12px; color: var(--muted); }
.hp-statement { margin: 0; font-size: 15px; }
.hp-prob { display: grid; grid-template-columns: 1fr 36px; gap: 8px; align-items: center; font-size: 12px; }
.hp .verdict { justify-self: start; }
.hp-obs { grid-column: 2 / -1; font-size: 11px; }
@media (max-width: 640px) { .hp { grid-template-columns: 40px 1fr; } .hp-prob, .hp .verdict { grid-column: 2; } }
.agents td:first-child { font-family: var(--serif); font-size: 14.5px; }

.about .manifesto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; max-width: 1040px; }
@media (max-width: 800px) { .about .manifesto { grid-template-columns: 1fr; } }
.manifesto section { padding-top: 12px; border-top: 1.5px solid var(--ink); margin-bottom: 26px; }
.manifesto h2 { font-size: 22px; margin: 0 0 8px; font-weight: 600; line-height: 1.25; }
.manifesto p { margin: 0 0 10px; font-size: 16.5px; color: var(--ink-2); }
.cmd-block { background: var(--paper-3); padding: 10px 12px; border-radius: 3px; font-size: 13px; overflow-x: auto; margin: 6px 0 0; }
.error-detail { font-size: 12px; color: var(--muted); white-space: pre-wrap; margin-top: 16px; }

/* ---- footer --------------------------------------------------------------------------------- */
.colophon { margin-top: 40px; border-top: 3px double var(--rule); padding: 30px 0 46px; }
.colophon-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px 56px; }
@media (max-width: 900px) { .colophon-inner { grid-template-columns: 1fr; } }
.quotes { display: grid; gap: 18px; }
.quotes blockquote { margin: 0; }
.quotes p { margin: 0; font-size: 19px; font-style: italic; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.quotes footer { margin-top: 4px; font-size: 13px; color: var(--muted); }
.credits { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.credits p { margin: 0 0 10px; }

.dev-badge { position: fixed; left: 12px; bottom: 12px; z-index: 50; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border: 1.5px dashed var(--accent); color: var(--accent); background: var(--paper); border-radius: 2px; }

/* link-preview card (og.png): masthead, title and the figure only */
.is-card .home-intro, .is-card .rail, .is-card .fig-controls, .is-card .case-body, .is-card .fig-caption, .is-card .fig-table, .is-card .facts, .is-card .colophon, .is-card .nav, .is-card .case-status, .is-card .case-hook { display: none; }
.is-card .case-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig"; }
.is-card .case { padding-top: 14px; }
.is-card .case-title { font-size: 40px; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .stamp { mask-image: none; -webkit-mask-image: none; mix-blend-mode: normal; } }
@media print { .rail .agent, .fig-controls, .theme-toggle, .dev-badge { display: none; } body { background: #fff; } }

/* ---- trials: the headline experiment -------------------------------------------------------- */
.trial { margin-top: 4px; }
.trial-head { max-width: 820px; margin-bottom: 20px; }
.trial-title { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 600; text-wrap: balance; }
.seal-row { display: flex; gap: 18px; align-items: center; max-width: 820px; margin: 0 0 30px; padding: 14px 18px; border: 1px dashed var(--rule); border-radius: 3px; background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.seal-badge { flex: none; width: 64px; height: 64px; border-radius: 52% 48% 50% 50% / 50% 53% 47% 50%; display: grid; place-items: center; transform: rotate(-10deg);
  background: radial-gradient(circle at 35% 30%, var(--wax-2), var(--wax) 62%, color-mix(in srgb, var(--wax) 70%, #000) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25), inset 0 0 0 5px color-mix(in srgb, var(--wax) 85%, #000); }
.seal-badge span { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 13px; color: color-mix(in srgb, var(--wax) 35%, #000); text-shadow: 0 1px 0 color-mix(in srgb, var(--wax-2) 80%, #fff); }
.seal-text { min-width: 0; flex: 1; display: grid; gap: 8px; }
.seal-text .sha { margin: 0; padding: 0; border: 0; }
.copy-row.verify { max-width: 520px; }
@media (max-width: 640px) { .seal-row { flex-direction: column; align-items: flex-start; } }

.cmp { margin: 0 0 28px; }
.cmp-table { border-collapse: collapse; width: 100%; max-width: 920px; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 10px 18px 10px 0; border-bottom: 1px solid var(--rule-2); }
.cmp-table thead th { border-bottom: 1.5px solid var(--ink); padding-bottom: 8px; }
.cmp-agent { min-width: 150px; }
.cmp-name { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.cmp-agent .mono { font-size: 10.5px; }
.cmp-k { display: block; font-size: 15.5px; font-weight: 600; }
.cmp-note { display: block; font-size: 12.5px; font-style: italic; color: var(--muted); font-weight: 400; }
.cmp-v { font-size: 22px; font-weight: 700; color: var(--ink); }
.cmp-extra { font-family: var(--mono); font-size: 11px; }
.cmp-bar { display: block; width: 100%; max-width: 220px; height: 10px; margin-top: 4px; overflow: visible; }
.cmp-track { fill: var(--paper-3); }
.cmp-fill { fill: var(--ink-2); }
.cmp-fill.is-lower { fill: var(--muted); }
.cmp-ref { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.cmp-legend { font-size: 12.5px; margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.cmp-ref-key { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--accent); }

.callout { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; max-width: 920px; margin: 0 0 12px; padding: 18px 22px; background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: 2px; box-shadow: var(--shadow); }
.callout-h { font-size: 21px; margin: 0 0 6px; font-weight: 600; }
.callout p { margin: 0 0 8px; font-size: 15.5px; color: var(--ink-2); }
.callout-list { margin: 4px 0 10px; padding-left: 18px; font-size: 15.5px; }
.callout-list li { margin-bottom: 4px; }
.stamp-callout { --ink-c: var(--warn); align-self: start; margin-top: 4px; }
.stamp-erratum { --ink-c: var(--fail); font-size: 12px; padding: 6px 10px 5px 12px; border-width: 2.5px; }
@media (max-width: 640px) { .callout { grid-template-columns: 1fr; } .stamp-callout { justify-self: start; } }

.mx-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mx-table thead th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 6px 14px 6px 0; border-bottom: 1.5px solid var(--ink); }
.mx-table td, .mx-table tbody th { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; text-align: left; font-weight: 400; }
.mx-packet .mono { font-weight: 700; font-size: 13px; display: block; }
.mode-chip { display: inline-block; margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 99px; padding: 0 6px; color: var(--muted); }
.mode-hindsight { color: var(--accent); border-color: currentColor; }
.mx-truth { min-width: 190px; }
.mx-truth .klass { display: block; font-weight: 700; }
.mx-real { display: block; font-size: 13px; margin-top: 2px; }
.mx-real .mono { font-size: 11px; }
.mx-title { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; }
.mx-cell { min-width: 190px; }
.mx-top { display: flex; align-items: center; gap: 8px; }
.mx-klass { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.mx-cell.is-wrong .mx-klass { color: var(--ink-2); }
.mx-p { display: grid; grid-template-columns: minmax(60px, 120px) auto; gap: 8px; align-items: center; margin-top: 5px; font-size: 11px; color: var(--ink-2); }
.mx-cell.is-right .rk-bar span { background: var(--ok); }
.recog { display: inline-block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); border: 1px dashed currentColor; border-radius: 2px; padding: 0 5px; }
.mx-table tr.is-highlight > * { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mx-table tr.is-highlight > th { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.mx-note-row td { padding-top: 0; background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.mx-note { margin: 0; font-size: 14.5px; color: var(--ink); max-width: 90ch; }
.mx-note em { color: var(--ink-2); }

.hs-packet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 26px 0 10px; font-size: 20px; font-weight: 600; }
.hs-packet .klass { font-size: 10.5px; color: var(--muted); border: 1px solid var(--rule); border-radius: 99px; padding: 0 7px; }
.hs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 24px; align-items: start; }
.hs-col { display: grid; gap: 14px; }
.hs-agent { margin: 0; font-size: 15px; }
.envelope.is-mini .env-flap { height: 30px; }
.envelope.is-mini .env-paper { padding: 10px 14px 10px; }
.envelope.is-mini .env-head { min-height: 0; margin-bottom: 14px; }
.envelope.is-mini.is-open { margin-top: 30px; }
.envelope.is-mini.is-open .env-flap { height: 28px; }
.envelope.is-mini.is-open .env-paper { margin: -14px 10px 10px; }
.envelope.is-mini.is-open .env-head { margin-bottom: 4px; }
.envelope.is-mini .env-statement { font-size: 15px; margin-bottom: 6px; }
.envelope.is-mini .env-prob .mono { font-size: 17px; }
.envelope.is-mini .env-seal { top: 12px; width: 36px; height: 36px; margin-left: -18px; }
.envelope.is-mini .env-seal span { font-size: 12px; }
.envelope.is-mini .env-result { margin-top: 6px; padding-top: 8px; align-items: center; }
.envelope.is-mini .env-result p { font-size: 13px; }
.verdict-pending { color: var(--wax-2); border-style: dashed; }
.verdict-invalid { color: var(--muted); border-style: dotted; }
.verdict.small { font-size: 9.5px; padding: 3px 6px 2px; border-width: 1.5px; }
.v1-note { display: block; margin-top: 2px; font-style: italic; color: var(--fail); font-size: 12.5px; }

.erratum { position: relative; max-width: 920px; margin: 48px 0 0; padding: 22px 26px 18px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; box-shadow: var(--shadow);
  background-image: linear-gradient(to right, transparent 0 calc(100% - 1px), transparent), repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--fail) 4%, transparent) 14px 15px); }
.erratum .stamp-erratum { position: absolute; top: -14px; right: 24px; background: var(--paper-2); }
.erratum-h { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 8px; font-weight: 600; letter-spacing: -.01em; }
.erratum-why { font-size: 16.5px; line-height: 1.55; margin: 0 0 14px; max-width: 72ch; }
.erratum-table td { font-family: var(--serif); font-size: 14px; vertical-align: middle; }
.erratum-stmt { max-width: 46ch; }
.erratum-stmt .mono { font-size: 11px; font-weight: 700; }
.erratum-sum { margin: 12px 0 8px; padding-left: 18px; font-size: 14.5px; }
.process-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 32px; }
.process-col { border-top: 1.5px solid var(--ink); padding-top: 10px; }
.process-col p { margin: 0 0 8px; }
.process-text { font-size: 14.5px; color: var(--ink-2); font-style: italic; }
.how .mode h3 { font-size: 19px; margin: 0 0 6px; font-weight: 600; }

/* ---- home teaser ---------------------------------------------------------------------------- */
.teaser { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 30px 0 0; padding: 12px 16px; border: 1px solid var(--ink-2); border-radius: 3px; background: var(--paper-2); color: var(--ink); text-decoration: none; font-size: 15.5px; box-shadow: var(--shadow); }
.teaser:hover { color: var(--ink); border-color: var(--accent); }
.teaser:hover .teaser-go { transform: translateX(4px); color: var(--accent); }
.teaser-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.teaser-mode { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.teaser-agent strong { font-weight: 600; }
.teaser-agent .muted { font-size: 13.5px; }
.teaser-star { font-style: italic; color: var(--ink-2); }
.teaser-go { margin-left: auto; font-size: 18px; transition: transform .15s; }

/* ---- retracted claims, citations ------------------------------------------------------------ */
.claim.is-retracted .claim-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 50%, transparent); color: var(--muted); font-style: normal; }
.claim.is-retracted .stamp { opacity: .55; }
.claim-retracted { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); }
.retracted-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fail); font-weight: 700; border: 1.5px solid currentColor; padding: 1px 5px; border-radius: 2px; margin-right: 4px; }
.claim-ref.is-retracted { text-decoration: line-through; opacity: .6; }
.cite { white-space: nowrap; color: var(--muted); }
.cite-claim, .cite-receipt { border: 0; background: none; padding: 0 1px; font-size: .78em; cursor: pointer; color: var(--link); text-decoration: underline dotted; text-underline-offset: 3px; }
.cite-receipt[aria-expanded="true"] { background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 2px; }
.cite-receipt.is-missing { color: var(--fail); }
.cite-panel { display: grid; gap: 8px; margin: 6px 0 12px; font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .mx .table-scroll { overflow: visible; }
  .mx-table, .mx-table tbody, .mx-table tr, .mx-table td, .mx-table th { display: block; width: 100%; }
  .mx-table thead { display: none; }
  .mx-table tbody tr:not(.mx-note-row) { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
  .mx-table tbody tr > * { border: 0; padding: 0; }
  .mx-table tr.is-highlight > th { padding-left: 8px; }
  .mx-table .mx-cell { grid-column: 2; min-width: 0; padding-top: 6px; }
  .mx-table .mx-cell::before { content: attr(data-agent); display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .mx-truth { min-width: 0; }
  .mx-note-row td { padding: 8px 10px 12px; }
}
@media (max-width: 640px) {
  .mx-table tr.is-highlight { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px !important; }
  .mx-table tr.is-highlight > * { background: none; box-shadow: none; }
  .mx-table tr.is-highlight > th { padding-left: 0; }
  .mx-note-row { background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  .mx-note-row td { background: none; box-shadow: none; padding: 0 10px 12px 13px; }
}

/* ==== the public front: home, hunts, docket, agents (js/front.js) =========================== */
.js .prerender { display: none; }
:root:not(.js) .loading { display: none; }
.prerender { max-width: 760px; padding: 30px 0; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.btn:hover { color: var(--paper); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { color: var(--ink); }
.btn.small { padding: 7px 11px; font-size: 11px; }

.front { padding: 10px 0 40px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 56px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.hero-title { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.022em; font-weight: 600; margin: 4px 0 20px; text-wrap: balance; }
.hero-red { color: var(--accent); font-style: italic; font-weight: 500; white-space: nowrap; }
.hero-lede { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 38em; margin: 0 0 26px; text-wrap: pretty; }
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-plate { max-width: 460px; justify-self: center; width: 100%; } }

.hero-plate { margin: 0; }
.plate-loading { aspect-ratio: 1; border-radius: 50%; background: #0b0c12; display: grid; place-items: center; color: #8a8fa3; font-style: italic; }
.eyepiece-wrap { position: relative; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #c9b48a, #8a6f45 55%, #5a4529); box-shadow: 0 22px 40px -22px rgba(40, 25, 5, .55), inset 0 0 0 1px rgba(255, 240, 200, .25); }
:root[data-theme="dark"] .eyepiece-wrap { background: radial-gradient(circle at 30% 25%, #4a2219, #26100b 60%, #160806); box-shadow: none; }
.eyepiece { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6); }
.eyepiece-label { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .2em; color: rgba(220, 210, 190, .55); pointer-events: none; }
.player { margin-top: 14px; }
.pr-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.pr-when { font-size: 14px; color: var(--ink); min-width: 9.5ch; font-weight: 600; }
.pr-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pr-k .mono { font-size: 13px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.pr-k-ir .mono { color: var(--c-W2); }
.pr-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-2); background: var(--paper-2); color: var(--ink); cursor: pointer; font-size: 11px; line-height: 1; }
.pr-play:hover { border-color: var(--accent); color: var(--accent); }
.pr-strip { display: block; width: 100%; height: 64px; margin-top: 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: ew-resize; touch-action: none; }
.pr-dots { stroke: var(--c-V); stroke-width: 2.6; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
.pr-ir { stroke: var(--c-W2); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; opacity: .85; }
.pr-head { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pr-year { font-family: var(--mono); font-size: 8px; fill: var(--muted); }
.pr-cap { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 8px; font-style: italic; }

.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 34px 0 8px; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }
.door { background: var(--paper-2); border: 1px solid var(--ink-2); border-radius: 3px; padding: 18px 20px; box-shadow: var(--shadow), 4px 4px 0 -1px var(--paper), 4px 4px 0 0 var(--rule); }
.door h2 { font-size: 22px; margin: 2px 0 12px; font-weight: 600; letter-spacing: -.01em; }
.door-k { margin: 0; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.door-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.door .prompt-text { font-size: 14.5px; }

.front-sec { padding: 34px 0 6px; }
.front-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 20px; }
.front-head h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; font-weight: 600; letter-spacing: -.015em; }
.front-head p { margin: 4px 0 0; color: var(--ink-2); font-style: italic; max-width: 68ch; }
.front-more { flex: none; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.front-sec > .teaser { margin-top: 0; }

.hunt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.hunt-grid.is-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .hunt-grid, .hunt-grid.is-page { grid-template-columns: 1fr; } }
.hunt-card { display: flex; flex-direction: column; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.hunt-card:hover { color: var(--ink); border-color: var(--ink-2); transform: translateY(-2px); }
.hunt-card h3 { font-size: 21px; line-height: 1.15; margin: 2px 0 12px; font-weight: 600; }
.hunt-id { margin: 0; font-size: 11.5px; font-weight: 700; display: flex; justify-content: space-between; }
.hunt-state { font-weight: 400; color: var(--ok); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.hunt-state.is-open { color: var(--warn); }
.hunt-verdict { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 12px 0 0; }
.hunt-verdict.big { font-size: 18px; color: var(--ink); }
.hunt-cases { margin: auto 0 0; padding-top: 10px; font-size: 11.5px; color: var(--accent); }
.hunt-scale { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.6; }
.hunt-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-bottom: 30px; }
@media (max-width: 860px) { .hunt-top { grid-template-columns: 1fr; } }
.hunt-readme { margin-top: 40px; max-width: 900px; border-top: 3px double var(--rule); padding-top: 18px; }

.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.funnel li { position: relative; display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 13.5px; line-height: 1.3; }
.fn-bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: color-mix(in srgb, var(--ink-2) 13%, transparent); border-radius: 0 2px 2px 0; }
.fn-n { position: relative; text-align: right; font-weight: 600; padding-right: 2px; }
.fn-label { position: relative; color: var(--ink-2); }
.funnel li.is-last .fn-bar { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.funnel li.is-last .fn-n, .funnel li.is-last .fn-label { color: var(--accent); font-weight: 700; }

.wrong-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .wrong-grid { grid-template-columns: 1fr; } }
.wrong { position: relative; display: block; padding: 14px 18px 14px 50px; border-left: 2px solid var(--accent); color: var(--ink); text-decoration: none; }
.wrong:hover { color: var(--ink); background: var(--paper-2); }
.wrong-mark { position: absolute; left: 14px; top: 10px; font-size: 24px; color: var(--accent); transform: rotate(-8deg); }
.wrong h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.wrong p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.wrong-id { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--muted); }

.docket-teaser { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; }
@media (max-width: 860px) { .docket-teaser { grid-template-columns: 1fr; } }
.dk-record p { margin: 0 0 4px; color: var(--ink-2); font-size: 14px; }
.dk-big { font-size: 46px !important; line-height: 1; color: var(--ink) !important; font-weight: 600; margin-top: 10px !important; }
.dk-record .btn { margin-top: 18px; }
.dk-next { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dk-row a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 90px; gap: 18px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.dk-row a:hover { background: var(--paper-2); color: var(--ink); }
.dk-when { display: grid; }
.dk-days { font-size: 30px; line-height: 1; font-weight: 600; }
.dk-days-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.dk-date { font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.dk-where { margin: 0; font-size: 11.5px; color: var(--accent); }
.dk-st { margin: 3px 0 4px; font-size: 15.5px; line-height: 1.45; }
.dk-by { margin: 0; font-size: 11px; color: var(--muted); }
.dk-prob { display: grid; gap: 5px; justify-items: end; font-size: 15px; font-weight: 600; }
.dk-gauge { width: 80px; height: 5px; background: var(--rule-2); border-radius: 3px; overflow: hidden; }
.dk-gauge span { display: block; height: 100%; background: var(--wax); }
@media (max-width: 640px) { .dk-row a { grid-template-columns: 70px minmax(0, 1fr); } .dk-prob { grid-column: 2; justify-items: start; } }
.dk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: -6px 0 26px; }
.dk-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0 0 18px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dk-stats dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dk-stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 600; }
.dk-h { font-size: 26px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
.timeline { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.tl-axis { stroke: var(--ink-2); stroke-width: 1.2; }
.tl-tick { stroke: var(--ink-2); }
.tl-year { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.tl-now { fill: var(--accent); }
.tl-now-t { fill: var(--accent); }
.tl-env { fill: var(--kraft); stroke: var(--kraft-edge); }
.tl-dot { fill: var(--wax); }
.tl-mark:hover .tl-env { fill: var(--wax-2); stroke: var(--wax); }
.dk-table td { vertical-align: top; font-size: 14px; }
.dk-glyph { font-weight: 700; }
.dk-table tr.is-true .dk-glyph { color: var(--ok); }
.dk-table tr.is-false .dk-glyph { color: var(--fail); }

.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px; }
@media (max-width: 760px) { .agent-grid { grid-template-columns: 1fr; } }
.agent-grid h3 { margin: 0 0 4px; font-size: 16px; }
.agent-grid p { margin: 0; color: var(--ink-2); font-size: 15px; }
.rules { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 16px; max-width: 70ch; }
.llms { max-height: 460px; overflow: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; padding: 14px 16px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }

/* link-preview card of the front page */
.is-card .front:not(.is-home) > :not(.hero), .is-card .hero-actions, .is-card .player, .is-card .masthead { display: none; }
.is-card .hero { border: 0; padding: 30px 0; grid-template-columns: 1fr 380px; }
.is-card .hero-title { font-size: 58px; }

.dk-gloss { margin: 0 0 4px; font-size: 12.5px; font-style: italic; color: var(--muted); }
.dk-stat-note { display: block; font-family: var(--serif); font-size: 12px; font-weight: 400; color: var(--muted); }
.dk-table th { text-align: left; }
.is-card .pr-cap { display: none; }
.is-card .hero-copy::after { content: "oddsky.ai"; display: block; margin-top: 26px; font-family: var(--mono); font-size: 15px; letter-spacing: .14em; color: var(--accent); }

/* ==== live: observers, the Sky Ledger, notebooks (js/live.js) ================================= */
@media (max-width: 1180px) { .hide-md-nav { display: none; } }
.nav-observe { border: 1.5px solid var(--ink) !important; border-radius: 3px; padding: 4px 9px !important; color: var(--ink) !important; }
.nav-observe:hover { background: var(--ink); color: var(--paper) !important; }
.nav-observe.is-in { border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700; letter-spacing: .16em; }
.nav-observe.is-in::before { content: "●"; margin-right: 6px; font-size: 8px; vertical-align: 2px; }

.obs-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
@media (max-width: 860px) { .obs-grid { grid-template-columns: 1fr; } }
.obs-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 6px; }
.obs-code { display: block; width: 6.2ch; font-size: 44px; font-weight: 700; letter-spacing: .14em; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--accent); text-transform: uppercase; }
.obs-code::placeholder { color: var(--rule); }
.obs-name { display: block; width: 100%; margin: 12px 0; padding: 9px 11px; font: inherit; font-size: 15px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); }
.obs-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.obs-status.is-ok { color: var(--ok); } .obs-status.is-bad { color: var(--fail); }
.obs-head { display: flex; gap: 26px; align-items: center; max-width: none; }
.obs-badge { flex: none; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; border: 3px double var(--accent); color: var(--accent); font-size: 32px; font-weight: 700; letter-spacing: .1em; transform: rotate(-6deg); background: var(--paper-2); box-shadow: var(--shadow); }
.mint-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mint-row .obs-name { flex: 1; min-width: 240px; margin: 8px 0; }
.key-block { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1.5px dashed var(--accent); border-radius: 3px; }
.key-block pre, .key-block .cmd { white-space: pre-wrap; }
.key-warn { margin: 0; font-weight: 600; color: var(--accent); }
.key-list, .nb-list { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }

.lg-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.lg-verify > p { flex-basis: 100%; margin: 0; }
.verify-bar { flex-basis: 100%; height: 3px; background: var(--rule-2); }
.verify-bar span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .1s; }
.verify-out { flex-basis: 100%; }
.verify-ok { color: var(--ok); } .verify-bad { color: var(--fail); }
.lg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.lg-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 150px; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px; transition: background .3s; }
.lg-row:target { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lg-seq { font-size: 17px; font-weight: 700; display: grid; align-content: start; }
.lg-kind { font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lg-grade .lg-kind { color: var(--ok); }
.lg-st { margin: 3px 0; font-size: 15px; line-height: 1.45; }
.lg-hash { font-size: 11.5px; color: var(--ink-2); text-align: right; display: grid; align-content: start; gap: 2px; }
.lg-prev { color: var(--muted); font-size: 10.5px; }
.lg-row.is-verified .lg-hash { color: var(--ok); }
.lg-row.is-verified .lg-hash::before { content: "✓ verified"; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.lg-row.is-broken { background: color-mix(in srgb, var(--fail) 12%, transparent); }
@media (max-width: 700px) { .lg-row { grid-template-columns: 60px minmax(0, 1fr); } .lg-hash { grid-column: 2; text-align: left; } }

.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 860px) { .board-grid { grid-template-columns: 1fr; } }
.board-grid h3 { margin: 0 0 6px; font-size: 17px; }
.board td, .board th { text-align: left; font-size: 14px; }
.nb-claims { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.nb-claims li { line-height: 1.5; }
.nb-claims li.is-retracted > span:nth-child(3) { text-decoration: line-through; }
.cite { font-family: var(--mono); font-size: .85em; }
.board td, .board th { padding: 5px 18px 5px 0; white-space: nowrap; }


/* ==== brand v2: type, the journal register ================================================== */
h1, h2, h3, h4, .case-title, .card-title, .sp-title { font-family: var(--sans); font-stretch: 106%; font-weight: 640; letter-spacing: -.022em; }
.case-title, .page-head h1 { font-weight: 700; font-stretch: 112%; letter-spacing: -.035em; line-height: 1.02; }
.front-head h2, .dk-h, .section-head h2 { font-stretch: 110%; letter-spacing: -.03em; }
.kicker, .door-k, .agent-kicker { color: var(--accent); }
.masthead { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.tagline { font-size: 14.5px; color: var(--muted); }
.hero-red, .funnel li.is-last .fn-n, .funnel li.is-last .fn-label, .wrong-mark, .dk-where { color: var(--odd); }
.funnel li.is-last .fn-bar { background: color-mix(in srgb, var(--odd) 22%, transparent); }
.wrong { border-left-color: var(--odd); }
.dk-gauge span { background: var(--accent); }
.btn { font-family: var(--mono); border-radius: 999px; padding: 10px 18px; }
.btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transform: none; }
.door, .agent { border-color: var(--rule); box-shadow: var(--shadow); border-radius: 10px; }
.case-card, .hunt-card { border-radius: 10px; }
.thumb-dots { stroke: var(--ink-2); }
.nav-observe { border-radius: 999px; }
.btn-odd { background: var(--odd); border-color: var(--odd); color: #fff; }
.btn-odd:hover { color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--odd) 30%, transparent); }

/* ==== the night register: the home page sky ================================================== */
:root.at-home .masthead { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(rgba(4, 5, 10, .85), rgba(4, 5, 10, 0)); border: 0; backdrop-filter: none; color: var(--night-ink); }
:root.at-home .wordmark, :root.at-home .nav a, :root.at-home .tagline, :root.at-home .theme-toggle { color: var(--night-ink); }
:root.at-home .wm-odd { fill: var(--night-odd); }
:root.at-home .nav a:hover, :root.at-home .nav a[aria-current="page"] { border-bottom-color: var(--night-odd); }
:root.at-home .nav-observe { border-color: var(--night-ink) !important; color: var(--night-ink) !important; }
:root.at-home .theme-toggle { border-color: rgba(233, 236, 255, .3); }
:root.at-home #app { padding-top: 0; }
.front.is-home { padding-top: 0; }

.sky-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 100svh; min-height: 640px; max-height: 1100px; background: var(--night); color: var(--night-ink); overflow: hidden; isolation: isolate; }
.sky-stage, .sky { position: absolute; inset: 0; }
.sky-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.sky-canvas:active { cursor: grabbing; }
.sky-loading { position: absolute; left: 50%; top: 45%; transform: translateX(-50%); color: rgba(233, 236, 255, .5); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.sky-markers { position: absolute; inset: 0; pointer-events: none; }
.sky-mark { --c: var(--night-odd); position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.sky-mark.is-control { --c: #9fb0ff; }
.sky-mark > span { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.sm-glow { width: 64px; height: 64px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 65%, transparent), transparent 62%); opacity: calc(min(1, var(--f, 1)) * .55); transition: opacity .25s; }
.sm-dot { width: 8px; height: 8px; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: calc(.12 + min(1, var(--f, 1)) * .88); scale: calc(.55 + min(1.6, var(--f, 1)) * .45); }
.sm-ring { width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); }
.sky-mark.is-dim .sm-ring { border-style: dashed; animation: sm-fade 2.4s ease-out infinite; }
.sky-mark.is-bright .sm-glow { width: 110px; height: 110px; opacity: .8; }
.sky-mark.is-nodata .sm-dot { opacity: .3; }
.sky-mark.is-focus .sm-ring { width: 46px; height: 46px; border-width: 1.5px; animation: sm-pulse 1.8s ease-in-out infinite; }
@keyframes sm-pulse { 50% { width: 58px; height: 58px; opacity: .5; } }
@keyframes sm-fade { from { width: 22px; height: 22px; opacity: .9; } to { width: 60px; height: 60px; opacity: 0; } }
.sm-label { left: 16px !important; top: -7px !important; transform: none !important; border-radius: 0 !important; white-space: nowrap; font-size: 11px; letter-spacing: .04em; color: rgba(233, 236, 255, .78); opacity: 0; transition: opacity .2s; text-shadow: 0 0 6px #000; }
.sm-label b { color: var(--c); font-weight: 600; }
.show-labels .sm-label, .sky-mark:hover .sm-label, .sky-mark.is-focus .sm-label, .sky-mark:focus-visible .sm-label { opacity: 1; }
.no-webgl::after { content: "This sky needs WebGL. The casebook is below."; position: absolute; inset: 0; display: grid; place-items: center; color: var(--night-ink); }

.sky-copy { position: absolute; z-index: 3; left: clamp(20px, 5vw, 72px); bottom: 128px; max-width: 620px; pointer-events: none; }
.sky-copy > * { pointer-events: auto; }
.sky-copy .kicker { color: rgba(233, 236, 255, .7); }
.sky-title { font-family: var(--sans); font-size: clamp(50px, 6.8vw, 112px); font-weight: 760; font-stretch: 118%; line-height: .9; letter-spacing: -.05em; margin: 6px 0 22px; color: #fff; text-wrap: balance; }
.sky-title em { font-style: normal; color: var(--night-odd); text-shadow: 0 0 40px color-mix(in srgb, var(--night-odd) 55%, transparent); }
.sky-lede { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55; color: rgba(233, 236, 255, .78); max-width: 46ch; margin: 0 0 26px; text-shadow: 0 1px 12px #000; }
.btn-ghost-night { background: rgba(4, 5, 10, .4); color: var(--night-ink); border-color: rgba(233, 236, 255, .55); }
.btn-ghost-night:hover { color: #fff; border-color: #fff; }
.sky-hint { position: absolute; z-index: 3; right: clamp(20px, 5vw, 72px); top: 92px; margin: 0; font-size: 11px; letter-spacing: .1em; color: rgba(233, 236, 255, .45); transition: opacity .6s; }
.sky-hint.is-gone { opacity: 0; }

.sky-caption, .sky-pick { position: absolute; z-index: 4; color: var(--night-ink); background: rgba(6, 8, 18, .72); border: 1px solid rgba(160, 172, 255, .2); border-radius: 14px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 18px 20px; box-shadow: 0 30px 60px -30px #000; }
.sky-caption { left: clamp(20px, 5vw, 72px); bottom: 128px; width: min(500px, calc(100vw - 40px)); animation: rise .5s ease-out; }
.sky-pick { right: clamp(20px, 5vw, 72px); top: 100px; width: min(380px, calc(100vw - 40px)); animation: rise .4s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.sc-k { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--night-odd); }
.sc-text { margin: 0 0 16px; font-size: 19px; line-height: 1.5; color: #fff; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-title { font-size: 24px; line-height: 1.1; margin: 0 0 4px; color: #fff; }
.sp-target { margin: 0 0 10px; font-size: 11.5px; color: rgba(233, 236, 255, .55); }
.sp-hook { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: rgba(233, 236, 255, .85); }
.sp-dm { margin: 0 0 14px; font-size: 12.5px; color: var(--night-odd); }
.sp-close { position: absolute; right: 10px; top: 6px; background: none; border: 0; color: rgba(233, 236, 255, .6); font-size: 22px; cursor: pointer; }

.sky-time { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 30px clamp(20px, 5vw, 72px) 22px; background: linear-gradient(rgba(4, 5, 10, 0), rgba(4, 5, 10, .9) 55%); }
.st-clock { display: flex; align-items: center; gap: 14px; }
.st-date { display: grid; line-height: 1; }
.st-month { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 236, 255, .55); }
.st-year { font-size: 36px; font-weight: 600; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.st-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(233, 236, 255, .4); background: rgba(4, 5, 10, .5); color: #fff; cursor: pointer; font-size: 12px; }
.st-play:hover { border-color: var(--night-odd); color: var(--night-odd); }
.st-chip { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(233, 236, 255, .3); background: rgba(4, 5, 10, .4); color: var(--night-ink); cursor: pointer; }
.st-chip:hover, .st-chip[aria-pressed="true"] { border-color: #8f9cff; color: #fff; background: rgba(80, 96, 255, .25); }
.tl-sky { display: block; width: 100%; height: 44px; cursor: ew-resize; touch-action: none; }
.tls-axis, .tls-tick { stroke: rgba(233, 236, 255, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tls-year { font-family: var(--mono); font-size: 9px; fill: rgba(233, 236, 255, .5); }
.tls-dim { fill: var(--night-odd); opacity: .85; }
.tls-bright { stroke: #8fd0ff; stroke-width: 1.5; opacity: .6; vector-effect: non-scaling-stroke; }
.tls-head { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
@media (max-width: 720px) {
  .sky-time { grid-template-columns: auto minmax(0, 1fr); padding-bottom: 14px; }
  .sky-time .st-chip { display: none; }
  .sky-copy, .sky-caption { bottom: 104px; }
  .sky-hint { display: none; }
  .sky-pick { top: auto; bottom: 104px; right: 20px; }
}
:root[data-theme="dark"] .sky-mark.is-control { --c: #ffb08a; }
:root[data-theme="dark"] .sky-title, :root[data-theme="dark"] .st-year, :root[data-theme="dark"] .sc-text, :root[data-theme="dark"] .sp-title { color: var(--night-ink); }
.is-card .sky-time, .is-card .sky-hint, .is-card .hero-actions, .is-card .masthead, .is-card .home-below { display: none; }
.is-card .sky-hero { height: 630px; min-height: 0; }
.is-card .sky-copy { bottom: 60px; }
.is-card .sky-copy::after { content: "oddsky.ai"; display: block; font-family: var(--mono); font-size: 16px; letter-spacing: .16em; color: var(--night-odd); }
.sky-mark.is-focus .sm-label::after { content: attr(data-light); display: block; margin-top: 3px; font-size: 13px; color: #fff; letter-spacing: 0; }
.sky-pick:not([hidden]) ~ .sky-hint, .sky-caption:not([hidden]) ~ .sky-hint { opacity: 0; }
html, body { overflow-x: clip; }
.sky-copy { right: clamp(20px, 5vw, 72px); }
@media (max-width: 640px) {
  :root.at-home .tagline { display: none; }
  .sky-title { font-size: clamp(42px, 13vw, 64px); }
  .sky-lede { font-size: 15.5px; }
  .hero-actions .btn { padding: 9px 14px; font-size: 11px; }
  .st-year { font-size: 26px; }
  .sky-copy, .sky-caption { bottom: 92px; }
}

/* footer epigraph */
.colophon-inner { align-items: end; }
.epigraph { margin: 0; }
.epigraph blockquote { margin: 0; }
.epigraph p { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; font-style: normal; color: var(--ink); text-wrap: balance; }
.epigraph figcaption { margin-top: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink-2); }
.epigraph figcaption::before { content: "— "; }

.sky-nudge { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(6, 8, 18, .8); border: 1px solid rgba(160, 172, 255, .25); color: var(--night-ink); font-size: 12px; letter-spacing: .06em; pointer-events: none; opacity: 0; transition: opacity .25s; }
.sky-nudge.is-on { opacity: 1; }
.st-tools { display: flex; align-items: center; gap: 10px; }
.st-zooms { display: inline-flex; border: 1px solid rgba(233, 236, 255, .3); border-radius: 999px; overflow: hidden; }
.st-zoom { width: 34px; height: 30px; border: 0; background: rgba(4, 5, 10, .4); color: var(--night-ink); font: 16px/1 var(--mono); cursor: pointer; }
.st-zoom + .st-zoom { border-left: 1px solid rgba(233, 236, 255, .2); }
.st-zoom:hover { background: rgba(80, 96, 255, .3); color: #fff; }
@media (max-width: 720px) { .st-tools { display: none; } }

/* ==== why Oddsky: the night register fading into the journal ================================ */
.vision { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: linear-gradient(var(--night) 0%, #070913 70%, var(--paper) 100%); color: var(--night-ink); padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 72px) clamp(90px, 12vw, 170px); }
:root[data-theme="dark"] .vision { background: linear-gradient(var(--night) 0%, var(--night) 80%, var(--paper) 100%); }
.vz-inner { max-width: 880px; margin: 0 auto; }
.vision .kicker { color: var(--night-odd); }
.vz-h { font-family: var(--sans); font-size: clamp(34px, 4.6vw, 64px); font-weight: 700; font-stretch: 114%; letter-spacing: -.04em; line-height: 1.02; margin: 8px 0 40px; color: #fff; text-wrap: balance; }
.vz-h span { color: rgba(233, 236, 255, .5); }
.vz-p { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; color: rgba(233, 236, 255, .86); margin: 0 0 26px; max-width: 40em; text-wrap: pretty; }
.vz-aim { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; color: #fff; margin: 46px 0 56px; padding-left: 22px; border-left: 3px solid var(--night-odd); max-width: 32em; text-wrap: balance; }
.vz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; border-top: 1px solid rgba(233, 236, 255, .18); padding-top: 22px; }
.vz-stats dd { margin: 0; order: -1; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; color: #fff; }
.vz-stats dd a { color: var(--night-odd); text-decoration: none; }
.vz-stats div { display: flex; flex-direction: column; gap: 6px; }
.vz-stats dt { font-size: 14px; line-height: 1.4; color: rgba(233, 236, 255, .6); }
@media (max-width: 720px) { .vz-stats { grid-template-columns: 1fr; } }
:root[data-theme="dark"] .vz-h, :root[data-theme="dark"] .vz-aim, :root[data-theme="dark"] .vz-stats dd { color: var(--night-ink); }
.vz-dim { opacity: .14; transform: translateY(14px); transition: opacity 1.1s ease, transform 1.1s ease; }
.vz-dim.is-lit { opacity: 1; transform: none; }
.home-below { padding-top: 10px; }

/* masthead alignment: every item shares one centre line and one height (logo, tagline, links, pills) */
.masthead-inner { align-items: center; padding-top: 14px; padding-bottom: 14px; }
.tagline { line-height: 1.2; }
.nav a, .theme-toggle { display: inline-flex; align-items: center; height: 32px; line-height: 1; }
.nav a { padding: 0 !important; border-bottom: 0 !important; text-decoration: underline 1.5px transparent; text-underline-offset: 8px; transition: text-decoration-color .15s; }
.nav a:hover { text-decoration-color: var(--rule); }
.nav a[aria-current="page"] { text-decoration-color: var(--accent); }
:root.at-home .nav a:hover, :root.at-home .nav a[aria-current="page"] { text-decoration-color: var(--night-odd); }
.nav .nav-observe { padding: 0 14px !important; text-decoration: none; }
.nav a.nav-observe { border-bottom: 1.5px solid currentColor !important; }
.theme-toggle { padding: 0 12px 0 9px; }
@media (max-width: 640px) { .nav a, .theme-toggle { height: 30px; } .theme-toggle { padding: 0 9px; } }

/* ==== sign-in: providers, claiming a code, approving an agent ==================================== */
.pv-list { display: grid; gap: 10px; margin: 12px 0 6px; }
.pv-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 600 15px/1 var(--sans); font-stretch: 104%; text-decoration: none; cursor: pointer; transition: box-shadow .15s, background .15s; }
.pv-btn:hover { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pv-icon { width: 20px; height: 20px; flex: none; }
.signin .door-note.small { margin-top: 12px; }
.obs-alert { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent); background: color-mix(in srgb, var(--fail) 8%, transparent); color: var(--ink); }
.obs-alert.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pk-join summary { cursor: pointer; list-style: none; }
.pk-join summary::-webkit-details-marker { display: none; }
.pk-join summary .door-k::after { content: " +"; }
.pk-join[open] summary .door-k::after { content: " −"; }
.claim { max-width: 560px; }
.claim-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; color: var(--muted); font-size: 14px; }
.chip-day { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
.chip-day:hover { background: var(--paper-3); color: var(--ink); border-color: var(--accent); }
.consent { max-width: 640px; }
.consent-who { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; }
.consent-who .obs-badge { width: 84px; height: 84px; font-size: 24px; }
.consent-who h2 { margin: 2px 0; }
.consent-list { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 6px; }
.methods { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.methods li { display: flex; align-items: center; gap: 10px; }
.more-keys { margin-top: 14px; }
.more-keys summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.obs-grid { align-items: start; }