diff --git a/packages/base/brand-guide.gts b/packages/base/brand-guide.gts
index daa5957ce5..2e1b982d94 100644
--- a/packages/base/brand-guide.gts
+++ b/packages/base/brand-guide.gts
@@ -75,6 +75,7 @@ class BrandGuideIsolated extends Component<typeof BrandGuide> {
     <ThemeDashboard
       class='brand-guide'
       @themeCss={{@model.cssVariables}}
+      @themeId={{@model.id}}
       @sections={{this.sectionsWithContent}}
       @isDarkMode={{this.isDarkMode}}
     >
diff --git a/packages/base/default-templates/theme-dashboard.gts b/packages/base/default-templates/theme-dashboard.gts
index d00770b237..dd1546d60b 100644
--- a/packages/base/default-templates/theme-dashboard.gts
+++ b/packages/base/default-templates/theme-dashboard.gts
@@ -18,7 +18,12 @@ import {
   FieldContainer,
   BoxelInput,
 } from '@cardstack/boxel-ui/components';
-import { bool, cn, themeScopedCss } from '@cardstack/boxel-ui/helpers';
+import {
+  bool,
+  cn,
+  themeScope,
+  themeScopedCss,
+} from '@cardstack/boxel-ui/helpers';
 
 import { DEFAULT_THEME_SCALE } from '../structured-theme-variables';
 
@@ -1072,11 +1077,20 @@ export class ThemeDashboard extends GlimmerComponent<{
     version?: string;
     isDarkMode?: boolean;
     themeCss?: string | null;
+    themeId?: string | null;
   };
   Blocks: { default: []; header: []; navBar: [] };
   Element: HTMLElement;
 }> {
-  private themeScopeId = guidFor(this);
+  // Content-derived rather than guidFor: this markup can be persisted as
+  // prerendered HTML, where the scoped rules are page-global. Equal scopes
+  // are only safe when their declarations are equal too, which the theme id
+  // plus content hash guarantees; a per-process guid can repeat across
+  // prerender jobs with different themes. The guid fallback only covers
+  // unsaved theme cards previewing their own CSS, which are never persisted.
+  private get themeScopeId() {
+    return themeScope(this.args.themeId, this.args.themeCss) ?? guidFor(this);
+  }
 
   // The data-theme wrapper drives the preview's light/dark toggle through the
   // ambient `--boxel-color-scheme` signal, flipping the semantic tokens to the
@@ -1097,7 +1111,10 @@ export class ThemeDashboard extends GlimmerComponent<{
       >
         {{#if @themeCss}}
           {{! template-lint-disable require-scoped-style }}
-          <style>
+          {{! data-boxel-theme-style marks this as a dedupable theme
+              stylesheet; the attribute survives serialization, so prerendered
+              fragments stay recognizable when re-inserted }}
+          <style data-boxel-theme-style>
             {{themeScopedCss this.themeScopeId @themeCss}}
           </style>
           {{! template-lint-enable require-scoped-style }}
diff --git a/packages/base/detailed-style-reference.gts b/packages/base/detailed-style-reference.gts
index 277ba03b82..5a82663fe3 100644
--- a/packages/base/detailed-style-reference.gts
+++ b/packages/base/detailed-style-reference.gts
@@ -143,6 +143,7 @@ class Isolated extends Component<typeof DetailedStyleReference> {
   <template>
     <ThemeDashboard
       @themeCss={{@model.cssVariables}}
+      @themeId={{@model.id}}
       @title={{@model.cardTitle}}
       @description={{@model.cardDescription}}
       @sections={{this.sectionsWithContent}}
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index e8a279acc1..50708b8a69 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -28,7 +28,7 @@ import {
 } from '@cardstack/runtime-common';
 import type { ComponentLike } from '@glint/template';
 import { CardContainer } from '@cardstack/boxel-ui/components';
-import { coalesce } from '@cardstack/boxel-ui/helpers';
+import { coalesce, themeScope } from '@cardstack/boxel-ui/helpers';
 import Modifier from 'ember-modifier';
 import { isEqual, flatMap } from 'lodash-es';
 import { initSharedState } from './shared-state';
@@ -280,6 +280,10 @@ export function getBoxComponent(
     return cardDef?.cardTheme != null;
   }
 
+  function themeId(cardDef?: CardDef) {
+    return isThemeCard(cardDef) ? cardDef.id : cardDef?.cardTheme?.id;
+  }
+
   function getCssImports(card?: CardDef) {
     // for cards like Theme card and its descendants, directly use the `cssImports` field;
     // for all other cards, get imports via the Theme card linked from cardInfo
@@ -293,15 +297,24 @@ export function getBoxComponent(
   }
 
   let component = class FieldComponent extends Component<BoxComponentSignature> {
-    // Scopes this card's theme stylesheet. Derived from the card id so the
-    // scope stays stable in persisted prerendered HTML — a per-process guid
+    // Scopes this card's theme stylesheet. Derived from the theme card's id
+    // plus a hash of its CSS (see themeScope) so every card sharing a theme
+    // emits an identical stylesheet instead of one copy per card, while
+    // scopes stay stable in persisted prerendered HTML — a per-process guid
     // can repeat across prerender jobs, and since the scoped style rules are
-    // page-global, two cached cards with the same scope would capture each
-    // other's theme variables. The guid fallback only covers unsaved cards,
-    // which are never persisted.
+    // page-global, two cached cards with the same scope but different theme
+    // CSS would capture each other's theme variables. The guid fallback only
+    // covers unsaved theme cards previewing their own CSS, which are never
+    // persisted.
     private get themeScopeId() {
       let value = model.value;
-      return (isCard(value) && value.id) || guidFor(this);
+      if (isCard(value)) {
+        let scope = themeScope(themeId(value), themeCss(value));
+        if (scope) {
+          return scope;
+        }
+      }
+      return guidFor(this);
     }
 
     // Compute merged configuration for this field based on the owning instance.
diff --git a/packages/base/structured-theme.gts b/packages/base/structured-theme.gts
index 073cd4d967..c70f8b4cc2 100644
--- a/packages/base/structured-theme.gts
+++ b/packages/base/structured-theme.gts
@@ -147,6 +147,7 @@ class Isolated extends Component<typeof StructuredTheme> {
     <ThemeDashboard
       class='structured-theme-card'
       @themeCss={{@model.cssVariables}}
+      @themeId={{@model.id}}
       @title={{@model.cardTitle}}
       @description={{@model.cardDescription}}
       @isDarkMode={{this.isDarkMode}}
diff --git a/packages/base/style-reference.gts b/packages/base/style-reference.gts
index 6203f4e43a..37de494c85 100644
--- a/packages/base/style-reference.gts
+++ b/packages/base/style-reference.gts
@@ -32,6 +32,7 @@ class Isolated extends Component<typeof StyleReference> {
     <ThemeDashboard
       class='style-reference'
       @themeCss={{@model.cssVariables}}
+      @themeId={{@model.id}}
       @isDarkMode={{this.isDarkMode}}
     >
       <:header>
diff --git a/packages/boxel-ui/addon/src/components/card-container/index.gts b/packages/boxel-ui/addon/src/components/card-container/index.gts
index 84c5391d0d..9c86d3ad8d 100644
--- a/packages/boxel-ui/addon/src/components/card-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-container/index.gts
@@ -51,7 +51,10 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>
       {{/if}}
       {{#if @themeCss}}
         {{! template-lint-disable require-scoped-style  }}
-        <style>
+        {{! data-boxel-theme-style marks this as a dedupable theme stylesheet;
+            the attribute survives serialization, so prerendered fragments
+            stay recognizable when re-inserted }}
+        <style data-boxel-theme-style>
           {{themeScopedCss @themeScope @themeCss}}
         </style>
         {{! template-lint-enable require-scoped-style  }}
diff --git a/packages/boxel-ui/addon/src/helpers.ts b/packages/boxel-ui/addon/src/helpers.ts
index 7c21895eb6..4e5a3038eb 100644
--- a/packages/boxel-ui/addon/src/helpers.ts
+++ b/packages/boxel-ui/addon/src/helpers.ts
@@ -48,7 +48,7 @@ import {
   entriesToCssRuleMap,
   normalizeCssRuleMap,
 } from './helpers/theme-css.ts';
-import { themeScopedCss } from './helpers/theme-scoped-css.ts';
+import { themeScope, themeScopedCss } from './helpers/theme-scoped-css.ts';
 import {
   and,
   bool,
@@ -122,6 +122,7 @@ export {
   sanitizeHtmlSafe,
   substring,
   subtract,
+  themeScope,
   themeScopedCss,
   toMenuItems,
 };
diff --git a/packages/boxel-ui/addon/src/helpers/theme-scoped-css.ts b/packages/boxel-ui/addon/src/helpers/theme-scoped-css.ts
index 6ef7fd8e62..2031f930c6 100644
--- a/packages/boxel-ui/addon/src/helpers/theme-scoped-css.ts
+++ b/packages/boxel-ui/addon/src/helpers/theme-scoped-css.ts
@@ -19,6 +19,43 @@ function sanitizeDeclarations(declarations: string): string {
   return sanitizeHtml(declarations).replace(/[{}]/g, '');
 }
 
+function fnv1a(text: string, seed: number): string {
+  let hash = seed;
+  for (let i = 0; i < text.length; i++) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(16).padStart(8, '0');
+}
+
+// 64-bit stable fingerprint of the theme CSS for scope values: two 32-bit
+// FNV-1a passes with different seeds (the standard offset basis, then the
+// upper half of the 64-bit offset basis), hex-encoded fixed-width. Not
+// cryptographic, but wide enough that two versions of a theme colliding —
+// which would let their scoped rules restyle each other's cards — is not a
+// practical concern, where a single 32-bit pass would leave that to chance.
+function fingerprint(text: string): string {
+  return fnv1a(text, 0x811c9dc5) + fnv1a(text, 0xcbf29ce4);
+}
+
+// Derives a `data-boxel-theme-scope` value from a theme's identity plus a
+// fingerprint of its CSS. Every card sharing a theme gets the same scope, so
+// their emitted stylesheets are byte-identical — harmless as duplicate rules,
+// and dedupable by consumers. The content hash keeps scopes from *different
+// versions* of a theme distinct: prerendered fragments are cached at
+// different times, so a page can mix a card captured before a theme edit with
+// one captured after, and because the scoped rules are page-global, equal
+// scopes with unequal declarations would restyle each other's cards.
+export function themeScope(
+  themeId: string | null | undefined,
+  cssVariables: string | null | undefined,
+): string | undefined {
+  if (!themeId || !cssVariables) {
+    return undefined;
+  }
+  return `${themeId}-${fingerprint(cssVariables)}`;
+}
+
 export function themeScopedCss(
   scope?: string,
   cssVariables?: string | null,
diff --git a/packages/boxel-ui/test-app/tests/unit/theme-scoped-css-test.ts b/packages/boxel-ui/test-app/tests/unit/theme-scoped-css-test.ts
index b2fc20c1bd..f894f58050 100644
--- a/packages/boxel-ui/test-app/tests/unit/theme-scoped-css-test.ts
+++ b/packages/boxel-ui/test-app/tests/unit/theme-scoped-css-test.ts
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 
-import { themeScopedCss } from '@cardstack/boxel-ui/helpers';
+import { themeScope, themeScopedCss } from '@cardstack/boxel-ui/helpers';
 
 const SCOPE = 'ember123';
 const SELECTOR = `[data-boxel-theme-scope="${SCOPE}"]`;
@@ -114,3 +114,56 @@ module('Unit | theme-scoped-css', function () {
     assert.true(el.matches(selector), 'escaped selector matches the element');
   });
 });
+
+module('Unit | theme-scope', function () {
+  const THEME_ID = 'https://example.test/starry-night-theme';
+  const CSS = ':root { --primary: #112233; }';
+
+  test('is deterministic for the same theme id and css', function (assert) {
+    assert.strictEqual(themeScope(THEME_ID, CSS), themeScope(THEME_ID, CSS));
+  });
+
+  // Scope values persist in prerendered HTML, so the format is a
+  // serialization contract: the theme id, a separator, and a fixed-width
+  // 64-bit hex fingerprint of the css.
+  test('is the theme id plus a fixed-width 64-bit hex fingerprint', function (assert) {
+    let suffix = (css: string) =>
+      themeScope(THEME_ID, css)!.slice(`${THEME_ID}-`.length);
+    assert.true(
+      themeScope(THEME_ID, CSS)!.startsWith(`${THEME_ID}-`),
+      'scope starts with the theme id',
+    );
+    assert.true(
+      /^[0-9a-f]{16}$/.test(suffix(CSS)),
+      'fingerprint is 16 hex chars',
+    );
+    assert.true(
+      // this css hashes with a leading zero in the first pass, which must be
+      // padded rather than truncated
+      /^[0-9a-f]{16}$/.test(suffix(':root { --primary: #000011; }')),
+      'fingerprint width is stable when a pass hashes below 2^28',
+    );
+  });
+
+  test('changes when the css or the theme id changes', function (assert) {
+    assert.notStrictEqual(
+      themeScope(THEME_ID, CSS),
+      themeScope(THEME_ID, ':root { --primary: #445566; }'),
+      'differs across css versions of one theme',
+    );
+    assert.notStrictEqual(
+      themeScope(THEME_ID, CSS),
+      themeScope('https://example.test/other-theme', CSS),
+      'differs across themes with identical css',
+    );
+  });
+
+  test('returns undefined without a theme id or css', function (assert) {
+    assert.strictEqual(themeScope(undefined, CSS), undefined);
+    assert.strictEqual(themeScope(null, CSS), undefined);
+    assert.strictEqual(themeScope('', CSS), undefined);
+    assert.strictEqual(themeScope(THEME_ID, undefined), undefined);
+    assert.strictEqual(themeScope(THEME_ID, null), undefined);
+    assert.strictEqual(themeScope(THEME_ID, ''), undefined);
+  });
+});
diff --git a/packages/host/app/instance-initializers/dedupe-theme-styles.ts b/packages/host/app/instance-initializers/dedupe-theme-styles.ts
new file mode 100644
index 0000000000..cec2e07e2e
--- /dev/null
+++ b/packages/host/app/instance-initializers/dedupe-theme-styles.ts
@@ -0,0 +1,20 @@
+import type ApplicationInstance from '@ember/application/instance';
+import { registerDestructor } from '@ember/destroyable';
+
+import { ThemeStyleDeduper } from '../lib/theme-style-deduper';
+
+// Cards sharing a theme each carry a byte-identical copy of the theme
+// stylesheet (self-contained prerendered fragments require this); only one
+// copy per theme needs to be active in the live DOM.
+export function initialize(appInstance: ApplicationInstance): void {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  let deduper = new ThemeStyleDeduper();
+  deduper.start();
+  registerDestructor(appInstance, () => deduper.stop());
+}
+
+export default {
+  initialize,
+};
diff --git a/packages/host/app/lib/theme-style-deduper.ts b/packages/host/app/lib/theme-style-deduper.ts
new file mode 100644
index 0000000000..962d248130
--- /dev/null
+++ b/packages/host/app/lib/theme-style-deduper.ts
@@ -0,0 +1,84 @@
+// Every themed CardContainer emits its own copy of the theme stylesheet, and
+// prerendered fragments carry the copies baked in, so each fragment is
+// self-contained. Copies that share a `data-boxel-theme-scope` are
+// byte-identical (the scope embeds a hash of the theme CSS), so only one
+// needs to participate in style matching. This deduper watches the document
+// and disables the redundant copies, promoting a survivor whenever the
+// active copy leaves the DOM or its content changes.
+//
+// Theme stylesheets are recognized by the `data-boxel-theme-style` attribute
+// their emitters stamp on the <style> tag, rather than by sniffing the CSS
+// text (whose leading output varies — a dark-only theme starts with
+// `@container`, not the scope selector). The attribute serializes with the
+// element, so prerendered fragments stay recognizable when re-inserted.
+//
+// It disables via the `disabled` property (not an attribute), so serializing
+// a container's HTML — which is how prerendered fragments are captured —
+// still yields the full stylesheet.
+
+const THEME_STYLE_SELECTOR = 'style[data-boxel-theme-style]';
+
+export class ThemeStyleDeduper {
+  #observer: MutationObserver | undefined;
+  #doc: Document | undefined;
+  #scheduled = false;
+
+  start(doc: Document = document): void {
+    if (this.#observer) {
+      return;
+    }
+    this.#doc = doc;
+    this.#observer = new MutationObserver(() => this.#schedule());
+    this.#observer.observe(doc.documentElement, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    this.#sync();
+  }
+
+  stop(): void {
+    this.#observer?.disconnect();
+    this.#observer = undefined;
+    if (this.#doc) {
+      for (let el of this.#doc.querySelectorAll<HTMLStyleElement>(
+        THEME_STYLE_SELECTOR,
+      )) {
+        el.disabled = false;
+      }
+    }
+    this.#doc = undefined;
+  }
+
+  #schedule(): void {
+    if (this.#scheduled) {
+      return;
+    }
+    this.#scheduled = true;
+    queueMicrotask(() => {
+      this.#scheduled = false;
+      this.#sync();
+    });
+  }
+
+  // One full pass: group theme style elements by content and keep only the
+  // first copy (in document order) of each group enabled. A full pass keeps
+  // the logic immune to reordering, removal of the active copy, and content
+  // rewrites (a theme edit changes the scope hash, forming a new group).
+  #sync(): void {
+    if (!this.#doc) {
+      return;
+    }
+    let seen = new Set<string>();
+    for (let el of this.#doc.querySelectorAll<HTMLStyleElement>(
+      THEME_STYLE_SELECTOR,
+    )) {
+      let key = el.textContent ?? '';
+      let redundant = seen.has(key);
+      seen.add(key);
+      if (el.disabled !== redundant) {
+        el.disabled = redundant;
+      }
+    }
+  }
+}
diff --git a/packages/host/tests/acceptance/theme-card-test.gts b/packages/host/tests/acceptance/theme-card-test.gts
index 0e40de8b89..0fc8e0888d 100644
--- a/packages/host/tests/acceptance/theme-card-test.gts
+++ b/packages/host/tests/acceptance/theme-card-test.gts
@@ -444,6 +444,30 @@ module('Acceptance | theme-card-test', function (hooks) {
               },
             },
           },
+          'checkbox-forest-green-2.json': {
+            data: {
+              meta: {
+                adoptsFrom: {
+                  name: 'CheckboxCard',
+                  module: `${testRealmURL}checkbox-card`,
+                },
+              },
+              type: 'card',
+              attributes: {
+                isChecked: false,
+                cardInfo: {
+                  name: 'Second Forest Green Checkbox',
+                },
+              },
+              relationships: {
+                'cardInfo.theme': {
+                  links: {
+                    self: `${testRealmURL}forest-green-theme`,
+                  },
+                },
+              },
+            },
+          },
           'checkbox-forest-green.json': {
             data: {
               meta: {
@@ -511,6 +535,25 @@ module('Acceptance | theme-card-test', function (hooks) {
       assert.dom(cardSelector).hasClass('boxel-card-container--themed');
       assert.dom(cardSelector).hasAttribute('data-boxel-theme-scope');
 
+      // the card container and the theme dashboard inside it derive their
+      // scopes from the same identity (the theme card's id plus its css), so
+      // the two render paths agree and their stylesheets are dedupable
+      let containerScope = document
+        .querySelector(cardSelector)!
+        .getAttribute('data-boxel-theme-scope');
+      let dashboardScope = document
+        .querySelector(`${cardSelector} article[data-boxel-theme-scope]`)!
+        .getAttribute('data-boxel-theme-scope');
+      assert.true(
+        containerScope!.startsWith(`${themeCardId}-`),
+        'scope derives from the theme card id',
+      );
+      assert.strictEqual(
+        dashboardScope,
+        containerScope,
+        'dashboard scope matches the container scope',
+      );
+
       assert.strictEqual(
         computedProperty(cardSelector, '--background'),
         '#0a0f23',
@@ -1083,5 +1126,86 @@ module('Acceptance | theme-card-test', function (hooks) {
         'checkbox size matches --theme-body-font-size',
       );
     });
+
+    test('cards sharing a theme emit identical scoped stylesheets with only one active copy', async function (assert) {
+      let cardId = `${testRealmURL}checkbox-forest-green`;
+      let otherCardId = `${testRealmURL}checkbox-forest-green-2`;
+      await visitOperatorMode({
+        stacks: [
+          [{ id: cardId, format: 'isolated' }],
+          [{ id: otherCardId, format: 'isolated' }],
+        ],
+      });
+
+      let themeStyleText = (id: string) => {
+        let container = document.querySelector(`[data-test-card="${id}"]`);
+        return [...container!.querySelectorAll('style')]
+          .map((style) => style.textContent?.trim())
+          .filter((text) => text?.includes('data-boxel-theme-scope'))
+          .join('');
+      };
+
+      let scope = document
+        .querySelector(`[data-test-card="${cardId}"]`)!
+        .getAttribute('data-boxel-theme-scope');
+      let otherScope = document
+        .querySelector(`[data-test-card="${otherCardId}"]`)!
+        .getAttribute('data-boxel-theme-scope');
+      assert.ok(scope, 'theme scope is set');
+      assert.true(
+        scope!.startsWith(`${testRealmURL}forest-green-theme-`),
+        'scope derives from the theme card id plus a content hash',
+      );
+      assert.strictEqual(
+        scope,
+        otherScope,
+        'cards sharing a theme share a scope',
+      );
+      assert.ok(
+        themeStyleText(cardId).length,
+        'theme stylesheet is rendered within the card container',
+      );
+      assert.strictEqual(
+        themeStyleText(cardId),
+        themeStyleText(otherCardId),
+        'cards sharing a theme emit byte-identical theme stylesheets',
+      );
+
+      let copies = () =>
+        [...document.querySelectorAll('style')].filter((style) =>
+          style.textContent?.includes(
+            `data-boxel-theme-scope="${testRealmURL}forest-green-theme-`,
+          ),
+        );
+      assert.strictEqual(copies().length, 2, 'each card emits its own copy');
+      assert.strictEqual(
+        copies().filter((style) => !style.disabled).length,
+        1,
+        'exactly one copy participates in style matching',
+      );
+      assert.strictEqual(
+        computedProperty(`[data-test-card="${cardId}"]`, '--primary'),
+        '#2e7d32',
+        'the first card resolves the theme variables',
+      );
+      assert.strictEqual(
+        computedProperty(`[data-test-card="${otherCardId}"]`, '--primary'),
+        '#2e7d32',
+        'the second card resolves the theme variables',
+      );
+
+      // when the active copy leaves the DOM, a survivor is promoted
+      copies()
+        .find((style) => !style.disabled)!
+        .remove();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      assert.strictEqual(copies().length, 1, 'one copy remains');
+      assert.false(copies()[0].disabled, 'the surviving copy is re-enabled');
+      assert.strictEqual(
+        computedProperty(`[data-test-card="${otherCardId}"]`, '--primary'),
+        '#2e7d32',
+        'the theme stays applied after the active copy is removed',
+      );
+    });
   });
 });
diff --git a/packages/host/tests/unit/theme-style-deduper-test.ts b/packages/host/tests/unit/theme-style-deduper-test.ts
new file mode 100644
index 0000000000..e0570d1dd3
--- /dev/null
+++ b/packages/host/tests/unit/theme-style-deduper-test.ts
@@ -0,0 +1,99 @@
+import { module, test } from 'qunit';
+
+import { ThemeStyleDeduper } from '@cardstack/host/lib/theme-style-deduper';
+
+const LIGHT_CSS =
+  '[data-boxel-theme-scope="https://example.test/theme-abc"]{--primary: #112233;}';
+// a dark-only theme's stylesheet starts with @container, not the scope
+// selector — recognition must not depend on the CSS text's leading output
+const DARK_ONLY_CSS =
+  '@container style(--boxel-color-scheme: dark){[data-boxel-theme-scope="https://example.test/theme-def"]{--primary: #445566;}}';
+
+module('Unit | theme-style-deduper', function (hooks) {
+  let deduper: ThemeStyleDeduper;
+  let fixture: HTMLElement;
+
+  hooks.beforeEach(function () {
+    deduper = new ThemeStyleDeduper();
+    fixture = document.createElement('div');
+    document.body.appendChild(fixture);
+  });
+
+  hooks.afterEach(function () {
+    deduper.stop();
+    fixture.remove();
+  });
+
+  function addThemeStyle(css: string): HTMLStyleElement {
+    let el = document.createElement('style');
+    el.setAttribute('data-boxel-theme-style', '');
+    el.textContent = css;
+    fixture.appendChild(el);
+    return el;
+  }
+
+  function flush(): Promise<void> {
+    // the deduper coalesces mutations into a microtask; one macrotask hop
+    // guarantees the scheduled #sync has run
+    return new Promise((resolve) => setTimeout(resolve, 0));
+  }
+
+  test('keeps one copy of each identical theme stylesheet active', async function (assert) {
+    let first = addThemeStyle(LIGHT_CSS);
+    let second = addThemeStyle(LIGHT_CSS);
+    deduper.start();
+    assert.false(first.disabled, 'first copy stays active');
+    assert.true(second.disabled, 'duplicate copy is disabled');
+  });
+
+  test('dedupes dark-only theme stylesheets', async function (assert) {
+    deduper.start();
+    let first = addThemeStyle(DARK_ONLY_CSS);
+    let second = addThemeStyle(DARK_ONLY_CSS);
+    await flush();
+    assert.false(first.disabled, 'first dark-only copy stays active');
+    assert.true(second.disabled, 'duplicate dark-only copy is disabled');
+  });
+
+  test('non-identical stylesheets are never disabled', async function (assert) {
+    deduper.start();
+    let light = addThemeStyle(LIGHT_CSS);
+    let dark = addThemeStyle(DARK_ONLY_CSS);
+    await flush();
+    assert.false(light.disabled);
+    assert.false(dark.disabled);
+  });
+
+  test('ignores style elements without the marker attribute', async function (assert) {
+    deduper.start();
+    let unmarked = document.createElement('style');
+    unmarked.textContent = LIGHT_CSS;
+    fixture.appendChild(unmarked);
+    let duplicate = unmarked.cloneNode(true) as HTMLStyleElement;
+    fixture.appendChild(duplicate);
+    await flush();
+    assert.false(unmarked.disabled);
+    assert.false(duplicate.disabled);
+  });
+
+  test('promotes a survivor when the active copy is removed', async function (assert) {
+    deduper.start();
+    let first = addThemeStyle(LIGHT_CSS);
+    let second = addThemeStyle(LIGHT_CSS);
+    await flush();
+    assert.true(second.disabled, 'duplicate starts disabled');
+    first.remove();
+    await flush();
+    assert.false(second.disabled, 'survivor is re-enabled');
+  });
+
+  test('stop re-enables everything', async function (assert) {
+    deduper.start();
+    addThemeStyle(LIGHT_CSS);
+    let second = addThemeStyle(LIGHT_CSS);
+    await flush();
+    assert.true(second.disabled);
+    deduper.stop();
+    assert.false(second.disabled, 'stop re-enables disabled copies');
+  });
+});