/* PixVid demo page. Local fonts (fonts/), no external resources.
 * Default theme "Slate": cool near-white paper with no texture, deep navy ink, amber accent, Newsreader headings,
 * Instrument Sans body, JetBrains Mono labels, hairline rules, almost no boxes.
 * Every color in the page, in CSS and in the SVG that the scripts draw, is one of the tokens below.
 * Alternate themes (css/themes/*.css) override these tokens only; js/theme-switch.js loads them in review. */

/* ---------- Tokens ---------- */
:root {
  /* Paper and ink */
  --ground: #f6f8fb;          /* page paper */
  --ink: #0f1b33;             /* body text, rules that must read, filled buttons */
  --muted: #4a566b;           /* secondary text */
  --faint: #5c687d;           /* small labels, captions' numbers */
  --line: #d5dce8;            /* hairlines */
  --ghost: #b3bdcd;           /* empty outlines (frames not yet shown) */
  --link-line: #8895ab;       /* link underlines */
  /* Series palette, also used by the steering demo and the cache figure */
  --purple: #5b50b8;
  --rust: #b45309;
  --ochre: #a16207;
  --magenta: #a3338f;
  --blue: #1d5fa8;
  --grey: #64708a;
  /* Accent and figure colors */
  --accent: #b45309;          /* the one accent (amber 700, 4.7:1 on the paper): active chip, controls, step outlines */
  --fig-accent: var(--accent); /* accent as drawn ON the authors' figures (outlines, flowing dots, arrows) */
  --actA: #0f766e;            /* latency figure: action A */
  --actB: #4a55b8;            /* action B */
  --actC: #a3338f;            /* action C */
  --on-act: #fff;             /* letters on the A / B / C fills */
  --veil: var(--ground);      /* translucent sheet over the parts a figure step is not about */
  --veil-opacity: 0.62;
  --flow-halo: #fff;          /* halo behind the flowing dots */
  --lat-chunk: #98a5ba;       /* dashed 4-frame chunk outline in the latency figure */
  --selection-bg: var(--ink);
  --selection-ink: var(--ground);
  --focus: var(--ink);
  /* Plate behind the authors' light-only figures. Transparent here; dark themes set a light plate. */
  --figure-plate: transparent;
  --figure-plate-pad: 0px;
  --figure-plate-radius: var(--radius);
  /* Video players stay dark in every theme so footage reads the same */
  --video-plate: #000;
  --video-label-bg: rgba(23, 23, 23, 0.74);
  --video-label-ink: #f5f5f5;
  --video-fail-bg: #1c1c1c;
  --video-fail-ink: #e8e8e8;
  --video-fail-code: #fff;
  /* Page texture: a 1 px dot every 8 px in --dot-color at --dot-opacity. Set --dot-opacity to 0 for none. */
  --dot-color: var(--ink);
  --dot-opacity: 0;
  --dot-step: 8px;
  color-scheme: light;
  --radius: 2px;
  --serif: Newsreader, "Newsreader Fallback", "Newsreader Fallback Win", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", "JetBrains Mono Fallback Win", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Instrument Sans", "Instrument Sans Fallback", "Instrument Sans Fallback Win", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 3vw, 40px);
  --content-width: 1040px;    /* inner width 960 px on a wide screen */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; min-width: 320px; scrollbar-color: var(--muted) transparent; }
body {
  margin: 0; position: relative; background: var(--ground); color: var(--ink); min-height: 100vh;
  font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* Pixel-dot grid behind the page: one layer the size of the page, below all content (it scrolls with the paper and never covers a figure or a video).
 * The dots are a mask over a flat --dot-color layer, so the color follows the theme. */
body::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--dot-opacity);
  background-image: linear-gradient(var(--dot-color), var(--dot-color));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  -webkit-mask-size: var(--dot-step) var(--dot-step); mask-size: var(--dot-step) var(--dot-step);
}
::selection { background: var(--selection-bg); color: var(--selection-ink); }
a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--link-line); }
a:hover { text-decoration-color: var(--ink); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
p { margin: 0 0 14px; }
.note { font-size: 14px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.arrow { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; width: 1.385em; height: 1.385em; margin-block: -0.2em; }
.arrow.is-back { transform: scaleX(-1); }
.arrow.up { transform: rotate(-90deg); }

h2 { margin: 0 0 16px; font: 400 clamp(27px, 2.7vw, 36px)/1.15 var(--serif); letter-spacing: -0.015em; }
h3 { margin: 0 0 8px; font: 400 22px/1.2 var(--serif); }
.text p { font-size: 16px; line-height: 1.65; }
.text p + p { margin-top: var(--sp-2); }

/* ---------- Internal banner: delete the element with id internal-banner before publication ---------- */
#internal-banner {
  padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line);
  font: 400 11px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}