diff --git a/runner/docs/TESTING.md b/runner/docs/TESTING.md
index 1f351955d..c14c70ce9 100644
--- a/runner/docs/TESTING.md
+++ b/runner/docs/TESTING.md
@@ -83,6 +83,16 @@ gate trusts the declaration, the review verifies it.
 **New spec vs. modify existing:** a new feature or endpoint → a new spec; a bug
 fix → a failing case in the closest existing spec.
 
+**SSR hydration, when you touch what we inject into a preview document**
+(`packages/runtime/src/{monitor,scheme,inject-html}.ts`): unit tests can pin the
+emitted bytes and the receiver's behaviour, but not whether a framework's hydrator
+accepts the result — and remix hydrates with `hydrateRoot(document, …)` on React 18,
+which throws the whole document away if `<head>` holds anything the server did not
+render. Run `node runner/scripts/ssr-hydration-probe.mjs` against a locally served
+starter; it puts the real injections and a real shell around it and exits non-zero on
+a mismatch. The standing guard is the nightly starter matrix, which is where DEV-2580
+was caught — four red remix cells, everything else green.
+
 ## The env-gate taxonomy
 
 The default `playwright test` run is the deterministic PR suite: `stubShell()`
diff --git a/runner/e2e/preview-scheme.spec.ts b/runner/e2e/preview-scheme.spec.ts
index a28733c17..25503a2c8 100644
--- a/runner/e2e/preview-scheme.spec.ts
+++ b/runner/e2e/preview-scheme.spec.ts
@@ -65,9 +65,21 @@ function isDark(colour: string): boolean {
   return (nums[0]! + nums[1]! + nums[2]!) * scale / 3 < 128;
 }
 
-/** True when the runner's own override is present in the preview document. */
+/** True when the runner's own override is present in the preview document.
+ *
+ *  Both carriers count. The receiver adopts a constructed stylesheet (DEV-2580: a
+ *  `<style>` in the head is present when a React 18 document hydrator runs, and
+ *  breaks it), and falls back to the `#hot-runner-scheme` element on a browser
+ *  without constructible stylesheets. Checking only the element would report "no
+ *  override" for every passing run. */
 async function hasOverride(page: Page): Promise<boolean> {
-  return grid(page).evaluate(() => !!document.getElementById("hot-runner-scheme"));
+  return grid(page).evaluate(() => {
+    const adopted = Array.from(document.adoptedStyleSheets ?? []);
+    const inSheets = adopted.some((sheet) =>
+      Array.from(sheet.cssRules).some((rule) => rule.cssText.includes('[class*="ht-theme-"]')),
+    );
+    return inSheets || !!document.getElementById("hot-runner-scheme");
+  });
 }
 
 async function waitForGrid(page: Page) {
diff --git a/runner/packages/runtime/src/inject-html.ts b/runner/packages/runtime/src/inject-html.ts
new file mode 100644
index 000000000..12cf4fef0
--- /dev/null
+++ b/runner/packages/runtime/src/inject-html.ts
@@ -0,0 +1,43 @@
+// Why an injected `<script>` deletes its own element (DEV-2580).
+//
+// `injectReporterIntoHtml` (monitor.ts) and `injectSchemeIntoHtml` (scheme.ts) both
+// insert their receiver as the first child of `<head>` in a document the
+// framework's server has already rendered. Remix's client entry is
+// `hydrateRoot(document, …)` on React 18, which strict-matches every child of
+// `<head>`: a node the server never rendered is a hydration mismatch, so the whole
+// document is thrown away and client-rendered. That is what took remix @ 15/16/17/18
+// red in the nightly starter matrix — React #418 followed by #423, surfacing as
+// "Hydration failed because the initial UI does not match what was rendered on the
+// server" at `RenderErrorBoundary`, an SSR flash for the visitor, and (a detail worth
+// knowing) the re-render wiping the receiver's own `<style>` override with it.
+//
+// So the tag removes itself while it runs. Both injections are classic inline
+// scripts, which execute during head parse — before the framework's own deferred
+// module scripts, let alone hydration — and removing the element does not stop the
+// script already executing. By the time any hydrator reads the DOM, the head is the
+// one the server sent.
+//
+// This is the fix rather than "inject outside the hydrated document" (for remix
+// there is no outside — the document *is* the root) or "inject only for non-SSR
+// frameworks" (that deletes the colour-scheme bridge, ADR-0035, for exactly the
+// frameworks it was built for; and the `proxyToSandbox` seam does not know the
+// framework).
+//
+// Removal runs *before* the payload rather than in a `finally` after it: the payload
+// is allowed to throw, and the ordering needs no bookkeeping to be correct. It is an
+// IIFE rather than a bare `var` because an inline classic script's `var` lands on
+// `window`, and the demo's globals are not ours to crowd.
+//
+// ES5 by hand, byte-deterministic, for the two reasons the receivers document: babel
+// 6 parses the Tier-1 parcel entry, and `SandpackRuntime.sameFiles` skips the compile
+// when the sandbox is unchanged.
+
+/** Deletes the executing script element. Guarded: `document.currentScript` is null
+ *  for a module or async script, and monitoring must never be why a preview fails. */
+export const SELF_REMOVING_PRELUDE =
+  `(function(){var s=document.currentScript;if(s&&s.parentNode){s.parentNode.removeChild(s);}})();`;
+
+/** Wrap injected source as a `<script>` tag that leaves no node behind. */
+export function injectedScriptTag(source: string): string {
+  return `<script>${SELF_REMOVING_PRELUDE}\n${source}</script>`;
+}
diff --git a/runner/packages/runtime/src/monitor.ts b/runner/packages/runtime/src/monitor.ts
index d4cb8cf3e..d7a25d7aa 100644
--- a/runner/packages/runtime/src/monitor.ts
+++ b/runner/packages/runtime/src/monitor.ts
@@ -12,6 +12,8 @@
 // `@handsontable/demo-runtime`, so the reporter source must never be duplicated
 // into workers/api — a second copy is a second set of caps to keep in sync.
 
+import { injectedScriptTag } from "./inject-html.js";
+
 /** The `postMessage` discriminator. Also the injection idempotency marker. */
 export const MONITOR_MESSAGE_TYPE = "hot-runner-monitor";
 
@@ -646,22 +648,29 @@ function alreadyInjected(source: string): boolean {
  * fault raised while the demo's own scripts evaluate is exactly the class we are
  * here for, so the reporter has to be hooked before them.
  *
+ * Inserted with no surrounding whitespace, and the tag deletes its own element
+ * (see `inject-html.ts`): a React 18 hydrator that owns the whole document — remix's
+ * `hydrateRoot(document, …)` — strict-matches every child of `<head>`, and a leftover
+ * newline text node fails that match exactly as the `<script>` element does. Both
+ * halves were measured against the remix starter; either one alone still throws
+ * React #418 (DEV-2580).
+ *
  * Returns `html` unchanged when it is already injected.
  */
 export function injectReporterIntoHtml(html: string): string {
   if (alreadyInjected(html)) return html;
-  const tag = `<script>${REPORTER_SOURCE}</script>`;
+  const tag = injectedScriptTag(REPORTER_SOURCE);
   const head = /<head\b[^>]*>/i.exec(html);
   if (head) {
     const at = head.index + head[0].length;
-    return html.slice(0, at) + "\n" + tag + html.slice(at);
+    return html.slice(0, at) + tag + html.slice(at);
   }
   const body = /<body\b[^>]*>/i.exec(html);
   if (body) {
     const at = body.index + body[0].length;
-    return html.slice(0, at) + "\n" + tag + html.slice(at);
+    return html.slice(0, at) + tag + html.slice(at);
   }
-  return tag + "\n" + html;
+  return tag + html;
 }
 
 /**
diff --git a/runner/packages/runtime/src/scheme.ts b/runner/packages/runtime/src/scheme.ts
index 58082e440..739c3e263 100644
--- a/runner/packages/runtime/src/scheme.ts
+++ b/runner/packages/runtime/src/scheme.ts
@@ -25,6 +25,8 @@
 // reason: the API worker already depends on this package, so a second copy in
 // `workers/api` would be a second set of rules to keep in sync.
 
+import { injectedScriptTag } from "./inject-html.js";
+
 /** The `postMessage` discriminator. Also the injection idempotency marker. */
 export const SCHEME_MESSAGE_TYPE = "hot-runner-scheme";
 
@@ -59,8 +61,10 @@ export function isSchemeReady(message: unknown): message is SchemeReadyMessage {
   return !!value && value.source === SCHEME_MESSAGE_TYPE && value.ready === true;
 }
 
-/** The element id the receiver owns, so the override can be found and replaced
- *  rather than accumulating one `<style>` per message. */
+/** The element id the receiver owns on its fallback path, so the override can be
+ *  found and replaced rather than accumulating one `<style>` per message. The
+ *  primary path adopts a constructed stylesheet and creates no element at all —
+ *  see `SCHEME_RECEIVER_SOURCE`. */
 export const SCHEME_STYLE_ID = "hot-runner-scheme";
 
 /**
@@ -78,6 +82,34 @@ export const SCHEME_STYLE_ID = "hot-runner-scheme";
  * stylesheet keyed on `[class*="ht-theme-"]` also covers a demo that mounts more
  * than one grid.
  *
+ * It is carried by a *constructed* stylesheet on `document.adoptedStyleSheets`
+ * rather than a `<style>` element, which is load-bearing and was measured
+ * (DEV-2580). A remix preview hydrates with `hydrateRoot(document, …)` on React 18,
+ * which strict-matches every child of `<head>`; the shell answers this receiver's
+ * `ready` while the head is still parsing, so a `<style>` appended there lands
+ * *before* hydration and is exactly as fatal as the injected `<script>` was — the
+ * document is thrown away and client-rendered ("Hydration failed because the initial
+ * UI does not match what was rendered on the server", React #418). Measured against
+ * the remix starter: an override `<style>` present at hydration reproduces it on its
+ * own. An adopted sheet is not a node, so no hydrator can see it.
+ *
+ * `adoptedStyleSheets` is an ObservableArray, not an Array — hence
+ * `Array.prototype.slice.call` and an assignment back, which also preserves any
+ * sheet the demo adopted itself. `auto` detaches ours by identity rather than
+ * blanking it, so "no override" stays observable from the outside.
+ *
+ * Once the adopted path has failed the receiver latches onto the fallback for the
+ * life of the document (`fallbackOnly`). Without the latch, a `<style>` created
+ * because the constructor threw is never taken away again: `auto` reaches the adopted
+ * branch, finds no sheet of ours, reports success, and leaves the override in place.
+ * A failure *after* a sheet was already adopted detaches it on the way out, so the
+ * two carriers can never both hold a mode.
+ *
+ * The `<style>` fallback is kept for a browser without constructible stylesheets
+ * (older Safari, where `new CSSStyleSheet()` throws): there, the toggle keeps
+ * working and a React 18 document hydrator keeps mismatching. A browser-gated
+ * residue on the record, not a silent hole.
+ *
  * Written as ES5 by hand and never transpiled: on Tier 1 the parcel path runs babel
  * 6 over injected code, which will not parse anything newer. No timestamp, no id,
  * no iteration-dependent ordering — `SandpackRuntime.sameFiles` skips the compile
@@ -90,7 +122,42 @@ export const SCHEME_RECEIVER_SOURCE = `(function () {
   window.__hotRunnerScheme = true;
   var STYLE_ID = ${JSON.stringify(SCHEME_STYLE_ID)};
   var SOURCE = ${JSON.stringify(SCHEME_MESSAGE_TYPE)};
-  function apply(mode) {
+  var sheet = null;
+  var fallbackOnly = false;
+  function rule(mode) {
+    return '[class*="ht-theme-"]{color-scheme:' + mode + ' !important;}';
+  }
+  function canAdopt() {
+    return typeof CSSStyleSheet === 'function'
+      && !!CSSStyleSheet.prototype
+      && typeof CSSStyleSheet.prototype.replaceSync === 'function'
+      && !!document.adoptedStyleSheets;
+  }
+  function applyAdopted(mode) {
+    var on = mode === 'light' || mode === 'dark';
+    if (!sheet) {
+      if (!on) { return true; }
+      try { sheet = new CSSStyleSheet(); } catch (e) { return false; }
+    }
+    var sheets = Array.prototype.slice.call(document.adoptedStyleSheets);
+    var at = sheets.indexOf(sheet);
+    if (!on) {
+      if (at !== -1) { sheets.splice(at, 1); document.adoptedStyleSheets = sheets; }
+      return true;
+    }
+    try {
+      sheet.replaceSync(rule(mode));
+    } catch (e) {
+      // Detach on the way out. An adopted sheet left carrying the *previous* mode
+      // outranks the fallback element that is about to be created, so the stale
+      // scheme would win and no later message could clear it.
+      if (at !== -1) { sheets.splice(at, 1); document.adoptedStyleSheets = sheets; }
+      return false;
+    }
+    if (at === -1) { sheets.push(sheet); document.adoptedStyleSheets = sheets; }
+    return true;
+  }
+  function applyElement(mode) {
     var el = document.getElementById(STYLE_ID);
     if (mode !== 'light' && mode !== 'dark') {
       if (el && el.parentNode) { el.parentNode.removeChild(el); }
@@ -101,7 +168,12 @@ export const SCHEME_RECEIVER_SOURCE = `(function () {
       el.id = STYLE_ID;
       (document.head || document.documentElement).appendChild(el);
     }
-    el.textContent = '[class*="ht-theme-"]{color-scheme:' + mode + ' !important;}';
+    el.textContent = rule(mode);
+  }
+  function apply(mode) {
+    if (!fallbackOnly && canAdopt() && applyAdopted(mode)) { return; }
+    fallbackOnly = true;
+    applyElement(mode);
   }
   window.addEventListener('message', function (event) {
     var data = event.data;
@@ -136,22 +208,29 @@ function alreadyInjected(source: string): boolean {
  * still placed in `<head>` for the same reason the monitor is: it is the one
  * insertion point every document has, and being early costs nothing.
  *
+ * Inserted with no surrounding whitespace, and the tag deletes its own element
+ * (see `inject-html.ts`): a React 18 hydrator that owns the whole document — remix's
+ * `hydrateRoot(document, …)` — strict-matches every child of `<head>`, and a leftover
+ * newline text node fails that match exactly as the `<script>` element does. Both
+ * halves were measured against the remix starter; either one alone still throws
+ * React #418 (DEV-2580).
+ *
  * Returns `html` unchanged when it is already injected.
  */
 export function injectSchemeIntoHtml(html: string): string {
   if (alreadyInjected(html)) return html;
-  const tag = `<script>${SCHEME_RECEIVER_SOURCE}</script>`;
+  const tag = injectedScriptTag(SCHEME_RECEIVER_SOURCE);
   const head = /<head\b[^>]*>/i.exec(html);
   if (head) {
     const at = head.index + head[0].length;
-    return html.slice(0, at) + "\n" + tag + html.slice(at);
+    return html.slice(0, at) + tag + html.slice(at);
   }
   const body = /<body\b[^>]*>/i.exec(html);
   if (body) {
     const at = body.index + body[0].length;
-    return html.slice(0, at) + "\n" + tag + html.slice(at);
+    return html.slice(0, at) + tag + html.slice(at);
   }
-  return tag + "\n" + html;
+  return tag + html;
 }
 
 /**
diff --git a/runner/pipeline/inject-html.test.mjs b/runner/pipeline/inject-html.test.mjs
new file mode 100644
index 000000000..de9cd653d
--- /dev/null
+++ b/runner/pipeline/inject-html.test.mjs
@@ -0,0 +1,116 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import vm from "node:vm";
+import { Parser } from "acorn";
+import { injectReporterIntoHtml } from "../packages/runtime/dist/monitor.js";
+import { injectSchemeIntoHtml } from "../packages/runtime/dist/scheme.js";
+import { SELF_REMOVING_PRELUDE, injectedScriptTag } from "../packages/runtime/dist/inject-html.js";
+
+// DEV-2580. Both HTML injectors put their receiver in the `<head>` of a document
+// the framework's server already rendered, and remix hydrates with
+// `hydrateRoot(document, …)` on React 18 — which strict-matches head children, so
+// an extra node there is a hydration mismatch and the whole document is
+// client-rendered. What is pinned here is the property that makes the injection
+// invisible to a hydrator: the tag deletes its own element as it runs.
+//
+// Executed, not read: a test asserting the emitted string "contains the removal
+// snippet" would keep passing over a snippet that removes the wrong node, or that
+// never runs because the payload threw first.
+
+/** The inline source of the first `<script>` in `html`. */
+function firstScriptSource(html) {
+  const match = /<script>([\s\S]*?)<\/script>/.exec(html);
+  assert.ok(match, "the injector emitted no inline script");
+  return match[1];
+}
+
+/** A head with one child: the script that is executing. Records the removal. */
+function makeDocument({ currentScript = true } = {}) {
+  const removed = [];
+  const head = {
+    removeChild(node) {
+      removed.push(node);
+      node.parentNode = null;
+      return node;
+    },
+    appendChild(node) {
+      node.parentNode = head;
+      return node;
+    },
+  };
+  const script = { tagName: "SCRIPT", parentNode: head };
+  return { doc: { currentScript: currentScript ? script : null, head }, script, removed };
+}
+
+/** Execute one injected `<script>`'s source against stubs. The payloads reach for
+ *  bare `window`/`parent`/`console`/`document`/`location`, so hand them in as
+ *  parameters the same way `monitor-inject.test.mjs` does. */
+function runTag(source, { doc, throws = false } = {}) {
+  // The scheme receiver stands down when `window.parent === window` and posts its
+  // `ready` through it, so the stub parent has to be a distinct object.
+  const parent = { postMessage() {} };
+  const win = { addEventListener() {}, parent };
+  // eslint-disable-next-line no-new-func
+  const run = new Function(
+    "window",
+    "parent",
+    "console",
+    "document",
+    "XMLHttpRequest",
+    "location",
+    source,
+  );
+  const call = () =>
+    run(win, parent, { error() {}, warn() {} }, doc, undefined, { host: "x.test" });
+  if (throws) assert.throws(call);
+  else call();
+}
+
+for (const [name, html] of [
+  ["the monitor", injectReporterIntoHtml("<html><head><title>d</title></head><body>hi</body></html>")],
+  ["the scheme receiver", injectSchemeIntoHtml("<html><head><title>d</title></head><body>hi</body></html>")],
+]) {
+  test(`${name} removes its own script element from the head it was injected into`, () => {
+    const { doc, script, removed } = makeDocument();
+    runTag(firstScriptSource(html), { doc });
+    assert.deepEqual(removed, [script], "the injected script element must be gone");
+    assert.equal(script.parentNode, null);
+  });
+}
+
+test("removal happens before the payload, so a throwing payload still leaves no node", () => {
+  // The order is the guarantee: a `finally` around the payload would be one more
+  // thing to get wrong, and a payload is allowed to throw.
+  const { doc, script, removed } = makeDocument();
+  runTag(firstScriptSource(injectedScriptTag("throw new Error('boom');")), { doc, throws: true });
+  assert.deepEqual(removed, [script]);
+});
+
+test("a document with no currentScript is not an error", () => {
+  // `document.currentScript` is null for a module or async script. The receivers
+  // must never be the reason a preview fails to boot.
+  const { doc, removed } = makeDocument({ currentScript: false });
+  runTag(firstScriptSource(injectedScriptTag("var ok = 1;")), { doc });
+  assert.deepEqual(removed, []);
+});
+
+test("the prelude leaks no global into the demo's document", () => {
+  // An inline classic script runs in global scope, so a bare `var s` would land on
+  // `window` and collide with whatever the demo calls `s`.
+  const context = vm.createContext({ document: makeDocument().doc });
+  const before = new Set(Object.keys(context));
+  vm.runInContext(SELF_REMOVING_PRELUDE, context);
+  const added = Object.keys(context).filter((key) => !before.has(key));
+  assert.deepEqual(added, [], `the prelude added globals: ${added.join(", ")}`);
+});
+
+test("the prelude parses as ES5", () => {
+  // Tier-1's parcel path runs babel 6 over the injected HTML entry, which will not
+  // parse anything newer — the same gate the two receivers carry.
+  Parser.parse(SELF_REMOVING_PRELUDE, { ecmaVersion: 5 });
+});
+
+test("the tag is byte-deterministic", () => {
+  // `SandpackRuntime.sameFiles` skips the compile when the sandbox is unchanged.
+  assert.equal(injectedScriptTag("run();"), injectedScriptTag("run();"));
+});
diff --git a/runner/pipeline/monitor-inject.test.mjs b/runner/pipeline/monitor-inject.test.mjs
index 63b80dbdf..bea90aef6 100644
--- a/runner/pipeline/monitor-inject.test.mjs
+++ b/runner/pipeline/monitor-inject.test.mjs
@@ -148,6 +148,20 @@ test("is idempotent", () => {
   assert.equal(twice[HTML_ENTRY], once[HTML_ENTRY]);
 });
 
+test("the head injection adds no whitespace of its own", () => {
+  // DEV-2580: the reporter goes into the head of a document the framework's server
+  // already rendered, and a React 18 hydrator that owns the document strict-matches
+  // head children. The newline that used to sit in front of the tag is a text node
+  // there, and it is as fatal as the script element the tag now removes — measured
+  // on the remix starter, each one reproduces React #418 alone. Mirrors the same
+  // assertion in `scheme-bridge.test.mjs`: without it, half of the fix can be
+  // reverted and ship a green suite.
+  const out = injectReporterIntoHtml(HTML);
+  assert.match(out, /<head[^>]*><script>/);
+  assert.doesNotMatch(injectReporterIntoHtml("<body><div id=root></div></body>"), /<body[^>]*>\s/);
+  assert.ok(injectReporterIntoHtml("<div id=root></div>").endsWith("<div id=root></div>"));
+});
+
 test("falls back to body, then to a prepend, when there is no head", () => {
   const bodyOnly = injectReporterIntoHtml("<body><div id=root></div></body>");
   assert.ok(bodyOnly.startsWith("<body>"), "body tag stays first");
diff --git a/runner/pipeline/scheme-bridge.test.mjs b/runner/pipeline/scheme-bridge.test.mjs
index 3dd5d605d..adfca59d6 100644
--- a/runner/pipeline/scheme-bridge.test.mjs
+++ b/runner/pipeline/scheme-bridge.test.mjs
@@ -59,9 +59,12 @@ test("a JS entry keeps its own line numbers", () => {
   assert.ok(last.includes(SCHEME_MESSAGE_TYPE));
 });
 
-test("an HTML entry gets a script in the head", () => {
+test("an HTML entry gets a script in the head, and not a byte of whitespace", () => {
   const out = injectSchemeReceiver({ "/index.html": HTML }, "/index.html");
-  assert.match(out["/index.html"], /<head[^>]*>\n<script>/);
+  // No newline between the tag and `<head>`: a React 18 hydrator that owns the
+  // document strict-matches head children, and the leftover text node is as fatal
+  // as the script element itself (DEV-2580, measured on the remix starter).
+  assert.match(out["/index.html"], /<head[^>]*><script>/);
   assert.ok(out["/index.html"].includes("<title>demo</title>"), "the demo's document survives");
 });
 
@@ -168,3 +171,149 @@ test("Tier 2 drops a now-wrong Content-Length", async () => {
   );
   assert.equal(out.headers.get("content-length"), null);
 });
+
+// ---- the receiver, executed ---------------------------------------------------
+
+/** A document stub with constructible-stylesheet support, and a real enough
+ *  `adoptedStyleSheets` to catch the ObservableArray trap: assignment works,
+ *  `concat`/`filter` do not exist on it. */
+function makeSchemeStubs({ constructible = true, breakConstructor = false, breakReplaceAfter = null } = {}) {
+  const created = [];
+  let replaced = 0;
+  class FakeSheet {
+    constructor() {
+      if (breakConstructor) throw new Error("no constructible stylesheets here");
+      this.cssText = "";
+      created.push(this);
+    }
+    replaceSync(text) {
+      replaced += 1;
+      if (breakReplaceAfter !== null && replaced > breakReplaceAfter) throw new Error("replaceSync refused");
+      this.cssText = text;
+    }
+  }
+  if (!constructible) delete FakeSheet.prototype.replaceSync;
+
+  const elements = [];
+  const head = {
+    appendChild(node) {
+      node.parentNode = head;
+      elements.push(node);
+      return node;
+    },
+    removeChild(node) {
+      node.parentNode = null;
+      elements.splice(elements.indexOf(node), 1);
+      return node;
+    },
+  };
+  const store = { sheets: [] };
+  const document = {
+    head,
+    get adoptedStyleSheets() {
+      return constructible ? store.sheets : undefined;
+    },
+    set adoptedStyleSheets(next) {
+      store.sheets = next;
+    },
+    getElementById: (id) => elements.find((el) => el.id === id) ?? null,
+    createElement: () => ({ id: "", textContent: "", parentNode: null }),
+  };
+
+  const listeners = [];
+  const win = {
+    addEventListener: (type, cb) => type === "message" && listeners.push(cb),
+  };
+  const parent = { postMessage() {} };
+  win.parent = parent;
+
+  // eslint-disable-next-line no-new-func
+  new Function("window", "parent", "document", "CSSStyleSheet", SCHEME_RECEIVER_SOURCE)(
+    win,
+    parent,
+    document,
+    FakeSheet,
+  );
+
+  return {
+    created,
+    elements,
+    adopted: () => store.sheets,
+    send: (mode) => listeners.forEach((cb) => cb({ data: { source: SCHEME_MESSAGE_TYPE, mode } })),
+  };
+}
+
+test("a mode is carried by an adopted stylesheet, never by a node in the head", () => {
+  // DEV-2580: the shell answers `ready` while the preview's head is still parsing,
+  // so a `<style>` appended there is present when a React 18 document hydrator runs
+  // — and is exactly as fatal as the injected `<script>` was. An adopted sheet is
+  // not a node, so no hydrator can see it.
+  const h = makeSchemeStubs();
+  h.send("dark");
+  assert.equal(h.elements.length, 0, "the receiver must add no element to the head");
+  assert.equal(h.adopted().length, 1);
+  assert.match(h.adopted()[0].cssText, /color-scheme: *dark *!important/);
+});
+
+test("a second mode replaces the rule instead of adopting a second sheet", () => {
+  const h = makeSchemeStubs();
+  h.send("dark");
+  h.send("light");
+  assert.equal(h.adopted().length, 1);
+  assert.equal(h.created.length, 1);
+  assert.match(h.adopted()[0].cssText, /color-scheme: *light/);
+});
+
+test("`auto` detaches the sheet rather than blanking it", () => {
+  // An adopted-but-empty sheet is invisible in the cascade but indistinguishable
+  // from an active one from the outside, which would make `hasOverride` in
+  // `e2e/preview-scheme.spec.ts` assert nothing.
+  const h = makeSchemeStubs();
+  h.send("dark");
+  h.send("auto");
+  assert.deepEqual(h.adopted(), []);
+});
+
+test("a sheet the demo adopted itself survives ours coming and going", () => {
+  // `adoptedStyleSheets` is an ObservableArray: the receiver copies it with
+  // `Array.prototype.slice` and assigns the copy back, so a demo's own sheet has to
+  // still be there afterwards.
+  const h = makeSchemeStubs();
+  const theirs = { cssText: "theirs" };
+  h.adopted().push(theirs);
+  h.send("dark");
+  assert.equal(h.adopted().length, 2);
+  h.send("auto");
+  assert.deepEqual(h.adopted(), [theirs]);
+});
+
+for (const [name, options] of [
+  ["without constructible stylesheets", { constructible: false }],
+  ["when the constructor throws", { breakConstructor: true }],
+]) {
+  test(`the toggle still works ${name}, over the <style> fallback`, () => {
+    // Older Safari. The toggle keeps working there and a React 18 document hydrator
+    // keeps mismatching — a browser-gated residue on the record, not a silent hole.
+    const h = makeSchemeStubs(options);
+    h.send("dark");
+    assert.equal(h.elements.length, 1);
+    assert.equal(h.elements[0].id, SCHEME_STYLE_ID);
+    assert.match(h.elements[0].textContent, /color-scheme:dark !important/);
+    h.send("auto");
+    assert.equal(h.elements.length, 0);
+  });
+}
+
+test("a replaceSync that starts failing hands over cleanly, leaving one carrier", () => {
+  // Otherwise the adopted sheet keeps the previous mode, outranks the fallback
+  // element that replaces it, and no later message can clear it.
+  const h = makeSchemeStubs({ breakReplaceAfter: 1 });
+  h.send("dark");
+  assert.equal(h.adopted().length, 1);
+  h.send("light");
+  assert.deepEqual(h.adopted(), [], "the stale sheet must be detached");
+  assert.equal(h.elements.length, 1);
+  assert.match(h.elements[0].textContent, /color-scheme:light !important/);
+  h.send("auto");
+  assert.equal(h.elements.length, 0, "the fallback stays removable");
+});
diff --git a/runner/scripts/ssr-hydration-probe.mjs b/runner/scripts/ssr-hydration-probe.mjs
new file mode 100644
index 000000000..87cea98bf
--- /dev/null
+++ b/runner/scripts/ssr-hydration-probe.mjs
@@ -0,0 +1,183 @@
+// Reproduction harness for DEV-2580: does what we inject into a Tier-2 document
+// survive an SSR framework's hydration?
+//
+// Stands in for the two things production puts around a container's dev server:
+// the proxy seam in `workers/api/src/index.ts` (`injectMonitor` then
+// `injectScheme`), and the shell that owns the iframe and answers the receiver's
+// `ready` with a colour scheme. Then it loads the result in chromium and reports
+// the console, the head, and the grid's own computed colours.
+//
+// It exists because the failure it catches is invisible to a unit test: React 18
+// with `hydrateRoot(document, …)` — which is remix's client entry, and the strictest
+// hydrator in the catalog — throws away the whole document when `<head>` holds
+// anything the server did not render. A `<script>`, the newline in front of it, and
+// a `<style>` appended before hydration each did it on their own.
+//
+// Not a spec: it needs a framework starter installed and built, which the
+// deterministic suite has no business doing. The standing guard is the nightly
+// starter matrix (`E2E_STARTER_MATRIX=1`); this is what you run while changing
+// `packages/runtime/src/{monitor,scheme,inject-html}.ts`.
+//
+// Usage, with a starter already serving (e.g. in examples/remix:
+// `npx remix vite:build && PORT=3199 npx remix-serve ./build/server/index.js`):
+//
+//   node runner/scripts/ssr-hydration-probe.mjs --upstream=http://127.0.0.1:3199
+//   node runner/scripts/ssr-hydration-probe.mjs --inject=none      # the control
+//   node runner/scripts/ssr-hydration-probe.mjs --mode=auto        # shell stands down
+//
+// Exit code 1 when the frame reported a hydration error — and equally when the run
+// proved nothing: no grid, or (outside `--mode=auto`) no override. A probe that
+// answers "clean" for a 404 page, a mistyped `--inject`, or a demo that never
+// mounted is a green bisect step over a run that never happened.
+
+import http from "node:http";
+import { chromium } from "@playwright/test";
+import { injectReporterIntoHtml } from "../packages/runtime/dist/monitor.js";
+import { injectSchemeIntoHtml } from "../packages/runtime/dist/scheme.js";
+
+const arg = (name, fallback) => {
+  const hit = process.argv.find((a) => a.startsWith(`--${name}=`));
+  return hit ? hit.slice(name.length + 3) : fallback;
+};
+
+const UPSTREAM = arg("upstream", "http://127.0.0.1:3199");
+const PORT = Number(arg("port", "3300"));
+// `both` is production (MONITOR_DEMOS=1 on the prod host); the single-injector
+// modes are how you attribute a failure to one of them, and `none` is the control.
+// Rejected rather than defaulted when unknown: a typo that silently injects nothing
+// reads as a clean baseline, which is the one answer this script must never fake.
+const INJECTIONS = ["both", "monitor", "scheme", "none"];
+const INJECT = arg("inject", "both");
+if (!INJECTIONS.includes(INJECT)) {
+  console.error(`--inject=${INJECT} is not one of ${INJECTIONS.join(", ")}`);
+  process.exit(2);
+}
+// What the fake shell answers `ready` with. `light`/`dark` install the override,
+// `auto` is the shell standing down — and the override is the second head writer,
+// so both directions matter.
+const MODE = arg("mode", "dark");
+
+/** The shell: an iframe plus the scheme half of the parent's postMessage contract. */
+const SHELL = `<!doctype html><meta charset="utf-8"><title>shell</title>
+<script>
+  window.addEventListener('message', function (e) {
+    var d = e.data;
+    if (d && d.source === 'hot-runner-scheme' && d.ready) {
+      e.source.postMessage({ source: 'hot-runner-scheme', mode: ${JSON.stringify(MODE)} }, '*');
+      console.log('shell: answered ready with ${MODE}');
+    }
+  });
+</script>
+<iframe id="preview" src="/" style="width:900px;height:600px;border:0"></iframe>`;
+
+const server = http.createServer(async (req, res) => {
+  if (req.url === "/__shell") {
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    res.end(SHELL);
+    return;
+  }
+  let upstream;
+  try {
+    upstream = await fetch(UPSTREAM + req.url, {
+      method: req.method,
+      headers: { ...req.headers, host: new URL(UPSTREAM).host },
+      redirect: "manual",
+    });
+  } catch (error) {
+    // A refused upstream is a probe misconfiguration, not a hydration result. Answer
+    // it so the verdict below reports "no grid mounted" instead of the process dying
+    // on an unhandled rejection halfway through the run.
+    res.writeHead(502, { "content-type": "text/plain" });
+    res.end(`probe: ${UPSTREAM} refused the request (${error.message}) — is the starter serving?`);
+    return;
+  }
+  const headers = Object.fromEntries(upstream.headers.entries());
+  // Same two reasons the real seam has: the body is replaced, so a stale length is
+  // a truncated page; and `fetch` already decoded the payload.
+  delete headers["content-length"];
+  delete headers["content-encoding"];
+  const type = (upstream.headers.get("content-type") ?? "").toLowerCase();
+  if (!type.includes("text/html")) {
+    res.writeHead(upstream.status, headers);
+    res.end(Buffer.from(await upstream.arrayBuffer()));
+    return;
+  }
+  let html = await upstream.text();
+  if (INJECT === "both" || INJECT === "monitor") html = injectReporterIntoHtml(html);
+  if (INJECT === "both" || INJECT === "scheme") html = injectSchemeIntoHtml(html);
+  res.writeHead(upstream.status, headers);
+  res.end(html);
+});
+
+await new Promise((resolve) => server.listen(PORT, resolve));
+console.log(`probing ${UPSTREAM} through :${PORT}  inject=${INJECT} mode=${MODE}`);
+
+let browser;
+try {
+  browser = await chromium.launch();
+  const page = await browser.newPage();
+  const messages = [];
+  page.on("console", (m) => messages.push(`[${m.type()}] ${m.text()}`));
+  page.on("pageerror", (e) => messages.push(`[pageerror] ${e.message.split("\n")[0]}`));
+  await page.goto(`http://127.0.0.1:${PORT}/__shell`, { waitUntil: "load" });
+  const frame = page.frames().find((f) => f !== page.mainFrame());
+  if (!frame) throw new Error("the shell rendered no preview frame");
+  await frame.waitForLoadState("load").catch(() => {});
+  // The grid mounts after hydration, and a mismatch is reported during it. Long
+  // enough to see both without polling for something a broken run never reaches.
+  await page.waitForTimeout(6000);
+
+  const state = await frame.evaluate(() => {
+    const cell = document.querySelector(".handsontable td, .htCore td");
+    return {
+      head: Array.from(document.head.children)
+        .map((el) => el.tagName.toLowerCase() + (el.id ? `#${el.id}` : ""))
+        .join(","),
+      // Both carriers of the override: the adopted sheet (what ships) and the
+      // `<style>` fallback (older Safari).
+      adopted: Array.from(document.adoptedStyleSheets ?? [])
+        .flatMap((sheet) => Array.from(sheet.cssRules).map((rule) => rule.cssText))
+        .join(""),
+      styleElement: document.getElementById("hot-runner-scheme")?.textContent ?? null,
+      grid: !!document.querySelector(".handsontable, .ht-wrapper, .htCore"),
+      // The scheme is only observable as colour: a green hydration run with a grid
+      // that never flipped is the silent no-op this line exists to catch.
+      cell: cell ? getComputedStyle(cell).backgroundColor : null,
+    };
+  });
+
+  // React minifies these in a built starter: #418 is the mismatch, #423 the
+  // "switching the whole root to client rendering" that follows it.
+  const hydration = messages.filter((m) => /Hydration failed|invariant=(418|423)/.test(m));
+
+  console.log("--- console");
+  for (const m of messages) console.log(m.slice(0, 200));
+  console.log("--- head        :", state.head);
+  console.log("--- override    :", state.adopted || state.styleElement || "(none)");
+  console.log("--- grid / cell :", state.grid, state.cell);
+  console.log("--- hydration   :", hydration.length ? `${hydration.length} error(s)` : "clean");
+
+  // An override is only expected when a receiver was actually injected and the shell
+  // asked for a side: `--inject=none|monitor` is the control, and `--mode=auto` is the
+  // shell standing down. Demanding one there would fail the baseline run.
+  const override = state.adopted || state.styleElement;
+  const wantsOverride = (INJECT === "both" || INJECT === "scheme") && MODE !== "auto";
+  const unproven = [
+    hydration.length ? `${hydration.length} hydration error(s)` : null,
+    state.grid ? null : "no grid mounted — is the upstream serving the demo?",
+    !wantsOverride || override ? null : `no colour-scheme override for mode=${MODE}`,
+  ].filter(Boolean);
+  if (unproven.length) {
+    console.log("--- FAIL        :", unproven.join("; "));
+    process.exitCode = 1;
+  } else {
+    const scheme = wantsOverride ? "override installed" : "no override expected";
+    console.log(`--- PASS        : hydration clean, grid mounted, ${scheme}`);
+  }
+} finally {
+  // Both closers in a `finally`: the http server keeps the event loop alive, so an
+  // evaluate error or a chromium crash would hang the terminal mid-bisect instead of
+  // printing why.
+  await browser?.close();
+  server.close();
+}
