diff --git a/examples/basic-server-preact/src/global.css b/examples/basic-server-preact/src/global.css
index 08d4da165..3247d527f 100644
--- a/examples/basic-server-preact/src/global.css
+++ b/examples/basic-server-preact/src/global.css
@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
+}
+
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
 }
 
-code {
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }
diff --git a/examples/basic-server-preact/src/mcp-app.module.css b/examples/basic-server-preact/src/mcp-app.module.css
index 41a04565d..6bbbff616 100644
--- a/examples/basic-server-preact/src/mcp-app.module.css
+++ b/examples/basic-server-preact/src/mcp-app.module.css
@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+.serverTime {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/examples/basic-server-preact/src/mcp-app.tsx b/examples/basic-server-preact/src/mcp-app.tsx
index d5b6b60d0..a8bdc68b8 100644
--- a/examples/basic-server-preact/src/mcp-app.tsx
+++ b/examples/basic-server-preact/src/mcp-app.tsx
@@ -144,7 +144,7 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
 
       <div className={styles.action}>
         <p>
-          <strong>Server Time:</strong> <code id="server-time">{serverTime}</code>
+          <strong>Server Time:</strong> <code className={styles.serverTime}>{serverTime}</code>
         </p>
         <button onClick={handleGetTime}>Get Server Time</button>
       </div>
diff --git a/examples/basic-server-react/src/global.css b/examples/basic-server-react/src/global.css
index 08d4da165..3247d527f 100644
--- a/examples/basic-server-react/src/global.css
+++ b/examples/basic-server-react/src/global.css
@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
+}
+
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
 }
 
-code {
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }
diff --git a/examples/basic-server-react/src/mcp-app.module.css b/examples/basic-server-react/src/mcp-app.module.css
index 41a04565d..6bbbff616 100644
--- a/examples/basic-server-react/src/mcp-app.module.css
+++ b/examples/basic-server-react/src/mcp-app.module.css
@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+.serverTime {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/examples/basic-server-react/src/mcp-app.tsx b/examples/basic-server-react/src/mcp-app.tsx
index a42fce78d..6bb554025 100644
--- a/examples/basic-server-react/src/mcp-app.tsx
+++ b/examples/basic-server-react/src/mcp-app.tsx
@@ -131,7 +131,7 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
 
       <div className={styles.action}>
         <p>
-          <strong>Server Time:</strong> <code id="server-time">{serverTime}</code>
+          <strong>Server Time:</strong> <code className={styles.serverTime}>{serverTime}</code>
         </p>
         <button onClick={handleGetTime}>Get Server Time</button>
       </div>
diff --git a/examples/basic-server-solid/src/global.css b/examples/basic-server-solid/src/global.css
index 08d4da165..3247d527f 100644
--- a/examples/basic-server-solid/src/global.css
+++ b/examples/basic-server-solid/src/global.css
@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
+}
+
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
 }
 
-code {
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }
diff --git a/examples/basic-server-solid/src/mcp-app.module.css b/examples/basic-server-solid/src/mcp-app.module.css
index 41a04565d..6bbbff616 100644
--- a/examples/basic-server-solid/src/mcp-app.module.css
+++ b/examples/basic-server-solid/src/mcp-app.module.css
@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+.serverTime {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/examples/basic-server-solid/src/mcp-app.tsx b/examples/basic-server-solid/src/mcp-app.tsx
index fa054e605..66d47f3f6 100644
--- a/examples/basic-server-solid/src/mcp-app.tsx
+++ b/examples/basic-server-solid/src/mcp-app.tsx
@@ -149,7 +149,7 @@ function GetTimeAppInner(props: GetTimeAppInnerProps) {
 
       <div class={styles.action}>
         <p>
-          <strong>Server Time:</strong> <code id="server-time">{serverTime()}</code>
+          <strong>Server Time:</strong> <code class={styles.serverTime}>{serverTime()}</code>
         </p>
         <button onClick={handleGetTime}>Get Server Time</button>
       </div>
diff --git a/examples/basic-server-svelte/src/App.svelte b/examples/basic-server-svelte/src/App.svelte
index 48fbe66cb..9ef50f009 100644
--- a/examples/basic-server-svelte/src/App.svelte
+++ b/examples/basic-server-svelte/src/App.svelte
@@ -111,7 +111,7 @@ async function handleOpenLink() {
   <p class="notice">Watch activity in the DevTools console!</p>
 
   <div class="action">
-    <p><strong>Server Time:</strong> <code id="server-time">{serverTime}</code></p>
+    <p><strong>Server Time:</strong> <code class="server-time">{serverTime}</code></p>
     <button onclick={handleGetTime}>Get Server Time</button>
   </div>
 
@@ -205,7 +205,7 @@ async function handleOpenLink() {
 }
 
 /* Server time fills remaining width for consistent E2E screenshot masking */
-:global(#server-time) {
+.server-time {
   flex: 1;
   min-width: 0;
 }
diff --git a/examples/basic-server-svelte/src/global.css b/examples/basic-server-svelte/src/global.css
index 97cda4404..3247d527f 100644
--- a/examples/basic-server-svelte/src/global.css
+++ b/examples/basic-server-svelte/src/global.css
@@ -1,12 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
 }
 
-code {
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
+
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
+}
diff --git a/examples/basic-server-vanillajs/src/global.css b/examples/basic-server-vanillajs/src/global.css
index 08d4da165..3247d527f 100644
--- a/examples/basic-server-vanillajs/src/global.css
+++ b/examples/basic-server-vanillajs/src/global.css
@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
+}
+
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
 }
 
-code {
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }
diff --git a/examples/basic-server-vanillajs/src/mcp-app.css b/examples/basic-server-vanillajs/src/mcp-app.css
index 41a04565d..02357ba58 100644
--- a/examples/basic-server-vanillajs/src/mcp-app.css
+++ b/examples/basic-server-vanillajs/src/mcp-app.css
@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/examples/basic-server-vue/src/App.vue b/examples/basic-server-vue/src/App.vue
index acf88c4d2..b18528169 100644
--- a/examples/basic-server-vue/src/App.vue
+++ b/examples/basic-server-vue/src/App.vue
@@ -118,7 +118,7 @@ async function handleOpenLink() {
     <p class="notice">Watch activity in the DevTools console!</p>
 
     <div class="action">
-      <p><strong>Server Time:</strong> <code id="server-time">{{ serverTime }}</code></p>
+      <p><strong>Server Time:</strong> <code class="server-time">{{ serverTime }}</code></p>
       <button @click="handleGetTime">Get Server Time</button>
     </div>
 
@@ -213,7 +213,7 @@ async function handleOpenLink() {
 }
 
 /* Server time fills remaining width for consistent E2E screenshot masking */
-:deep(#server-time) {
+.server-time {
   flex: 1;
   min-width: 0;
 }
diff --git a/examples/basic-server-vue/src/global.css b/examples/basic-server-vue/src/global.css
index 97cda4404..3247d527f 100644
--- a/examples/basic-server-vue/src/global.css
+++ b/examples/basic-server-vue/src/global.css
@@ -1,12 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
 }
 
-code {
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
+}
+
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
+
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
+}
diff --git a/examples/integration-server/src/global.css b/examples/integration-server/src/global.css
index 08d4da165..3247d527f 100644
--- a/examples/integration-server/src/global.css
+++ b/examples/integration-server/src/global.css
@@ -1,18 +1,49 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 1rem;
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+  font-size: var(--font-text-md-size, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--font-text-md-line-height, 1.5);
+  color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
+}
+
+h1 {
+  font-size: var(--font-heading-3xl-size, 2.25rem);
+  line-height: var(--font-heading-3xl-line-height, 1.1);
+}
+h2 {
+  font-size: var(--font-heading-2xl-size, 1.875rem);
+  line-height: var(--font-heading-2xl-line-height, 1.2);
+}
+h3 {
+  font-size: var(--font-heading-xl-size, 1.5rem);
+  line-height: var(--font-heading-xl-line-height, 1.25);
+}
+h4 {
+  font-size: var(--font-heading-lg-size, 1.25rem);
+  line-height: var(--font-heading-lg-line-height, 1.3);
+}
+h5 {
+  font-size: var(--font-heading-md-size, 1rem);
+  line-height: var(--font-heading-md-line-height, 1.4);
+}
+h6 {
+  font-size: var(--font-heading-sm-size, 0.875rem);
+  line-height: var(--font-heading-sm-line-height, 1.4);
 }
 
-code {
+code, pre, kbd {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   font-size: 1em;
 }
 
-/* Server time fills remaining width for consistent E2E screenshot masking */
-#server-time {
-  flex: 1;
-  min-width: 0;
+b, strong {
+  font-weight: var(--font-weight-bold, 700);
 }
diff --git a/examples/integration-server/src/mcp-app.module.css b/examples/integration-server/src/mcp-app.module.css
index 41a04565d..6bbbff616 100644
--- a/examples/integration-server/src/mcp-app.module.css
+++ b/examples/integration-server/src/mcp-app.module.css
@@ -70,3 +70,9 @@
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+.serverTime {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/examples/integration-server/src/mcp-app.tsx b/examples/integration-server/src/mcp-app.tsx
index 7304ca9c2..ef280f3a7 100644
--- a/examples/integration-server/src/mcp-app.tsx
+++ b/examples/integration-server/src/mcp-app.tsx
@@ -152,7 +152,7 @@ function GetTimeAppInner({
       <div className={styles.action}>
         <p>
           <strong>Server Time:</strong>{" "}
-          <code id="server-time">{serverTime}</code>
+          <code className={styles.serverTime}>{serverTime}</code>
         </p>
         <button onClick={handleGetTime}>Get Server Time</button>
       </div>
diff --git a/tests/e2e/servers.spec.ts b/tests/e2e/servers.spec.ts
index 659247183..9895b7fb7 100644
--- a/tests/e2e/servers.spec.ts
+++ b/tests/e2e/servers.spec.ts
@@ -7,14 +7,14 @@ import { test, expect, type Page, type ConsoleMessage } from "@playwright/test";
 //
 // Note: map-server uses SLOW_SERVERS timeout instead of masking to wait for tiles
 const DYNAMIC_MASKS: Record<string, string[]> = {
-  integration: ["#server-time"], // Server time display
-  "basic-preact": ["#server-time"], // Server time display
-  "basic-react": ["#server-time"], // Server time display
-  "basic-solid": ["#server-time"], // Server time display
-  "basic-svelte": ["#server-time"], // Server time display
+  integration: ['[class*="serverTime"]'], // Server time display [CSS module]
+  "basic-preact": ['[class*="serverTime"]'], // Server time display [CSS module]
+  "basic-react": ['[class*="serverTime"]'], // Server time display [CSS module]
+  "basic-solid": ['[class*="serverTime"]'], // Server time display [CSS module]
+  "basic-svelte": [".server-time"], // Server time display (component-scoped)
   "basic-vanillajs": ["#server-time"], // Server time display
-  "basic-vue": ["#server-time"], // Server time display
-  "cohort-heatmap": ['[class*="heatmapWrapper"]'], // Heatmap grid (random data)
+  "basic-vue": [".server-time"], // Server time display (scoped styles)
+  "cohort-heatmap": ['[class*="heatmapWrapper"]'], // Heatmap grid (random data) [CSS module]
   "customer-segmentation": [".chart-container"], // Scatter plot (random data)
   "debug-server": ["#event-log", "#callback-table-body"], // Event log and callback counts (dynamic)
   quickstart: ["#server-time"], // Server time display
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-preact.png b/tests/e2e/servers.spec.ts-snapshots/basic-preact.png
index ee510802e..1bc9b1b47 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-preact.png and b/tests/e2e/servers.spec.ts-snapshots/basic-preact.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-react.png b/tests/e2e/servers.spec.ts-snapshots/basic-react.png
index 137167238..71af72589 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-react.png and b/tests/e2e/servers.spec.ts-snapshots/basic-react.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-solid.png b/tests/e2e/servers.spec.ts-snapshots/basic-solid.png
index e4750d3b3..a051ccbc0 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-solid.png and b/tests/e2e/servers.spec.ts-snapshots/basic-solid.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-svelte.png b/tests/e2e/servers.spec.ts-snapshots/basic-svelte.png
index 174d7c84d..d5de14e74 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-svelte.png and b/tests/e2e/servers.spec.ts-snapshots/basic-svelte.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png b/tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png
index faaff9559..1a4dae821 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png and b/tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-vue.png b/tests/e2e/servers.spec.ts-snapshots/basic-vue.png
index 4e3d2dac5..66ae918e2 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/basic-vue.png and b/tests/e2e/servers.spec.ts-snapshots/basic-vue.png differ
diff --git a/tests/e2e/servers.spec.ts-snapshots/integration.png b/tests/e2e/servers.spec.ts-snapshots/integration.png
index c750e6475..0a0759551 100644
Binary files a/tests/e2e/servers.spec.ts-snapshots/integration.png and b/tests/e2e/servers.spec.ts-snapshots/integration.png differ