Capture harness, fixture verification, CI, and the public README

The site does no live inference. Rollouts are captured once against spark-1 and
replayed at their recorded wall-clock — a public demo with no auth cannot hold
an API key, and a recorded run can be scrubbed, permalinked, blind-compared and
verified in ways a live one cannot. What stops it being a video is that the
browser re-derives every number from the recorded moves.

verify_fixtures.py is the Python half of that: it replays every committed
fixture through the engine and reproduces its own rewards. All 16 land at
delta 0.0. A fixture that cannot be regenerated is a claim with no receipt.

First real measurement, thinking off, 8 seeds: solved 0/8. The model repeats
guesses it has already played, invents words (trape, slith, postt, boomy),
and contradicts its own feedback — consistency 0.09 to 0.17. That is the
published failure taxonomy showing up in our own data on the first run, and it
is why `consistency` is a reward component rather than a footnote.

A capture failure is recorded as a turn with a null reply, never dropped. A
capture that silently discarded failed turns would be reporting a better model
than the one that ran.

CI gates both halves and four things that fail silently in production: the word
lists must rebuild byte-identically, the prerendered routes must carry their own
baked og tags (crawlers do not run JS, so without them every shared link
previews as the homepage), no blob: URL may reach the bundle (the site's CSP has
no worker-src, so it falls back to default-src 'self' and a blob worker is
blocked with no error), and the conformance digest must match across languages.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB

src/components/site/ContrastToggle.tsx

@@ -8,9 +8,9 @@ const STORAGE_KEY = 'pig-demo:contrast';
 
 /**
  * `localStorage` is not always readable. In a cross-origin iframe with third-
- * party storage blocked, and in Safari private mode, the getter itself THROWS
- * rather than returning null — so every access has to be wrapped, not just
- * null-checked. Unreadable storage means "off", never a crash.
+ * party storage blocked, and in Safari's private mode, the accessor itself
+ * THROWS rather than returning null — so every access has to be wrapped, not
+ * just null-checked. Unreadable storage means "off", never a crash.
  */
 function readStored(): boolean {
   try {
@@ -24,51 +24,72 @@ function writeStored(high: boolean): void {
   try {
     window.localStorage.setItem(STORAGE_KEY, high ? 'high' : 'normal');
   } catch {
-    /* Preference is session-only here. The toggle still works. */
+    /* Preference is session-only in this context. The toggle still works. */
   }
 }
 
+/**
+ * One value shared by every mounted toggle, not one `useState` each.
+ *
+ * The header renders this control twice — once in the desktop bar, once inside
+ * the mobile sheet — and only one of them is ever visible. With local state the
+ * hidden one keeps a stale `aria-pressed`, so a visitor who toggles on a phone
+ * and then rotates into the desktop layout is told the setting is off while the
+ * page is plainly showing it on.
+ */
+let high = false;
+let initialised = false;
+const listeners = new Set<() => void>();
+
+function applyToRoot(next: boolean): void {
+  const root = document.documentElement;
+  // Removed rather than set to "normal": the CSS keys off
+  // `:root[data-contrast='high']`, and a leftover attribute makes the DOM lie
+  // about which palette is actually applied.
+  if (next) root.setAttribute('data-contrast', 'high');
+  else root.removeAttribute('data-contrast');
+}
+
+function setHigh(next: boolean): void {
+  high = next;
+  applyToRoot(next);
+  writeStored(next);
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void): () => void {
+  if (!initialised) {
+    initialised = true;
+    high = readStored();
+    applyToRoot(high);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
 export function ContrastToggle({ className }: { className?: string }) {
-  const [high, setHigh] = React.useState(false);
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    const stored = readStored();
-    setHigh(stored);
-    setMounted(true);
-  }, []);
-
-  React.useEffect(() => {
-    if (!mounted) return;
-    const root = document.documentElement;
-    // Removing the attribute rather than setting it to "normal": the CSS keys
-    // off `:root[data-contrast='high']`, and leaving a stale attribute behind
-    // makes the DOM lie about the palette that is actually applied.
-    if (high) root.setAttribute('data-contrast', 'high');
-    else root.removeAttribute('data-contrast');
-  }, [high, mounted]);
+  // The server snapshot is `false` so a prerendered page never claims a
+  // preference it cannot know; the real value lands on the first subscribe.
+  const isHigh = React.useSyncExternalStore(
+    subscribe,
+    () => high,
+    () => false,
+  );
 
   return (
     <Button
       type="button"
       variant="ghost"
       size="icon-touch"
-      className={cn('lg:size-9', high && 'bg-accent-subtle text-accent-fg', className)}
-      aria-pressed={high}
-      aria-label={
-        high ? 'High contrast tiles on. Turn off.' : 'High contrast tiles off. Turn on.'
-      }
+      className={cn('lg:size-9', isHigh && 'bg-accent-subtle text-accent-fg', className)}
+      aria-pressed={isHigh}
+      aria-label={isHigh ? 'High contrast tiles on. Turn off.' : 'High contrast tiles off. Turn on.'}
       title="High contrast tiles"
-      onClick={() => {
-        const next = !high;
-        setHigh(next);
-        writeStored(next);
-      }}
+      onClick={() => setHigh(!isHigh)}
     >
       <Contrast aria-hidden="true" />
-      <span aria-live="polite" className="sr-only">
-        {mounted ? (high ? 'High contrast on' : 'High contrast off') : ''}
-      </span>
     </Button>
   );
 }