@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Khteka";
  src: url("/fonts/KHTeka-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* ============================================================================
   Teach64 — shared design tokens, extended from the owner's crack hero.
   White paper, black ink, original curriculum accents. Labels and piece
   silhouettes identify stages alongside their colors.
   ========================================================================== */
:root {
  /* ---------------------------------------------------------------- grounds */
  --void: #080808;
  --ebony: #101010;
  --ebony-2: #181818;
  --ebony-3: #242424;
  --ivory: #ffffff;
  --ivory-2: #eeeeee;
  --ink: #080808;
  --ink-2: #292929;

  /* ------------------------------------------------------------------- type */
  --on-dark: #ffffff;
  --on-dark-dim: #c4c4c4;
  --on-dark-faint: #a0a0a0;
  --on-light: #080808;
  --on-light-dim: #505050;
  --on-light-faint: #666666;

  /* Original piece accents; the paper and ink surfaces remain neutral. */
  --pawn: #3fa57a;
  --knight: #4a8bd0;
  --bishop: #9070ce;
  --rook: #d2604b;
  --queen: #c9a227;
  --gold: #c4c4c4;
  --gold-hi: #ffffff;
  /* A stable light annotation colour for the dark teaching preview. */
  --bishop-hi: #dedede;

  /* live act colour — the director writes this every frame */
  --hue: var(--pawn);
  --hue-soft: rgb(255 255 255 / 0.1);

  /* ------------------------------------------------------------------ metric */
  --rule: 1px;
  /* Catalog primitives: reusable neutral interaction and feedback tokens. */
  --ui-field-ground: #fafafa;
  --ui-control-line: #d6d6d6;
  --ui-card-line: #dedede;
  --ui-hover-ground: #f3f3f3;
  --ui-row-hover: #f6f6f6;
  --ui-pressed-track: #ededed;
  --ui-tool-line: #383838;
  --ui-tool-hover: #777;
  --ui-error: #ed8585;
  --ui-free-ground: #f0f5f2;
  --ui-free-line: #bbd4c6;
  --ui-free-ink: #24593e;
  --ui-focus-wash: rgb(128 128 128 / .15);
  --ui-discount-wash: rgb(128 128 128 / .12);
  --ui-shadow-base: 0 1px 2px rgb(0 0 0 / .08);
  --ui-shadow-hover: 0 4px 10px rgb(0 0 0 / .12);
  --ui-shadow-card: 0 1px 3px rgb(0 0 0 / .035);
  --ui-shadow-featured: 0 5px 20px rgb(0 0 0 / .06);
  --ui-shadow-selection: 0 1px 4px rgb(0 0 0 / .1);
  /* Floating homepage reading cards: the owner's rounded Apple-style revision. */
  --ui-story-radius: 24px;
  --ui-story-surface: rgb(20 20 22 / .92);
  --ui-story-border: rgb(255 255 255 / .16);
  --ui-story-sheen: rgb(255 255 255 / .035);
  --ui-story-shadow: inset 0 1px 0 rgb(255 255 255 / .055),
    0 20px 56px rgb(0 0 0 / .28), 0 4px 16px rgb(0 0 0 / .12);
  --hair: rgb(255 255 255 / 0.14);
  --hair-strong: rgb(255 255 255 / 0.3);
  --hair-ink: rgb(8 8 8 / 0.22);
  /* Final-theme palette: stable values, independent of the film's live --fg ramp. */
  --surface-paper-plate: #f5f5f5;
  --surface-recommended: #f1f1f1;
  --surface-paper-stat: #f2f2f2;
  --surface-workspace-card: #141414;
  --neutral-dark-faint: #a0a0a0;
  --neutral-rule-dark: #444;
  --neutral-rule-light: #555;
  --neutral-rule-quiet: #aaa;
  --neutral-border: #999;
  --neutral-rule-mid: #777;
  --neutral-placeholder: #707070;
  --neutral-scroll-thumb: #929292;
  --diagram-light: #ededed;
  --board-light: #e9e9e9;
  --board-dark: #8b8b8b;
  --line-on-paper: rgb(8 8 8 / .16);
  --line-on-paper-strong: rgb(8 8 8 / .32);
  --line-on-ink: rgb(255 255 255 / .16);
  --line-workspace-strong: rgb(255 255 255 / .34);
  --surface-paper-rgb: 255 255 255;
  --surface-ink-rgb: 8 8 8;
  --ui-shadow-paper-action: 0 2px 5px rgb(0 0 0 / .1);

  /* the 8-file lattice everything sits on */
  --file: calc((100vw - 2 * var(--gut)) / 8);
  --gut: clamp(20px, 4.4vw, 92px);

  /* ------------------------------------------------------------------- type */
  --display: "PP Neue Montreal", Arial, sans-serif;
  --sans: "Khteka", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --scrim: 1;

  /* Resolved by the director in JS, not mixed at style time. Defaults are the
     dark-room end of each ramp so the page is correct before the first frame. */
  --fg: #ffffff;
  --fg-dim: #c4c4c4;
  --fg-faint: #a0a0a0;
  /* The level ladder remains on its dark reading ground. */
  --fg-rung: #a0a0a0;
  --fg-inv: #080808;
  --line: rgb(255 255 255 / 0.14);
  --line-2: rgb(255 255 255 / 0.3);
  --glass: rgb(8 8 8 / 0.96);

  --lift: 0;
  --narr: 0;

  /* per-act drivers, written by the scroll engine */
  --t: 0;
  --e: 1;
  --h: 0;
  --in: 1;
  --in2: 1;
  --out: 0;

  --t-fast: 220ms;
  --t-med: 520ms;
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-io: cubic-bezier(0.62, 0.02, 0.24, 1);
}