diff --git a/archify.zip b/archify.zip
index e64f6fa9f..013f63bb8 100644
Binary files a/archify.zip and b/archify.zip differ
diff --git a/archify/assets/template.html b/archify/assets/template.html
index 28c151c19..b4bf538bc 100644
--- a/archify/assets/template.html
+++ b/archify/assets/template.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6104,9 +6103,9 @@ <h3>Card Title 3</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/examples/dataflow-product-analytics.html b/archify/examples/dataflow-product-analytics.html
index e56dd1bbb..bc2fadab9 100644
--- a/archify/examples/dataflow-product-analytics.html
+++ b/archify/examples/dataflow-product-analytics.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6215,9 +6214,9 @@ <h3>Derived Consumers</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/examples/lifecycle-agent-run.html b/archify/examples/lifecycle-agent-run.html
index 141719b50..288de372c 100644
--- a/archify/examples/lifecycle-agent-run.html
+++ b/archify/examples/lifecycle-agent-run.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6164,9 +6163,9 @@ <h3>Terminal + Recovery</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/examples/sequence-cache-miss-request.html b/archify/examples/sequence-cache-miss-request.html
index d3e2c1e39..761160f39 100644
--- a/archify/examples/sequence-cache-miss-request.html
+++ b/archify/examples/sequence-cache-miss-request.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6230,9 +6229,9 @@ <h3>Async Trace</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/examples/web-app-rendered.html b/archify/examples/web-app-rendered.html
index d6d45a50c..086c307cb 100644
--- a/archify/examples/web-app-rendered.html
+++ b/archify/examples/web-app-rendered.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6179,9 +6178,9 @@ <h3>Security</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/examples/workflow-agent-tool-call-rendered.html b/archify/examples/workflow-agent-tool-call-rendered.html
index 0fb6bb9aa..d5ac68267 100644
--- a/archify/examples/workflow-agent-tool-call-rendered.html
+++ b/archify/examples/workflow-agent-tool-call-rendered.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6221,9 +6220,9 @@ <h3>Runtime Semantics</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/archify/test/offline-typography.test.mjs b/archify/test/offline-typography.test.mjs
new file mode 100644
index 000000000..542c38953
--- /dev/null
+++ b/archify/test/offline-typography.test.mjs
@@ -0,0 +1,40 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const skillRoot = path.resolve(__dirname, '..');
+const cli = path.join(skillRoot, 'bin/archify.mjs');
+const template = fs.readFileSync(path.join(skillRoot, 'assets/template.html'), 'utf8');
+
+const FONT_HOST_PATTERNS = [
+  /fonts\.googleapis\.com/i,
+  /fonts\.gstatic\.com/i,
+];
+
+function assertNoFontHosts(label, html) {
+  for (const pattern of FONT_HOST_PATTERNS) {
+    assert.doesNotMatch(html, pattern, `${label} must not request ${pattern}`);
+  }
+}
+
+test('delivered HTML template does not request Google Fonts', () => {
+  assertNoFontHosts('archify/assets/template.html', template);
+  assert.match(template, /@font-face\s*\{[^}]*local\('JetBrains Mono'\)/);
+});
+
+test('deliver output does not request Google Fonts', () => {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-offline-fonts-'));
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const out = path.join(tmp, 'delivered.html');
+  const result = spawnSync(process.execPath, [cli, 'deliver', 'architecture', input, out, '--json'], {
+    cwd: skillRoot,
+    encoding: 'utf8',
+  });
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  assertNoFontHosts('deliver output', fs.readFileSync(out, 'utf8'));
+});
diff --git a/docs/assets/archify-live-proof.gif b/docs/assets/archify-live-proof.gif
index c4482fde4..be3c17fac 100644
Binary files a/docs/assets/archify-live-proof.gif and b/docs/assets/archify-live-proof.gif differ
diff --git a/docs/assets/archify-live-proof.json b/docs/assets/archify-live-proof.json
index 9239205bf..d0794cc3a 100644
--- a/docs/assets/archify-live-proof.json
+++ b/docs/assets/archify-live-proof.json
@@ -7,13 +7,13 @@
   "fps": 10,
   "frameCount": 54,
   "durationSeconds": 5.4,
-  "bytes": 1542193,
-  "sha256": "e0fe704e5d230c0478bc5a48b7668815b5790eed496da87ce7a5f8e5b2416c28",
+  "bytes": 1572525,
+  "sha256": "483ad28ad27bb3d3357b0c9b83e9732bd5d72b4d87092280b64b4e7630411cbf",
   "scenes": [
     {
       "id": "signal-flow",
       "artifact": "docs/gallery/artifacts/agent-tool-call.workflow.html",
-      "artifactSha256": "e083cfe2d35701472374910e922ebdf8b30fdd3d5547d0e2cabd05094d033c66",
+      "artifactSha256": "33401041cb805843001b521954dc4e02462aab92f0f6577e962024b6ecaa57c2",
       "view": "happy-path",
       "eyebrow": "WORKFLOW · SIGNAL FLOW",
       "title": "Agent Tool Call",
@@ -22,7 +22,7 @@
     {
       "id": "blueprint",
       "artifact": "docs/gallery/artifacts/production-deployment.architecture.html",
-      "artifactSha256": "dbf6d1b3cffa610f2e538cca3b9aa1c65eb45f580154f316d97c157d90916faa",
+      "artifactSha256": "d981bcd804091b90ec38e5e8e4ed3d14347a1bfd1909cbea0306b29df365734b",
       "view": "request-boundary",
       "eyebrow": "ARCHITECTURE · BLUEPRINT",
       "title": "Production Deployment",
@@ -31,7 +31,7 @@
     {
       "id": "classic",
       "artifact": "docs/gallery/artifacts/cache-miss.sequence.html",
-      "artifactSha256": "6bf688c8577049973ace979ac73292eda0cc8f349934c6ba4452720853ced84c",
+      "artifactSha256": "a925f2ad9219812d65e8eb9b2be157e9d57a4757cb57fe423a65951bb715af4b",
       "view": "cache-fallback",
       "eyebrow": "SEQUENCE · CLASSIC",
       "title": "Cache Miss Request",
diff --git a/docs/gallery.html b/docs/gallery.html
index 7c2e6aa39..5d7fdceb3 100644
--- a/docs/gallery.html
+++ b/docs/gallery.html
@@ -8,11 +8,15 @@
   <meta name="description" content="A generated gallery of validated, self-contained Archify diagrams. Every preview links to its exact JSON source and interactive HTML artifact.">
   <meta name="theme-color" content="#eff2f1">
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><polygon points='14,2 26,8 26,20 14,26 2,20 2,8' fill='%23083344' stroke='%2322d3ee' stroke-width='1.5'/><circle cx='14' cy='15' r='2.5' fill='%2322d3ee'/></svg>">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="assets/site-navigation.css">
   <style>
+    /* Offline-first typography: prefer locally installed JetBrains Mono and
+       fall through to system stacks. Gallery pages must not request third-party
+       font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     :root {
       /* Drafted-sheet palette — shared with the project page */
       --paper-site:#eff2f1; --paper-raised:#f8faf9;
@@ -21,9 +25,9 @@
       --accent-site:#e14a0e; --accent-soft:rgba(225,74,14,0.08);
       --plate:#0f1216;
       --emerald:#047857;
-      --font-display:'Fraunces','Songti SC','STSong',Georgia,serif;
-      --font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
-      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
+      --font-display:'Songti SC','STSong',Georgia,'Times New Roman',serif;
+      --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
+      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
       --ease-out:cubic-bezier(.22,1,.36,1);
       --content: 1320px;
     }
@@ -298,7 +302,7 @@ <h3 class="card-title" data-en="Agent Tool Call" data-zh="智能体工具调用"
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 11E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="e083cfe2d35701472374910e922ebdf8b30fdd3d5547d0e2cabd05094d033c66">e083cfe2d357</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="33401041cb805843001b521954dc4e02462aab92f0f6577e962024b6ecaa57c2">33401041cb80</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/agent-tool-call.workflow.html?present=1&amp;play=1#view=happy-path" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -328,7 +332,7 @@ <h3 class="card-title" data-en="Production Deployment Ownership" data-zh="生产
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 12E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="dbf6d1b3cffa610f2e538cca3b9aa1c65eb45f580154f316d97c157d90916faa">dbf6d1b3cffa</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="d981bcd804091b90ec38e5e8e4ed3d14347a1bfd1909cbea0306b29df365734b">d981bcd80409</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/production-deployment.architecture.html?present=1&amp;play=1#view=request-boundary" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -357,7 +361,7 @@ <h3 class="card-title" data-en="Cache Miss Request" data-zh="缓存未命中请
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">7N · 12E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="6bf688c8577049973ace979ac73292eda0cc8f349934c6ba4452720853ced84c">6bf688c85770</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="a925f2ad9219812d65e8eb9b2be157e9d57a4757cb57fe423a65951bb715af4b">a925f2ad9219</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/cache-miss.sequence.html?present=1&amp;play=1#view=cache-fallback" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -386,7 +390,7 @@ <h3 class="card-title" data-en="Release Delivery Workflow" data-zh="研发交付
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 10E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="358289f1aee93c3bf1075ce95372325ea415c0178f76ce62c868bdc3683cc5f4">358289f1aee9</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="903a83ebb92b89afd20620edf3f30b81dd6d2316bc8303c92a48b450cea5a41a">903a83ebb92b</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/release-delivery.workflow.html?present=1&amp;play=1#view=approval-to-production" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -415,7 +419,7 @@ <h3 class="card-title" data-en="Incident Response Runbook" data-zh="事故处置
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">11N · 10E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="d50feba56cbba1bf62a19b45f142bc1f964bf6831730a79d2760aadcf106542a">d50feba56cbb</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="6741ac75934cf6320f42c4fc773d7e34622372d53f82a0b47fa55acbe483ff3e">6741ac75934c</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/incident-response.workflow.html?present=1&amp;play=1#view=mitigate-and-verify" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -444,7 +448,7 @@ <h3 class="card-title" data-en="Product Analytics" data-zh="产品分析数据
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 10E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="d66d70595448044a92d032738e2437980d2160462f974a1de8cfa82c5e148d54">d66d70595448</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="d0f007f78fc855ca54ebad13f951d86971dde8651057004733a1c6d578ad53fa">d0f007f78fc8</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/product-analytics.dataflow.html?present=1&amp;play=1#view=consent-boundary" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -473,7 +477,7 @@ <h3 class="card-title" data-en="Async Job Roundtrip" data-zh="异步任务往返
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">7N · 14E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="c4d7cb0eaecfeff4d713b8f3b36b916840d6530f08e9b698ded308effd3ff59b">c4d7cb0eaecf</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="c13cce7aab5359a54e50ae3e7ca0d2173702778a88e1dd92ba9dbc574ed4c1c9">c13cce7aab53</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/async-job-roundtrip.sequence.html?present=1&amp;play=1#view=work-and-retry" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -502,7 +506,7 @@ <h3 class="card-title" data-en="Order Event-stream Topology" data-zh="订单事
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">12N · 12E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="cab32bd06250fdc18f7d25e7562407af9b2e2a37f9ca65c6a852716f7faf1892">cab32bd06250</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="10d2af3c91c03232e0e9c90400b11f5253a931bfd832a4b08ffbb2b118582561">10d2af3c91c0</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/event-stream.dataflow.html?present=1&amp;play=1#view=order-transit" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -531,7 +535,7 @@ <h3 class="card-title" data-en="Agent Run Lifecycle" data-zh="智能体运行生
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 6E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="d15306112803fe6ac1050c6fd5d943545a5bc6a72a0407cd0751d0d8794f6429">d15306112803</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="a0a8a4dd395700bf0d430cf6d0db9e1f6aaacf141da4e43c9c45ff1a8e801bb2">a0a8a4dd3957</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/agent-run.lifecycle.html?present=1&amp;play=1#view=main-lifecycle" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -560,7 +564,7 @@ <h3 class="card-title" data-en="Deployment Release Lifecycle" data-zh="部署发
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">11N · 6E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="2b41af0f84ff5cdbe21f0d672d1d9825eab246b3e7fbaa0237c49042bf28547d">2b41af0f84ff</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="5ad1bf875af581c85e523877a5d2c0cb7509292ff64b53cbd809e5d658bee911">5ad1bf875af5</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/deployment-release.lifecycle.html?present=1&amp;play=1#view=rollback-outcomes" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -589,7 +593,7 @@ <h3 class="card-title" data-en="Three-tier Web App" data-zh="三层 Web 应用">
                 <div class="receipt-cell"><span class="receipt-label">Artifact</span><span class="receipt-value ok">9/9 pass</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Composition</span><span class="receipt-value ok" title="0 crossings · 0 border runs · 0 micro segments · 0 cramped turns">SHOWCASE · PASS</span></div>
                 <div class="receipt-cell"><span class="receipt-label">Graph</span><span class="receipt-value">10N · 9E</span></div>
-                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="26784b847623e79727e44eb5fabfbedc2c47289bf877703eee78787a3eb5bee5">26784b847623</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="cbe7148e78b29d894a941996aac385898d1a781361ccc95a8e11353e16b181bb">cbe7148e78b2</span></div>
               </div>
               <div class="card-actions">
                 <a class="card-link primary" href="gallery/artifacts/web-app.architecture.html?present=1&amp;play=1#view=request-path" target="_blank" rel="noopener" data-en="Play named chapter ↗" data-zh="播放命名章节 ↗">Play named chapter ↗</a>
@@ -675,8 +679,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 11,
-      "artifactBytes": 723038,
-      "artifactSha256": "e083cfe2d35701472374910e922ebdf8b30fdd3d5547d0e2cabd05094d033c66",
+      "artifactBytes": 723195,
+      "artifactSha256": "33401041cb805843001b521954dc4e02462aab92f0f6577e962024b6ecaa57c2",
       "sourceBytes": 5687,
       "sourceSha256": "4d3f6c23de2ca7d306e05d0041a9506833bb5a164a2bddc2d1984cf4da3ee90c",
       "checks": [
@@ -775,8 +779,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": "deployment-ownership",
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 724872,
-      "artifactSha256": "dbf6d1b3cffa610f2e538cca3b9aa1c65eb45f580154f316d97c157d90916faa",
+      "artifactBytes": 725029,
+      "artifactSha256": "d981bcd804091b90ec38e5e8e4ed3d14347a1bfd1909cbea0306b29df365734b",
       "sourceBytes": 5476,
       "sourceSha256": "ec484aa8576664fdb207b543fa49486b23273faccb7a5071e1a0becfb48c22eb",
       "checks": [
@@ -875,8 +879,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 12,
-      "artifactBytes": 716842,
-      "artifactSha256": "6bf688c8577049973ace979ac73292eda0cc8f349934c6ba4452720853ced84c",
+      "artifactBytes": 716999,
+      "artifactSha256": "a925f2ad9219812d65e8eb9b2be157e9d57a4757cb57fe423a65951bb715af4b",
       "sourceBytes": 4345,
       "sourceSha256": "4bbaa6ca3cd4036002fd5d0f3a332eb922cec69d09bac3d7925f95beb4308389",
       "checks": [
@@ -975,8 +979,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 719238,
-      "artifactSha256": "358289f1aee93c3bf1075ce95372325ea415c0178f76ce62c868bdc3683cc5f4",
+      "artifactBytes": 719395,
+      "artifactSha256": "903a83ebb92b89afd20620edf3f30b81dd6d2316bc8303c92a48b450cea5a41a",
       "sourceBytes": 5164,
       "sourceSha256": "e5c880417eac1623923c3dd5461e0c78acd762e1621a28bd53fc14a84cad6a91",
       "checks": [
@@ -1075,8 +1079,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 10,
-      "artifactBytes": 716567,
-      "artifactSha256": "d50feba56cbba1bf62a19b45f142bc1f964bf6831730a79d2760aadcf106542a",
+      "artifactBytes": 716724,
+      "artifactSha256": "6741ac75934cf6320f42c4fc773d7e34622372d53f82a0b47fa55acbe483ff3e",
       "sourceBytes": 5375,
       "sourceSha256": "5c760c82eee545dfb7da38a4e628059d7891af4cfbfc13c8a7009ea64f69aa1b",
       "checks": [
@@ -1175,8 +1179,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 720496,
-      "artifactSha256": "d66d70595448044a92d032738e2437980d2160462f974a1de8cfa82c5e148d54",
+      "artifactBytes": 720653,
+      "artifactSha256": "d0f007f78fc855ca54ebad13f951d86971dde8651057004733a1c6d578ad53fa",
       "sourceBytes": 5627,
       "sourceSha256": "6fa38a7ccedf96da592d60b392783b846188eaa3ec9136c6dc06ca020e43a110",
       "checks": [
@@ -1275,8 +1279,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 14,
-      "artifactBytes": 717252,
-      "artifactSha256": "c4d7cb0eaecfeff4d713b8f3b36b916840d6530f08e9b698ded308effd3ff59b",
+      "artifactBytes": 717409,
+      "artifactSha256": "c13cce7aab5359a54e50ae3e7ca0d2173702778a88e1dd92ba9dbc574ed4c1c9",
       "sourceBytes": 4370,
       "sourceSha256": "545f20920c89b69c2bb1f15508d5543fddbeb15cffba61e102206e04bd5a5cd9",
       "checks": [
@@ -1375,8 +1379,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 724459,
-      "artifactSha256": "cab32bd06250fdc18f7d25e7562407af9b2e2a37f9ca65c6a852716f7faf1892",
+      "artifactBytes": 724616,
+      "artifactSha256": "10d2af3c91c03232e0e9c90400b11f5253a931bfd832a4b08ffbb2b118582561",
       "sourceBytes": 5433,
       "sourceSha256": "a92d6597ddbe164f395da32a7d4b33cfae08edd7d9600a6fb45a2058e5bbb43e",
       "checks": [
@@ -1475,8 +1479,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 6,
-      "artifactBytes": 714131,
-      "artifactSha256": "d15306112803fe6ac1050c6fd5d943545a5bc6a72a0407cd0751d0d8794f6429",
+      "artifactBytes": 714288,
+      "artifactSha256": "a0a8a4dd395700bf0d430cf6d0db9e1f6aaacf141da4e43c9c45ff1a8e801bb2",
       "sourceBytes": 4417,
       "sourceSha256": "af939579dcafc8b4c49f09594591577994398aee57a57369d4c791dfc0d85a42",
       "checks": [
@@ -1575,8 +1579,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 6,
-      "artifactBytes": 715123,
-      "artifactSha256": "2b41af0f84ff5cdbe21f0d672d1d9825eab246b3e7fbaa0237c49042bf28547d",
+      "artifactBytes": 715280,
+      "artifactSha256": "5ad1bf875af581c85e523877a5d2c0cb7509292ff64b53cbd809e5d658bee911",
       "sourceBytes": 4274,
       "sourceSha256": "735c2c5819266e6ea2a71775b6eefce98b53030ce90cb721dc8e1d022ce5be71",
       "checks": [
@@ -1675,8 +1679,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 9,
-      "artifactBytes": 715216,
-      "artifactSha256": "26784b847623e79727e44eb5fabfbedc2c47289bf877703eee78787a3eb5bee5",
+      "artifactBytes": 715373,
+      "artifactSha256": "cbe7148e78b29d894a941996aac385898d1a781361ccc95a8e11353e16b181bb",
       "sourceBytes": 3793,
       "sourceSha256": "483350f5297df682aba4e4a0fa491307ce3d3abd725ae4df07fab177490752cf",
       "checks": [
diff --git a/docs/gallery/artifacts/agent-run.lifecycle.html b/docs/gallery/artifacts/agent-run.lifecycle.html
index 141719b50..288de372c 100644
--- a/docs/gallery/artifacts/agent-run.lifecycle.html
+++ b/docs/gallery/artifacts/agent-run.lifecycle.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6164,9 +6163,9 @@ <h3>Terminal + Recovery</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/agent-tool-call.workflow.html b/docs/gallery/artifacts/agent-tool-call.workflow.html
index 0fb6bb9aa..d5ac68267 100644
--- a/docs/gallery/artifacts/agent-tool-call.workflow.html
+++ b/docs/gallery/artifacts/agent-tool-call.workflow.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6221,9 +6220,9 @@ <h3>Runtime Semantics</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/async-job-roundtrip.sequence.html b/docs/gallery/artifacts/async-job-roundtrip.sequence.html
index 6fe7fb585..e26fcf9b9 100644
--- a/docs/gallery/artifacts/async-job-roundtrip.sequence.html
+++ b/docs/gallery/artifacts/async-job-roundtrip.sequence.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6242,9 +6241,9 @@ <h3>Two Observation Paths</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/cache-miss.sequence.html b/docs/gallery/artifacts/cache-miss.sequence.html
index d3e2c1e39..761160f39 100644
--- a/docs/gallery/artifacts/cache-miss.sequence.html
+++ b/docs/gallery/artifacts/cache-miss.sequence.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6230,9 +6229,9 @@ <h3>Async Trace</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/deployment-release.lifecycle.html b/docs/gallery/artifacts/deployment-release.lifecycle.html
index c9ce31899..0bf242f73 100644
--- a/docs/gallery/artifacts/deployment-release.lifecycle.html
+++ b/docs/gallery/artifacts/deployment-release.lifecycle.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6176,9 +6175,9 @@ <h3>Explicit Endings</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/event-stream.dataflow.html b/docs/gallery/artifacts/event-stream.dataflow.html
index b5ef2a6e2..220e857d6 100644
--- a/docs/gallery/artifacts/event-stream.dataflow.html
+++ b/docs/gallery/artifacts/event-stream.dataflow.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6254,9 +6253,9 @@ <h3>Failure Ownership</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/incident-response.workflow.html b/docs/gallery/artifacts/incident-response.workflow.html
index 0215d14ae..3fdb4e62e 100644
--- a/docs/gallery/artifacts/incident-response.workflow.html
+++ b/docs/gallery/artifacts/incident-response.workflow.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6181,9 +6180,9 @@ <h3>Communication Contract</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/product-analytics.dataflow.html b/docs/gallery/artifacts/product-analytics.dataflow.html
index e56dd1bbb..bc2fadab9 100644
--- a/docs/gallery/artifacts/product-analytics.dataflow.html
+++ b/docs/gallery/artifacts/product-analytics.dataflow.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6215,9 +6214,9 @@ <h3>Derived Consumers</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/production-deployment.architecture.html b/docs/gallery/artifacts/production-deployment.architecture.html
index 1401b6d6a..f0e962445 100644
--- a/docs/gallery/artifacts/production-deployment.architecture.html
+++ b/docs/gallery/artifacts/production-deployment.architecture.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6246,9 +6245,9 @@ <h3>Operational Evidence</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/release-delivery.workflow.html b/docs/gallery/artifacts/release-delivery.workflow.html
index 83c0fbf73..89a30733d 100644
--- a/docs/gallery/artifacts/release-delivery.workflow.html
+++ b/docs/gallery/artifacts/release-delivery.workflow.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6207,9 +6206,9 @@ <h3>Release Evidence</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/artifacts/web-app.architecture.html b/docs/gallery/artifacts/web-app.architecture.html
index d6d45a50c..086c307cb 100644
--- a/docs/gallery/artifacts/web-app.architecture.html
+++ b/docs/gallery/artifacts/web-app.architecture.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6179,9 +6178,9 @@ <h3>Security</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/docs/gallery/manifest.json b/docs/gallery/manifest.json
index d75d682f4..839ad7180 100644
--- a/docs/gallery/manifest.json
+++ b/docs/gallery/manifest.json
@@ -27,8 +27,8 @@
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 11,
-      "artifactBytes": 723038,
-      "artifactSha256": "e083cfe2d35701472374910e922ebdf8b30fdd3d5547d0e2cabd05094d033c66",
+      "artifactBytes": 723195,
+      "artifactSha256": "33401041cb805843001b521954dc4e02462aab92f0f6577e962024b6ecaa57c2",
       "sourceBytes": 5687,
       "sourceSha256": "4d3f6c23de2ca7d306e05d0041a9506833bb5a164a2bddc2d1984cf4da3ee90c",
       "checks": [
@@ -127,8 +127,8 @@
       "engineeringProfile": "deployment-ownership",
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 724872,
-      "artifactSha256": "dbf6d1b3cffa610f2e538cca3b9aa1c65eb45f580154f316d97c157d90916faa",
+      "artifactBytes": 725029,
+      "artifactSha256": "d981bcd804091b90ec38e5e8e4ed3d14347a1bfd1909cbea0306b29df365734b",
       "sourceBytes": 5476,
       "sourceSha256": "ec484aa8576664fdb207b543fa49486b23273faccb7a5071e1a0becfb48c22eb",
       "checks": [
@@ -227,8 +227,8 @@
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 12,
-      "artifactBytes": 716842,
-      "artifactSha256": "6bf688c8577049973ace979ac73292eda0cc8f349934c6ba4452720853ced84c",
+      "artifactBytes": 716999,
+      "artifactSha256": "a925f2ad9219812d65e8eb9b2be157e9d57a4757cb57fe423a65951bb715af4b",
       "sourceBytes": 4345,
       "sourceSha256": "4bbaa6ca3cd4036002fd5d0f3a332eb922cec69d09bac3d7925f95beb4308389",
       "checks": [
@@ -327,8 +327,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 719238,
-      "artifactSha256": "358289f1aee93c3bf1075ce95372325ea415c0178f76ce62c868bdc3683cc5f4",
+      "artifactBytes": 719395,
+      "artifactSha256": "903a83ebb92b89afd20620edf3f30b81dd6d2316bc8303c92a48b450cea5a41a",
       "sourceBytes": 5164,
       "sourceSha256": "e5c880417eac1623923c3dd5461e0c78acd762e1621a28bd53fc14a84cad6a91",
       "checks": [
@@ -427,8 +427,8 @@
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 10,
-      "artifactBytes": 716567,
-      "artifactSha256": "d50feba56cbba1bf62a19b45f142bc1f964bf6831730a79d2760aadcf106542a",
+      "artifactBytes": 716724,
+      "artifactSha256": "6741ac75934cf6320f42c4fc773d7e34622372d53f82a0b47fa55acbe483ff3e",
       "sourceBytes": 5375,
       "sourceSha256": "5c760c82eee545dfb7da38a4e628059d7891af4cfbfc13c8a7009ea64f69aa1b",
       "checks": [
@@ -527,8 +527,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 720496,
-      "artifactSha256": "d66d70595448044a92d032738e2437980d2160462f974a1de8cfa82c5e148d54",
+      "artifactBytes": 720653,
+      "artifactSha256": "d0f007f78fc855ca54ebad13f951d86971dde8651057004733a1c6d578ad53fa",
       "sourceBytes": 5627,
       "sourceSha256": "6fa38a7ccedf96da592d60b392783b846188eaa3ec9136c6dc06ca020e43a110",
       "checks": [
@@ -627,8 +627,8 @@
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 14,
-      "artifactBytes": 717252,
-      "artifactSha256": "c4d7cb0eaecfeff4d713b8f3b36b916840d6530f08e9b698ded308effd3ff59b",
+      "artifactBytes": 717409,
+      "artifactSha256": "c13cce7aab5359a54e50ae3e7ca0d2173702778a88e1dd92ba9dbc574ed4c1c9",
       "sourceBytes": 4370,
       "sourceSha256": "545f20920c89b69c2bb1f15508d5543fddbeb15cffba61e102206e04bd5a5cd9",
       "checks": [
@@ -727,8 +727,8 @@
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 724459,
-      "artifactSha256": "cab32bd06250fdc18f7d25e7562407af9b2e2a37f9ca65c6a852716f7faf1892",
+      "artifactBytes": 724616,
+      "artifactSha256": "10d2af3c91c03232e0e9c90400b11f5253a931bfd832a4b08ffbb2b118582561",
       "sourceBytes": 5433,
       "sourceSha256": "a92d6597ddbe164f395da32a7d4b33cfae08edd7d9600a6fb45a2058e5bbb43e",
       "checks": [
@@ -827,8 +827,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 6,
-      "artifactBytes": 714131,
-      "artifactSha256": "d15306112803fe6ac1050c6fd5d943545a5bc6a72a0407cd0751d0d8794f6429",
+      "artifactBytes": 714288,
+      "artifactSha256": "a0a8a4dd395700bf0d430cf6d0db9e1f6aaacf141da4e43c9c45ff1a8e801bb2",
       "sourceBytes": 4417,
       "sourceSha256": "af939579dcafc8b4c49f09594591577994398aee57a57369d4c791dfc0d85a42",
       "checks": [
@@ -927,8 +927,8 @@
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 6,
-      "artifactBytes": 715123,
-      "artifactSha256": "2b41af0f84ff5cdbe21f0d672d1d9825eab246b3e7fbaa0237c49042bf28547d",
+      "artifactBytes": 715280,
+      "artifactSha256": "5ad1bf875af581c85e523877a5d2c0cb7509292ff64b53cbd809e5d658bee911",
       "sourceBytes": 4274,
       "sourceSha256": "735c2c5819266e6ea2a71775b6eefce98b53030ce90cb721dc8e1d022ce5be71",
       "checks": [
@@ -1027,8 +1027,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 9,
-      "artifactBytes": 715216,
-      "artifactSha256": "26784b847623e79727e44eb5fabfbedc2c47289bf877703eee78787a3eb5bee5",
+      "artifactBytes": 715373,
+      "artifactSha256": "cbe7148e78b29d894a941996aac385898d1a781361ccc95a8e11353e16b181bb",
       "sourceBytes": 3793,
       "sourceSha256": "483350f5297df682aba4e4a0fa491307ce3d3abd725ae4df07fab177490752cf",
       "checks": [
diff --git a/examples/checkout-platform-delta.html b/examples/checkout-platform-delta.html
index 7e28ead95..58650a248 100644
--- a/examples/checkout-platform-delta.html
+++ b/examples/checkout-platform-delta.html
@@ -3,6 +3,13 @@
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Checkout Platform — Fraud Gate Architecture Delta</title>
 <style>
 
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -4857,15 +4864,14 @@
       } catch (_) {}
     })();
   &lt;/script&gt;
-  &lt;!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. --&gt;
-  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
-  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap&quot;
-        rel=&quot;stylesheet&quot; media=&quot;print&quot; onload=&quot;this.media=&#39;all&#39;&quot;&gt;
-  &lt;noscript&gt;
-    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
-  &lt;/noscript&gt;
   &lt;style&gt;
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 400; src: local(&#39;JetBrains Mono&#39;), local(&#39;JetBrainsMono-Regular&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 500; src: local(&#39;JetBrains Mono Medium&#39;), local(&#39;JetBrainsMono-Medium&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 600; src: local(&#39;JetBrains Mono SemiBold&#39;), local(&#39;JetBrainsMono-SemiBold&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 700; src: local(&#39;JetBrains Mono Bold&#39;), local(&#39;JetBrainsMono-Bold&#39;); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on &lt;html&gt;
        ========================================================== */
@@ -10938,9 +10944,9 @@
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts &lt;link&gt; in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return &quot;@font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: &quot; + w +
                  &quot;; src: local(&#39;JetBrains Mono&#39;), local(&#39;JetBrainsMono-Regular&#39;); }&quot;;
@@ -19932,15 +19938,14 @@
       } catch (_) {}
     })();
   &lt;/script&gt;
-  &lt;!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. --&gt;
-  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
-  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap&quot;
-        rel=&quot;stylesheet&quot; media=&quot;print&quot; onload=&quot;this.media=&#39;all&#39;&quot;&gt;
-  &lt;noscript&gt;
-    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
-  &lt;/noscript&gt;
   &lt;style&gt;
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 400; src: local(&#39;JetBrains Mono&#39;), local(&#39;JetBrainsMono-Regular&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 500; src: local(&#39;JetBrains Mono Medium&#39;), local(&#39;JetBrainsMono-Medium&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 600; src: local(&#39;JetBrains Mono SemiBold&#39;), local(&#39;JetBrainsMono-SemiBold&#39;); }
+    @font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: 700; src: local(&#39;JetBrains Mono Bold&#39;), local(&#39;JetBrainsMono-Bold&#39;); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on &lt;html&gt;
        ========================================================== */
@@ -26018,9 +26023,9 @@
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts &lt;link&gt; in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return &quot;@font-face { font-family: &#39;JetBrains Mono&#39;; font-weight: &quot; + w +
                  &quot;; src: local(&#39;JetBrains Mono&#39;), local(&#39;JetBrainsMono-Regular&#39;); }&quot;;
@@ -34942,7 +34947,7 @@
   const status = document.querySelector('#review-status');
   const receiptNode = document.querySelector('#archify-compare-receipt');
   const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-  const exportCss = "\n    /* ==========================================================\n       THEME VARIABLES — switch by toggling [data-theme] on \u003chtml\u003e\n       ========================================================== */\n    :root,\n    [data-theme=\"dark\"] {\n      --bg: #020617;\n      --grid: #1e293b;\n      --text: #ffffff;\n      --text-muted: #94a3b8;\n      --text-dim: #475569;\n      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */\n      --text-faint: #7d8da1;\n\n      --panel: rgba(15, 23, 42, 0.5);\n      --panel-border: #1e293b;\n      --lane-fill: rgba(15, 23, 42, 0.22);\n      --lane-stroke: #334155;\n\n      --arrow: #64748b;\n      --arrow-emphasis: #34d399;\n\n      /* Opaque mask color used behind semi-transparent component fills\n         so the arrows drawn underneath are properly hidden. */\n      --mask: #0f172a;\n\n      --frontend-fill:    rgba(8, 51, 68, 0.4);\n      --frontend-stroke:  #22d3ee;\n      --backend-fill:     rgba(6, 78, 59, 0.4);\n      --backend-stroke:   #34d399;\n      --database-fill:    rgba(76, 29, 149, 0.4);\n      --database-stroke:  #a78bfa;\n      --cloud-fill:       rgba(120, 53, 15, 0.3);\n      --cloud-stroke:     #fbbf24;\n      --security-fill:    rgba(136, 19, 55, 0.4);\n      --security-stroke:  #fb7185;\n      --messagebus-fill:  rgba(251, 146, 60, 0.3);\n      --messagebus-stroke:#fb923c;\n      --external-fill:    rgba(30, 41, 59, 0.5);\n      --external-stroke:  #94a3b8;\n\n      --toolbar-bg:       rgba(15, 23, 42, 0.8);\n      --toolbar-border:   #334155;\n      --toolbar-text:     #e2e8f0;\n      --toolbar-hover:    rgba(15, 23, 42, 0.95);\n      --toolbar-menu-bg:  #0f172a;\n    }\n\n    [data-theme=\"light\"] {\n      --bg: #f8fafc;\n      --grid: #e2e8f0;\n      --text: #0f172a;\n      --text-muted: #64748b;\n      --text-dim: #94a3b8;\n      --text-faint: #64748b;\n\n      --panel: #ffffff;\n      --panel-border: #e2e8f0;\n      --lane-fill: rgba(248, 250, 252, 0.65);\n      --lane-stroke: #cbd5e1;\n\n      --arrow: #94a3b8;\n      --arrow-emphasis: #059669;\n\n      --mask: #ffffff;\n\n      --frontend-fill:    rgba(34, 211, 238, 0.15);\n      --frontend-stroke:  #0891b2;\n      --backend-fill:     rgba(52, 211, 153, 0.18);\n      --backend-stroke:   #059669;\n      --database-fill:    rgba(167, 139, 250, 0.2);\n      --database-stroke:  #7c3aed;\n      --cloud-fill:       rgba(251, 191, 36, 0.18);\n      --cloud-stroke:     #d97706;\n      --security-fill:    rgba(251, 113, 133, 0.15);\n      --security-stroke:  #e11d48;\n      --messagebus-fill:  rgba(251, 146, 60, 0.15);\n      --messagebus-stroke:#ea580c;\n      --external-fill:    rgba(148, 163, 184, 0.18);\n      --external-stroke:  #64748b;\n\n      --toolbar-bg:       rgba(255, 255, 255, 0.92);\n      --toolbar-border:   #cbd5e1;\n      --toolbar-text:     #334155;\n      --toolbar-hover:    #ffffff;\n      --toolbar-menu-bg:  #ffffff;\n    }\n\n    /* ==========================================================\n       SIGNAL FLOW — an opt-in, motion-forward visual preset.\n       The variables also target a standalone exported SVG, whose\n       root carries data-preset and data-theme directly.\n       ========================================================== */\n    [data-preset=\"signal-flow\"][data-theme=\"dark\"] {\n      --bg: #030711;\n      --grid: #15233a;\n      --panel: rgba(6, 14, 28, 0.78);\n      --panel-border: #1d3350;\n      --lane-fill: rgba(9, 22, 40, 0.5);\n      --lane-stroke: #2c4564;\n      --text: #f5fbff;\n      --text-muted: #9eb0c7;\n      --text-dim: #52667f;\n      --text-faint: #7890ad;\n      --mask: #07101e;\n      --frontend-fill: rgba(6, 182, 212, 0.14);\n      --frontend-stroke: #67e8f9;\n      --backend-fill: rgba(16, 185, 129, 0.14);\n      --backend-stroke: #5eead4;\n      --database-fill: rgba(139, 92, 246, 0.16);\n      --database-stroke: #c4b5fd;\n      --cloud-fill: rgba(245, 158, 11, 0.13);\n      --cloud-stroke: #fcd34d;\n      --security-fill: rgba(244, 63, 94, 0.13);\n      --security-stroke: #fda4af;\n      --messagebus-fill: rgba(249, 115, 22, 0.13);\n      --messagebus-stroke: #fdba74;\n      --external-fill: rgba(71, 85, 105, 0.24);\n      --external-stroke: #a5b4c7;\n      --arrow: #7890ad;\n      --arrow-emphasis: #2dd4bf;\n      --toolbar-bg: rgba(7, 16, 30, 0.86);\n      --toolbar-border: #29415f;\n      --toolbar-menu-bg: #07101e;\n    }\n\n    [data-preset=\"signal-flow\"][data-theme=\"light\"] {\n      --bg: #f4f9fc;\n      --grid: #d4e5ee;\n      --panel: rgba(255, 255, 255, 0.82);\n      --panel-border: #bfd5e2;\n      --lane-fill: rgba(232, 243, 248, 0.62);\n      --lane-stroke: #a9c5d5;\n      --text: #102638;\n      --text-muted: #587287;\n      --text-dim: #8aa2b4;\n      --text-faint: #668397;\n      --mask: #ffffff;\n      --frontend-fill: rgba(6, 182, 212, 0.09);\n      --frontend-stroke: #0789a1;\n      --backend-fill: rgba(5, 150, 105, 0.09);\n      --backend-stroke: #087f69;\n      --database-fill: rgba(124, 58, 237, 0.09);\n      --database-stroke: #7254c7;\n      --cloud-fill: rgba(217, 119, 6, 0.08);\n      --cloud-stroke: #b9670b;\n      --security-fill: rgba(225, 29, 72, 0.08);\n      --security-stroke: #c53a59;\n      --messagebus-fill: rgba(234, 88, 12, 0.08);\n      --messagebus-stroke: #c65f27;\n      --external-fill: rgba(100, 116, 139, 0.1);\n      --external-stroke: #607a8c;\n      --arrow: #7b97aa;\n      --arrow-emphasis: #0d9488;\n    }\n\n    /* ==========================================================\n       BLUEPRINT — a review-first drafting preset for deployment,\n       infrastructure, and technical design documentation. It keeps\n       the same semantic palette and geometry while trading glow for\n       precise grid contrast, squared materials, and drafting marks.\n       ========================================================== */\n    [data-preset=\"blueprint\"][data-theme=\"dark\"] {\n      --bg: #06131f;\n      --grid: #17425a;\n      --panel: rgba(7, 27, 43, 0.9);\n      --panel-border: #27627f;\n      --lane-fill: rgba(10, 43, 66, 0.36);\n      --lane-stroke: #34799a;\n      --text: #e3f6ff;\n      --text-muted: #91b8ca;\n      --text-dim: #557e92;\n      --text-faint: #739caf;\n      --mask: #0a2031;\n      --frontend-fill: rgba(26, 157, 193, 0.14);\n      --frontend-stroke: #66d9ef;\n      --backend-fill: rgba(31, 155, 124, 0.13);\n      --backend-stroke: #69dfbd;\n      --database-fill: rgba(120, 105, 196, 0.14);\n      --database-stroke: #b4a8ff;\n      --cloud-fill: rgba(197, 145, 43, 0.13);\n      --cloud-stroke: #ffd166;\n      --security-fill: rgba(199, 76, 104, 0.13);\n      --security-stroke: #ff8da1;\n      --messagebus-fill: rgba(207, 112, 49, 0.13);\n      --messagebus-stroke: #ffad66;\n      --external-fill: rgba(84, 119, 139, 0.18);\n      --external-stroke: #a7cad9;\n      --arrow: #78a3b7;\n      --arrow-emphasis: #64dfc1;\n      --toolbar-bg: rgba(7, 28, 45, 0.92);\n      --toolbar-border: #34799a;\n      --toolbar-text: #d8f3ff;\n      --toolbar-hover: rgba(18, 58, 83, 0.95);\n      --toolbar-menu-bg: #0a2031;\n    }\n\n    [data-preset=\"blueprint\"][data-theme=\"light\"] {\n      --bg: #edf7fa;\n      --grid: #b5d5e1;\n      --panel: rgba(249, 253, 255, 0.94);\n      --panel-border: #78aabd;\n      --lane-fill: rgba(210, 232, 240, 0.42);\n      --lane-stroke: #83b2c4;\n      --text: #123344;\n      --text-muted: #4e7486;\n      --text-dim: #86a6b4;\n      --text-faint: #668c9d;\n      --mask: #f9fdff;\n      --frontend-fill: rgba(8, 145, 178, 0.08);\n      --frontend-stroke: #087f9c;\n      --backend-fill: rgba(5, 128, 101, 0.08);\n      --backend-stroke: #08755f;\n      --database-fill: rgba(100, 75, 180, 0.08);\n      --database-stroke: #6757a8;\n      --cloud-fill: rgba(181, 120, 15, 0.08);\n      --cloud-stroke: #a86609;\n      --security-fill: rgba(190, 48, 80, 0.07);\n      --security-stroke: #b32f50;\n      --messagebus-fill: rgba(196, 81, 22, 0.07);\n      --messagebus-stroke: #b65120;\n      --external-fill: rgba(79, 112, 128, 0.08);\n      --external-stroke: #506f7e;\n      --arrow: #6d93a5;\n      --arrow-emphasis: #087f69;\n      --toolbar-bg: rgba(247, 252, 254, 0.94);\n      --toolbar-border: #8ab5c5;\n      --toolbar-text: #294f61;\n      --toolbar-hover: #ffffff;\n      --toolbar-menu-bg: #f9fdff;\n    }\n\n    /* ==========================================================\n       EDITORIAL — a warm, publication-minded preset for design\n       reviews, launch notes, and documentation. The diagram keeps\n       the same semantic palette and exact geometry, but trades\n       software chrome for paper, ink, ruled structure, and one\n       restrained vermilion accent.\n       ========================================================== */\n    [data-preset=\"editorial\"][data-theme=\"dark\"] {\n      --bg: #181611;\n      --grid: #39342a;\n      --panel: rgba(35, 31, 24, 0.96);\n      --panel-border: #625a4a;\n      --lane-fill: rgba(52, 46, 35, 0.46);\n      --lane-stroke: #726957;\n      --text: #f4eddf;\n      --text-muted: #b9ae9b;\n      --text-dim: #776e60;\n      --text-faint: #9d917e;\n      --mask: #231f18;\n      --frontend-fill: rgba(43, 133, 142, 0.16);\n      --frontend-stroke: #7fc6c7;\n      --backend-fill: rgba(63, 132, 92, 0.16);\n      --backend-stroke: #8fc29e;\n      --database-fill: rgba(117, 91, 141, 0.17);\n      --database-stroke: #c0a4d0;\n      --cloud-fill: rgba(170, 119, 49, 0.16);\n      --cloud-stroke: #d8ad68;\n      --security-fill: rgba(157, 69, 65, 0.17);\n      --security-stroke: #df9085;\n      --messagebus-fill: rgba(174, 79, 42, 0.16);\n      --messagebus-stroke: #df946f;\n      --external-fill: rgba(126, 115, 96, 0.18);\n      --external-stroke: #b8ad99;\n      --arrow: #948978;\n      --arrow-emphasis: #dd6b3d;\n      --toolbar-bg: rgba(35, 31, 24, 0.92);\n      --toolbar-border: #625a4a;\n      --toolbar-text: #eee5d5;\n      --toolbar-hover: #302a20;\n      --toolbar-menu-bg: #231f18;\n    }\n\n    [data-preset=\"editorial\"][data-theme=\"light\"] {\n      --bg: #f2eee5;\n      --grid: #d8d0c2;\n      --panel: rgba(251, 248, 241, 0.97);\n      --panel-border: #c4b9a6;\n      --lane-fill: rgba(229, 221, 207, 0.42);\n      --lane-stroke: #b8aa94;\n      --text: #242018;\n      --text-muted: #6f6658;\n      --text-dim: #a09788;\n      --text-faint: #817767;\n      --mask: #fbf8f1;\n      --frontend-fill: rgba(31, 117, 126, 0.09);\n      --frontend-stroke: #287e84;\n      --backend-fill: rgba(42, 119, 75, 0.09);\n      --backend-stroke: #397b53;\n      --database-fill: rgba(105, 75, 130, 0.09);\n      --database-stroke: #765d86;\n      --cloud-fill: rgba(157, 103, 31, 0.1);\n      --cloud-stroke: #9a671f;\n      --security-fill: rgba(153, 58, 52, 0.09);\n      --security-stroke: #9e463f;\n      --messagebus-fill: rgba(182, 70, 27, 0.09);\n      --messagebus-stroke: #ad4b25;\n      --external-fill: rgba(101, 91, 75, 0.09);\n      --external-stroke: #746b5e;\n      --arrow: #8a806f;\n      --arrow-emphasis: #bb4c23;\n      --toolbar-bg: rgba(251, 248, 241, 0.94);\n      --toolbar-border: #c4b9a6;\n      --toolbar-text: #40392f;\n      --toolbar-hover: #fffdf8;\n      --toolbar-menu-bg: #fbf8f1;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n\n    body {\n      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', 'Noto Sans Mono CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', monospace;\n      background: var(--bg);\n      min-height: 100vh;\n      padding: 2rem;\n      color: var(--text);\n      transition: background 0.2s ease, color 0.2s ease;\n    }\n\n    html[data-preset=\"signal-flow\"] body {\n      background-image:\n        radial-gradient(circle at 18% -8%, rgba(34, 211, 238, 0.14), transparent 34rem),\n        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.12), transparent 30rem);\n      background-attachment: fixed;\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] body {\n      background-image:\n        radial-gradient(circle at 18% -8%, rgba(6, 182, 212, 0.12), transparent 34rem),\n        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.08), transparent 30rem);\n    }\n    html[data-preset=\"blueprint\"] body {\n      background-image:\n        linear-gradient(var(--grid) 1px, transparent 1px),\n        linear-gradient(90deg, var(--grid) 1px, transparent 1px);\n      background-size: 32px 32px;\n      background-position: -1px -1px;\n      background-attachment: fixed;\n    }\n    html[data-preset=\"editorial\"] body {\n      background-image:\n        linear-gradient(90deg, transparent 0, transparent 5.4rem, color-mix(in srgb, var(--security-stroke) 18%, transparent) 5.4rem, color-mix(in srgb, var(--security-stroke) 18%, transparent) calc(5.4rem + 1px), transparent calc(5.4rem + 1px)),\n        repeating-linear-gradient(0deg, transparent 0, transparent 31px, color-mix(in srgb, var(--grid) 36%, transparent) 31px, color-mix(in srgb, var(--grid) 36%, transparent) 32px);\n      background-attachment: fixed;\n    }\n\n    /* Gallery/embed mode keeps the generated artifact as the source of truth\n       while presenting only its diagram surface inside a proof card. */\n    html[data-embed=\"true\"] body {\n      min-height: 0;\n      padding: 0;\n      overflow: hidden;\n      background: var(--bg);\n      background-image: none;\n    }\n    html[data-embed=\"true\"] .toolbar,\n    html[data-embed=\"true\"] .header,\n    html[data-embed=\"true\"] .cards,\n    html[data-embed=\"true\"] .diagram-nav,\n    html[data-embed=\"true\"] .overview-map,\n    html[data-embed=\"true\"] .focus-chip,\n    html[data-embed=\"true\"] .route-probe,\n    html[data-embed=\"true\"] .semantic-lens,\n    html[data-embed=\"true\"] .diagram-guide,\n    html[data-embed=\"true\"] .node-finder,\n    html[data-embed=\"true\"] .guided-views { display: none !important; }\n    html[data-embed=\"true\"] .container { max-width: none; }\n    html[data-embed=\"true\"] .diagram-container {\n      padding: 0.5rem;\n      border: 0;\n      border-radius: 0;\n      box-shadow: none;\n    }\n    html[data-embed=\"true\"] .diagram-container svg { min-width: 0; }\n\n    /* Share Chapter Cue lives in the HTML viewer layer, not inside the SVG.\n       It gives one-shot embeds a title, authored note, truthful stop order,\n       and lifecycle state while canonical diagram geometry stays untouched. */\n    .share-chapter-cue { display: none; }\n    html[data-embed=\"true\"][data-share-playback=\"true\"] .share-chapter-cue:not([hidden]),\n    html[data-embed=\"true\"][data-share-moment=\"true\"] .share-chapter-cue:not([hidden]) {\n      position: absolute;\n      z-index: 18;\n      top: 0.85rem;\n      left: 50%;\n      display: grid;\n      grid-template-columns: auto minmax(9rem, 13.5rem) minmax(0, 1fr);\n      align-items: center;\n      gap: 0.45rem 0.85rem;\n      width: min(52rem, calc(100% - 1.5rem));\n      min-height: 3.35rem;\n      padding: 0.55rem 0.75rem 0.65rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));\n      border-radius: 0.75rem;\n      background:\n        linear-gradient(115deg, color-mix(in srgb, var(--frontend-fill) 52%, transparent), transparent 45%),\n        color-mix(in srgb, var(--toolbar-menu-bg) 92%, transparent);\n      color: var(--toolbar-text);\n      box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);\n      backdrop-filter: blur(16px);\n      pointer-events: none;\n      animation: archify-share-cue-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    html[data-preset=\"blueprint\"] .share-chapter-cue {\n      border-radius: 0.2rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 46%, transparent), transparent 36%),\n        var(--toolbar-menu-bg);\n      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);\n      backdrop-filter: none;\n    }\n    html[data-preset=\"editorial\"] .share-chapter-cue {\n      border-color: var(--panel-border);\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 42%),\n        var(--toolbar-menu-bg);\n      box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);\n      backdrop-filter: none;\n    }\n    html[data-preset=\"editorial\"] .share-chapter-state { color: var(--arrow-emphasis); }\n    html[data-preset=\"editorial\"] .share-chapter-state::before {\n      border-radius: 0;\n      box-shadow: none;\n      transform: rotate(45deg) scale(0.8);\n    }\n    .share-chapter-index {\n      display: grid;\n      gap: 0.12rem;\n      min-width: 5rem;\n      padding-right: 0.75rem;\n      border-right: 1px solid var(--toolbar-border);\n    }\n    .share-chapter-state {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.36rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n    }\n    .share-chapter-state::before {\n      width: 0.38rem;\n      height: 0.38rem;\n      border-radius: 50%;\n      background: currentColor;\n      box-shadow: 0 0 10px currentColor;\n      content: '';\n    }\n    .share-chapter-cue[data-state=\"playing\"] .share-chapter-state::before {\n      animation: archify-share-cue-pulse 1.15s ease-in-out infinite;\n    }\n    .share-chapter-count {\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .share-chapter-copy { min-width: 0; }\n    .share-chapter-copy strong,\n    .share-chapter-copy small,\n    .share-chapter-route {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .share-chapter-copy strong {\n      color: var(--toolbar-text);\n      font-size: 0.6875rem;\n      line-height: 1.35;\n    }\n    .share-chapter-copy small {\n      margin-top: 0.08rem;\n      color: var(--text-muted);\n      font-size: 0.5rem;\n      line-height: 1.35;\n    }\n    .share-chapter-route {\n      color: color-mix(in srgb, var(--frontend-stroke) 76%, var(--text-muted));\n      font-size: 0.5625rem;\n      font-weight: 650;\n      letter-spacing: 0.015em;\n      text-align: right;\n    }\n    .share-chapter-progress {\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      overflow: hidden;\n      background: color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    .share-chapter-progress span {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, var(--frontend-stroke), var(--database-stroke));\n      box-shadow: 0 0 12px var(--frontend-stroke);\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n\n    /* Presentation Stage is a viewer-only layer: it gives the live diagram\n       the viewport while keeping guided views, theme, focus, and exports real.\n       Embed mode wins when both query parameters are present. */\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) body {\n      height: 100dvh;\n      min-height: 0;\n      padding: 1rem;\n      overflow: hidden;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .container {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      width: 100%;\n      max-width: none;\n      height: calc(100dvh - 2rem);\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .header {\n      flex: none;\n      min-width: 0;\n      margin: 0;\n      padding-right: 23rem;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row { margin-bottom: 0.25rem; }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .subtitle {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views {\n      flex: none;\n      margin-bottom: 0;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container {\n      display: flex;\n      flex: 1 1 auto;\n      align-items: center;\n      justify-content: center;\n      min-height: 0;\n      padding: 0.75rem;\n      padding-bottom: calc(0.75rem + var(--archify-nav-reserve));\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container \u003e svg {\n      flex: 1 1 auto;\n      height: 100%;\n      min-height: 0;\n      width: 100%;\n      min-width: 0;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .cards { display: none; }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) #btn-present {\n      border-color: var(--frontend-stroke);\n      color: var(--frontend-stroke);\n    }\n\n    /* The reader owns only the outer scale. Wide diagrams keep one authored\n       SVG/viewBox while the runtime chooses a desktop width from the actual\n       vertical budget. This avoids device-specific files and breakpoint\n       jumps between a laptop and a tall monitor. */\n    .container {\n      width: 100%;\n      max-width: var(--archify-reader-width, 1440px);\n      margin: 0 auto;\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      .header { margin-bottom: 1rem; }\n      .diagram-container { padding: 1rem; }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n\n    .header { margin-bottom: 1.5rem; padding-right: 29.5rem; }\n\n    html[data-preset=\"signal-flow\"] .header,\n    html[data-preset=\"blueprint\"] .header,\n    html[data-preset=\"editorial\"] .header { padding-right: 29.5rem; }\n\n    .header-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-bottom: 0.5rem;\n    }\n\n    .pulse-dot {\n      width: 12px;\n      height: 12px;\n      background: var(--frontend-stroke);\n      border-radius: 50%;\n      animation: none;\n    }\n\n    html[data-motion-capable=\"true\"] .pulse-dot { animation: pulse 2s infinite; }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    h1 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      letter-spacing: -0.025em;\n    }\n\n    .subtitle {\n      color: var(--text-muted);\n      font-size: 0.875rem;\n      margin-left: 1.75rem;\n    }\n\n    html[data-preset=\"signal-flow\"] .header-row::after {\n      content: attr(data-preset-badge-signal-flow);\n      margin-left: auto;\n      color: var(--frontend-stroke);\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 999px;\n      padding: 0.28rem 0.6rem;\n      font-size: 0.625rem;\n      letter-spacing: 0.12em;\n      opacity: 0.82;\n      box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);\n      white-space: nowrap;\n    }\n\n    html[data-preset=\"blueprint\"] .pulse-dot {\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 1px;\n      background: transparent;\n      box-shadow: inset 0 0 0 2px var(--bg);\n      transform: rotate(45deg);\n      animation: none;\n    }\n    html[data-preset=\"blueprint\"] .header-row::after {\n      content: attr(data-preset-badge-blueprint);\n      margin-left: auto;\n      padding: 0.28rem 0.55rem;\n      border-top: 1px solid var(--frontend-stroke);\n      border-bottom: 1px solid var(--frontend-stroke);\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 700;\n      letter-spacing: 0.14em;\n      white-space: nowrap;\n    }\n\n    html[data-preset=\"editorial\"] h1,\n    html[data-preset=\"editorial\"] .card h3 {\n      font-family: Georgia, 'Times New Roman', 'Songti SC', STSong, serif;\n      letter-spacing: -0.02em;\n    }\n    html[data-preset=\"editorial\"] h1 { font-size: 1.72rem; font-weight: 600; }\n    html[data-preset=\"editorial\"] .pulse-dot {\n      width: 9px;\n      height: 9px;\n      border: 1px solid var(--arrow-emphasis);\n      border-radius: 0;\n      background: var(--arrow-emphasis);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);\n      transform: rotate(45deg);\n      animation: none;\n    }\n    html[data-preset=\"editorial\"] .header-row::after {\n      content: attr(data-preset-badge-editorial);\n      margin-left: auto;\n      padding: 0.32rem 0 0.24rem;\n      border-bottom: 2px solid var(--arrow-emphasis);\n      color: var(--arrow-emphasis);\n      font-family: Georgia, 'Times New Roman', serif;\n      font-size: 0.625rem;\n      font-style: italic;\n      font-weight: 600;\n      letter-spacing: 0.08em;\n      white-space: nowrap;\n    }\n\n    .diagram-container {\n      --archify-nav-reserve: 0px;\n      background: var(--panel);\n      border-radius: 1rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.5rem;\n      padding-bottom: calc(1.5rem + var(--archify-nav-reserve));\n      overflow: hidden;\n      position: relative;\n    }\n\n    html[data-preset=\"signal-flow\"] .diagram-container {\n      position: relative;\n      overflow: hidden;\n      background: linear-gradient(180deg, rgba(8, 20, 38, 0.82), rgba(3, 8, 18, 0.94));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.34);\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] .diagram-container {\n      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(237, 246, 250, 0.94));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 60px rgba(45, 78, 99, 0.12);\n    }\n    html[data-preset=\"blueprint\"] .diagram-container {\n      border-color: var(--panel-border);\n      border-radius: 0.35rem;\n      background: var(--panel);\n      box-shadow:\n        inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 34%, transparent),\n        0 18px 48px rgba(0, 0, 0, 0.16);\n    }\n    html[data-preset=\"blueprint\"] .diagram-container::after {\n      content: \"\";\n      position: absolute;\n      z-index: 10;\n      inset: 0.7rem;\n      pointer-events: none;\n      background:\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1px 1.35rem no-repeat;\n      opacity: 0.58;\n    }\n    html[data-preset=\"editorial\"] .diagram-container {\n      overflow: hidden;\n      border-color: var(--panel-border);\n      border-radius: 0.38rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 12%),\n        var(--panel);\n      box-shadow:\n        0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),\n        0 18px 48px color-mix(in srgb, #000 19%, transparent);\n    }\n    html[data-preset=\"editorial\"] .diagram-container::after {\n      position: absolute;\n      z-index: 10;\n      top: 0.72rem;\n      right: 1.25rem;\n      padding: 0.2rem 0.52rem;\n      border: 1px solid var(--panel-border);\n      background: var(--panel);\n      color: var(--arrow-emphasis);\n      content: attr(data-preset-badge-editorial-plate);\n      font-family: Georgia, 'Times New Roman', serif;\n      font-size: 0.52rem;\n      font-style: italic;\n      font-weight: 600;\n      letter-spacing: 0.09em;\n      pointer-events: none;\n    }\n    html[data-embed=\"true\"][data-preset=\"editorial\"] .diagram-container::after { display: none; }\n    html[data-motion-capable=\"true\"][data-preset=\"signal-flow\"][data-ambient-motion=\"running\"] .diagram-container::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      background: linear-gradient(115deg, transparent 28%, rgba(103, 232, 249, 0.035) 48%, transparent 68%);\n      transform: translateX(-70%);\n      animation: archify-signal-scan 4.8s ease-in-out 1 both;\n    }\n\n    /* Motion Governor gives the reader a real static state and gives the\n       strongest semantic action the only motion budget. Atmosphere resets to\n       its authored base instead of freezing mid-cycle. Static artifacts never\n       start a decorative pulse or scan. */\n    html:not([data-motion-capable=\"true\"]) svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .pulse-dot,\n    html[data-motion=\"still\"] .diagram-container::before,\n    html[data-motion=\"still\"] svg[data-animation=\"trace\"] [data-animate],\n    html[data-motion-owner] .pulse-dot,\n    html[data-motion-owner] .diagram-container::before,\n    html[data-motion-owner] svg[data-animation=\"trace\"] [data-animate],\n    html[data-embed=\"true\"] .pulse-dot,\n    html[data-embed=\"true\"] .diagram-container::before,\n    html[data-share-playback=\"true\"] .pulse-dot,\n    html[data-share-playback=\"true\"] .diagram-container::before,\n    html[data-document-hidden=\"true\"] .pulse-dot,\n    html[data-document-hidden=\"true\"] .diagram-container::before,\n    html[data-document-hidden=\"true\"] svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .diagram-container::before,\n    html[data-motion-owner] .diagram-container::before,\n    html[data-embed=\"true\"] .diagram-container::before,\n    html[data-share-playback=\"true\"] .diagram-container::before {\n      opacity: 0;\n    }\n    html[data-motion=\"still\"] .guided-view-progress span,\n    html[data-motion=\"still\"] .guided-story-caption,\n    html[data-motion=\"still\"] .story-trail-flow,\n    html[data-motion=\"still\"] .intent-trace-flow,\n    html[data-motion=\"still\"] .route-probe-flow,\n    html[data-motion=\"still\"] .route-journey-flow,\n    html[data-motion=\"still\"] .semantic-lens-flow,\n    html[data-motion=\"still\"] .diagram-guide,\n    html[data-motion=\"still\"] [data-story-step],\n    html[data-motion=\"still\"] .overview-map-live,\n    html[data-motion=\"still\"] .guided-view-stop,\n    html[data-motion=\"still\"] .share-chapter-cue,\n    html[data-motion=\"still\"] .share-chapter-state::before,\n    html[data-motion=\"still\"] .share-chapter-progress span,\n    html[data-document-hidden=\"true\"] .guided-view-progress span,\n    html[data-document-hidden=\"true\"] .story-trail-flow,\n    html[data-document-hidden=\"true\"] .intent-trace-flow,\n    html[data-document-hidden=\"true\"] .route-probe-flow,\n    html[data-document-hidden=\"true\"] .route-journey-flow,\n    html[data-document-hidden=\"true\"] .semantic-lens-flow,\n    html[data-document-hidden=\"true\"] .diagram-guide,\n    html[data-document-hidden=\"true\"] [data-story-step],\n    html[data-document-hidden=\"true\"] .overview-map-live,\n    html[data-document-hidden=\"true\"] .guided-view-stop,\n    html[data-document-hidden=\"true\"] .share-chapter-cue,\n    html[data-document-hidden=\"true\"] .share-chapter-state::before,\n    html[data-document-hidden=\"true\"] .share-chapter-progress span {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .guided-view-progress span {\n      transform: scaleX(1) !important;\n    }\n    html[data-motion=\"still\"] svg[data-story-playing=\"true\"] .story-trail-flow {\n      stroke-dasharray: none;\n      stroke-dashoffset: 0;\n      opacity: 0.55;\n    }\n    html[data-motion=\"still\"] .intent-trace-flow,\n    html[data-motion=\"still\"] .route-probe-flow {\n      stroke-dasharray: none;\n      stroke-dashoffset: 0;\n      opacity: 0.72;\n    }\n    html[data-motion=\"still\"] .route-journey-overlay,\n    html[data-document-hidden=\"true\"] .route-journey-overlay { display: none !important; }\n    html[data-motion=\"still\"] .relationship-pulse-overlay,\n    html[data-motion=\"still\"] .story-carrier-overlay,\n    html[data-document-hidden=\"true\"] .story-carrier-overlay { display: none !important; }\n    html[data-motion=\"still\"] .chapter-handoff-overlay { display: none !important; }\n    html[data-motion=\"still\"] .chapter-handoff-anchor { animation: none !important; }\n    html[data-motion=\"still\"] .guided-view-chapter,\n    html[data-motion=\"still\"] svg [data-node-id],\n    html[data-motion=\"still\"] svg [data-edge-from],\n    html[data-motion=\"still\"] svg [data-detail],\n    html[data-motion=\"still\"] svg [data-detail-anchor],\n    html[data-motion=\"still\"] svg [data-legend-hit],\n    html[data-motion=\"still\"] svg {\n      transition: none !important;\n    }\n\n    svg {\n      width: 100%;\n      min-width: min(900px, 100%);\n      display: block;\n      transform-origin: 0 0;\n      transition: transform 0.18s ease;\n    }\n\n    .diagram-container.is-camera-moving svg {\n      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .diagram-container.is-camera-transaction svg { transition: none; }\n    .diagram-container.is-pannable { cursor: grab; }\n    .diagram-container.is-panning { cursor: grabbing; user-select: none; }\n    .diagram-container.is-panning svg { transition: none; }\n\n    .diagram-nav {\n      position: absolute;\n      right: 1rem;\n      bottom: 1rem;\n      z-index: 12;\n      display: inline-flex;\n      align-items: center;\n      max-width: calc(100% - 2rem);\n      padding: 0.15rem;\n      gap: 0;\n      overflow-x: auto;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 48%, transparent);\n      border-radius: 0.58rem;\n      background: color-mix(in srgb, var(--toolbar-bg) 82%, transparent);\n      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);\n      backdrop-filter: blur(10px);\n      scrollbar-width: none;\n    }\n    .diagram-nav::-webkit-scrollbar { display: none; }\n    .diagram-nav button,\n    .focus-chip button,\n    .guided-views button {\n      border: 0;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      cursor: pointer;\n    }\n    .diagram-nav button {\n      min-width: 2rem;\n      height: 2rem;\n      padding: 0 0.35rem;\n      border-radius: 0.35rem;\n      color: color-mix(in srgb, var(--toolbar-text) 68%, transparent);\n      font-size: 0.56rem;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      transition: background 0.15s, color 0.15s;\n    }\n    .diagram-nav button:hover,\n    .diagram-nav button:focus-visible,\n    .focus-chip button:hover,\n    .focus-chip button:focus-visible,\n    .guided-views button:hover,\n    .guided-views button:focus-visible { background: var(--toolbar-hover); }\n    .diagram-nav button:focus-visible,\n    .focus-chip button:focus-visible,\n    .guided-views button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .diagram-nav button:disabled { opacity: 0.38; cursor: default; }\n    .diagram-nav button:disabled:hover { background: transparent; }\n    .diagram-nav #btn-route-probe,\n    .diagram-nav #btn-overview-map,\n    .diagram-nav #btn-semantic-lens {\n      min-width: auto;\n      padding-inline: 0.5rem;\n      color: color-mix(in srgb, var(--toolbar-text) 86%, transparent);\n      font-weight: 650;\n    }\n    .diagram-nav #btn-node-finder,\n    .diagram-nav [data-view=\"out\"] {\n      position: relative;\n      margin-left: 0.25rem;\n    }\n    .diagram-nav #btn-node-finder::before,\n    .diagram-nav [data-view=\"out\"]::before {\n      position: absolute;\n      top: 0.4rem;\n      bottom: 0.4rem;\n      left: -0.13rem;\n      width: 1px;\n      background: color-mix(in srgb, var(--toolbar-border) 62%, transparent);\n      content: \"\";\n      pointer-events: none;\n    }\n    .diagram-nav-icon {\n      display: block;\n      width: 0.72rem;\n      height: 0.72rem;\n      margin: auto;\n      background: currentColor;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .diagram-nav-icon.find {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='4.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m12 12 4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='4.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m12 12 4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.guide {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.8 7.3a2.4 2.4 0 014.6.9c0 1.8-2.4 2-2.4 3.7M10 14.9h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.8 7.3a2.4 2.4 0 014.6.9c0 1.8-2.4 2-2.4 3.7M10 14.9h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.minus {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.plus {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav [data-view=\"reset\"] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.2rem;\n      min-width: 3.1rem;\n      padding-inline: 0.35rem;\n    }\n    .diagram-nav [data-view=\"reset\"][data-detail-visible] {\n      min-width: 3.8rem;\n    }\n    .diagram-nav-detail {\n      color: color-mix(in srgb, var(--toolbar-text) 52%, transparent);\n      font-size: 0.44rem;\n      font-weight: 700;\n      line-height: 1;\n      letter-spacing: 0.07em;\n    }\n    .diagram-nav-percent {\n      color: color-mix(in srgb, var(--toolbar-text) 84%, transparent);\n      font-size: 0.55rem;\n      font-weight: 650;\n      line-height: 1;\n    }\n    .diagram-container[data-camera-indicator=\"true\"] .diagram-nav-detail,\n    .diagram-container[data-camera-indicator=\"true\"] .diagram-nav-percent { color: var(--frontend-stroke); }\n    .diagram-nav #btn-diagram-guide[aria-expanded=\"true\"] {\n      color: var(--cloud-stroke);\n      background: var(--toolbar-hover);\n    }\n\n    /* Semantic Radar is a deliberately simplified, viewer-only overview. It\n       uses authored node bounds and the live camera viewport rather than\n       cloning the canonical SVG, so IDs, filters, animation, and export state\n       stay singular and deterministic. */\n    .overview-map {\n      position: absolute;\n      right: 1rem;\n      bottom: calc(4.15rem + var(--archify-nav-reserve));\n      z-index: 12;\n      width: 11.25rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      border-radius: 0.78rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.625rem;\n    }\n    .overview-map[hidden] { display: none; }\n    .overview-map[data-docked=\"true\"] {\n      position: fixed;\n      right: var(--archify-radar-right, 1rem);\n      top: var(--archify-radar-top, 1rem);\n      bottom: auto;\n    }\n    .overview-map[data-docked=\"true\"][data-dock-side=\"left\"] {\n      right: auto;\n      left: var(--archify-radar-left, 1rem);\n    }\n    html[data-preset=\"blueprint\"] .overview-map { border-radius: 0.28rem; }\n    .overview-map-head {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.45rem;\n      min-height: 2.25rem;\n      padding: 0.42rem 0.48rem 0.38rem 0.55rem;\n      border-bottom: 1px solid var(--toolbar-border);\n      background: linear-gradient(110deg, color-mix(in srgb, var(--frontend-fill) 45%, transparent), transparent 68%);\n      cursor: grab;\n      touch-action: none;\n      user-select: none;\n    }\n    .overview-map[data-panel-dragging=\"true\"] .overview-map-head { cursor: grabbing; }\n    .overview-map[data-placement-invalid=\"true\"] {\n      border-color: var(--security-stroke);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--security-stroke) 34%, transparent), 0 16px 42px rgba(0, 0, 0, 0.3);\n    }\n    .overview-map[data-compact=\"true\"] {\n      width: 7.4rem;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-head {\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.24rem;\n      min-height: 1.5rem;\n      padding: 0.05rem 0.16rem 0.05rem 0.32rem;\n      border-bottom: 0;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-live,\n    .overview-map[data-compact=\"true\"] .overview-map-copy,\n    .overview-map[data-compact=\"true\"] .overview-map-surface,\n    .overview-map[data-compact=\"true\"] .overview-map-hint {\n      display: none;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-expand { display: inline-flex; }\n    .overview-map[data-compact=\"true\"] .overview-map-close {\n      width: 1.15rem;\n      height: 1.15rem;\n      font-size: 0.72rem;\n    }\n    .overview-map-live {\n      width: 0.42rem;\n      height: 0.42rem;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent);\n      animation: archify-radar-live 2.4s ease-out infinite;\n    }\n    .overview-map-copy { min-width: 0; line-height: 1.1; }\n    .overview-map-copy strong {\n      display: block;\n      overflow: hidden;\n      color: var(--frontend-stroke);\n      font-size: 0.59rem;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .overview-map-copy small {\n      display: block;\n      margin-top: 0.18rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.52rem;\n      letter-spacing: 0.04em;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .overview-map-expand {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      min-width: 0;\n      height: 1.2rem;\n      padding: 0 0.34rem;\n      overflow: hidden;\n      border: 0;\n      border-radius: 0.3rem;\n      background: transparent;\n      color: var(--frontend-stroke);\n      font: inherit;\n      font-size: 0.49rem;\n      font-weight: 700;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n      cursor: pointer;\n    }\n    .overview-map-close {\n      width: 1.55rem;\n      height: 1.55rem;\n      padding: 0;\n      border: 0;\n      border-radius: 0.34rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 0.9rem;\n      cursor: pointer;\n    }\n    .overview-map-expand:hover,\n    .overview-map-expand:focus-visible,\n    .overview-map-close:hover,\n    .overview-map-close:focus-visible { background: var(--toolbar-hover); }\n    .overview-map-expand:focus-visible,\n    .overview-map-close:focus-visible,\n    .overview-map-surface:focus-visible,\n    .overview-map-node:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .overview-map-surface {\n      position: relative;\n      height: 7rem;\n      margin: 0.42rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);\n      border-radius: 0.42rem;\n      background:\n        linear-gradient(color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),\n        linear-gradient(90deg, color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),\n        color-mix(in srgb, var(--bg) 86%, transparent);\n      background-size: 12px 12px;\n      cursor: crosshair;\n      touch-action: none;\n    }\n    html[data-preset=\"blueprint\"] .overview-map-surface { border-radius: 0.1rem; }\n    .overview-map-surface \u003e svg {\n      width: 100%;\n      height: 100%;\n      min-width: 0;\n      transform: none !important;\n      transition: none !important;\n      display: block;\n      overflow: visible;\n    }\n    .overview-map-node {\n      fill: var(--backend-stroke);\n      fill-opacity: 0.52;\n      stroke: var(--backend-stroke);\n      stroke-opacity: 0.86;\n      vector-effect: non-scaling-stroke;\n      cursor: pointer;\n      transition: fill-opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;\n    }\n    .overview-map-node[data-kind=\"frontend\"],\n    .overview-map-node[data-kind=\"start\"] { fill: var(--frontend-stroke); stroke: var(--frontend-stroke); }\n    .overview-map-node[data-kind=\"database\"],\n    .overview-map-node[data-kind=\"success\"] { fill: var(--database-stroke); stroke: var(--database-stroke); }\n    .overview-map-node[data-kind=\"cloud\"],\n    .overview-map-node[data-kind=\"waiting\"] { fill: var(--cloud-stroke); stroke: var(--cloud-stroke); }\n    .overview-map-node[data-kind=\"messagebus\"] { fill: var(--messagebus-stroke); stroke: var(--messagebus-stroke); }\n    .overview-map-node[data-kind=\"security\"],\n    .overview-map-node[data-kind=\"decision\"],\n    .overview-map-node[data-kind=\"failure\"] { fill: var(--security-stroke); stroke: var(--security-stroke); }\n    .overview-map-node[data-kind=\"external\"],\n    .overview-map-node[data-kind=\"neutral\"] { fill: var(--external-stroke); stroke: var(--external-stroke); }\n    .overview-map-node[data-radar-active=\"true\"],\n    .overview-map-node:hover,\n    .overview-map-node:focus-visible {\n      fill-opacity: 0.92;\n      stroke-width: 2.2;\n      filter: drop-shadow(0 0 3px currentColor);\n    }\n    .overview-map-viewport {\n      fill: color-mix(in srgb, var(--frontend-fill) 56%, transparent);\n      stroke: var(--frontend-stroke);\n      stroke-width: 2;\n      vector-effect: non-scaling-stroke;\n      pointer-events: none;\n      filter: drop-shadow(0 0 3px color-mix(in srgb, var(--frontend-stroke) 54%, transparent));\n    }\n    .overview-map-hint {\n      display: flex;\n      justify-content: space-between;\n      gap: 0.5rem;\n      padding: 0 0.52rem 0.46rem;\n      color: var(--text-faint);\n      font-size: 0.49rem;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n    }\n    .diagram-nav #btn-overview-map[aria-expanded=\"true\"] {\n      color: var(--frontend-stroke);\n      background: var(--toolbar-hover);\n    }\n    .overview-map-feedback {\n      position: absolute;\n      right: 1rem;\n      bottom: 4.15rem;\n      z-index: 13;\n      max-width: min(16rem, calc(100% - 2rem));\n      padding: 0.38rem 0.55rem;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      border-radius: 0.5rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n      font-size: 0.52rem;\n      line-height: 1.35;\n      pointer-events: none;\n    }\n    .overview-map-feedback[hidden] { display: none; }\n    .focus-chip[data-radar-yielded=\"true\"] { display: none !important; }\n    .diagram-nav #btn-route-probe[aria-pressed=\"true\"] {\n      color: var(--backend-stroke);\n      background: var(--toolbar-hover);\n    }\n    .diagram-nav #btn-semantic-lens[aria-expanded=\"true\"],\n    .diagram-nav #btn-semantic-lens[aria-pressed=\"true\"] {\n      color: var(--database-stroke);\n      background: var(--toolbar-hover);\n    }\n\n    /* Semantic Lens turns the compiled node-kind palette into an analytical\n       legend. One kind reveals its real traffic; two kinds compare only their\n       direct authored relationships. Geometry and the canonical SVG stay put. */\n    .semantic-lens {\n      position: absolute;\n      right: 1rem;\n      bottom: calc(4.15rem + var(--archify-nav-reserve));\n      z-index: 24;\n      width: min(20rem, calc(100% - 2rem));\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--database-stroke) 58%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(135deg, color-mix(in srgb, var(--database-fill) 34%, transparent), transparent 48%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);\n      backdrop-filter: blur(18px);\n      animation: archify-lens-in 180ms cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .semantic-lens[hidden] { display: none; }\n    .semantic-lens[data-dock-side=\"left\"] { left: 1rem; right: auto; }\n    .semantic-lens[data-dock-side=\"right\"] { left: auto; right: 1rem; }\n    html[data-preset=\"blueprint\"] .semantic-lens { border-radius: 0.28rem; }\n    .semantic-lens-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.75rem;\n      padding: 0.72rem 0.78rem 0.62rem;\n      border-bottom: 1px solid var(--toolbar-border);\n    }\n    .semantic-lens-eyebrow {\n      display: block;\n      color: var(--database-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n    .semantic-lens-title {\n      display: block;\n      margin-top: 0.16rem;\n      color: var(--text);\n      font-size: 0.82rem;\n      letter-spacing: -0.02em;\n    }\n    .semantic-lens-close {\n      width: 1.75rem;\n      height: 1.75rem;\n      padding: 0;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .semantic-lens-close:hover,\n    .semantic-lens-close:focus-visible { background: var(--toolbar-hover); }\n    .semantic-lens-instruction {\n      margin: 0;\n      padding: 0.52rem 0.78rem 0.48rem;\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      line-height: 1.45;\n    }\n    .semantic-lens-kinds {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0.3rem;\n      max-height: min(15rem, 40vh);\n      padding: 0 0.5rem 0.5rem;\n      overflow-y: auto;\n      scrollbar-width: thin;\n    }\n    .semantic-lens-kind {\n      --lens-color: var(--external-stroke);\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.42rem;\n      min-width: 0;\n      min-height: 2.15rem;\n      padding: 0.35rem 0.42rem;\n      border: 1px solid color-mix(in srgb, var(--lens-color) 24%, var(--toolbar-border));\n      border-radius: 0.45rem;\n      background: color-mix(in srgb, var(--panel) 76%, transparent);\n      color: var(--toolbar-text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;\n    }\n    html[data-preset=\"blueprint\"] .semantic-lens-kind { border-radius: 0.12rem; }\n    .semantic-lens-kind[data-kind=\"frontend\"],\n    .semantic-lens-kind[data-kind=\"start\"] { --lens-color: var(--frontend-stroke); }\n    .semantic-lens-kind[data-kind=\"backend\"],\n    .semantic-lens-kind[data-kind=\"active\"] { --lens-color: var(--backend-stroke); }\n    .semantic-lens-kind[data-kind=\"database\"],\n    .semantic-lens-kind[data-kind=\"success\"] { --lens-color: var(--database-stroke); }\n    .semantic-lens-kind[data-kind=\"cloud\"],\n    .semantic-lens-kind[data-kind=\"waiting\"] { --lens-color: var(--cloud-stroke); }\n    .semantic-lens-kind[data-kind=\"messagebus\"] { --lens-color: var(--messagebus-stroke); }\n    .semantic-lens-kind[data-kind=\"security\"],\n    .semantic-lens-kind[data-kind=\"decision\"],\n    .semantic-lens-kind[data-kind=\"failure\"] { --lens-color: var(--security-stroke); }\n    .semantic-lens-kind:hover,\n    .semantic-lens-kind:focus-visible,\n    .semantic-lens-kind[aria-pressed=\"true\"] {\n      border-color: color-mix(in srgb, var(--lens-color) 78%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--lens-color) 11%, var(--panel));\n    }\n    .semantic-lens-kind:focus-visible,\n    .semantic-lens-close:focus-visible,\n    .semantic-lens-actions button:focus-visible {\n      outline: 2px solid var(--database-stroke);\n      outline-offset: 1px;\n    }\n    .semantic-lens-kind:disabled { opacity: 0.34; cursor: default; }\n    .semantic-lens-swatch {\n      width: 0.48rem;\n      height: 0.48rem;\n      border-radius: 50%;\n      background: var(--lens-color);\n      box-shadow: 0 0 8px color-mix(in srgb, var(--lens-color) 58%, transparent);\n    }\n    .semantic-lens-kind strong {\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.61rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-lens-kind em {\n      color: var(--lens-color);\n      font-size: 0.54rem;\n      font-style: normal;\n      font-weight: 800;\n    }\n    .semantic-lens-status {\n      min-height: 2.5rem;\n      margin: 0;\n      padding: 0.55rem 0.78rem;\n      border-top: 1px solid var(--toolbar-border);\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      line-height: 1.45;\n    }\n    .semantic-lens-status strong { color: var(--database-stroke); font-weight: 800; }\n    .semantic-lens-actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.28rem;\n      padding: 0 0.62rem 0.62rem;\n    }\n    .semantic-lens-actions button {\n      min-height: 1.8rem;\n      padding: 0.28rem 0.48rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 0.56rem;\n      cursor: pointer;\n    }\n    .semantic-lens-actions button:hover { background: var(--toolbar-hover); }\n    .semantic-lens-actions #semantic-lens-copy { color: var(--database-stroke); }\n    @keyframes archify-lens-in {\n      from { opacity: 0; transform: translateY(5px) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    /* Route Probe answers a reader question over the compiled semantic graph:\n       choose two stable nodes and reveal the shortest authored directed route.\n       The receipt and signal live entirely in the viewer layer. */\n    .route-probe {\n      position: absolute;\n      left: 1rem;\n      bottom: calc(1rem + var(--archify-nav-reserve));\n      z-index: 12;\n      width: min(46rem, calc(100% - 25rem));\n      min-width: 18rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 62%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(115deg, color-mix(in srgb, var(--backend-fill) 50%, transparent), transparent 62%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.625rem;\n    }\n    .route-probe[hidden] { display: none; }\n    .route-probe[data-route-dock=\"top\"] {\n      top: 1rem;\n      bottom: auto;\n    }\n    html[data-preset=\"blueprint\"] .route-probe { border-radius: 0.25rem; }\n    .route-probe-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.65rem;\n      padding: 0.52rem 0.58rem 0.44rem;\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 80%, transparent);\n    }\n    .route-probe-copy { min-width: 0; }\n    .route-probe-eyebrow {\n      display: block;\n      color: var(--backend-stroke);\n      font-size: 0.48rem;\n      font-weight: 800;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n    }\n    .route-probe-title {\n      display: block;\n      margin-top: 0.14rem;\n      overflow: hidden;\n      color: var(--toolbar-text);\n      font-size: 0.72rem;\n      line-height: 1.25;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .route-probe-actions { display: flex; gap: 0.2rem; }\n    .route-probe button {\n      min-height: 1.55rem;\n      padding: 0.25rem 0.42rem;\n      border: 0;\n      border-radius: 0.36rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      cursor: pointer;\n    }\n    .route-probe button:hover,\n    .route-probe button:focus-visible { background: var(--toolbar-hover); }\n    .route-probe button:focus-visible {\n      outline: 2px solid var(--backend-stroke);\n      outline-offset: 1px;\n    }\n    .route-probe-copy-link { color: var(--frontend-stroke) !important; }\n    .route-probe-find { color: var(--backend-stroke) !important; }\n    .route-probe-copy-link[hidden] { display: none; }\n    .route-probe-find[hidden] { display: none; }\n    .route-probe-path {\n      display: flex;\n      align-items: center;\n      min-height: 2.2rem;\n      padding: 0.42rem 0.58rem 0.24rem;\n      overflow-x: auto;\n      scrollbar-width: thin;\n      white-space: nowrap;\n    }\n    .route-probe-node,\n    .route-probe button.route-probe-node {\n      flex: none;\n      max-width: 9.5rem;\n      overflow: hidden;\n      min-height: 1.75rem !important;\n      padding: 0.22rem 0.38rem;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 46%, var(--toolbar-border));\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--backend-fill) 52%, transparent);\n      color: var(--text);\n      font-size: 0.56rem;\n      font-weight: 700;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .route-probe-node[data-endpoint=\"start\"] {\n      border-color: var(--frontend-stroke);\n      color: var(--frontend-stroke);\n    }\n    .route-probe-node[data-endpoint=\"end\"] {\n      border-color: var(--security-stroke);\n      color: var(--security-stroke);\n    }\n    .route-probe-node[data-route-journey-state=\"past\"] { opacity: 0.66; }\n    .route-probe-node[data-route-journey-state=\"future\"] { opacity: 0.48; }\n    .route-probe-node[aria-current=\"step\"] {\n      border-color: var(--backend-stroke);\n      background: color-mix(in srgb, var(--backend-fill) 82%, var(--toolbar-menu-bg));\n      color: var(--text);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--backend-stroke) 42%, transparent), 0 0 14px color-mix(in srgb, var(--backend-stroke) 34%, transparent);\n      opacity: 1;\n    }\n    html[data-preset=\"blueprint\"] .route-probe-node[aria-current=\"step\"] {\n      border-style: double;\n      border-width: 3px;\n      border-radius: 0.2rem;\n      box-shadow: none;\n    }\n    .route-probe-arrow {\n      flex: none;\n      padding: 0 0.28rem;\n      color: var(--text-faint);\n      font-size: 0.65rem;\n    }\n    .route-probe-placeholder {\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.03em;\n    }\n    .route-probe-status {\n      display: block;\n      min-height: 1.45rem;\n      padding: 0.08rem 0.58rem 0.44rem;\n      color: var(--text-faint);\n      font-size: 0.52rem;\n      line-height: 1.35;\n    }\n    .route-journey-controls {\n      display: grid;\n      grid-template-columns: 2rem minmax(5.8rem, auto) 2rem minmax(4.8rem, auto);\n      justify-content: start;\n      gap: 0.22rem;\n      padding: 0.08rem 0.58rem 0.28rem;\n    }\n    .route-journey-controls[hidden] { display: none; }\n    .route-journey-controls button {\n      min-height: 1.8rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);\n      background: color-mix(in srgb, var(--toolbar-bg) 72%, transparent);\n      font-size: 0.54rem;\n      font-weight: 700;\n    }\n    .route-journey-controls button:disabled {\n      cursor: default;\n      opacity: 0.34;\n    }\n    .route-journey-play { color: var(--backend-stroke) !important; }\n    .route-journey-overview { color: var(--frontend-stroke) !important; }\n    .route-journey-controls[data-playing=\"true\"] .route-journey-play {\n      border-color: color-mix(in srgb, var(--backend-stroke) 64%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--backend-fill) 62%, transparent);\n    }\n    .route-probe[data-state=\"error\"] {\n      border-color: color-mix(in srgb, var(--security-stroke) 72%, var(--toolbar-border));\n    }\n    .route-probe[data-state=\"error\"] .route-probe-status { color: var(--security-stroke); }\n\n    .focus-chip {\n      position: absolute;\n      left: 1rem;\n      top: 1rem;\n      z-index: 12;\n      display: block;\n      width: min(22rem, calc(100% - 13rem));\n      max-width: calc(100% - 13rem);\n      overflow: hidden;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 0.85rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.6875rem;\n    }\n    .focus-chip[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .focus-chip { border-radius: 0.3rem; }\n    .focus-chip button {\n      flex: none;\n      padding: 0.3rem 0.45rem;\n      border-radius: 0.35rem;\n      font-size: 0.625rem;\n    }\n    .relationship-lens-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.75rem;\n      padding: 0.7rem 0.75rem 0.65rem;\n      border-bottom: 1px solid var(--toolbar-border);\n      background: linear-gradient(120deg, color-mix(in srgb, var(--frontend-fill) 34%, transparent), transparent 72%);\n    }\n    .relationship-lens-copy { min-width: 0; }\n    .relationship-lens-actions {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 0.18rem;\n    }\n    .relationship-lens-actions button { white-space: nowrap; }\n    .relationship-lens-actions #btn-focus-clear {\n      display: grid;\n      width: 1.75rem;\n      height: 1.75rem;\n      padding: 0;\n      place-items: center;\n      color: var(--text-muted);\n      font-size: 1rem;\n      line-height: 1;\n    }\n    .relationship-lens-actions #btn-focus-clear:hover,\n    .relationship-lens-actions #btn-focus-clear:focus-visible {\n      background: var(--toolbar-hover);\n      color: var(--text);\n    }\n    .relationship-lens-actions #btn-focus-copy { color: var(--frontend-stroke); }\n    .relationship-lens-actions #btn-focus-relations { display: none; }\n    .relationship-lens-eyebrow {\n      display: block;\n      margin-bottom: 0.18rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n    }\n    .relationship-lens-title {\n      display: block;\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.8rem;\n      line-height: 1.35;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-detail {\n      display: block;\n      margin-top: 0.12rem;\n      overflow: hidden;\n      color: var(--text-muted);\n      font-size: 0.625rem;\n      line-height: 1.4;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-detail[hidden] { display: none; }\n    .semantic-passport-meta {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.24rem;\n      margin-top: 0.42rem;\n    }\n    .semantic-passport-meta span,\n    .semantic-passport-meta code {\n      max-width: 100%;\n      overflow: hidden;\n      padding: 0.14rem 0.34rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--panel) 68%, transparent);\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5rem;\n      letter-spacing: 0.04em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-meta [data-passport=\"kind\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 50%, var(--toolbar-border));\n      color: var(--frontend-stroke);\n      font-weight: 800;\n      text-transform: uppercase;\n    }\n    .semantic-passport-meta [data-passport=\"tag\"] { color: var(--cloud-stroke); }\n    .semantic-passport-meta [data-passport=\"brand\"] {\n      border-color: color-mix(in srgb, var(--messagebus-stroke) 52%, var(--toolbar-border));\n      color: var(--messagebus-stroke);\n      font-weight: 700;\n    }\n    .semantic-passport-meta [hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .semantic-passport-meta span,\n    html[data-preset=\"blueprint\"] .semantic-passport-meta code { border-radius: 0.1rem; }\n    .semantic-passport-evidence {\n      margin-top: 0.52rem;\n      padding: 0.5rem;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 32%, var(--toolbar-border));\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--backend-fill) 18%, var(--panel));\n    }\n    .semantic-passport-evidence[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .semantic-passport-evidence { border-radius: 0.18rem; }\n    .semantic-passport-evidence-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.55rem;\n      margin-bottom: 0.35rem;\n    }\n    .semantic-passport-evidence-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.28rem;\n      color: var(--backend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .semantic-passport-evidence-status::before {\n      content: '';\n      width: 0.38rem;\n      height: 0.38rem;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--backend-stroke) 14%, transparent);\n    }\n    .semantic-passport-repository {\n      min-width: 0;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-repository:hover,\n    .semantic-passport-repository:focus-visible { color: var(--backend-stroke); }\n    .semantic-passport-evidence-links { display: grid; gap: 0.22rem; }\n    .semantic-passport-source {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.15rem 0.45rem;\n      align-items: center;\n      padding: 0.34rem 0.4rem;\n      border: 1px solid transparent;\n      border-radius: 0.38rem;\n      color: var(--text-muted);\n      text-decoration: none;\n    }\n    .semantic-passport-source:hover,\n    .semantic-passport-source:focus-visible {\n      border-color: color-mix(in srgb, var(--backend-stroke) 42%, transparent);\n      background: color-mix(in srgb, var(--backend-fill) 32%, transparent);\n      color: var(--text);\n    }\n    .semantic-passport-source strong {\n      overflow: hidden;\n      font-size: 0.5625rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-source code {\n      color: var(--backend-stroke);\n      font: inherit;\n      font-size: 0.5rem;\n    }\n    .semantic-passport-source small {\n      grid-column: 1 / -1;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-summary {\n      display: block;\n      margin-top: 0.12rem;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n    }\n    .semantic-passport-reach {\n      display: grid;\n      gap: 0.28rem;\n      margin-top: 0.52rem;\n      padding-top: 0.48rem;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 76%, transparent);\n    }\n    .semantic-passport-reach[hidden] { display: none; }\n    .semantic-passport-reach-label {\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n    }\n    .semantic-passport-reach-actions {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 0.25rem;\n    }\n    .semantic-passport-reach-actions button {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.5rem;\n      min-width: 0;\n      min-height: 2rem;\n      padding: 0.32rem 0.42rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);\n      background: color-mix(in srgb, var(--panel) 70%, transparent);\n      color: var(--text-muted);\n      text-align: left;\n    }\n    .semantic-passport-reach-actions button:hover:not(:disabled),\n    .semantic-passport-reach-actions button:focus-visible {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 62%, var(--toolbar-border));\n      color: var(--text);\n    }\n    .semantic-passport-reach-actions button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .semantic-passport-reach-actions button:disabled {\n      cursor: default;\n      opacity: 0.5;\n    }\n    .semantic-passport-reach-actions button[aria-pressed=\"true\"] {\n      border-color: color-mix(in srgb, var(--reach-color, var(--frontend-stroke)) 72%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--reach-fill, var(--frontend-fill)) 48%, transparent);\n      color: var(--text);\n    }\n    #btn-reach-upstream {\n      --reach-color: var(--database-stroke);\n      --reach-fill: var(--database-fill);\n    }\n    #btn-reach-downstream {\n      --reach-color: var(--backend-stroke);\n      --reach-fill: var(--backend-fill);\n    }\n    .semantic-passport-reach-actions strong {\n      color: var(--reach-color, var(--frontend-stroke));\n      font-size: 0.625rem;\n    }\n    .semantic-passport-reach-status {\n      color: var(--text-faint);\n      font-size: 0.525rem;\n      line-height: 1.4;\n    }\n    .semantic-passport-reach-status[hidden] { display: none; }\n    .relationship-lens-list {\n      max-height: min(18rem, 46vh);\n      overflow: auto;\n      padding: 0.4rem;\n      scrollbar-width: thin;\n      scrollbar-color: var(--frontend-stroke) transparent;\n    }\n    .relationship-lens-list::-webkit-scrollbar { width: 4px; }\n    .relationship-lens-list::-webkit-scrollbar-thumb {\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--frontend-stroke) 68%, transparent);\n    }\n    .relationship-lens-group + .relationship-lens-group { margin-top: 0.35rem; }\n    .relationship-lens-group-title {\n      display: block;\n      padding: 0.24rem 0.38rem 0.16rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .relationship-lens-row {\n      display: grid;\n      grid-template-columns: 2.1rem minmax(0, 1fr);\n      gap: 0.06rem 0.45rem;\n      width: 100%;\n      padding: 0.45rem 0.5rem !important;\n      text-align: left;\n    }\n    .relationship-lens-row:hover,\n    .relationship-lens-row:focus-visible,\n    .relationship-lens-row[data-preview-active=\"true\"] {\n      background: var(--toolbar-hover);\n      box-shadow: inset 2px 0 0 var(--frontend-stroke);\n    }\n    .relationship-lens-row:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: -2px;\n    }\n    .relationship-lens-direction {\n      grid-row: 1 / 3;\n      align-self: center;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n    }\n    .relationship-lens-row[data-direction=\"in\"] .relationship-lens-direction { color: var(--database-stroke); }\n    .relationship-lens-row[data-direction=\"loop\"] .relationship-lens-direction { color: var(--security-stroke); }\n    .relationship-lens-row strong {\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.6875rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-row small {\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-empty {\n      margin: 0;\n      padding: 0.75rem;\n      color: var(--text-faint);\n      font-size: 0.625rem;\n      text-align: center;\n    }\n\n    /* Diagram Guide keeps the artifact's growing reader vocabulary\n       discoverable without widening the permanent control bar. It derives\n       honest counts at runtime and delegates every action to an existing\n       production interaction instead of creating a second command system. */\n    .diagram-guide {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      z-index: 26;\n      width: min(32rem, calc(100% - 2rem));\n      max-height: min(42rem, calc(100% - 2rem));\n      overflow: auto;\n      border: 1px solid color-mix(in srgb, var(--cloud-stroke) 58%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(135deg, color-mix(in srgb, var(--cloud-fill) 32%, transparent), transparent 42%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 22px 64px rgba(0, 0, 0, 0.4);\n      backdrop-filter: blur(18px);\n      animation: archify-guide-in 180ms cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .diagram-guide[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .diagram-guide { border-radius: 0.28rem; }\n    .diagram-guide-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 1rem;\n      padding: 0.82rem 0.9rem 0.68rem;\n      border-bottom: 1px solid var(--toolbar-border);\n    }\n    .diagram-guide-eyebrow {\n      display: block;\n      color: var(--cloud-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n    .diagram-guide-title {\n      display: block;\n      margin-top: 0.16rem;\n      color: var(--text);\n      font-size: 0.86rem;\n      letter-spacing: -0.02em;\n    }\n    .diagram-guide-close {\n      width: 1.8rem;\n      height: 1.8rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .diagram-guide-close:hover,\n    .diagram-guide-close:focus-visible { background: var(--toolbar-hover); }\n    .diagram-guide-stats {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 0;\n      padding: 0.54rem 0.9rem;\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 74%, transparent);\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.025em;\n    }\n    .diagram-guide-stats::before {\n      content: '';\n      width: 0.42rem;\n      height: 0.42rem;\n      flex: none;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 10px color-mix(in srgb, var(--backend-stroke) 72%, transparent);\n    }\n    .diagram-guide-actions {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0.38rem;\n      padding: 0.62rem;\n    }\n    .diagram-guide-action {\n      --guide-accent: var(--frontend-stroke);\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.55rem;\n      min-height: 4.15rem;\n      padding: 0.55rem 0.58rem;\n      border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, var(--toolbar-border));\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 78%, transparent);\n      color: var(--toolbar-text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;\n    }\n    .diagram-guide-action[data-guide-action=\"route\"] { --guide-accent: var(--backend-stroke); }\n    .diagram-guide-action[data-guide-action=\"map\"] { --guide-accent: var(--database-stroke); }\n    .diagram-guide-action[data-guide-action=\"lens\"] { --guide-accent: var(--messagebus-stroke); }\n    .diagram-guide-action[data-guide-action=\"story\"] { --guide-accent: var(--security-stroke); }\n    .diagram-guide-action[data-guide-action=\"present\"] {\n      --guide-accent: var(--cloud-stroke);\n    }\n    .diagram-guide-action:hover,\n    .diagram-guide-action:focus-visible {\n      border-color: color-mix(in srgb, var(--guide-accent) 76%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--guide-accent) 9%, var(--panel));\n      transform: translateY(-1px);\n    }\n    .diagram-guide-action:focus-visible,\n    .diagram-guide-close:focus-visible {\n      outline: 2px solid var(--cloud-stroke);\n      outline-offset: 1px;\n    }\n    .diagram-guide-action:disabled {\n      opacity: 0.42;\n      cursor: default;\n      transform: none;\n    }\n    .diagram-guide-index {\n      display: grid;\n      place-items: center;\n      width: 1.65rem;\n      height: 1.65rem;\n      border: 1px solid color-mix(in srgb, var(--guide-accent) 64%, var(--toolbar-border));\n      border-radius: 0.35rem;\n      color: var(--guide-accent);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n    }\n    .diagram-guide-action-copy { min-width: 0; }\n    .diagram-guide-action strong {\n      display: block;\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.66rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .diagram-guide-action small {\n      display: -webkit-box;\n      margin-top: 0.18rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      line-height: 1.35;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    .diagram-guide kbd {\n      align-self: start;\n      min-width: 1.45rem;\n      padding: 0.12rem 0.3rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.25rem;\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5rem;\n      text-align: center;\n    }\n    .diagram-guide-shortcuts {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.34rem 0.62rem;\n      padding: 0.58rem 0.9rem 0.68rem;\n      border-top: 1px solid var(--toolbar-border);\n      color: var(--text-faint);\n      font-size: 0.5rem;\n    }\n    .diagram-guide-shortcuts span {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.28rem;\n      white-space: nowrap;\n    }\n    .diagram-guide-feedback {\n      min-height: 1rem;\n      margin: -0.18rem 0.9rem 0.62rem;\n      color: var(--security-stroke);\n      font-size: 0.5rem;\n    }\n    .diagram-guide-feedback:empty { display: none; }\n    @keyframes archify-guide-in {\n      from { opacity: 0; transform: translateY(-5px) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .node-finder {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n      z-index: 24;\n      display: flex;\n      flex-direction: column;\n      width: min(22rem, calc(100% - 2rem));\n      max-height: calc(100% - 2rem);\n      overflow: hidden;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.85rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.22);\n      backdrop-filter: blur(16px);\n    }\n    .node-finder[hidden] { display: none; }\n    .node-finder[data-context=\"route-source\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 68%, var(--toolbar-border));\n    }\n    .node-finder[data-context=\"route-target\"] {\n      border-color: color-mix(in srgb, var(--security-stroke) 68%, var(--toolbar-border));\n    }\n    html[data-preset=\"blueprint\"] .node-finder { border-radius: 0.3rem; }\n    .node-finder-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.7rem 0.8rem 0.45rem;\n    }\n    .node-finder-head strong {\n      color: var(--text);\n      font-size: 0.6875rem;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .node-finder[data-context=\"route-source\"] .node-finder-head strong { color: var(--frontend-stroke); }\n    .node-finder[data-context=\"route-target\"] .node-finder-head strong { color: var(--security-stroke); }\n    .node-finder-close {\n      width: 1.75rem;\n      height: 1.75rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .node-finder-close:hover,\n    .node-finder-close:focus-visible { background: var(--toolbar-hover); }\n    .node-finder-close:focus-visible,\n    .node-finder-result:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: -2px;\n    }\n    .node-finder-search {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.55rem;\n      margin: 0 0.55rem 0.55rem;\n      padding: 0 0.7rem;\n      min-height: 2.6rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 78%, transparent);\n      transition: border-color 160ms ease-out, box-shadow 160ms ease-out;\n    }\n    html[data-preset=\"blueprint\"] .node-finder-search { border-radius: 0.18rem; }\n    .node-finder-search \u003e span { color: var(--frontend-stroke); font-size: 0.875rem; }\n    .node-finder-search:focus-within {\n      border-color: var(--frontend-stroke);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--frontend-stroke) 20%, transparent);\n    }\n    .node-finder-input {\n      appearance: none;\n      width: 100%;\n      min-width: 0;\n      border: 0;\n      outline: 0;\n      background: transparent;\n      color: var(--text);\n      font: inherit;\n      font-size: 0.75rem;\n    }\n    .node-finder-input:focus-visible { outline: none; }\n    .node-finder-input::placeholder { color: var(--text-faint); }\n    .node-finder kbd {\n      padding: 0.1rem 0.32rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.25rem;\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5625rem;\n    }\n    .node-finder-results {\n      display: grid;\n      flex: 1 1 auto;\n      gap: 0;\n      min-height: 0;\n      max-height: min(18rem, 48vh);\n      margin: 0 0.55rem 0.45rem;\n      padding: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 78%, transparent);\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 54%, transparent);\n      scroll-padding-block: 0.25rem;\n      scrollbar-width: thin;\n    }\n    html[data-preset=\"blueprint\"] .node-finder-results { border-radius: 0.18rem; }\n    .node-finder-result {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.2rem 0.75rem;\n      width: 100%;\n      min-height: 3.25rem;\n      padding: 0.58rem 0.65rem;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      color: var(--text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: background-color 160ms ease-out;\n    }\n    .node-finder-result:not(:last-child) {\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 62%, transparent);\n    }\n    .node-finder-result:hover,\n    .node-finder-result:focus-visible {\n      position: relative;\n      z-index: 1;\n      background: color-mix(in srgb, var(--frontend-fill) 48%, var(--toolbar-hover));\n    }\n    .node-finder-result strong {\n      overflow: hidden;\n      font-size: 0.75rem;\n      line-height: 1.25;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .node-finder-result small {\n      grid-column: 1 / -1;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n      letter-spacing: 0.015em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .node-finder-result em {\n      align-self: center;\n      color: var(--frontend-stroke);\n      font-size: 0.625rem;\n      font-style: normal;\n    }\n    .node-finder[data-context^=\"route-\"] .node-finder-result em {\n      padding: 0.1rem 0.3rem;\n      border: 1px solid color-mix(in srgb, currentColor 52%, transparent);\n      border-radius: 999px;\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n    }\n    .node-finder[data-context=\"route-target\"] .node-finder-result em { color: var(--security-stroke); }\n    .node-finder-empty {\n      padding: 1.1rem 0.75rem 1.25rem;\n      color: var(--text-faint);\n      font-size: 0.6875rem;\n      text-align: center;\n    }\n    .node-finder-status {\n      margin: 0;\n      padding: 0.1rem 0.8rem 0.65rem;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n    }\n\n    .guided-views {\n      display: grid;\n      grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem auto;\n      align-items: stretch;\n      gap: 0.35rem;\n      min-width: 0;\n      margin: 0 0 0.75rem;\n      padding: 0.35rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.85rem;\n      background: var(--toolbar-bg);\n      background: linear-gradient(120deg, var(--toolbar-bg), color-mix(in srgb, var(--toolbar-bg) 82%, var(--frontend-fill)));\n      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);\n      backdrop-filter: blur(12px);\n    }\n    .guided-views[hidden] { display: none; }\n\n    html[data-preset=\"blueprint\"] .guided-views {\n      border-color: var(--panel-border);\n      border-radius: 0.35rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 36%, transparent), transparent 24%),\n        var(--toolbar-bg);\n      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);\n    }\n    html[data-preset=\"blueprint\"] .guided-views button { border-radius: 0.2rem; }\n    html[data-preset=\"blueprint\"] .guided-view-progress { border-radius: 0; }\n    html[data-preset=\"blueprint\"] .guided-view-progress span { border-radius: 0; }\n    .guided-views button {\n      min-width: 0;\n      padding: 0.45rem 0.6rem;\n      border-radius: 0.55rem;\n      font-size: 0.75rem;\n    }\n    .guided-views \u003e #guided-view-prev,\n    .guided-views \u003e #guided-view-next { min-width: 2.75rem; min-height: 2.75rem; }\n    .guided-views button:disabled { opacity: 0.3; cursor: default; }\n    .guided-view-copy {\n      min-width: 0;\n      padding: 0.2rem 0.5rem;\n      border-left: 1px solid var(--toolbar-border);\n      overflow: hidden;\n    }\n    .guided-view-meta {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      min-height: 1rem;\n      margin-bottom: 0.12rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 700;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .guided-view-handoff {\n      box-sizing: border-box;\n      height: 1rem;\n      min-width: 0;\n      max-width: 15rem;\n      overflow: hidden;\n      padding: 0 0.38rem;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 46%, transparent);\n      border-radius: 999px;\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-fill) 44%, transparent);\n      font-size: 0.5rem;\n      line-height: calc(1rem - 2px);\n      letter-spacing: 0.06em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-view-handoff[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .guided-view-handoff { border-radius: 0.15rem; }\n    .chapter-handoff-overlay { pointer-events: none; }\n    .chapter-handoff-anchor {\n      fill: color-mix(in srgb, var(--frontend-fill) 10%, transparent);\n      stroke: var(--frontend-stroke);\n      stroke-width: 2;\n      stroke-dasharray: 4 4;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n      animation: archify-chapter-anchor 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"stay\"] { opacity: 1; }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"enter\"] { opacity: 0.78; }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"leave\"] { opacity: 0.26; }\n    @keyframes archify-chapter-anchor {\n      0% { opacity: 0.35; stroke-dashoffset: 8; }\n      45% { opacity: 1; }\n      100% { opacity: 0.72; stroke-dashoffset: 0; }\n    }\n    .guided-view-progress {\n      width: 3.5rem;\n      height: 2px;\n      overflow: hidden;\n      border-radius: 999px;\n      background: var(--toolbar-border);\n    }\n    .guided-view-progress span {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      background: var(--frontend-stroke);\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n    .guided-view-copy strong,\n    .guided-view-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .guided-view-copy strong { color: var(--toolbar-text); font-size: 0.75rem; line-height: 1.35; }\n    .guided-view-copy small { margin-top: 0; color: var(--text-muted); font-size: 0.625rem; line-height: 1.35; }\n    .guided-story-caption {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      gap: 0.12rem 0.55rem;\n      align-items: center;\n      min-width: 0;\n      margin-top: 0.18rem;\n      padding: 0.3rem 0.5rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 32%, var(--toolbar-border));\n      border-radius: 0.58rem;\n      background: color-mix(in srgb, var(--frontend-fill) 26%, transparent);\n      animation: archify-story-caption-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    .guided-story-caption[hidden] { display: none; }\n    .guided-story-caption-index {\n      grid-row: 1 / span 2;\n      align-self: stretch;\n      display: inline-grid;\n      min-width: 3.3rem;\n      place-items: center;\n      padding-right: 0.52rem;\n      border-right: 1px solid color-mix(in srgb, var(--frontend-stroke) 28%, var(--toolbar-border));\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .guided-story-caption strong,\n    .guided-story-caption small {\n      display: block;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-story-caption strong { color: var(--toolbar-text); font-size: 0.6875rem; line-height: 1.3; }\n    .guided-story-caption small { color: var(--text-muted); font-size: 0.5625rem; line-height: 1.35; }\n    .guided-story-caption-next {\n      grid-column: 3;\n      grid-row: 1 / span 2;\n      display: grid;\n      min-width: 6.4rem;\n      max-width: 9.5rem;\n      align-self: stretch;\n      align-content: center;\n      padding-left: 0.58rem;\n      border-left: 1px solid color-mix(in srgb, var(--frontend-stroke) 22%, var(--toolbar-border));\n    }\n    .guided-story-caption-next[hidden] { display: none; }\n    .guided-story-caption-next small {\n      color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--text-muted));\n      font-weight: 800;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n    }\n    .guided-story-caption-next strong { color: var(--text-muted); font-weight: 700; }\n    html[data-preset=\"blueprint\"] .guided-story-caption { border-radius: 0.2rem; }\n    .guided-views[data-story-beat] .guided-view-copy \u003e #guided-view-label,\n    .guided-views[data-story-beat] .guided-view-copy \u003e #guided-view-note { display: none; }\n    @keyframes archify-story-caption-in {\n      from { opacity: 0; transform: translateY(3px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .guided-view-trail {\n      display: flex;\n      align-items: center;\n      gap: 0.28rem;\n      min-width: 0;\n      min-height: 1.7rem;\n      margin-top: 0;\n      padding: 0;\n      overflow-x: auto;\n      color: var(--text-faint);\n      overscroll-behavior-x: contain;\n      touch-action: pan-x;\n      scrollbar-width: none;\n      white-space: nowrap;\n    }\n    .guided-view-trail[hidden] { display: none; }\n    .guided-view-trail::-webkit-scrollbar { display: none; }\n    .guided-view-trail .guided-view-stop {\n      appearance: none;\n      box-sizing: border-box;\n      display: inline-flex;\n      flex: 0 0 auto;\n      align-items: center;\n      gap: 0.28rem;\n      min-height: 1.5rem;\n      padding: 0.1rem 0.3rem 0.1rem 0.18rem;\n      border: 1px solid transparent;\n      border-radius: 999px;\n      background: transparent;\n      color: var(--text-muted);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: 0.5625rem;\n      font-weight: 650;\n      letter-spacing: 0.02em;\n      line-height: 1;\n      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;\n    }\n    .guided-view-stop:hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);\n      background: color-mix(in srgb, var(--frontend-fill) 34%, transparent);\n    }\n    .guided-view-stop:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .guided-view-stop:disabled { cursor: wait; }\n    .guided-view-stop::before {\n      display: inline-grid;\n      width: 1rem;\n      height: 1rem;\n      place-items: center;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));\n      border-radius: 50%;\n      background: color-mix(in srgb, var(--frontend-fill) 58%, var(--toolbar-bg));\n      color: var(--frontend-stroke);\n      content: attr(data-story-number);\n      font-size: 0.5rem;\n      line-height: 1;\n    }\n    .guided-view-stop + .guided-view-stop::after {\n      order: -1;\n      color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--text-faint));\n      content: '\\00b7';\n      font-size: 0.65rem;\n    }\n    .guided-view-stop[data-story-link=\"forward\"]::after { content: '\\2192'; }\n    .guided-view-stop[data-story-link=\"reverse\"]::after { content: '\\2190'; }\n    .guided-view-stop[data-story-link=\"multiple\"]::after { content: '\\21c4'; }\n    .guided-view-stop[data-story-beat-state=\"pending\"] { opacity: 0.38; }\n    .guided-view-stop[data-story-beat-state=\"next\"] {\n      border-style: dashed;\n      border-color: color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));\n      color: color-mix(in srgb, var(--toolbar-text) 68%, var(--text-muted));\n      opacity: 0.58;\n    }\n    .guided-view-stop[data-story-beat-state=\"past\"] { color: var(--text-muted); opacity: 0.76; }\n    .guided-view-stop[data-story-beat-state=\"active\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--frontend-fill) 42%, transparent);\n      color: var(--toolbar-text);\n      font-weight: 800;\n      opacity: 1;\n    }\n    .guided-view-stop[data-story-beat-state=\"active\"]::before {\n      border-color: var(--frontend-stroke);\n      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 54%, transparent);\n    }\n    html[data-preset=\"blueprint\"] .guided-view-stop,\n    html[data-preset=\"blueprint\"] .guided-view-stop::before { border-radius: 0.1rem; }\n    html[data-preset=\"blueprint\"] .guided-view-stop[data-story-beat-state=\"active\"]::before { box-shadow: none; }\n    .guided-view-actions { display: flex; align-items: stretch; gap: 0.2rem; }\n    .guided-view-actions button { white-space: nowrap; }\n    .guided-view-play {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.38rem;\n      min-width: 6.25rem !important;\n      color: var(--frontend-stroke) !important;\n      font-size: 0.625rem !important;\n    }\n    .guided-view-play[aria-pressed=\"true\"] { background: var(--toolbar-hover); }\n    .guided-view-all { min-width: 3.25rem !important; color: var(--text-muted) !important; font-size: 0.625rem !important; }\n    .guided-view-beat-link {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.3rem;\n      min-width: 5.4rem !important;\n      min-height: 1.5rem;\n      color: var(--text-muted) !important;\n      font-size: 0.5625rem !important;\n      letter-spacing: 0.025em;\n      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;\n    }\n    .guided-view-beat-link:not(:disabled):hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      color: var(--frontend-stroke) !important;\n    }\n    .guided-view-beat-link[data-copy-state=\"copied\"] {\n      border-color: color-mix(in srgb, var(--backend-stroke) 58%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--backend-fill) 46%, transparent);\n      color: var(--backend-stroke) !important;\n    }\n    .guided-view-index {\n      grid-column: 1 / -1;\n      min-width: 0;\n      padding: 0.28rem 0.12rem 0.08rem;\n      overflow: hidden;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    @media (min-width: 721px) {\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-index,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-beat-link,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-all,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-trail,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-copy \u003e #guided-view-label,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-copy \u003e #guided-view-note { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-story-caption { margin-top: 0.08rem; }\n    }\n    .guided-view-chapters {\n      display: flex;\n      gap: 0.28rem;\n      min-width: 0;\n      margin: 0;\n      padding: 0.08rem 0.05rem 0.2rem;\n      overflow-x: auto;\n      list-style: none;\n      scroll-padding-inline: 0.05rem;\n      scroll-snap-type: x proximity;\n      scrollbar-width: none;\n    }\n    .guided-view-chapters::-webkit-scrollbar { display: none; }\n    .guided-view-chapters li {\n      display: flex;\n      flex: 1 1 0;\n      min-width: 9.5rem;\n      scroll-snap-align: center;\n    }\n    .guided-view-chapter {\n      position: relative;\n      display: grid !important;\n      grid-template-columns: 1.55rem minmax(0, 1fr) auto;\n      align-items: center;\n      width: 100%;\n      min-height: 2.75rem;\n      padding: 0.36rem 0.48rem !important;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent) !important;\n      border-radius: 0.48rem !important;\n      background: color-mix(in srgb, var(--toolbar-bg) 88%, transparent) !important;\n      color: var(--text-muted) !important;\n      text-align: left;\n      transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;\n    }\n    .guided-view-chapter:hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--toolbar-border)) !important;\n      background: color-mix(in srgb, var(--frontend-fill) 42%, var(--toolbar-bg)) !important;\n    }\n    .guided-view-chapter:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .guided-view-chapter-index {\n      display: inline-grid;\n      width: 1.32rem;\n      height: 1.32rem;\n      place-items: center;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));\n      border-radius: 50%;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.03em;\n    }\n    .guided-view-chapter-title {\n      min-width: 0;\n      overflow: hidden;\n      color: var(--toolbar-text);\n      font-size: 0.625rem;\n      font-weight: 700;\n      line-height: 1.3;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-count {\n      grid-column: 3;\n      grid-row: 1;\n      margin-left: 0.38rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-style: normal;\n      font-weight: 650;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-delta {\n      display: inline-flex;\n      grid-column: 3;\n      grid-row: 1;\n      align-items: center;\n      gap: 0.22rem;\n      margin-left: 0.38rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 750;\n      letter-spacing: 0.01em;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-delta[hidden] { display: none; }\n    .guided-view-chapter-delta [data-delta-kind=\"stay\"] { color: var(--text-muted); }\n    .guided-view-chapter-delta [data-delta-kind=\"enter\"] { color: var(--frontend-stroke); }\n    .guided-view-chapter-delta [data-delta-kind=\"leave\"] { color: var(--security-stroke); }\n    .guided-view-chapter[data-preview-active=\"true\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border)) !important;\n      background: color-mix(in srgb, var(--frontend-fill) 54%, var(--toolbar-bg)) !important;\n    }\n    .guided-view-chapter[data-chapter-position=\"current\"] {\n      border: 2px solid var(--frontend-stroke) !important;\n      padding: calc(0.36rem - 1px) calc(0.48rem - 1px) !important;\n      box-shadow: inset 3px 0 0 var(--frontend-stroke);\n      color: var(--toolbar-text) !important;\n    }\n    .guided-view-chapter[data-chapter-position=\"current\"] .guided-view-chapter-index {\n      background: var(--frontend-stroke);\n      color: var(--bg);\n    }\n    .guided-view-chapter[data-chapter-position=\"before\"] {\n      border-style: solid !important;\n      opacity: 0.72;\n    }\n    .guided-view-chapter[data-chapter-position=\"after\"] { border-style: dashed !important; }\n    html[data-preset=\"signal-flow\"] .guided-view-chapter[data-chapter-position=\"current\"] {\n      box-shadow: inset 3px 0 0 var(--frontend-stroke), 0 0 18px color-mix(in srgb, var(--frontend-stroke) 18%, transparent);\n    }\n    html[data-preset=\"blueprint\"] .guided-view-chapter,\n    html[data-preset=\"blueprint\"] .guided-view-chapter-index { border-radius: 0.12rem !important; }\n\n    /* Story Shelf — keep every authored chapter and the Play action visible,\n       but do not spend a second row on unavailable director controls before\n       the reader enters a chapter. Existing data-active-view state expands\n       the full guided surface without a new toggle or stored preference. */\n    .guided-views[data-active-view=\"all\"] {\n      grid-template-columns: minmax(11rem, .72fr) auto minmax(0, 2fr);\n      align-items: center;\n      padding: 0.28rem 0.35rem;\n    }\n    .guided-views[data-active-view=\"all\"] \u003e #guided-view-prev,\n    .guided-views[data-active-view=\"all\"] \u003e #guided-view-next,\n    .guided-views[data-active-view=\"all\"] .guided-view-beat-link,\n    .guided-views[data-active-view=\"all\"] .guided-view-all { display: none; }\n    .guided-views[data-active-view=\"all\"] .guided-view-copy {\n      grid-column: 1;\n      grid-row: 1;\n      padding: 0.1rem 0.55rem;\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-copy \u003e #guided-view-note { display: none; }\n    .guided-views[data-active-view=\"all\"] .guided-view-actions {\n      display: block;\n      grid-column: 2;\n      grid-row: 1;\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-play { min-height: 2.75rem; }\n    .guided-views[data-active-view=\"all\"] .guided-view-index {\n      grid-column: 3;\n      grid-row: 1;\n      padding: 0 0.08rem 0 0.42rem;\n      border-top: 0;\n      border-left: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-chapters {\n      gap: 0.3rem;\n      padding: 0;\n    }\n\n    .cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 1rem;\n      margin-top: 2rem;\n    }\n\n    .card {\n      background: var(--panel);\n      border-radius: 0.75rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.25rem;\n    }\n\n    html[data-preset=\"signal-flow\"] .card {\n      background: linear-gradient(145deg, rgba(10, 24, 43, 0.86), rgba(5, 12, 24, 0.92));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] .card {\n      background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 246, 250, 0.9));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 32px rgba(45, 78, 99, 0.08);\n    }\n\n    /* Preserve the one-screen guarantee on ordinary laptop displays. The\n       high-screen expansion above must not trade a fuller canvas for page\n       scrolling at 900–1080px heights. */\n    @media (min-width: 768px) and (max-height: 1100px) {\n      .header { margin-bottom: 1rem; }\n      .diagram-container {\n        padding: 0.875rem;\n        padding-bottom: calc(0.875rem + var(--archify-nav-reserve));\n      }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      body { padding-block: 1.25rem; }\n      .header { margin-bottom: 0.875rem; }\n      .cards { margin-top: 0.75rem; }\n      html[data-nav-stage-rail=\"true\"] body { padding-block: 0.375rem; }\n      html[data-nav-stage-rail=\"true\"] .header { margin-bottom: 0.5rem; }\n      html[data-nav-stage-rail=\"true\"] .guided-views { margin-bottom: 0.375rem; }\n      html[data-nav-stage-rail=\"true\"] .diagram-container[data-nav-stage-rail=\"true\"] { padding-top: 0.5rem; }\n      html[data-nav-stage-rail=\"true\"] .cards { margin-top: 0.375rem; }\n    }\n\n    html[data-preset=\"blueprint\"] .card {\n      position: relative;\n      border-color: var(--panel-border);\n      border-radius: 0.3rem;\n      background: var(--panel);\n      box-shadow: none;\n    }\n    html[data-preset=\"blueprint\"] .card::before {\n      content: \"\";\n      position: absolute;\n      top: -1px;\n      left: 1rem;\n      width: 2.5rem;\n      border-top: 2px solid var(--frontend-stroke);\n    }\n\n    html[data-preset=\"editorial\"] .card {\n      position: relative;\n      border-radius: 0.28rem;\n      background: var(--panel);\n      box-shadow: 0 10px 28px color-mix(in srgb, #000 10%, transparent);\n    }\n    html[data-preset=\"editorial\"] .card::before {\n      position: absolute;\n      top: -1px;\n      left: 1.25rem;\n      width: 3.25rem;\n      border-top: 3px solid var(--arrow-emphasis);\n      content: \"\";\n    }\n    html[data-preset=\"editorial\"] .card-dot { border-radius: 0; transform: rotate(45deg) scale(0.78); }\n\n    .card-header {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .card-dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n    }\n\n    .card-dot.cyan     { background: var(--frontend-stroke); }\n    .card-dot.emerald  { background: var(--backend-stroke); }\n    .card-dot.violet   { background: var(--database-stroke); }\n    .card-dot.amber    { background: var(--cloud-stroke); }\n    .card-dot.rose     { background: var(--security-stroke); }\n    .card-dot.orange   { background: var(--messagebus-stroke); }\n    .card-dot.slate    { background: var(--external-stroke); }\n\n    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }\n\n    .card ul {\n      list-style: none;\n      color: var(--text-muted);\n      font-size: 0.75rem;\n    }\n\n    .card li { margin-bottom: 0.375rem; }\n\n    /* ==========================================================\n       Print stylesheet — hide interactive controls, force light,\n       drop the grid so the diagram doesn't waste ink, use landscape\n       so wide diagrams fit, pack summary cards into 2 columns to\n       avoid an orphan card on a trailing page.\n       ========================================================== */\n    @page { size: landscape; margin: 1.5cm; }\n\n    @media print {\n      /* Force the FULL light palette — including component fills/strokes and\n         lane/arrow colors — so printing from dark theme doesn't put neon\n         strokes and translucent dark fills on white paper. */\n      :root, [data-theme=\"dark\"], [data-theme=\"light\"] {\n        --bg: #ffffff;\n        --grid: transparent;\n        --panel: #ffffff;\n        --panel-border: #e2e8f0;\n        --text: #0f172a;\n        --text-muted: #475569;\n        --text-dim: #94a3b8;\n        --text-faint: #64748b;\n        --mask: #ffffff;\n        --lane-fill: rgba(248, 250, 252, 0.65);\n        --lane-stroke: #cbd5e1;\n        --arrow: #94a3b8;\n        --arrow-emphasis: #059669;\n        --frontend-fill:    rgba(34, 211, 238, 0.15);\n        --frontend-stroke:  #0891b2;\n        --backend-fill:     rgba(52, 211, 153, 0.18);\n        --backend-stroke:   #059669;\n        --database-fill:    rgba(167, 139, 250, 0.2);\n        --database-stroke:  #7c3aed;\n        --cloud-fill:       rgba(251, 191, 36, 0.18);\n        --cloud-stroke:     #d97706;\n        --security-fill:    rgba(251, 113, 133, 0.15);\n        --security-stroke:  #e11d48;\n        --messagebus-fill:  rgba(251, 146, 60, 0.15);\n        --messagebus-stroke:#ea580c;\n        --external-fill:    rgba(148, 163, 184, 0.18);\n        --external-stroke:  #64748b;\n      }\n      body { background: #ffffff !important; padding: 0; }\n      .container { max-width: none; }\n      .toolbar, .diagram-nav, .focus-chip, .guided-views, .archify-toast, .no-print { display: none !important; }\n      .chapter-handoff-overlay { display: none !important; }\n      svg [data-node-id][data-chapter-role] { opacity: 1 !important; }\n      svg[data-chapter-preview] [data-node-id],\n      svg[data-chapter-preview] [data-edge-from] { opacity: 1 !important; filter: none !important; }\n      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }\n      .diagram-container { --archify-nav-reserve: 0px !important; }\n      html[data-preset=\"signal-flow\"] .diagram-container,\n      html[data-preset=\"signal-flow\"] .card { background: #ffffff; }\n      .cards { grid-template-columns: 1fr 1fr; }\n      /* Ensure elements break sensibly across pages */\n      .card { break-inside: avoid; page-break-inside: avoid; }\n      .diagram-container { break-inside: avoid; page-break-inside: avoid; }\n      .diagram-container svg [data-detail] {\n        opacity: 1 !important;\n        pointer-events: auto !important;\n      }\n      .diagram-container svg [data-detail-anchor] { transform: none !important; }\n      .diagram-container svg[data-lens-active] [data-node-id],\n      .diagram-container svg[data-lens-active] [data-edge-from],\n      .diagram-container svg[data-legend-preview-active] [data-node-id],\n      .diagram-container svg[data-legend-preview-active] [data-edge-from] {\n        opacity: 1 !important;\n        filter: none !important;\n      }\n      [data-legend-bridge-runtime] { display: none !important; }\n      .semantic-lens-overlay { display: none !important; }\n      .relationship-hit-overlay { display: none !important; }\n      .relationship-pulse-overlay { display: none !important; }\n      .route-probe-overlay, .route-journey-overlay { display: none !important; }\n      .story-trail-overlay,\n      .story-carrier-overlay { display: none !important; }\n      .diagram-container svg[data-focus-active] [data-node-id],\n      .diagram-container svg[data-focus-active] [data-edge-from],\n      .diagram-container svg[data-reach-active] [data-node-id],\n      .diagram-container svg[data-reach-active] [data-edge-from],\n      .diagram-container svg[data-story-beat] [data-story-step],\n      .diagram-container svg[data-story-beat] [data-edge-from][data-story-beat-step],\n      .diagram-container svg[data-route-active] [data-node-id],\n      .diagram-container svg[data-route-active] [data-edge-from] {\n        opacity: 1 !important;\n        filter: none !important;\n        animation: none !important;\n      }\n      h1, .subtitle { color: #0f172a; }\n    }\n\n    /* ==========================================================\n       TOOLBAR (theme toggle + export menu)\n       ========================================================== */\n    .toolbar {\n      position: fixed;\n      top: 1rem;\n      right: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0;\n      border: 0;\n      background: transparent;\n      box-shadow: none;\n      z-index: 100;\n    }\n    .toolbar button {\n      background: var(--toolbar-bg);\n      color: var(--toolbar-text);\n      border: 1px solid var(--toolbar-border);\n      padding: 0.5rem 0.875rem;\n      border-radius: 0.625rem;\n      font-family: inherit;\n      font-size: 0.75rem;\n      font-weight: 500;\n      cursor: pointer;\n      white-space: nowrap;\n      backdrop-filter: blur(10px);\n      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n      transition: background 0.15s, border-color 0.15s, color 0.15s;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.375rem;\n      min-height: 2.75rem;\n    }\n    .toolbar button:hover {\n      background: var(--toolbar-hover);\n      border-color: color-mix(in srgb, var(--arrow) 62%, var(--toolbar-border));\n    }\n    .toolbar button[aria-expanded=\"true\"],\n    .toolbar button[aria-pressed=\"true\"]:not(#btn-theme) {\n      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));\n      border-color: color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));\n    }\n    .toolbar #btn-export {\n      padding-right: 0.82rem;\n      padding-left: 0.82rem;\n    }\n    .toolbar #btn-export:hover,\n    .toolbar #btn-export[aria-expanded=\"true\"] {\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));\n      border-color: color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));\n    }\n    .toolbar button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 2px;\n    }\n    .toolbar #btn-motion[hidden] { display: none !important; }\n    .toolbar #btn-motion { min-width: 4.4rem; }\n    .toolbar #btn-motion:disabled { cursor: default; opacity: 0.58; }\n    .toolbar .preset-wrap,\n    .toolbar .export-wrap {\n      position: relative;\n    }\n    .toolbar-icon {\n      display: inline-block;\n      width: 0.95rem;\n      height: 0.95rem;\n      flex: 0 0 auto;\n      background: currentColor;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .toolbar-chevron {\n      width: 0.65rem;\n      height: 0.65rem;\n      transition: transform 0.15s ease;\n    }\n    [aria-expanded=\"true\"] \u003e .toolbar-chevron { transform: rotate(180deg); }\n    [data-theme=\"light\"] #theme-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E\");\n    }\n    [data-theme=\"dark\"] #theme-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    }\n    #btn-present[aria-pressed=\"false\"] #present-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 3.2h-4v4M12.8 3.2h4v4M7.2 16.8h-4v-4M12.8 16.8h4v-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 3.2h-4v4M12.8 3.2h4v4M7.2 16.8h-4v-4M12.8 16.8h4v-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    #btn-present[aria-pressed=\"true\"] #present-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2h-4v-4M12.8 7.2h4v-4M7.2 12.8h-4v4M12.8 12.8h4v4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2h-4v-4M12.8 7.2h4v-4M7.2 12.8h-4v4M12.8 12.8h4v4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .toolbar-chevron {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    }\n    .toolbar #btn-preset { min-width: 5.4rem; }\n    .preset-control-mark {\n      width: 0.58rem;\n      height: 0.58rem;\n      flex: 0 0 auto;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 0.2rem;\n      background: color-mix(in srgb, var(--frontend-stroke) 28%, transparent);\n      transition: border-radius 0.15s, box-shadow 0.15s, transform 0.15s;\n    }\n    #btn-preset[data-preset-option=\"signal-flow\"] .preset-control-mark {\n      border-radius: 50%;\n      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 78%, transparent);\n    }\n    #btn-preset[data-preset-option=\"blueprint\"] .preset-control-mark {\n      border-radius: 0.06rem;\n      background: transparent;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frontend-stroke) 32%, transparent);\n      transform: rotate(45deg) scale(0.84);\n    }\n    #btn-preset[data-preset-option=\"editorial\"] .preset-control-mark {\n      border-color: var(--arrow-emphasis);\n      border-radius: 0;\n      background: var(--arrow-emphasis);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);\n      transform: rotate(45deg) scale(0.72);\n    }\n    .toolbar .preset-menu {\n      position: absolute;\n      top: calc(100% + 0.375rem);\n      right: 0;\n      display: none;\n      width: 18.5rem;\n      max-width: calc(100vw - 2rem);\n      padding: 0.45rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.875rem;\n      background: var(--toolbar-menu-bg);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);\n    }\n    .toolbar .preset-menu.open { display: block; }\n    .toolbar .preset-menu.open,\n    .toolbar .export-menu.open {\n      animation: toolbar-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);\n      transform-origin: top right;\n    }\n    @keyframes toolbar-menu-in {\n      from { opacity: 0; transform: translateY(-0.25rem) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    .preset-menu-heading {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.42rem 0.6rem 0.55rem;\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.13em;\n      text-transform: uppercase;\n    }\n    .preset-menu-heading span:last-child {\n      font-size: 0.52rem;\n      letter-spacing: 0.04em;\n      text-transform: none;\n    }\n    .toolbar .preset-option {\n      display: grid;\n      grid-template-columns: 2rem minmax(0, 1fr) 1rem;\n      align-items: center;\n      gap: 0.68rem;\n      width: 100%;\n      min-height: 3.35rem;\n      padding: 0.5rem 0.62rem;\n      border: 0;\n      border-radius: 0.5rem;\n      background: transparent;\n      box-shadow: none;\n      backdrop-filter: none;\n      text-align: left;\n    }\n    .toolbar .preset-option:hover,\n    .toolbar .preset-option:focus-visible { background: var(--toolbar-hover); }\n    .toolbar .preset-option[aria-checked=\"true\"] {\n      background: color-mix(in srgb, var(--frontend-stroke) 9%, transparent);\n      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);\n    }\n    .preset-option-swatch {\n      position: relative;\n      width: 2rem;\n      height: 1.55rem;\n      overflow: hidden;\n      border: 1px solid #64748b;\n      border-radius: 0.24rem;\n      background: #0f172a;\n      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);\n    }\n    .preset-option-swatch::before,\n    .preset-option-swatch::after { position: absolute; content: \"\"; }\n    .preset-option-swatch.classic::before {\n      top: 0.42rem;\n      right: 0.35rem;\n      bottom: 0.42rem;\n      left: 0.35rem;\n      border: 1px solid #22d3ee;\n      border-radius: 0.16rem;\n      background: rgba(34, 211, 238, 0.14);\n    }\n    .preset-option-swatch.signal-flow {\n      border-color: #29415f;\n      background: linear-gradient(135deg, #07101e 10%, #10243c 100%);\n    }\n    .preset-option-swatch.signal-flow::before {\n      top: 50%;\n      right: 0.2rem;\n      left: 0.2rem;\n      height: 1px;\n      background: linear-gradient(90deg, #67e8f9, #c4b5fd);\n      box-shadow: 0 0 8px #67e8f9;\n    }\n    .preset-option-swatch.signal-flow::after {\n      top: calc(50% - 0.13rem);\n      right: 0.28rem;\n      width: 0.26rem;\n      height: 0.26rem;\n      border-radius: 50%;\n      background: #67e8f9;\n      box-shadow: 0 0 7px #67e8f9;\n    }\n    .preset-option-swatch.blueprint {\n      border-color: #34799a;\n      border-radius: 0.08rem;\n      background-color: #0a2031;\n      background-image:\n        linear-gradient(rgba(102, 217, 239, 0.18) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(102, 217, 239, 0.18) 1px, transparent 1px);\n      background-size: 0.42rem 0.42rem;\n    }\n    .preset-option-swatch.blueprint::before {\n      top: 0.34rem;\n      right: 0.38rem;\n      bottom: 0.34rem;\n      left: 0.38rem;\n      border: 1px solid #66d9ef;\n    }\n    .preset-option-swatch.editorial {\n      border-color: #b8aa94;\n      border-radius: 0.08rem;\n      background: repeating-linear-gradient(0deg, #f2eee5 0 0.34rem, #d8d0c2 0.36rem, #f2eee5 0.38rem);\n    }\n    .preset-option-swatch.editorial::before {\n      top: 0;\n      bottom: 0;\n      left: 0.42rem;\n      width: 1px;\n      background: #c9502d;\n      opacity: 0.72;\n    }\n    .preset-option-swatch.editorial::after {\n      top: 0.52rem;\n      right: 0.45rem;\n      width: 0.38rem;\n      height: 0.38rem;\n      background: #c9502d;\n      transform: rotate(45deg);\n    }\n    .preset-option-copy { min-width: 0; }\n    .preset-option-copy strong,\n    .preset-option-copy small { display: block; }\n    .preset-option-copy strong {\n      color: var(--toolbar-text);\n      font-size: 0.72rem;\n      font-weight: 600;\n    }\n    .preset-option-copy small {\n      margin-top: 0.16rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.57rem;\n      font-weight: 400;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .preset-option-check {\n      display: inline-block;\n      width: 0.9rem;\n      height: 0.9rem;\n      color: var(--frontend-stroke);\n      background: currentColor;\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n      opacity: 0;\n    }\n    .preset-option[aria-checked=\"true\"] .preset-option-check { opacity: 1; }\n    html[data-preset=\"editorial\"] .toolbar button,\n    html[data-preset=\"editorial\"] .preset-menu,\n    html[data-preset=\"editorial\"] .export-menu,\n    html[data-preset=\"editorial\"] .overview-map,\n    html[data-preset=\"editorial\"] .semantic-lens,\n    html[data-preset=\"editorial\"] .route-probe,\n    html[data-preset=\"editorial\"] .focus-chip,\n    html[data-preset=\"editorial\"] .diagram-guide,\n    html[data-preset=\"editorial\"] .node-finder,\n    html[data-preset=\"editorial\"] .guided-views,\n    html[data-preset=\"editorial\"] .share-chapter-cue {\n      border-radius: 0.3rem;\n    }\n    .motion-control-dot {\n      width: 0.46rem;\n      height: 0.46rem;\n      flex: 0 0 auto;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 50%;\n      background: var(--frontend-stroke);\n      box-shadow: 0 0 9px color-mix(in srgb, var(--frontend-stroke) 72%, transparent);\n    }\n    #btn-motion[aria-pressed=\"false\"] .motion-control-dot {\n      background: transparent;\n      box-shadow: none;\n    }\n    .toolbar .export-menu {\n      position: absolute;\n      top: calc(100% + 0.375rem);\n      right: 0;\n      background: var(--toolbar-menu-bg);\n      border: 1px solid var(--toolbar-border);\n      width: 19rem;\n      max-width: calc(100vw - 2rem);\n      max-height: calc(100vh - 5.5rem);\n      overflow-y: auto;\n      border-radius: 0.875rem;\n      padding: 0.55rem;\n      display: none;\n      flex-direction: column;\n      box-shadow: 0 18px 48px rgba(0,0,0,0.24);\n    }\n    .toolbar .export-menu.open { display: flex; }\n    .export-menu-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.5rem 0.55rem 0.72rem;\n    }\n    .export-menu-header strong,\n    .export-menu-header span { display: block; }\n    .export-menu-header strong {\n      color: var(--toolbar-text);\n      font-size: 0.78rem;\n      font-weight: 650;\n      letter-spacing: -0.015em;\n    }\n    .export-menu-header span {\n      margin-top: 0.16rem;\n      color: var(--text-faint);\n      font-size: 0.56rem;\n    }\n    .export-menu-header kbd {\n      padding: 0.16rem 0.36rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.3rem;\n      color: var(--text-faint);\n      background: color-mix(in srgb, var(--toolbar-border) 16%, transparent);\n      font-family: inherit;\n      font-size: 0.54rem;\n      font-weight: 600;\n    }\n    .export-menu-section {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      gap: 0.18rem;\n    }\n    .export-menu-section + .export-menu-section {\n      margin-top: 0.42rem;\n      padding-top: 0.42rem;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 68%, transparent);\n    }\n    .export-menu-heading {\n      grid-column: 1 / -1;\n      display: block;\n      padding: 0.24rem 0.55rem 0.2rem;\n      color: var(--text-faint);\n      font-size: 0.54rem;\n      font-weight: 600;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .toolbar .export-menu button {\n      display: grid;\n      grid-template-columns: 1.15rem minmax(0, 1fr);\n      align-items: center;\n      column-gap: 0.52rem;\n      background: transparent;\n      border: 1px solid transparent;\n      box-shadow: none;\n      backdrop-filter: none;\n      width: 100%;\n      min-height: 3rem;\n      text-align: left;\n      padding: 0.48rem 0.55rem;\n      border-radius: 0.5rem;\n      white-space: nowrap;\n    }\n    .export-item-copy {\n      display: block;\n      min-width: 0;\n    }\n    .export-item-copy strong,\n    .export-item-copy small { display: block; }\n    .export-item-copy strong {\n      overflow: hidden;\n      color: inherit;\n      font-size: 0.7rem;\n      font-weight: 550;\n      text-overflow: ellipsis;\n    }\n    .export-item-copy small {\n      margin-top: 0.12rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      font-weight: 450;\n      text-overflow: ellipsis;\n    }\n    .toolbar .export-menu button::before {\n      width: 1rem;\n      height: 1rem;\n      background: currentColor;\n      content: \"\";\n      opacity: 0.72;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .toolbar .export-menu button[data-format=\"share-card\"]::before,\n    .toolbar .export-menu button[data-action=\"route-share-card\"]::before,\n    .toolbar .export-menu button[data-action=\"reach-share-card\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' d='M3 4.5h14v11H3zM6 12l2.5-2.5 2 2 1.5-1.5 2 2'/%3E%3Ccircle cx='13.8' cy='7.3' r='1.2' fill='black'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' d='M3 4.5h14v11H3zM6 12l2.5-2.5 2 2 1.5-1.5 2 2'/%3E%3Ccircle cx='13.8' cy='7.3' r='1.2' fill='black'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-action^=\"copy\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 13H3.5A1.5 1.5 0 012 11.5v-8A1.5 1.5 0 013.5 2h8A1.5 1.5 0 0113 3.5V4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 13H3.5A1.5 1.5 0 012 11.5v-8A1.5 1.5 0 013.5 2h8A1.5 1.5 0 0113 3.5V4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"png\"]::before,\n    .toolbar .export-menu button[data-format=\"jpeg\"]::before,\n    .toolbar .export-menu button[data-format=\"webp\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h7l3 3v12H5zM12 2.5v3h3' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.5 14l2-2 1.5 1.5 1.5-1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h7l3 3v12H5zM12 2.5v3h3' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.5 14l2-2 1.5 1.5 1.5-1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"svg\"]::before,\n    .toolbar .export-menu button[data-format=\"webm\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"share-card\"],\n    .toolbar .export-menu button[data-action=\"route-share-card\"],\n    .toolbar .export-menu button[data-action=\"reach-share-card\"] {\n      min-height: 3.35rem;\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-stroke) 8%, transparent);\n      border-color: color-mix(in srgb, var(--frontend-stroke) 24%, var(--toolbar-border));\n    }\n    .toolbar .export-menu button[hidden] { display: none; }\n    .toolbar .export-menu button:hover {\n      background: var(--toolbar-hover);\n    }\n    .toolbar .export-menu button:focus-visible {\n      background: var(--toolbar-hover);\n      outline-offset: -2px;\n    }\n    .toolbar .export-menu button:disabled {\n      color: var(--text-faint);\n      background: color-mix(in srgb, var(--toolbar-border) 18%, transparent);\n      cursor: not-allowed;\n    }\n    .toolbar .export-menu button:disabled:hover {\n      border-color: transparent;\n    }\n    .toolbar .export-menu .hint {\n      color: var(--text-faint);\n      font-size: 0.55rem;\n    }\n\n    /* Toast — brief feedback for actions like \"copied\" */\n    .archify-toast {\n      position: fixed;\n      top: 1rem;\n      left: 50%;\n      transform: translateX(-50%) translateY(-8px);\n      background: var(--toolbar-menu-bg);\n      color: var(--text);\n      border: 1px solid var(--toolbar-border);\n      padding: 0.5rem 1rem;\n      border-radius: 0.5rem;\n      font-family: inherit;\n      font-size: 0.75rem;\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      z-index: 200;\n      pointer-events: none;\n      box-shadow: 0 4px 20px rgba(0,0,0,0.25);\n    }\n    .archify-toast.show {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n\n    @media (max-width: 720px) {\n      body { padding: 1rem; }\n      .toolbar .preset-menu,\n      .toolbar .export-menu {\n        position: fixed;\n        top: 4.5rem;\n        right: 1rem;\n        left: 1rem;\n        width: auto;\n        max-width: none;\n      }\n      .toolbar {\n        position: relative;\n        justify-content: flex-end;\n        width: max-content;\n        max-width: 100%;\n        margin-left: auto;\n        margin-bottom: 1rem;\n      }\n      .header { margin-bottom: 1.25rem; padding-right: 0; }\n      html[data-preset=\"signal-flow\"] .header,\n      html[data-preset=\"blueprint\"] .header,\n      html[data-preset=\"editorial\"] .header { padding-right: 0; }\n      .header-row {\n        gap: 0.75rem;\n        align-items: flex-start;\n      }\n      html[data-preset=\"signal-flow\"] .header-row,\n      html[data-preset=\"blueprint\"] .header-row,\n      html[data-preset=\"editorial\"] .header-row { flex-wrap: wrap; }\n      html[data-preset=\"signal-flow\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      html[data-preset=\"blueprint\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      html[data-preset=\"editorial\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      h1 {\n        font-size: 1.25rem;\n        line-height: 1.25;\n      }\n      .subtitle {\n        margin-left: 0;\n        font-size: 0.8125rem;\n        line-height: 1.55;\n      }\n      .diagram-container {\n        padding: 0.75rem;\n        border-radius: 0.75rem;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container {\n        padding: 0.75rem 0.75rem 4.25rem;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] {\n        overflow-x: auto;\n        overflow-y: hidden;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-behavior: smooth;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] \u003e svg {\n        min-width: 720px;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .diagram-nav,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .overview-map,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .focus-chip,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .route-probe,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .semantic-lens,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .diagram-guide,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .node-finder {\n        transform: translateX(var(--archify-scroll-x, 0px));\n      }\n      .diagram-nav { right: 0.5rem; bottom: 0.5rem; }\n      .diagram-nav button {\n        min-width: 2.75rem;\n        height: 2.75rem;\n      }\n      .diagram-nav [data-view=\"reset\"] { min-width: 3.75rem; }\n      .diagram-nav [data-view=\"reset\"][data-detail-visible] { min-width: 4.35rem; }\n      .overview-map {\n        right: 0.5rem;\n        bottom: 3.7rem;\n        width: min(10.25rem, calc(100% - 1rem));\n      }\n      .overview-map[data-docked=\"true\"] {\n        right: var(--archify-radar-right, 0.5rem);\n        top: var(--archify-radar-top, 0.5rem);\n        bottom: auto;\n        transform: none !important;\n      }\n      .overview-map[data-docked=\"true\"][data-dock-side=\"left\"] {\n        right: auto;\n        left: var(--archify-radar-left, 0.5rem);\n      }\n      .overview-map-surface { height: 4rem; }\n      .overview-map-feedback { right: 0.5rem; bottom: 3.7rem; }\n      .semantic-lens {\n        right: 0.5rem;\n        bottom: 3.7rem;\n        width: calc(100% - 1rem);\n        max-height: calc(100% - 4.2rem);\n      }\n      .semantic-lens[data-dock-side] { left: auto; right: 0.5rem; }\n      .semantic-lens-kinds { max-height: min(12rem, 34vh); }\n      .focus-chip {\n        left: 0.5rem;\n        top: 0.5rem;\n        width: calc(100% - 1rem);\n        max-width: none;\n      }\n      .relationship-lens-list { max-height: min(12rem, 38vh); }\n      .relationship-lens-actions #btn-focus-relations { display: block; color: var(--database-stroke); }\n      .focus-chip:not([data-relations-expanded=\"true\"]) .relationship-lens-head { border-bottom-color: transparent; }\n      .focus-chip:not([data-relations-expanded=\"true\"]) .relationship-lens-list { display: none; }\n      /* While a mobile reader previews one relationship, turn the full Lens\n         into a compact peek card. This keeps the exact source and target on\n         canvas instead of covering them with a long, scrollable list. */\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-list {\n        max-height: none;\n        padding: 0.35rem;\n        overflow: hidden;\n      }\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-group { margin: 0; }\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-group-title,\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-row:not([data-preview-active=\"true\"]) {\n        display: none;\n      }\n      .node-finder {\n        top: 0.5rem;\n        left: 0.5rem;\n        width: min(22rem, calc(100% - 1rem));\n        max-height: calc(100% - 1rem);\n      }\n      .diagram-guide {\n        top: 0.5rem;\n        right: 0.5rem;\n        left: 0.5rem;\n        width: auto;\n        max-height: calc(100% - 1rem);\n      }\n      .diagram-guide-head { padding: 0.62rem 0.7rem 0.52rem; }\n      .diagram-guide-stats { padding: 0.42rem 0.7rem; }\n      .diagram-guide-actions {\n        grid-template-columns: 1fr;\n        gap: 0.28rem;\n        padding: 0.42rem;\n      }\n      .diagram-guide-action {\n        min-height: 3.1rem;\n        padding: 0.42rem 0.48rem;\n      }\n      .diagram-guide-action small {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .diagram-guide-index {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n      .diagram-guide-shortcuts { padding: 0.46rem 0.7rem 0.52rem; }\n      .diagram-guide-action[data-guide-action=\"present\"] { grid-column: auto; }\n      .route-probe[data-guide-open=\"true\"] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n      .node-finder-results { max-height: min(16rem, 38vh); }\n      .route-probe {\n        left: 0.5rem;\n        bottom: 3.7rem;\n        width: calc(100% - 1rem);\n        min-width: 0;\n      }\n      .route-probe[data-route-dock=\"top\"] {\n        top: 0.5rem;\n        bottom: auto;\n      }\n      .route-probe[data-finder-open=\"true\"] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n      .route-probe-head { padding: 0.45rem 0.48rem 0.38rem; }\n      .route-probe-path { padding: 0.35rem 0.48rem 0.2rem; }\n      .route-probe-node { min-height: 2.75rem !important; }\n      .route-journey-controls {\n        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem minmax(0, 1fr);\n        padding: 0.08rem 0.48rem 0.32rem;\n      }\n      .route-journey-controls button { min-height: 2.75rem; }\n      .route-probe-status { padding: 0.05rem 0.48rem 0.38rem; }\n      .route-probe-node { max-width: 7.5rem; }\n      .guided-views {\n        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;\n        gap: 0.2rem;\n        padding: 0.25rem;\n      }\n      .guided-view-actions {\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .guided-views \u003e #guided-view-prev,\n      .guided-views \u003e #guided-view-next {\n        align-self: center;\n        height: 2.75rem;\n      }\n      .guided-view-play,\n      .guided-view-all,\n      .guided-view-beat-link { min-height: 2.75rem; }\n      .guided-view-copy small { white-space: normal; }\n      .guided-story-caption { padding: 0.32rem 0.45rem; }\n      .guided-story-caption-index { min-width: 2.9rem; padding-right: 0.42rem; }\n      .guided-story-caption strong,\n      .guided-story-caption small { white-space: normal; }\n      .guided-story-caption-next { display: none; }\n      .guided-view-trail { min-height: 2rem; }\n      .guided-view-trail .guided-view-stop {\n        min-height: 2rem;\n        padding: 0.22rem 0.42rem 0.22rem 0.28rem;\n      }\n      .guided-view-handoff { max-width: min(9rem, 32vw); }\n      .guided-view-index { padding-top: 0.35rem; }\n      .guided-view-chapters {\n        gap: 0.35rem;\n        scroll-padding-inline: 0.2rem;\n      }\n      .guided-view-chapters li {\n        flex: 0 0 min(14rem, 78vw);\n        min-width: 0;\n      }\n      .guided-view-chapter { min-height: 2.75rem; }\n      .guided-views[data-active-view=\"all\"] {\n        grid-template-columns: minmax(0, 1fr) auto;\n        gap: 0.2rem;\n        padding: 0.25rem;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-copy {\n        grid-column: 1;\n        grid-row: 1;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-actions {\n        grid-column: 2;\n        grid-row: 1;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-play {\n        min-width: 6rem !important;\n        min-height: 2.75rem;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-index {\n        grid-column: 1 / -1;\n        grid-row: 2;\n        padding: 0.3rem 0.08rem 0;\n        border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n        border-left: 0;\n      }\n      html[data-embed=\"true\"][data-share-playback=\"true\"] .share-chapter-cue:not([hidden]),\n      html[data-embed=\"true\"][data-share-moment=\"true\"] .share-chapter-cue:not([hidden]) {\n        top: 0.5rem;\n        grid-template-columns: auto minmax(0, 1fr);\n        gap: 0.28rem 0.55rem;\n        width: calc(100% - 1rem);\n        min-height: 0;\n        padding: 0.45rem 0.55rem 0.55rem;\n      }\n      html[data-embed=\"true\"][data-share-playback=\"true\"] .diagram-container {\n        padding-top: 4.25rem;\n      }\n      html[data-embed=\"true\"][data-share-moment=\"true\"] .diagram-container {\n        padding-top: 4.25rem;\n      }\n      .share-chapter-index {\n        min-width: 4.4rem;\n        padding-right: 0.5rem;\n      }\n      .share-chapter-copy small { font-size: 0.46rem; }\n      .share-chapter-route {\n        grid-column: 1 / -1;\n        font-size: 0.5rem;\n        text-align: left;\n      }\n      .cards {\n        grid-template-columns: 1fr;\n        margin-top: 1rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) body { padding: 0.5rem; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .container {\n        gap: 0.5rem;\n        height: calc(100dvh - 1rem);\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .toolbar {\n        position: fixed;\n        top: 0.5rem;\n        right: 0.5rem;\n        margin: 0;\n        gap: 0.25rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .toolbar button {\n        min-height: 2.75rem;\n        padding: 0.42rem 0.58rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header {\n        min-height: 2.25rem;\n        padding: 3.5rem 0 0;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row {\n        min-height: 2.25rem;\n        margin: 0;\n        align-items: center;\n        flex-wrap: nowrap;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row::after,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .pulse-dot,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .subtitle { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) h1 {\n        flex: 1 1 auto;\n        min-width: 0;\n        max-width: 100%;\n        overflow: hidden;\n        font-size: 0.875rem;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views {\n        padding: 0.2rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-view-copy small { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-story-caption small { display: block; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container { padding: 0.5rem 0.5rem 3.75rem; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] \u003e svg {\n        width: 720px;\n        height: auto;\n        min-width: 720px;\n      }\n    }\n\n    @media (max-width: 420px) {\n      .export-menu-section { grid-template-columns: 1fr; }\n      .export-menu-heading,\n      .toolbar .export-menu button[data-format=\"share-card\"],\n      .toolbar .export-menu button[data-action=\"route-share-card\"],\n      .toolbar .export-menu button[data-action=\"reach-share-card\"] { grid-column: 1; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .guided-story-caption { animation: none !important; }\n      .toolbar .preset-menu.open,\n      .toolbar .export-menu.open { animation: none; }\n      .toolbar-chevron { transition: none; }\n    }\n\n    @media (max-width: 360px) {\n      .toolbar { gap: 0.25rem; }\n      .toolbar button { padding-right: 0.58rem; padding-left: 0.58rem; }\n      .toolbar #btn-motion { min-width: 4.4rem; padding-right: 0.58rem; padding-left: 0.58rem; }\n      #theme-label, #preset-label, #present-label { display: none; }\n      .guided-view-handoff { max-width: 6.5rem; }\n    }\n\n    /* ==========================================================\n       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke\n       ========================================================== */\n    .c-grid       { stroke: var(--grid); fill: none; }\n    .c-mask       { fill: var(--mask); stroke: none; }\n\n    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }\n    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }\n    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }\n    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }\n    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }\n    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }\n    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }\n\n    /* Text helpers */\n    .t-primary { fill: var(--text); }\n    .t-muted   { fill: var(--text-muted); }\n    .t-dim     { fill: var(--text-dim); }\n    .t-frontend   { fill: var(--frontend-stroke); }\n    .t-backend    { fill: var(--backend-stroke); }\n    .t-database   { fill: var(--database-stroke); }\n    .t-cloud      { fill: var(--cloud-stroke); }\n    .t-security   { fill: var(--security-stroke); }\n    .t-messagebus { fill: var(--messagebus-stroke); }\n    .t-external   { fill: var(--external-stroke); }\n\n    /* Semantic Sigils are small authored role stamps, not icons from a brand\n       pack and not viewer controls. Prefix selectors with svg so the canonical\n       export's SVG-only stylesheet collector keeps them automatically. */\n    svg .semantic-sigil {\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.35;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.76;\n      pointer-events: none;\n    }\n    svg .semantic-sigil \u003e * { vector-effect: non-scaling-stroke; }\n    svg .semantic-sigil .sigil-fill { fill: currentColor; stroke: none; }\n    svg .s-frontend   { color: var(--frontend-stroke); }\n    svg .s-backend    { color: var(--backend-stroke); }\n    svg .s-database   { color: var(--database-stroke); }\n    svg .s-cloud      { color: var(--cloud-stroke); }\n    svg .s-security   { color: var(--security-stroke); }\n    svg .s-messagebus { color: var(--messagebus-stroke); }\n    svg .s-external   { color: var(--external-stroke); }\n\n    /* Brand Marks are authored identity badges. Their color is contained\n       inside one neutral plate so vendor color never replaces Archify's\n       semantic node and relationship vocabulary. */\n    svg .brand-mark { pointer-events: none; }\n    svg .brand-mark-badge { fill: #fff; stroke: none; }\n    svg .brand-mark-frame {\n      fill: none;\n      stroke: #cbd5e1;\n      stroke-width: 0.8;\n      vector-effect: non-scaling-stroke;\n    }\n    svg .brand-mark-fallback {\n      fill: none;\n      stroke: #475569;\n      stroke-width: 1.15;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n    svg[data-preset=\"blueprint\"] .brand-mark-badge,\n    svg[data-preset=\"blueprint\"] .brand-mark-frame { rx: 1px; }\n\n    /* Reading Depth is a viewer-only level-of-detail layer. MAP preserves the\n       authored structure and primary labels, READ restores relationship labels\n       and node context, and FULL restores tags and fine annotations. Semantic\n       intent can reveal the relevant detail without moving any geometry. */\n    svg [data-detail] { transition: opacity 160ms ease; }\n    svg [data-detail-anchor] {\n      transform-box: fill-box;\n      transform-origin: center;\n      transition: transform 160ms ease;\n    }\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail=\"context\"],\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail=\"fine\"],\n    .diagram-container[data-detail-level=\"read\"] svg [data-detail=\"fine\"] {\n      opacity: 0;\n      pointer-events: none;\n    }\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail-anchor] {\n      transform: translateY(8px);\n    }\n\n    /* Focus, lens, preview, route, and story states are stronger reader intent than\n       the global zoom level. Reveal only their exact semantic matches. */\n    svg[data-focus-active] [data-focus-match][data-detail],\n    svg[data-focus-active] [data-focus-match] [data-detail],\n    svg[data-reach-active] [data-reach-match][data-detail],\n    svg[data-reach-active] [data-reach-match] [data-detail],\n    svg[data-lens-active] [data-lens-match][data-detail],\n    svg[data-lens-active] [data-lens-match] [data-detail],\n    svg[data-legend-preview-active] [data-legend-preview-match][data-detail],\n    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail],\n    svg[data-intent-trace-active] [data-intent-trace-match][data-detail],\n    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail],\n    svg[data-route-active] [data-route-match][data-detail],\n    svg[data-route-active] [data-route-match] [data-detail],\n    svg[data-story-active] [data-story-step][data-detail],\n    svg[data-story-active] [data-story-step] [data-detail],\n    svg[data-relationship-preview-active] [data-relationship-preview][data-detail],\n    svg[data-relationship-preview-active] [data-relationship-preview] [data-detail],\n    svg [data-node-id]:hover [data-detail],\n    svg [data-node-id]:focus-visible [data-detail] {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    svg[data-focus-active] [data-focus-match] [data-detail-anchor],\n    svg[data-reach-active] [data-reach-match] [data-detail-anchor],\n    svg[data-lens-active] [data-lens-match] [data-detail-anchor],\n    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail-anchor],\n    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail-anchor],\n    svg[data-route-active] [data-route-match] [data-detail-anchor],\n    svg[data-story-active] [data-story-step] [data-detail-anchor],\n    svg [data-node-id]:hover [data-detail-anchor],\n    svg [data-node-id]:focus-visible [data-detail-anchor] { transform: none; }\n\n    /* Arrows */\n    .a-default   { stroke: var(--arrow); fill: none; }\n    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }\n    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }\n    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }\n\n    /* Arrowhead markers reference these */\n    .m-default   { fill: var(--arrow); }\n    .m-emphasis  { fill: var(--arrow-emphasis); }\n    .m-security  { fill: var(--security-stroke); }\n    .m-dashed    { fill: var(--database-stroke); }\n\n    /* Stable semantic exploration hooks emitted by every renderer. */\n    svg [data-node-id] {\n      cursor: pointer;\n      transition: opacity 0.18s ease, filter 0.18s ease;\n    }\n    svg [data-edge-from] { transition: opacity 0.18s ease, filter 0.18s ease; }\n    svg [data-node-id]:hover,\n    svg [data-node-id]:focus-visible {\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n      outline: none;\n    }\n    /* Verified Source Beacons are installed at runtime only for nodes whose\n       repository evidence passed the local revision/blob/line checks. They\n       live inside the owning node so every focus, route, story, and guided\n       view keeps one coherent opacity state. Export serialization removes\n       them before producing the canonical SVG or any derived visual. */\n    .source-evidence-beacon {\n      pointer-events: none;\n      opacity: 0.76;\n      transition: opacity 160ms ease, filter 160ms ease;\n    }\n    .source-evidence-beacon rect {\n      fill: color-mix(in srgb, var(--mask) 92%, var(--backend-stroke));\n      stroke: color-mix(in srgb, var(--backend-stroke) 82%, var(--panel-border));\n      stroke-width: 1;\n      vector-effect: non-scaling-stroke;\n    }\n    .source-evidence-beacon text {\n      fill: var(--backend-stroke);\n      font-size: 5.5px;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n      text-anchor: middle;\n      text-transform: uppercase;\n    }\n    svg [data-node-id]:hover .source-evidence-beacon,\n    svg [data-node-id]:focus-visible .source-evidence-beacon,\n    svg [data-node-id][data-focus-selected] .source-evidence-beacon {\n      opacity: 1;\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));\n    }\n    svg[data-preset=\"signal-flow\"] .source-evidence-beacon { opacity: 0.9; }\n    svg[data-preset=\"blueprint\"] .source-evidence-beacon rect {\n      rx: 0.8px;\n      filter: none;\n    }\n    svg [data-legend-kind][role=\"button\"] { cursor: pointer; }\n    svg [data-legend-kind]:focus { outline: none; }\n    svg [data-legend-hit] {\n      fill: transparent;\n      stroke: transparent;\n      stroke-width: 1.4;\n      pointer-events: all;\n      vector-effect: non-scaling-stroke;\n      transition: stroke 150ms ease, stroke-width 150ms ease, filter 150ms ease;\n    }\n    svg [data-legend-count-badge] { pointer-events: none; }\n    svg [data-legend-count-badge] rect {\n      fill: var(--mask);\n      stroke: var(--panel-border);\n      stroke-width: 1;\n      vector-effect: non-scaling-stroke;\n    }\n    svg [data-legend-count-badge] text {\n      fill: var(--text-muted);\n      font-size: 8px;\n      font-weight: 700;\n      text-anchor: middle;\n    }\n    svg [data-legend-kind][role=\"button\"]:hover [data-legend-hit] {\n      stroke: color-mix(in srgb, var(--database-stroke) 58%, transparent);\n    }\n    svg [data-legend-kind][role=\"button\"]:focus-visible [data-legend-hit] {\n      stroke: var(--frontend-stroke);\n      stroke-width: 1.8;\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg [data-legend-kind][data-legend-selected] [data-legend-hit] {\n      stroke: var(--database-stroke);\n      stroke-width: 2.2;\n      stroke-dasharray: 3 2;\n    }\n    svg [data-legend-kind][data-legend-selected] [data-legend-count-badge] rect {\n      stroke: var(--database-stroke);\n      stroke-width: 1.8;\n    }\n    svg [data-legend-kind][data-legend-zero] { opacity: 0.44; }\n    svg[data-preset=\"signal-flow\"] [data-legend-kind][data-legend-selected] [data-legend-hit] {\n      filter: drop-shadow(0 0 4px var(--database-stroke));\n    }\n    svg[data-preset=\"blueprint\"] [data-legend-hit],\n    svg[data-preset=\"blueprint\"] [data-legend-count-badge] rect { rx: 0; filter: none; }\n    svg[data-legend-preview-active] [data-node-id],\n    svg[data-legend-preview-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-legend-preview-active] [data-legend-preview-match] { opacity: 1; }\n    svg[data-legend-preview-active] [data-legend-preview-peer] { opacity: 0.62; }\n    svg[data-legend-preview-active] [data-legend-preview-selected] {\n      filter: drop-shadow(0 0 8px var(--database-stroke));\n    }\n    svg[data-lens-active] [data-node-id],\n    svg[data-lens-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-lens-active] [data-lens-match] { opacity: 1; }\n    svg[data-lens-active] [data-lens-peer] { opacity: 0.62; }\n    svg[data-lens-active] [data-lens-selected] {\n      filter: drop-shadow(0 0 10px var(--database-stroke));\n    }\n    .semantic-lens-overlay { pointer-events: none; }\n    .semantic-lens-flow {\n      fill: none;\n      stroke-width: 3.05;\n      stroke-linecap: round;\n      stroke-dasharray: 0.075 0.925;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.9;\n      animation: archify-semantic-lens-flow 1.35s linear 1 both;\n      animation-delay: var(--lens-flow-delay, 0s);\n    }\n    .semantic-lens-flow[data-direction=\"out\"],\n    .semantic-lens-flow[data-direction=\"forward\"] {\n      stroke: var(--frontend-stroke);\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    .semantic-lens-flow[data-direction=\"in\"],\n    .semantic-lens-flow[data-direction=\"reverse\"] {\n      stroke: var(--database-stroke);\n      filter: drop-shadow(0 0 3px var(--database-stroke));\n    }\n    .semantic-lens-flow[data-direction=\"within\"] {\n      stroke: var(--messagebus-stroke);\n      filter: drop-shadow(0 0 3px var(--messagebus-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow {\n      stroke-width: 3.7;\n      opacity: 1;\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"out\"],\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"forward\"] {\n      filter: drop-shadow(0 0 6px var(--frontend-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"in\"],\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"reverse\"] {\n      filter: drop-shadow(0 0 6px var(--database-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"within\"] {\n      filter: drop-shadow(0 0 6px var(--messagebus-stroke));\n    }\n    svg[data-preset=\"blueprint\"] .semantic-lens-flow {\n      stroke-width: 2.45;\n      stroke-linecap: square;\n      filter: none;\n      opacity: 0.78;\n    }\n    html[data-embed=\"true\"] .semantic-lens-overlay { display: none; }\n    svg[data-focus-active] [data-node-id],\n    svg[data-focus-active] [data-edge-from] { opacity: 0.13; }\n    svg[data-focus-active] [data-focus-match] { opacity: 1; }\n    svg[data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n\n    /* Authored Reachability is a bounded graph query over the relationships\n       already present in the artifact. Upstream walks incoming edges;\n       downstream walks outgoing edges. It never claims runtime causality and\n       changes only viewer emphasis, not canonical geometry or export bytes. */\n    svg[data-reach-active] [data-node-id],\n    svg[data-reach-active] [data-edge-from] { opacity: 0.09; }\n    svg[data-reach-active] [data-reach-match] { opacity: 1; }\n    svg[data-reach-active=\"upstream\"] [data-reach-origin] {\n      filter: drop-shadow(0 0 11px var(--database-stroke));\n    }\n    svg[data-reach-active=\"downstream\"] [data-reach-origin] {\n      filter: drop-shadow(0 0 11px var(--backend-stroke));\n    }\n    svg[data-reach-active=\"upstream\"] [data-edge-from][data-reach-match] {\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--database-stroke) 72%, transparent));\n    }\n    svg[data-reach-active=\"downstream\"] [data-edge-from][data-reach-match] {\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));\n    }\n    svg[data-preset=\"blueprint\"][data-reach-active] [data-reach-origin],\n    svg[data-preset=\"blueprint\"][data-reach-active] [data-edge-from][data-reach-match] {\n      filter: none;\n    }\n\n    /* Direct Relationship Explorer makes authored paths a real input surface\n       without changing their visible stroke or canonical SVG. A transparent\n       runtime rail supplies forgiving pointer geometry; the exact authored\n       path and endpoints continue to carry every visible state. */\n    .relationship-hit-overlay { pointer-events: none; }\n    .relationship-hit-target { outline: none; }\n    .relationship-hit-rail {\n      fill: none;\n      stroke: transparent;\n      stroke-width: 24;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n      pointer-events: stroke;\n      cursor: pointer;\n    }\n    .relationship-focus-rail {\n      fill: none;\n      stroke: color-mix(in srgb, var(--frontend-stroke) 34%, transparent);\n      stroke-width: 6;\n      stroke-dasharray: 2 4;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n      pointer-events: none;\n      opacity: 0;\n    }\n    .relationship-hit-target:focus-visible .relationship-focus-rail {\n      opacity: 1;\n    }\n    svg[data-preset=\"blueprint\"] .relationship-hit-target:focus-visible .relationship-focus-rail {\n      stroke-linecap: square;\n      filter: none;\n    }\n    svg[data-relationship-direct-active] [data-node-id],\n    svg[data-relationship-direct-active] [data-edge-from] { opacity: 0.16; }\n    svg[data-relationship-direct-active] [data-relationship-preview],\n    svg[data-relationship-direct-active] [data-relationship-preview-node] { opacity: 1; }\n    svg[data-focus-active]:not([data-relationship-pin-active]) .relationship-hit-rail,\n    svg[data-story-active] .relationship-hit-rail,\n    svg[data-route-picking] .relationship-hit-rail,\n    svg[data-route-active] .relationship-hit-rail,\n    svg[data-lens-active] .relationship-hit-rail,\n    svg[data-chapter-preview] .relationship-hit-rail { pointer-events: none; }\n    html[data-embed=\"true\"] .relationship-hit-overlay { display: none; }\n    @media (hover: none), (pointer: coarse) {\n      .relationship-hit-rail { stroke-width: 24; }\n    }\n\n    /* Relationship Preview is temporary exploration state layered on top of\n       neighborhood focus. It changes emphasis only; exported geometry and the\n       relationship's original solid/dashed visual language stay untouched. */\n    svg[data-relationship-preview-active] [data-focus-match] { opacity: 0.18; }\n    svg[data-relationship-preview-active] [data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview-node] { opacity: 1; }\n    svg[data-relationship-preview-active] [data-relationship-preview] {\n      filter: drop-shadow(0 0 5px var(--arrow-emphasis));\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview] path,\n    svg[data-relationship-preview-active] path[data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview] line,\n    svg[data-relationship-preview-active] line[data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview] polyline,\n    svg[data-relationship-preview-active] polyline[data-relationship-preview] {\n      stroke-width: 2.75;\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview-source] {\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview-target] {\n      filter: drop-shadow(0 0 7px var(--database-stroke));\n    }\n    .relationship-pulse-overlay { pointer-events: none; }\n    .relationship-flow-pulse {\n      fill: none;\n      stroke: var(--arrow-emphasis);\n      stroke-width: 3.35;\n      stroke-linecap: round;\n      stroke-dasharray: 0.085 0.915;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0;\n      filter: drop-shadow(0 0 4px var(--arrow-emphasis));\n      animation: archify-relationship-pulse 1.2s linear 1 both;\n    }\n    svg[data-preset=\"signal-flow\"] .relationship-flow-pulse {\n      stroke: var(--frontend-stroke);\n      stroke-width: 3.85;\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"] .relationship-flow-pulse {\n      stroke-width: 2.5;\n      stroke-linecap: square;\n      filter: none;\n    }\n    svg[data-preset=\"editorial\"] .relationship-flow-pulse {\n      stroke: var(--arrow-emphasis);\n      stroke-width: 2.75;\n      filter: none;\n    }\n    .semantic-flow-token {\n      color: var(--frontend-stroke);\n      opacity: 0;\n      pointer-events: none;\n    }\n    .relationship-flow-token {\n      animation: archify-relationship-token-life 1.2s linear 1 both;\n    }\n    .story-flow-token {\n      animation: archify-relationship-token-life 0.78s linear 1 both;\n    }\n    .semantic-flow-token-halo {\n      fill: var(--mask);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n    }\n    .relationship-flow-token-shape {\n      fill: var(--mask);\n      stroke: currentColor;\n      stroke-width: 1.35;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n    }\n    .relationship-flow-token-ink {\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.05;\n      stroke-linecap: round;\n      vector-effect: non-scaling-stroke;\n    }\n    .relationship-flow-token-dot { fill: currentColor; stroke: none; }\n    .semantic-flow-token[data-token-kind=\"data\"] { color: var(--database-stroke); }\n    .semantic-flow-token[data-token-kind=\"event\"] { color: var(--messagebus-stroke); }\n    .semantic-flow-token[data-token-kind=\"security\"] { color: var(--security-stroke); }\n    .semantic-flow-token[data-token-kind=\"state\"] { color: var(--cloud-stroke); }\n    svg[data-preset=\"signal-flow\"] .semantic-flow-token {\n      filter: drop-shadow(0 0 5px currentColor);\n    }\n    svg[data-preset=\"blueprint\"] .semantic-flow-token { filter: none; }\n    svg[data-preset=\"editorial\"] .semantic-flow-token { filter: none; }\n    html[data-embed=\"true\"] .relationship-pulse-overlay { display: none; }\n\n    /* Intent Trace is a temporary, pre-click exploration layer. Related\n       topology stays readable while a short viewer-only signal runs over\n       cloned edge geometry; the authored edge remains untouched underneath. */\n    svg[data-intent-trace-active] [data-node-id],\n    svg[data-intent-trace-active] [data-edge-from] { opacity: 0.2; }\n    svg[data-intent-trace-active] [data-intent-trace-match] { opacity: 1; }\n    svg[data-intent-trace-active] [data-intent-trace-selected] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n    .intent-trace-overlay { pointer-events: none; }\n    .intent-trace-flow {\n      fill: none;\n      stroke-width: 3.1;\n      stroke-linecap: round;\n      stroke-dasharray: 0.1 0.9;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.94;\n      animation: archify-intent-trace-flow 1.15s linear 1 both;\n    }\n    /* Direction names describe each edge relative to the focused node only.\n       The cloned geometry already runs from the authored source to target, so\n       incoming and outgoing signals must share the same playback direction. */\n    .intent-trace-flow[data-direction=\"out\"] {\n      stroke: var(--frontend-stroke);\n      filter: drop-shadow(0 0 4px var(--frontend-stroke));\n    }\n    .intent-trace-flow[data-direction=\"in\"] {\n      stroke: var(--database-stroke);\n      filter: drop-shadow(0 0 4px var(--database-stroke));\n      animation-direction: normal;\n    }\n    .intent-trace-flow[data-direction=\"loop\"] {\n      stroke: var(--security-stroke);\n      filter: drop-shadow(0 0 4px var(--security-stroke));\n    }\n    svg[data-preset=\"blueprint\"] [data-intent-trace-selected],\n    svg[data-preset=\"blueprint\"] .intent-trace-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"editorial\"] [data-intent-trace-selected],\n    svg[data-preset=\"editorial\"] .intent-trace-flow { filter: none; }\n    .intent-trace-status {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      clip-path: inset(50%);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* Route Probe separates a durable two-point query from selection and\n       one-hop hover. Only the chosen shortest directed path stays prominent;\n       the traveling signal is cloned viewer geometry and never authored SVG. */\n    svg[data-route-picking=\"target\"] [data-node-id] { opacity: 0.24; }\n    svg[data-route-picking=\"target\"] [data-route-candidate],\n    svg[data-route-picking=\"target\"] [data-route-start] { opacity: 1; }\n    svg[data-route-picking] [data-node-id] { cursor: crosshair; }\n    svg[data-route-picking] [data-route-start] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n    svg[data-route-active] [data-node-id],\n    svg[data-route-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-route-active] [data-route-match] { opacity: 1; }\n    svg[data-route-active] [data-route-start] {\n      filter: drop-shadow(0 0 11px var(--frontend-stroke));\n    }\n    svg[data-route-active] [data-route-end] {\n      filter: drop-shadow(0 0 11px var(--security-stroke));\n    }\n    svg[data-route-active] [data-route-step]:not([data-route-start]):not([data-route-end]) {\n      filter: drop-shadow(0 0 7px var(--backend-stroke));\n    }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"past\"] { opacity: 0.62; }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"future\"] { opacity: 0.34; }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"current\"] { opacity: 1; }\n    svg[data-route-journey] [data-node-id][data-route-journey-current] {\n      filter: drop-shadow(0 0 10px var(--backend-stroke));\n    }\n    svg[data-route-journey] [data-edge-from][data-route-journey-current] {\n      opacity: 1;\n      filter: drop-shadow(0 0 6px var(--backend-stroke));\n    }\n    .route-probe-overlay { pointer-events: none; }\n    .route-journey-overlay { pointer-events: none; }\n    .route-probe-flow {\n      fill: none;\n      stroke: var(--backend-stroke);\n      stroke-width: 3.25;\n      stroke-linecap: round;\n      stroke-dasharray: 0.085 0.915;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n      filter: drop-shadow(0 0 5px var(--backend-stroke));\n      animation: archify-route-probe-flow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1 both;\n      animation-delay: calc(var(--route-step, 0) * 0.16s);\n    }\n    .route-journey-flow {\n      fill: none;\n      stroke: var(--backend-stroke);\n      stroke-width: 3.5;\n      stroke-linecap: round;\n      stroke-dasharray: 0.1 0.9;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0;\n      filter: drop-shadow(0 0 6px var(--backend-stroke));\n      animation: archify-route-journey-flow 780ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;\n    }\n    svg[data-preset=\"blueprint\"] [data-route-start],\n    svg[data-preset=\"blueprint\"] [data-route-end],\n    svg[data-preset=\"blueprint\"] [data-route-step],\n    svg[data-preset=\"blueprint\"] .route-probe-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"blueprint\"] .route-journey-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"editorial\"] [data-route-start],\n    svg[data-preset=\"editorial\"] [data-route-end],\n    svg[data-preset=\"editorial\"] [data-route-step],\n    svg[data-preset=\"editorial\"] .route-probe-flow,\n    svg[data-preset=\"editorial\"] .route-journey-flow { filter: none; }\n\n    svg[data-preset=\"editorial\"] .c-grid {\n      stroke-dasharray: 1 4;\n      opacity: 0.48;\n    }\n    svg[data-preset=\"editorial\"] .c-region {\n      fill: color-mix(in srgb, var(--cloud-fill) 48%, transparent);\n      stroke-dasharray: 9 4;\n    }\n    svg[data-preset=\"editorial\"] [data-node-id]:hover,\n    svg[data-preset=\"editorial\"] [data-node-id]:focus-visible,\n    svg[data-preset=\"editorial\"][data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent));\n    }\n\n    svg[data-preset=\"blueprint\"] .c-grid {\n      stroke-dasharray: 1 3;\n      opacity: 0.78;\n    }\n    svg[data-preset=\"blueprint\"] .c-region {\n      fill: color-mix(in srgb, var(--cloud-fill) 58%, transparent);\n      stroke-dasharray: 12 4 2 4;\n    }\n    svg[data-preset=\"blueprint\"] .c-security-group,\n    svg[data-preset=\"blueprint\"] .c-lane { stroke-dasharray: 7 3; }\n    svg[data-preset=\"blueprint\"] [data-node-id]:hover,\n    svg[data-preset=\"blueprint\"] [data-node-id]:focus-visible {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"][data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"][data-focus-active][data-reach-active] [data-focus-selected][data-reach-origin] {\n      filter: none;\n    }\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview],\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview-source],\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview-target] {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n\n    /* Story Trail is a viewer-only overlay derived from the ordered focus IDs\n       of the active guided view. The authored edge stays underneath with its\n       original color, dash pattern, marker, and geometry intact. */\n    .story-trail-overlay { pointer-events: none; }\n    .story-carrier-overlay { pointer-events: none; }\n    .story-trail-flow {\n      fill: none;\n      stroke: var(--frontend-stroke);\n      stroke-width: 2.8;\n      stroke-linecap: round;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.34;\n      filter: drop-shadow(0 0 2px var(--frontend-stroke));\n    }\n    svg[data-story-beat] [data-story-step] {\n      opacity: 0.22;\n      filter: saturate(0.42);\n      transition: opacity 180ms ease, filter 180ms ease;\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"past\"] {\n      opacity: 0.72;\n      filter: saturate(0.82);\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"next\"] {\n      opacity: 0.5;\n      filter: saturate(0.66);\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      opacity: 1;\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n      animation: archify-story-beat-node 360ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step] {\n      opacity: 0.16;\n      transition: opacity 160ms ease;\n    }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"past\"] { opacity: 0.58; }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"next\"] { opacity: 0.34; }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"active\"] { opacity: 1; }\n    svg[data-story-beat] .story-trail-flow { opacity: 0; transition: opacity 160ms ease; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"past\"] { opacity: 0.34; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"next\"] { opacity: 0.2; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"active\"] { opacity: 0.92; }\n    svg[data-story-beat] .story-trail-flow[data-story-pulse=\"true\"] {\n      stroke-dasharray: 2 13;\n      stroke-dashoffset: 30;\n      opacity: 0.92;\n      animation: archify-story-flow 0.78s linear 1 both;\n    }\n    svg[data-preset=\"blueprint\"] .story-trail-flow {\n      stroke-linecap: square;\n      filter: none;\n      opacity: 0.5;\n    }\n    svg[data-preset=\"blueprint\"][data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      filter: none;\n      animation: none;\n    }\n    svg[data-preset=\"editorial\"] .story-trail-flow { filter: none; }\n    svg[data-preset=\"editorial\"][data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 16%, transparent));\n    }\n\n    /* Chapter Delta Preview is a static, pre-commit comparison between two\n       chapter focus sets. Symbols in the rail carry the meaning without color;\n       these SVG rules only make exact stable-ID membership easier to scan. */\n    svg[data-chapter-preview] [data-node-id],\n    svg[data-chapter-preview] [data-edge-from] {\n      opacity: 0.1 !important;\n      filter: none !important;\n      transition: none !important;\n    }\n    svg[data-chapter-preview] .story-trail-overlay { opacity: 0.08 !important; }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"stay\"] {\n      opacity: 0.76 !important;\n      filter: saturate(0.7) !important;\n    }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"enter\"] {\n      opacity: 1 !important;\n      filter: saturate(1.2) !important;\n    }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"leave\"] {\n      opacity: 0.28 !important;\n      filter: grayscale(0.72) !important;\n    }\n    svg[data-preset=\"blueprint\"][data-chapter-preview] [data-node-id] { filter: none !important; }\n\n    /* Dashed boundary variants */\n    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }\n    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }\n    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }\n\n    /* Optional trace animation, enabled only by meta.animation = \"trace\".\n       The ordinary viewer performs one ambient pass and then restores the\n       authored solid/security/async line language. WebM samples the same\n       authored geometry into an explicit canvas timeline. */\n    html[data-ambient-motion=\"running\"] svg[data-animation=\"trace\"] [data-animate=\"edge\"] {\n      animation: archify-edge-flow 2.4s linear 1;\n      animation-delay: calc(var(--step, 0) * 160ms);\n    }\n    html[data-ambient-motion=\"running\"] svg[data-animation=\"trace\"] [data-animate=\"node\"] {\n      transform-box: fill-box;\n      transform-origin: center;\n      animation: archify-node-pulse 3.6s ease-in-out 1;\n      animation-delay: calc(var(--step, 0) * 160ms);\n    }\n    svg[data-preset=\"signal-flow\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      stroke-linecap: round;\n      filter: drop-shadow(0 0 3px var(--arrow-emphasis));\n      animation-duration: 1.75s;\n    }\n    svg[data-preset=\"signal-flow\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-duration: 3.1s;\n    }\n    svg[data-preset=\"blueprint\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      stroke-linecap: square;\n      filter: none;\n      animation-duration: 2.15s;\n    }\n    svg[data-preset=\"blueprint\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-name: archify-blueprint-node-pulse;\n      animation-duration: 3.8s;\n    }\n    svg[data-preset=\"editorial\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      filter: none;\n      animation-duration: 2.2s;\n    }\n    svg[data-preset=\"editorial\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-name: archify-editorial-node-pulse;\n      animation-duration: 3.5s;\n    }\n    /* Embedded proofs are static until a named Story Trail chapter is played.\n       This keeps proof grids calm and ensures ?play=1 stops all viewer motion\n       after one 3.2 second chapter instead of leaving ambient trace loops on. */\n    html[data-embed=\"true\"] svg[data-animation=\"trace\"] [data-animate],\n    html[data-share-playback=\"true\"] svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n      stroke-dashoffset: 0;\n    }\n    @keyframes archify-edge-flow {\n      0% { stroke-dasharray: 10 8; stroke-dashoffset: 54; opacity: 0.42; }\n      88% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }\n      99.9% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }\n      100% { stroke-dashoffset: 0; opacity: 1; }\n    }\n    @keyframes archify-node-pulse {\n      0%, 72%, 100% { filter: none; stroke-width: 1.5; }\n      18%, 36% {\n        filter: drop-shadow(0 0 8px var(--arrow-emphasis));\n        stroke-width: 2.4;\n      }\n    }\n    @keyframes archify-blueprint-node-pulse {\n      0%, 72%, 100% { opacity: 1; filter: none; }\n      18%, 36% { opacity: 0.72; filter: drop-shadow(0 0 2px var(--frontend-stroke)); }\n    }\n    @keyframes archify-editorial-node-pulse {\n      0%, 72%, 100% { opacity: 1; filter: none; }\n      18%, 36% { opacity: 0.78; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent)); }\n    }\n    @keyframes archify-signal-scan {\n      0%, 18% { opacity: 1; transform: translateX(-70%); }\n      70% { opacity: 1; transform: translateX(70%); }\n      100% { opacity: 0; transform: translateX(70%); }\n    }\n    @keyframes archify-radar-live {\n      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent); }\n      55%, 100% { box-shadow: 0 0 0 0.32rem transparent; }\n    }\n    @keyframes archify-guided-progress {\n      from { transform: scaleX(var(--guided-progress-start, 0)); }\n      to { transform: scaleX(1); }\n    }\n    @keyframes archify-story-flow {\n      to { stroke-dashoffset: 0; }\n    }\n    @keyframes archify-intent-trace-flow {\n      0% { opacity: 0.28; stroke-dashoffset: 0; }\n      12%, 78% { opacity: 0.94; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-route-probe-flow {\n      0% { stroke-dashoffset: 0; opacity: 0.96; }\n      78% { stroke-dashoffset: -1; opacity: 0.96; }\n      100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.58; }\n    }\n    @keyframes archify-route-journey-flow {\n      0% { opacity: 0.16; stroke-dashoffset: 0; }\n      14%, 76% { opacity: 1; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-semantic-lens-flow {\n      0% { opacity: 0.2; stroke-dashoffset: 0; }\n      12%, 78% { opacity: 0.9; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-relationship-pulse {\n      0% { opacity: 0.18; stroke-dashoffset: 0; }\n      10%, 76% { opacity: 0.98; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-relationship-token-life {\n      0%, 7% { opacity: 0; }\n      13%, 82% { opacity: 1; }\n      100% { opacity: 0; }\n    }\n    @keyframes archify-story-beat-node {\n      from { opacity: 0.48; filter: saturate(0.6); }\n      58% { opacity: 1; filter: drop-shadow(0 0 10px var(--frontend-stroke)); }\n      to { opacity: 1; filter: drop-shadow(0 0 7px var(--frontend-stroke)); }\n    }\n    @keyframes archify-share-cue-enter {\n      from { opacity: 0; transform: translate(-50%, -0.45rem); }\n      to { opacity: 1; transform: translate(-50%, 0); }\n    }\n    @keyframes archify-share-cue-pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.48; transform: scale(0.78); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      html[data-preset=\"signal-flow\"] .diagram-container::before {\n        animation: none !important;\n      }\n      .pulse-dot { animation: none !important; }\n      svg[data-animation=\"trace\"] [data-animate] {\n        animation: none !important;\n        stroke-dashoffset: 0;\n      }\n      .guided-view-progress span {\n        animation: none !important;\n        transform: scaleX(1) !important;\n      }\n      .story-trail-flow,\n      .intent-trace-flow,\n      .route-probe-flow,\n      .semantic-lens,\n      .diagram-guide,\n      [data-story-step],\n      .overview-map-live,\n      .guided-view-stop,\n      .share-chapter-cue,\n      .chapter-handoff-anchor,\n      .share-chapter-state::before,\n      .share-chapter-progress span { animation: none !important; }\n      .guided-view-chapter,\n      svg[data-chapter-preview] [data-node-id],\n      svg[data-chapter-preview] [data-edge-from] { transition: none !important; }\n      svg[data-story-playing=\"true\"] .story-trail-flow {\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.55;\n      }\n      .intent-trace-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.72;\n      }\n      .route-probe-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.78;\n      }\n      .route-journey-overlay,\n      .story-carrier-overlay { display: none !important; }\n      .semantic-lens-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-width: 2.2;\n        opacity: 0.34;\n        filter: none;\n      }\n      .relationship-pulse-overlay { display: none !important; }\n      .guided-view-chapter { transition: none !important; }\n      .source-evidence-beacon,\n      svg [data-node-id], svg [data-edge-from], svg [data-detail], svg [data-detail-anchor], svg [data-legend-hit], svg { transition: none !important; }\n    }\n  ";
+  const exportCss = "\n    /* Offline-first typography: prefer a locally installed JetBrains Mono and\n       fall through to the system monospace stack. Delivered HTML must not\n       request third-party font hosts. */\n    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }\n    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }\n    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }\n    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }\n    /* ==========================================================\n       THEME VARIABLES — switch by toggling [data-theme] on \u003chtml\u003e\n       ========================================================== */\n    :root,\n    [data-theme=\"dark\"] {\n      --bg: #020617;\n      --grid: #1e293b;\n      --text: #ffffff;\n      --text-muted: #94a3b8;\n      --text-dim: #475569;\n      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */\n      --text-faint: #7d8da1;\n\n      --panel: rgba(15, 23, 42, 0.5);\n      --panel-border: #1e293b;\n      --lane-fill: rgba(15, 23, 42, 0.22);\n      --lane-stroke: #334155;\n\n      --arrow: #64748b;\n      --arrow-emphasis: #34d399;\n\n      /* Opaque mask color used behind semi-transparent component fills\n         so the arrows drawn underneath are properly hidden. */\n      --mask: #0f172a;\n\n      --frontend-fill:    rgba(8, 51, 68, 0.4);\n      --frontend-stroke:  #22d3ee;\n      --backend-fill:     rgba(6, 78, 59, 0.4);\n      --backend-stroke:   #34d399;\n      --database-fill:    rgba(76, 29, 149, 0.4);\n      --database-stroke:  #a78bfa;\n      --cloud-fill:       rgba(120, 53, 15, 0.3);\n      --cloud-stroke:     #fbbf24;\n      --security-fill:    rgba(136, 19, 55, 0.4);\n      --security-stroke:  #fb7185;\n      --messagebus-fill:  rgba(251, 146, 60, 0.3);\n      --messagebus-stroke:#fb923c;\n      --external-fill:    rgba(30, 41, 59, 0.5);\n      --external-stroke:  #94a3b8;\n\n      --toolbar-bg:       rgba(15, 23, 42, 0.8);\n      --toolbar-border:   #334155;\n      --toolbar-text:     #e2e8f0;\n      --toolbar-hover:    rgba(15, 23, 42, 0.95);\n      --toolbar-menu-bg:  #0f172a;\n    }\n\n    [data-theme=\"light\"] {\n      --bg: #f8fafc;\n      --grid: #e2e8f0;\n      --text: #0f172a;\n      --text-muted: #64748b;\n      --text-dim: #94a3b8;\n      --text-faint: #64748b;\n\n      --panel: #ffffff;\n      --panel-border: #e2e8f0;\n      --lane-fill: rgba(248, 250, 252, 0.65);\n      --lane-stroke: #cbd5e1;\n\n      --arrow: #94a3b8;\n      --arrow-emphasis: #059669;\n\n      --mask: #ffffff;\n\n      --frontend-fill:    rgba(34, 211, 238, 0.15);\n      --frontend-stroke:  #0891b2;\n      --backend-fill:     rgba(52, 211, 153, 0.18);\n      --backend-stroke:   #059669;\n      --database-fill:    rgba(167, 139, 250, 0.2);\n      --database-stroke:  #7c3aed;\n      --cloud-fill:       rgba(251, 191, 36, 0.18);\n      --cloud-stroke:     #d97706;\n      --security-fill:    rgba(251, 113, 133, 0.15);\n      --security-stroke:  #e11d48;\n      --messagebus-fill:  rgba(251, 146, 60, 0.15);\n      --messagebus-stroke:#ea580c;\n      --external-fill:    rgba(148, 163, 184, 0.18);\n      --external-stroke:  #64748b;\n\n      --toolbar-bg:       rgba(255, 255, 255, 0.92);\n      --toolbar-border:   #cbd5e1;\n      --toolbar-text:     #334155;\n      --toolbar-hover:    #ffffff;\n      --toolbar-menu-bg:  #ffffff;\n    }\n\n    /* ==========================================================\n       SIGNAL FLOW — an opt-in, motion-forward visual preset.\n       The variables also target a standalone exported SVG, whose\n       root carries data-preset and data-theme directly.\n       ========================================================== */\n    [data-preset=\"signal-flow\"][data-theme=\"dark\"] {\n      --bg: #030711;\n      --grid: #15233a;\n      --panel: rgba(6, 14, 28, 0.78);\n      --panel-border: #1d3350;\n      --lane-fill: rgba(9, 22, 40, 0.5);\n      --lane-stroke: #2c4564;\n      --text: #f5fbff;\n      --text-muted: #9eb0c7;\n      --text-dim: #52667f;\n      --text-faint: #7890ad;\n      --mask: #07101e;\n      --frontend-fill: rgba(6, 182, 212, 0.14);\n      --frontend-stroke: #67e8f9;\n      --backend-fill: rgba(16, 185, 129, 0.14);\n      --backend-stroke: #5eead4;\n      --database-fill: rgba(139, 92, 246, 0.16);\n      --database-stroke: #c4b5fd;\n      --cloud-fill: rgba(245, 158, 11, 0.13);\n      --cloud-stroke: #fcd34d;\n      --security-fill: rgba(244, 63, 94, 0.13);\n      --security-stroke: #fda4af;\n      --messagebus-fill: rgba(249, 115, 22, 0.13);\n      --messagebus-stroke: #fdba74;\n      --external-fill: rgba(71, 85, 105, 0.24);\n      --external-stroke: #a5b4c7;\n      --arrow: #7890ad;\n      --arrow-emphasis: #2dd4bf;\n      --toolbar-bg: rgba(7, 16, 30, 0.86);\n      --toolbar-border: #29415f;\n      --toolbar-menu-bg: #07101e;\n    }\n\n    [data-preset=\"signal-flow\"][data-theme=\"light\"] {\n      --bg: #f4f9fc;\n      --grid: #d4e5ee;\n      --panel: rgba(255, 255, 255, 0.82);\n      --panel-border: #bfd5e2;\n      --lane-fill: rgba(232, 243, 248, 0.62);\n      --lane-stroke: #a9c5d5;\n      --text: #102638;\n      --text-muted: #587287;\n      --text-dim: #8aa2b4;\n      --text-faint: #668397;\n      --mask: #ffffff;\n      --frontend-fill: rgba(6, 182, 212, 0.09);\n      --frontend-stroke: #0789a1;\n      --backend-fill: rgba(5, 150, 105, 0.09);\n      --backend-stroke: #087f69;\n      --database-fill: rgba(124, 58, 237, 0.09);\n      --database-stroke: #7254c7;\n      --cloud-fill: rgba(217, 119, 6, 0.08);\n      --cloud-stroke: #b9670b;\n      --security-fill: rgba(225, 29, 72, 0.08);\n      --security-stroke: #c53a59;\n      --messagebus-fill: rgba(234, 88, 12, 0.08);\n      --messagebus-stroke: #c65f27;\n      --external-fill: rgba(100, 116, 139, 0.1);\n      --external-stroke: #607a8c;\n      --arrow: #7b97aa;\n      --arrow-emphasis: #0d9488;\n    }\n\n    /* ==========================================================\n       BLUEPRINT — a review-first drafting preset for deployment,\n       infrastructure, and technical design documentation. It keeps\n       the same semantic palette and geometry while trading glow for\n       precise grid contrast, squared materials, and drafting marks.\n       ========================================================== */\n    [data-preset=\"blueprint\"][data-theme=\"dark\"] {\n      --bg: #06131f;\n      --grid: #17425a;\n      --panel: rgba(7, 27, 43, 0.9);\n      --panel-border: #27627f;\n      --lane-fill: rgba(10, 43, 66, 0.36);\n      --lane-stroke: #34799a;\n      --text: #e3f6ff;\n      --text-muted: #91b8ca;\n      --text-dim: #557e92;\n      --text-faint: #739caf;\n      --mask: #0a2031;\n      --frontend-fill: rgba(26, 157, 193, 0.14);\n      --frontend-stroke: #66d9ef;\n      --backend-fill: rgba(31, 155, 124, 0.13);\n      --backend-stroke: #69dfbd;\n      --database-fill: rgba(120, 105, 196, 0.14);\n      --database-stroke: #b4a8ff;\n      --cloud-fill: rgba(197, 145, 43, 0.13);\n      --cloud-stroke: #ffd166;\n      --security-fill: rgba(199, 76, 104, 0.13);\n      --security-stroke: #ff8da1;\n      --messagebus-fill: rgba(207, 112, 49, 0.13);\n      --messagebus-stroke: #ffad66;\n      --external-fill: rgba(84, 119, 139, 0.18);\n      --external-stroke: #a7cad9;\n      --arrow: #78a3b7;\n      --arrow-emphasis: #64dfc1;\n      --toolbar-bg: rgba(7, 28, 45, 0.92);\n      --toolbar-border: #34799a;\n      --toolbar-text: #d8f3ff;\n      --toolbar-hover: rgba(18, 58, 83, 0.95);\n      --toolbar-menu-bg: #0a2031;\n    }\n\n    [data-preset=\"blueprint\"][data-theme=\"light\"] {\n      --bg: #edf7fa;\n      --grid: #b5d5e1;\n      --panel: rgba(249, 253, 255, 0.94);\n      --panel-border: #78aabd;\n      --lane-fill: rgba(210, 232, 240, 0.42);\n      --lane-stroke: #83b2c4;\n      --text: #123344;\n      --text-muted: #4e7486;\n      --text-dim: #86a6b4;\n      --text-faint: #668c9d;\n      --mask: #f9fdff;\n      --frontend-fill: rgba(8, 145, 178, 0.08);\n      --frontend-stroke: #087f9c;\n      --backend-fill: rgba(5, 128, 101, 0.08);\n      --backend-stroke: #08755f;\n      --database-fill: rgba(100, 75, 180, 0.08);\n      --database-stroke: #6757a8;\n      --cloud-fill: rgba(181, 120, 15, 0.08);\n      --cloud-stroke: #a86609;\n      --security-fill: rgba(190, 48, 80, 0.07);\n      --security-stroke: #b32f50;\n      --messagebus-fill: rgba(196, 81, 22, 0.07);\n      --messagebus-stroke: #b65120;\n      --external-fill: rgba(79, 112, 128, 0.08);\n      --external-stroke: #506f7e;\n      --arrow: #6d93a5;\n      --arrow-emphasis: #087f69;\n      --toolbar-bg: rgba(247, 252, 254, 0.94);\n      --toolbar-border: #8ab5c5;\n      --toolbar-text: #294f61;\n      --toolbar-hover: #ffffff;\n      --toolbar-menu-bg: #f9fdff;\n    }\n\n    /* ==========================================================\n       EDITORIAL — a warm, publication-minded preset for design\n       reviews, launch notes, and documentation. The diagram keeps\n       the same semantic palette and exact geometry, but trades\n       software chrome for paper, ink, ruled structure, and one\n       restrained vermilion accent.\n       ========================================================== */\n    [data-preset=\"editorial\"][data-theme=\"dark\"] {\n      --bg: #181611;\n      --grid: #39342a;\n      --panel: rgba(35, 31, 24, 0.96);\n      --panel-border: #625a4a;\n      --lane-fill: rgba(52, 46, 35, 0.46);\n      --lane-stroke: #726957;\n      --text: #f4eddf;\n      --text-muted: #b9ae9b;\n      --text-dim: #776e60;\n      --text-faint: #9d917e;\n      --mask: #231f18;\n      --frontend-fill: rgba(43, 133, 142, 0.16);\n      --frontend-stroke: #7fc6c7;\n      --backend-fill: rgba(63, 132, 92, 0.16);\n      --backend-stroke: #8fc29e;\n      --database-fill: rgba(117, 91, 141, 0.17);\n      --database-stroke: #c0a4d0;\n      --cloud-fill: rgba(170, 119, 49, 0.16);\n      --cloud-stroke: #d8ad68;\n      --security-fill: rgba(157, 69, 65, 0.17);\n      --security-stroke: #df9085;\n      --messagebus-fill: rgba(174, 79, 42, 0.16);\n      --messagebus-stroke: #df946f;\n      --external-fill: rgba(126, 115, 96, 0.18);\n      --external-stroke: #b8ad99;\n      --arrow: #948978;\n      --arrow-emphasis: #dd6b3d;\n      --toolbar-bg: rgba(35, 31, 24, 0.92);\n      --toolbar-border: #625a4a;\n      --toolbar-text: #eee5d5;\n      --toolbar-hover: #302a20;\n      --toolbar-menu-bg: #231f18;\n    }\n\n    [data-preset=\"editorial\"][data-theme=\"light\"] {\n      --bg: #f2eee5;\n      --grid: #d8d0c2;\n      --panel: rgba(251, 248, 241, 0.97);\n      --panel-border: #c4b9a6;\n      --lane-fill: rgba(229, 221, 207, 0.42);\n      --lane-stroke: #b8aa94;\n      --text: #242018;\n      --text-muted: #6f6658;\n      --text-dim: #a09788;\n      --text-faint: #817767;\n      --mask: #fbf8f1;\n      --frontend-fill: rgba(31, 117, 126, 0.09);\n      --frontend-stroke: #287e84;\n      --backend-fill: rgba(42, 119, 75, 0.09);\n      --backend-stroke: #397b53;\n      --database-fill: rgba(105, 75, 130, 0.09);\n      --database-stroke: #765d86;\n      --cloud-fill: rgba(157, 103, 31, 0.1);\n      --cloud-stroke: #9a671f;\n      --security-fill: rgba(153, 58, 52, 0.09);\n      --security-stroke: #9e463f;\n      --messagebus-fill: rgba(182, 70, 27, 0.09);\n      --messagebus-stroke: #ad4b25;\n      --external-fill: rgba(101, 91, 75, 0.09);\n      --external-stroke: #746b5e;\n      --arrow: #8a806f;\n      --arrow-emphasis: #bb4c23;\n      --toolbar-bg: rgba(251, 248, 241, 0.94);\n      --toolbar-border: #c4b9a6;\n      --toolbar-text: #40392f;\n      --toolbar-hover: #fffdf8;\n      --toolbar-menu-bg: #fbf8f1;\n    }\n\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n\n    body {\n      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', 'Noto Sans Mono CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', monospace;\n      background: var(--bg);\n      min-height: 100vh;\n      padding: 2rem;\n      color: var(--text);\n      transition: background 0.2s ease, color 0.2s ease;\n    }\n\n    html[data-preset=\"signal-flow\"] body {\n      background-image:\n        radial-gradient(circle at 18% -8%, rgba(34, 211, 238, 0.14), transparent 34rem),\n        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.12), transparent 30rem);\n      background-attachment: fixed;\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] body {\n      background-image:\n        radial-gradient(circle at 18% -8%, rgba(6, 182, 212, 0.12), transparent 34rem),\n        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.08), transparent 30rem);\n    }\n    html[data-preset=\"blueprint\"] body {\n      background-image:\n        linear-gradient(var(--grid) 1px, transparent 1px),\n        linear-gradient(90deg, var(--grid) 1px, transparent 1px);\n      background-size: 32px 32px;\n      background-position: -1px -1px;\n      background-attachment: fixed;\n    }\n    html[data-preset=\"editorial\"] body {\n      background-image:\n        linear-gradient(90deg, transparent 0, transparent 5.4rem, color-mix(in srgb, var(--security-stroke) 18%, transparent) 5.4rem, color-mix(in srgb, var(--security-stroke) 18%, transparent) calc(5.4rem + 1px), transparent calc(5.4rem + 1px)),\n        repeating-linear-gradient(0deg, transparent 0, transparent 31px, color-mix(in srgb, var(--grid) 36%, transparent) 31px, color-mix(in srgb, var(--grid) 36%, transparent) 32px);\n      background-attachment: fixed;\n    }\n\n    /* Gallery/embed mode keeps the generated artifact as the source of truth\n       while presenting only its diagram surface inside a proof card. */\n    html[data-embed=\"true\"] body {\n      min-height: 0;\n      padding: 0;\n      overflow: hidden;\n      background: var(--bg);\n      background-image: none;\n    }\n    html[data-embed=\"true\"] .toolbar,\n    html[data-embed=\"true\"] .header,\n    html[data-embed=\"true\"] .cards,\n    html[data-embed=\"true\"] .diagram-nav,\n    html[data-embed=\"true\"] .overview-map,\n    html[data-embed=\"true\"] .focus-chip,\n    html[data-embed=\"true\"] .route-probe,\n    html[data-embed=\"true\"] .semantic-lens,\n    html[data-embed=\"true\"] .diagram-guide,\n    html[data-embed=\"true\"] .node-finder,\n    html[data-embed=\"true\"] .guided-views { display: none !important; }\n    html[data-embed=\"true\"] .container { max-width: none; }\n    html[data-embed=\"true\"] .diagram-container {\n      padding: 0.5rem;\n      border: 0;\n      border-radius: 0;\n      box-shadow: none;\n    }\n    html[data-embed=\"true\"] .diagram-container svg { min-width: 0; }\n\n    /* Share Chapter Cue lives in the HTML viewer layer, not inside the SVG.\n       It gives one-shot embeds a title, authored note, truthful stop order,\n       and lifecycle state while canonical diagram geometry stays untouched. */\n    .share-chapter-cue { display: none; }\n    html[data-embed=\"true\"][data-share-playback=\"true\"] .share-chapter-cue:not([hidden]),\n    html[data-embed=\"true\"][data-share-moment=\"true\"] .share-chapter-cue:not([hidden]) {\n      position: absolute;\n      z-index: 18;\n      top: 0.85rem;\n      left: 50%;\n      display: grid;\n      grid-template-columns: auto minmax(9rem, 13.5rem) minmax(0, 1fr);\n      align-items: center;\n      gap: 0.45rem 0.85rem;\n      width: min(52rem, calc(100% - 1.5rem));\n      min-height: 3.35rem;\n      padding: 0.55rem 0.75rem 0.65rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));\n      border-radius: 0.75rem;\n      background:\n        linear-gradient(115deg, color-mix(in srgb, var(--frontend-fill) 52%, transparent), transparent 45%),\n        color-mix(in srgb, var(--toolbar-menu-bg) 92%, transparent);\n      color: var(--toolbar-text);\n      box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);\n      backdrop-filter: blur(16px);\n      pointer-events: none;\n      animation: archify-share-cue-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    html[data-preset=\"blueprint\"] .share-chapter-cue {\n      border-radius: 0.2rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 46%, transparent), transparent 36%),\n        var(--toolbar-menu-bg);\n      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);\n      backdrop-filter: none;\n    }\n    html[data-preset=\"editorial\"] .share-chapter-cue {\n      border-color: var(--panel-border);\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 42%),\n        var(--toolbar-menu-bg);\n      box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);\n      backdrop-filter: none;\n    }\n    html[data-preset=\"editorial\"] .share-chapter-state { color: var(--arrow-emphasis); }\n    html[data-preset=\"editorial\"] .share-chapter-state::before {\n      border-radius: 0;\n      box-shadow: none;\n      transform: rotate(45deg) scale(0.8);\n    }\n    .share-chapter-index {\n      display: grid;\n      gap: 0.12rem;\n      min-width: 5rem;\n      padding-right: 0.75rem;\n      border-right: 1px solid var(--toolbar-border);\n    }\n    .share-chapter-state {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.36rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n    }\n    .share-chapter-state::before {\n      width: 0.38rem;\n      height: 0.38rem;\n      border-radius: 50%;\n      background: currentColor;\n      box-shadow: 0 0 10px currentColor;\n      content: '';\n    }\n    .share-chapter-cue[data-state=\"playing\"] .share-chapter-state::before {\n      animation: archify-share-cue-pulse 1.15s ease-in-out infinite;\n    }\n    .share-chapter-count {\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .share-chapter-copy { min-width: 0; }\n    .share-chapter-copy strong,\n    .share-chapter-copy small,\n    .share-chapter-route {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .share-chapter-copy strong {\n      color: var(--toolbar-text);\n      font-size: 0.6875rem;\n      line-height: 1.35;\n    }\n    .share-chapter-copy small {\n      margin-top: 0.08rem;\n      color: var(--text-muted);\n      font-size: 0.5rem;\n      line-height: 1.35;\n    }\n    .share-chapter-route {\n      color: color-mix(in srgb, var(--frontend-stroke) 76%, var(--text-muted));\n      font-size: 0.5625rem;\n      font-weight: 650;\n      letter-spacing: 0.015em;\n      text-align: right;\n    }\n    .share-chapter-progress {\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      height: 2px;\n      overflow: hidden;\n      background: color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    .share-chapter-progress span {\n      display: block;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, var(--frontend-stroke), var(--database-stroke));\n      box-shadow: 0 0 12px var(--frontend-stroke);\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n\n    /* Presentation Stage is a viewer-only layer: it gives the live diagram\n       the viewport while keeping guided views, theme, focus, and exports real.\n       Embed mode wins when both query parameters are present. */\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) body {\n      height: 100dvh;\n      min-height: 0;\n      padding: 1rem;\n      overflow: hidden;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .container {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      width: 100%;\n      max-width: none;\n      height: calc(100dvh - 2rem);\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .header {\n      flex: none;\n      min-width: 0;\n      margin: 0;\n      padding-right: 23rem;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row { margin-bottom: 0.25rem; }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .subtitle {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views {\n      flex: none;\n      margin-bottom: 0;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container {\n      display: flex;\n      flex: 1 1 auto;\n      align-items: center;\n      justify-content: center;\n      min-height: 0;\n      padding: 0.75rem;\n      padding-bottom: calc(0.75rem + var(--archify-nav-reserve));\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container \u003e svg {\n      flex: 1 1 auto;\n      height: 100%;\n      min-height: 0;\n      width: 100%;\n      min-width: 0;\n    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .cards { display: none; }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) #btn-present {\n      border-color: var(--frontend-stroke);\n      color: var(--frontend-stroke);\n    }\n\n    /* The reader owns only the outer scale. Wide diagrams keep one authored\n       SVG/viewBox while the runtime chooses a desktop width from the actual\n       vertical budget. This avoids device-specific files and breakpoint\n       jumps between a laptop and a tall monitor. */\n    .container {\n      width: 100%;\n      max-width: var(--archify-reader-width, 1440px);\n      margin: 0 auto;\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      .header { margin-bottom: 1rem; }\n      .diagram-container { padding: 1rem; }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n\n    .header { margin-bottom: 1.5rem; padding-right: 29.5rem; }\n\n    html[data-preset=\"signal-flow\"] .header,\n    html[data-preset=\"blueprint\"] .header,\n    html[data-preset=\"editorial\"] .header { padding-right: 29.5rem; }\n\n    .header-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-bottom: 0.5rem;\n    }\n\n    .pulse-dot {\n      width: 12px;\n      height: 12px;\n      background: var(--frontend-stroke);\n      border-radius: 50%;\n      animation: none;\n    }\n\n    html[data-motion-capable=\"true\"] .pulse-dot { animation: pulse 2s infinite; }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    h1 {\n      font-size: 1.5rem;\n      font-weight: 700;\n      letter-spacing: -0.025em;\n    }\n\n    .subtitle {\n      color: var(--text-muted);\n      font-size: 0.875rem;\n      margin-left: 1.75rem;\n    }\n\n    html[data-preset=\"signal-flow\"] .header-row::after {\n      content: attr(data-preset-badge-signal-flow);\n      margin-left: auto;\n      color: var(--frontend-stroke);\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 999px;\n      padding: 0.28rem 0.6rem;\n      font-size: 0.625rem;\n      letter-spacing: 0.12em;\n      opacity: 0.82;\n      box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);\n      white-space: nowrap;\n    }\n\n    html[data-preset=\"blueprint\"] .pulse-dot {\n      width: 10px;\n      height: 10px;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 1px;\n      background: transparent;\n      box-shadow: inset 0 0 0 2px var(--bg);\n      transform: rotate(45deg);\n      animation: none;\n    }\n    html[data-preset=\"blueprint\"] .header-row::after {\n      content: attr(data-preset-badge-blueprint);\n      margin-left: auto;\n      padding: 0.28rem 0.55rem;\n      border-top: 1px solid var(--frontend-stroke);\n      border-bottom: 1px solid var(--frontend-stroke);\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 700;\n      letter-spacing: 0.14em;\n      white-space: nowrap;\n    }\n\n    html[data-preset=\"editorial\"] h1,\n    html[data-preset=\"editorial\"] .card h3 {\n      font-family: Georgia, 'Times New Roman', 'Songti SC', STSong, serif;\n      letter-spacing: -0.02em;\n    }\n    html[data-preset=\"editorial\"] h1 { font-size: 1.72rem; font-weight: 600; }\n    html[data-preset=\"editorial\"] .pulse-dot {\n      width: 9px;\n      height: 9px;\n      border: 1px solid var(--arrow-emphasis);\n      border-radius: 0;\n      background: var(--arrow-emphasis);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);\n      transform: rotate(45deg);\n      animation: none;\n    }\n    html[data-preset=\"editorial\"] .header-row::after {\n      content: attr(data-preset-badge-editorial);\n      margin-left: auto;\n      padding: 0.32rem 0 0.24rem;\n      border-bottom: 2px solid var(--arrow-emphasis);\n      color: var(--arrow-emphasis);\n      font-family: Georgia, 'Times New Roman', serif;\n      font-size: 0.625rem;\n      font-style: italic;\n      font-weight: 600;\n      letter-spacing: 0.08em;\n      white-space: nowrap;\n    }\n\n    .diagram-container {\n      --archify-nav-reserve: 0px;\n      background: var(--panel);\n      border-radius: 1rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.5rem;\n      padding-bottom: calc(1.5rem + var(--archify-nav-reserve));\n      overflow: hidden;\n      position: relative;\n    }\n\n    html[data-preset=\"signal-flow\"] .diagram-container {\n      position: relative;\n      overflow: hidden;\n      background: linear-gradient(180deg, rgba(8, 20, 38, 0.82), rgba(3, 8, 18, 0.94));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.34);\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] .diagram-container {\n      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(237, 246, 250, 0.94));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 60px rgba(45, 78, 99, 0.12);\n    }\n    html[data-preset=\"blueprint\"] .diagram-container {\n      border-color: var(--panel-border);\n      border-radius: 0.35rem;\n      background: var(--panel);\n      box-shadow:\n        inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 34%, transparent),\n        0 18px 48px rgba(0, 0, 0, 0.16);\n    }\n    html[data-preset=\"blueprint\"] .diagram-container::after {\n      content: \"\";\n      position: absolute;\n      z-index: 10;\n      inset: 0.7rem;\n      pointer-events: none;\n      background:\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1px 1.35rem no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1.35rem 1px no-repeat,\n        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1px 1.35rem no-repeat;\n      opacity: 0.58;\n    }\n    html[data-preset=\"editorial\"] .diagram-container {\n      overflow: hidden;\n      border-color: var(--panel-border);\n      border-radius: 0.38rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 12%),\n        var(--panel);\n      box-shadow:\n        0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),\n        0 18px 48px color-mix(in srgb, #000 19%, transparent);\n    }\n    html[data-preset=\"editorial\"] .diagram-container::after {\n      position: absolute;\n      z-index: 10;\n      top: 0.72rem;\n      right: 1.25rem;\n      padding: 0.2rem 0.52rem;\n      border: 1px solid var(--panel-border);\n      background: var(--panel);\n      color: var(--arrow-emphasis);\n      content: attr(data-preset-badge-editorial-plate);\n      font-family: Georgia, 'Times New Roman', serif;\n      font-size: 0.52rem;\n      font-style: italic;\n      font-weight: 600;\n      letter-spacing: 0.09em;\n      pointer-events: none;\n    }\n    html[data-embed=\"true\"][data-preset=\"editorial\"] .diagram-container::after { display: none; }\n    html[data-motion-capable=\"true\"][data-preset=\"signal-flow\"][data-ambient-motion=\"running\"] .diagram-container::before {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      background: linear-gradient(115deg, transparent 28%, rgba(103, 232, 249, 0.035) 48%, transparent 68%);\n      transform: translateX(-70%);\n      animation: archify-signal-scan 4.8s ease-in-out 1 both;\n    }\n\n    /* Motion Governor gives the reader a real static state and gives the\n       strongest semantic action the only motion budget. Atmosphere resets to\n       its authored base instead of freezing mid-cycle. Static artifacts never\n       start a decorative pulse or scan. */\n    html:not([data-motion-capable=\"true\"]) svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .pulse-dot,\n    html[data-motion=\"still\"] .diagram-container::before,\n    html[data-motion=\"still\"] svg[data-animation=\"trace\"] [data-animate],\n    html[data-motion-owner] .pulse-dot,\n    html[data-motion-owner] .diagram-container::before,\n    html[data-motion-owner] svg[data-animation=\"trace\"] [data-animate],\n    html[data-embed=\"true\"] .pulse-dot,\n    html[data-embed=\"true\"] .diagram-container::before,\n    html[data-share-playback=\"true\"] .pulse-dot,\n    html[data-share-playback=\"true\"] .diagram-container::before,\n    html[data-document-hidden=\"true\"] .pulse-dot,\n    html[data-document-hidden=\"true\"] .diagram-container::before,\n    html[data-document-hidden=\"true\"] svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .diagram-container::before,\n    html[data-motion-owner] .diagram-container::before,\n    html[data-embed=\"true\"] .diagram-container::before,\n    html[data-share-playback=\"true\"] .diagram-container::before {\n      opacity: 0;\n    }\n    html[data-motion=\"still\"] .guided-view-progress span,\n    html[data-motion=\"still\"] .guided-story-caption,\n    html[data-motion=\"still\"] .story-trail-flow,\n    html[data-motion=\"still\"] .intent-trace-flow,\n    html[data-motion=\"still\"] .route-probe-flow,\n    html[data-motion=\"still\"] .route-journey-flow,\n    html[data-motion=\"still\"] .semantic-lens-flow,\n    html[data-motion=\"still\"] .diagram-guide,\n    html[data-motion=\"still\"] [data-story-step],\n    html[data-motion=\"still\"] .overview-map-live,\n    html[data-motion=\"still\"] .guided-view-stop,\n    html[data-motion=\"still\"] .share-chapter-cue,\n    html[data-motion=\"still\"] .share-chapter-state::before,\n    html[data-motion=\"still\"] .share-chapter-progress span,\n    html[data-document-hidden=\"true\"] .guided-view-progress span,\n    html[data-document-hidden=\"true\"] .story-trail-flow,\n    html[data-document-hidden=\"true\"] .intent-trace-flow,\n    html[data-document-hidden=\"true\"] .route-probe-flow,\n    html[data-document-hidden=\"true\"] .route-journey-flow,\n    html[data-document-hidden=\"true\"] .semantic-lens-flow,\n    html[data-document-hidden=\"true\"] .diagram-guide,\n    html[data-document-hidden=\"true\"] [data-story-step],\n    html[data-document-hidden=\"true\"] .overview-map-live,\n    html[data-document-hidden=\"true\"] .guided-view-stop,\n    html[data-document-hidden=\"true\"] .share-chapter-cue,\n    html[data-document-hidden=\"true\"] .share-chapter-state::before,\n    html[data-document-hidden=\"true\"] .share-chapter-progress span {\n      animation: none !important;\n    }\n    html[data-motion=\"still\"] .guided-view-progress span {\n      transform: scaleX(1) !important;\n    }\n    html[data-motion=\"still\"] svg[data-story-playing=\"true\"] .story-trail-flow {\n      stroke-dasharray: none;\n      stroke-dashoffset: 0;\n      opacity: 0.55;\n    }\n    html[data-motion=\"still\"] .intent-trace-flow,\n    html[data-motion=\"still\"] .route-probe-flow {\n      stroke-dasharray: none;\n      stroke-dashoffset: 0;\n      opacity: 0.72;\n    }\n    html[data-motion=\"still\"] .route-journey-overlay,\n    html[data-document-hidden=\"true\"] .route-journey-overlay { display: none !important; }\n    html[data-motion=\"still\"] .relationship-pulse-overlay,\n    html[data-motion=\"still\"] .story-carrier-overlay,\n    html[data-document-hidden=\"true\"] .story-carrier-overlay { display: none !important; }\n    html[data-motion=\"still\"] .chapter-handoff-overlay { display: none !important; }\n    html[data-motion=\"still\"] .chapter-handoff-anchor { animation: none !important; }\n    html[data-motion=\"still\"] .guided-view-chapter,\n    html[data-motion=\"still\"] svg [data-node-id],\n    html[data-motion=\"still\"] svg [data-edge-from],\n    html[data-motion=\"still\"] svg [data-detail],\n    html[data-motion=\"still\"] svg [data-detail-anchor],\n    html[data-motion=\"still\"] svg [data-legend-hit],\n    html[data-motion=\"still\"] svg {\n      transition: none !important;\n    }\n\n    svg {\n      width: 100%;\n      min-width: min(900px, 100%);\n      display: block;\n      transform-origin: 0 0;\n      transition: transform 0.18s ease;\n    }\n\n    .diagram-container.is-camera-moving svg {\n      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .diagram-container.is-camera-transaction svg { transition: none; }\n    .diagram-container.is-pannable { cursor: grab; }\n    .diagram-container.is-panning { cursor: grabbing; user-select: none; }\n    .diagram-container.is-panning svg { transition: none; }\n\n    .diagram-nav {\n      position: absolute;\n      right: 1rem;\n      bottom: 1rem;\n      z-index: 12;\n      display: inline-flex;\n      align-items: center;\n      max-width: calc(100% - 2rem);\n      padding: 0.15rem;\n      gap: 0;\n      overflow-x: auto;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 48%, transparent);\n      border-radius: 0.58rem;\n      background: color-mix(in srgb, var(--toolbar-bg) 82%, transparent);\n      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);\n      backdrop-filter: blur(10px);\n      scrollbar-width: none;\n    }\n    .diagram-nav::-webkit-scrollbar { display: none; }\n    .diagram-nav button,\n    .focus-chip button,\n    .guided-views button {\n      border: 0;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      cursor: pointer;\n    }\n    .diagram-nav button {\n      min-width: 2rem;\n      height: 2rem;\n      padding: 0 0.35rem;\n      border-radius: 0.35rem;\n      color: color-mix(in srgb, var(--toolbar-text) 68%, transparent);\n      font-size: 0.56rem;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      transition: background 0.15s, color 0.15s;\n    }\n    .diagram-nav button:hover,\n    .diagram-nav button:focus-visible,\n    .focus-chip button:hover,\n    .focus-chip button:focus-visible,\n    .guided-views button:hover,\n    .guided-views button:focus-visible { background: var(--toolbar-hover); }\n    .diagram-nav button:focus-visible,\n    .focus-chip button:focus-visible,\n    .guided-views button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .diagram-nav button:disabled { opacity: 0.38; cursor: default; }\n    .diagram-nav button:disabled:hover { background: transparent; }\n    .diagram-nav #btn-route-probe,\n    .diagram-nav #btn-overview-map,\n    .diagram-nav #btn-semantic-lens {\n      min-width: auto;\n      padding-inline: 0.5rem;\n      color: color-mix(in srgb, var(--toolbar-text) 86%, transparent);\n      font-weight: 650;\n    }\n    .diagram-nav #btn-node-finder,\n    .diagram-nav [data-view=\"out\"] {\n      position: relative;\n      margin-left: 0.25rem;\n    }\n    .diagram-nav #btn-node-finder::before,\n    .diagram-nav [data-view=\"out\"]::before {\n      position: absolute;\n      top: 0.4rem;\n      bottom: 0.4rem;\n      left: -0.13rem;\n      width: 1px;\n      background: color-mix(in srgb, var(--toolbar-border) 62%, transparent);\n      content: \"\";\n      pointer-events: none;\n    }\n    .diagram-nav-icon {\n      display: block;\n      width: 0.72rem;\n      height: 0.72rem;\n      margin: auto;\n      background: currentColor;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .diagram-nav-icon.find {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='4.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m12 12 4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='4.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m12 12 4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.guide {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.8 7.3a2.4 2.4 0 014.6.9c0 1.8-2.4 2-2.4 3.7M10 14.9h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.8 7.3a2.4 2.4 0 014.6.9c0 1.8-2.4 2-2.4 3.7M10 14.9h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.minus {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav-icon.plus {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .diagram-nav [data-view=\"reset\"] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.2rem;\n      min-width: 3.1rem;\n      padding-inline: 0.35rem;\n    }\n    .diagram-nav [data-view=\"reset\"][data-detail-visible] {\n      min-width: 3.8rem;\n    }\n    .diagram-nav-detail {\n      color: color-mix(in srgb, var(--toolbar-text) 52%, transparent);\n      font-size: 0.44rem;\n      font-weight: 700;\n      line-height: 1;\n      letter-spacing: 0.07em;\n    }\n    .diagram-nav-percent {\n      color: color-mix(in srgb, var(--toolbar-text) 84%, transparent);\n      font-size: 0.55rem;\n      font-weight: 650;\n      line-height: 1;\n    }\n    .diagram-container[data-camera-indicator=\"true\"] .diagram-nav-detail,\n    .diagram-container[data-camera-indicator=\"true\"] .diagram-nav-percent { color: var(--frontend-stroke); }\n    .diagram-nav #btn-diagram-guide[aria-expanded=\"true\"] {\n      color: var(--cloud-stroke);\n      background: var(--toolbar-hover);\n    }\n\n    /* Semantic Radar is a deliberately simplified, viewer-only overview. It\n       uses authored node bounds and the live camera viewport rather than\n       cloning the canonical SVG, so IDs, filters, animation, and export state\n       stay singular and deterministic. */\n    .overview-map {\n      position: absolute;\n      right: 1rem;\n      bottom: calc(4.15rem + var(--archify-nav-reserve));\n      z-index: 12;\n      width: 11.25rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      border-radius: 0.78rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.625rem;\n    }\n    .overview-map[hidden] { display: none; }\n    .overview-map[data-docked=\"true\"] {\n      position: fixed;\n      right: var(--archify-radar-right, 1rem);\n      top: var(--archify-radar-top, 1rem);\n      bottom: auto;\n    }\n    .overview-map[data-docked=\"true\"][data-dock-side=\"left\"] {\n      right: auto;\n      left: var(--archify-radar-left, 1rem);\n    }\n    html[data-preset=\"blueprint\"] .overview-map { border-radius: 0.28rem; }\n    .overview-map-head {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.45rem;\n      min-height: 2.25rem;\n      padding: 0.42rem 0.48rem 0.38rem 0.55rem;\n      border-bottom: 1px solid var(--toolbar-border);\n      background: linear-gradient(110deg, color-mix(in srgb, var(--frontend-fill) 45%, transparent), transparent 68%);\n      cursor: grab;\n      touch-action: none;\n      user-select: none;\n    }\n    .overview-map[data-panel-dragging=\"true\"] .overview-map-head { cursor: grabbing; }\n    .overview-map[data-placement-invalid=\"true\"] {\n      border-color: var(--security-stroke);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--security-stroke) 34%, transparent), 0 16px 42px rgba(0, 0, 0, 0.3);\n    }\n    .overview-map[data-compact=\"true\"] {\n      width: 7.4rem;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-head {\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.24rem;\n      min-height: 1.5rem;\n      padding: 0.05rem 0.16rem 0.05rem 0.32rem;\n      border-bottom: 0;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-live,\n    .overview-map[data-compact=\"true\"] .overview-map-copy,\n    .overview-map[data-compact=\"true\"] .overview-map-surface,\n    .overview-map[data-compact=\"true\"] .overview-map-hint {\n      display: none;\n    }\n    .overview-map[data-compact=\"true\"] .overview-map-expand { display: inline-flex; }\n    .overview-map[data-compact=\"true\"] .overview-map-close {\n      width: 1.15rem;\n      height: 1.15rem;\n      font-size: 0.72rem;\n    }\n    .overview-map-live {\n      width: 0.42rem;\n      height: 0.42rem;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent);\n      animation: archify-radar-live 2.4s ease-out infinite;\n    }\n    .overview-map-copy { min-width: 0; line-height: 1.1; }\n    .overview-map-copy strong {\n      display: block;\n      overflow: hidden;\n      color: var(--frontend-stroke);\n      font-size: 0.59rem;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .overview-map-copy small {\n      display: block;\n      margin-top: 0.18rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.52rem;\n      letter-spacing: 0.04em;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .overview-map-expand {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      min-width: 0;\n      height: 1.2rem;\n      padding: 0 0.34rem;\n      overflow: hidden;\n      border: 0;\n      border-radius: 0.3rem;\n      background: transparent;\n      color: var(--frontend-stroke);\n      font: inherit;\n      font-size: 0.49rem;\n      font-weight: 700;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      white-space: nowrap;\n      cursor: pointer;\n    }\n    .overview-map-close {\n      width: 1.55rem;\n      height: 1.55rem;\n      padding: 0;\n      border: 0;\n      border-radius: 0.34rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 0.9rem;\n      cursor: pointer;\n    }\n    .overview-map-expand:hover,\n    .overview-map-expand:focus-visible,\n    .overview-map-close:hover,\n    .overview-map-close:focus-visible { background: var(--toolbar-hover); }\n    .overview-map-expand:focus-visible,\n    .overview-map-close:focus-visible,\n    .overview-map-surface:focus-visible,\n    .overview-map-node:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .overview-map-surface {\n      position: relative;\n      height: 7rem;\n      margin: 0.42rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);\n      border-radius: 0.42rem;\n      background:\n        linear-gradient(color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),\n        linear-gradient(90deg, color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),\n        color-mix(in srgb, var(--bg) 86%, transparent);\n      background-size: 12px 12px;\n      cursor: crosshair;\n      touch-action: none;\n    }\n    html[data-preset=\"blueprint\"] .overview-map-surface { border-radius: 0.1rem; }\n    .overview-map-surface \u003e svg {\n      width: 100%;\n      height: 100%;\n      min-width: 0;\n      transform: none !important;\n      transition: none !important;\n      display: block;\n      overflow: visible;\n    }\n    .overview-map-node {\n      fill: var(--backend-stroke);\n      fill-opacity: 0.52;\n      stroke: var(--backend-stroke);\n      stroke-opacity: 0.86;\n      vector-effect: non-scaling-stroke;\n      cursor: pointer;\n      transition: fill-opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;\n    }\n    .overview-map-node[data-kind=\"frontend\"],\n    .overview-map-node[data-kind=\"start\"] { fill: var(--frontend-stroke); stroke: var(--frontend-stroke); }\n    .overview-map-node[data-kind=\"database\"],\n    .overview-map-node[data-kind=\"success\"] { fill: var(--database-stroke); stroke: var(--database-stroke); }\n    .overview-map-node[data-kind=\"cloud\"],\n    .overview-map-node[data-kind=\"waiting\"] { fill: var(--cloud-stroke); stroke: var(--cloud-stroke); }\n    .overview-map-node[data-kind=\"messagebus\"] { fill: var(--messagebus-stroke); stroke: var(--messagebus-stroke); }\n    .overview-map-node[data-kind=\"security\"],\n    .overview-map-node[data-kind=\"decision\"],\n    .overview-map-node[data-kind=\"failure\"] { fill: var(--security-stroke); stroke: var(--security-stroke); }\n    .overview-map-node[data-kind=\"external\"],\n    .overview-map-node[data-kind=\"neutral\"] { fill: var(--external-stroke); stroke: var(--external-stroke); }\n    .overview-map-node[data-radar-active=\"true\"],\n    .overview-map-node:hover,\n    .overview-map-node:focus-visible {\n      fill-opacity: 0.92;\n      stroke-width: 2.2;\n      filter: drop-shadow(0 0 3px currentColor);\n    }\n    .overview-map-viewport {\n      fill: color-mix(in srgb, var(--frontend-fill) 56%, transparent);\n      stroke: var(--frontend-stroke);\n      stroke-width: 2;\n      vector-effect: non-scaling-stroke;\n      pointer-events: none;\n      filter: drop-shadow(0 0 3px color-mix(in srgb, var(--frontend-stroke) 54%, transparent));\n    }\n    .overview-map-hint {\n      display: flex;\n      justify-content: space-between;\n      gap: 0.5rem;\n      padding: 0 0.52rem 0.46rem;\n      color: var(--text-faint);\n      font-size: 0.49rem;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n    }\n    .diagram-nav #btn-overview-map[aria-expanded=\"true\"] {\n      color: var(--frontend-stroke);\n      background: var(--toolbar-hover);\n    }\n    .overview-map-feedback {\n      position: absolute;\n      right: 1rem;\n      bottom: 4.15rem;\n      z-index: 13;\n      max-width: min(16rem, calc(100% - 2rem));\n      padding: 0.38rem 0.55rem;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      border-radius: 0.5rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n      font-size: 0.52rem;\n      line-height: 1.35;\n      pointer-events: none;\n    }\n    .overview-map-feedback[hidden] { display: none; }\n    .focus-chip[data-radar-yielded=\"true\"] { display: none !important; }\n    .diagram-nav #btn-route-probe[aria-pressed=\"true\"] {\n      color: var(--backend-stroke);\n      background: var(--toolbar-hover);\n    }\n    .diagram-nav #btn-semantic-lens[aria-expanded=\"true\"],\n    .diagram-nav #btn-semantic-lens[aria-pressed=\"true\"] {\n      color: var(--database-stroke);\n      background: var(--toolbar-hover);\n    }\n\n    /* Semantic Lens turns the compiled node-kind palette into an analytical\n       legend. One kind reveals its real traffic; two kinds compare only their\n       direct authored relationships. Geometry and the canonical SVG stay put. */\n    .semantic-lens {\n      position: absolute;\n      right: 1rem;\n      bottom: calc(4.15rem + var(--archify-nav-reserve));\n      z-index: 24;\n      width: min(20rem, calc(100% - 2rem));\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--database-stroke) 58%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(135deg, color-mix(in srgb, var(--database-fill) 34%, transparent), transparent 48%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);\n      backdrop-filter: blur(18px);\n      animation: archify-lens-in 180ms cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .semantic-lens[hidden] { display: none; }\n    .semantic-lens[data-dock-side=\"left\"] { left: 1rem; right: auto; }\n    .semantic-lens[data-dock-side=\"right\"] { left: auto; right: 1rem; }\n    html[data-preset=\"blueprint\"] .semantic-lens { border-radius: 0.28rem; }\n    .semantic-lens-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.75rem;\n      padding: 0.72rem 0.78rem 0.62rem;\n      border-bottom: 1px solid var(--toolbar-border);\n    }\n    .semantic-lens-eyebrow {\n      display: block;\n      color: var(--database-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n    .semantic-lens-title {\n      display: block;\n      margin-top: 0.16rem;\n      color: var(--text);\n      font-size: 0.82rem;\n      letter-spacing: -0.02em;\n    }\n    .semantic-lens-close {\n      width: 1.75rem;\n      height: 1.75rem;\n      padding: 0;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .semantic-lens-close:hover,\n    .semantic-lens-close:focus-visible { background: var(--toolbar-hover); }\n    .semantic-lens-instruction {\n      margin: 0;\n      padding: 0.52rem 0.78rem 0.48rem;\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      line-height: 1.45;\n    }\n    .semantic-lens-kinds {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0.3rem;\n      max-height: min(15rem, 40vh);\n      padding: 0 0.5rem 0.5rem;\n      overflow-y: auto;\n      scrollbar-width: thin;\n    }\n    .semantic-lens-kind {\n      --lens-color: var(--external-stroke);\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.42rem;\n      min-width: 0;\n      min-height: 2.15rem;\n      padding: 0.35rem 0.42rem;\n      border: 1px solid color-mix(in srgb, var(--lens-color) 24%, var(--toolbar-border));\n      border-radius: 0.45rem;\n      background: color-mix(in srgb, var(--panel) 76%, transparent);\n      color: var(--toolbar-text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;\n    }\n    html[data-preset=\"blueprint\"] .semantic-lens-kind { border-radius: 0.12rem; }\n    .semantic-lens-kind[data-kind=\"frontend\"],\n    .semantic-lens-kind[data-kind=\"start\"] { --lens-color: var(--frontend-stroke); }\n    .semantic-lens-kind[data-kind=\"backend\"],\n    .semantic-lens-kind[data-kind=\"active\"] { --lens-color: var(--backend-stroke); }\n    .semantic-lens-kind[data-kind=\"database\"],\n    .semantic-lens-kind[data-kind=\"success\"] { --lens-color: var(--database-stroke); }\n    .semantic-lens-kind[data-kind=\"cloud\"],\n    .semantic-lens-kind[data-kind=\"waiting\"] { --lens-color: var(--cloud-stroke); }\n    .semantic-lens-kind[data-kind=\"messagebus\"] { --lens-color: var(--messagebus-stroke); }\n    .semantic-lens-kind[data-kind=\"security\"],\n    .semantic-lens-kind[data-kind=\"decision\"],\n    .semantic-lens-kind[data-kind=\"failure\"] { --lens-color: var(--security-stroke); }\n    .semantic-lens-kind:hover,\n    .semantic-lens-kind:focus-visible,\n    .semantic-lens-kind[aria-pressed=\"true\"] {\n      border-color: color-mix(in srgb, var(--lens-color) 78%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--lens-color) 11%, var(--panel));\n    }\n    .semantic-lens-kind:focus-visible,\n    .semantic-lens-close:focus-visible,\n    .semantic-lens-actions button:focus-visible {\n      outline: 2px solid var(--database-stroke);\n      outline-offset: 1px;\n    }\n    .semantic-lens-kind:disabled { opacity: 0.34; cursor: default; }\n    .semantic-lens-swatch {\n      width: 0.48rem;\n      height: 0.48rem;\n      border-radius: 50%;\n      background: var(--lens-color);\n      box-shadow: 0 0 8px color-mix(in srgb, var(--lens-color) 58%, transparent);\n    }\n    .semantic-lens-kind strong {\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.61rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-lens-kind em {\n      color: var(--lens-color);\n      font-size: 0.54rem;\n      font-style: normal;\n      font-weight: 800;\n    }\n    .semantic-lens-status {\n      min-height: 2.5rem;\n      margin: 0;\n      padding: 0.55rem 0.78rem;\n      border-top: 1px solid var(--toolbar-border);\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      line-height: 1.45;\n    }\n    .semantic-lens-status strong { color: var(--database-stroke); font-weight: 800; }\n    .semantic-lens-actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 0.28rem;\n      padding: 0 0.62rem 0.62rem;\n    }\n    .semantic-lens-actions button {\n      min-height: 1.8rem;\n      padding: 0.28rem 0.48rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 0.56rem;\n      cursor: pointer;\n    }\n    .semantic-lens-actions button:hover { background: var(--toolbar-hover); }\n    .semantic-lens-actions #semantic-lens-copy { color: var(--database-stroke); }\n    @keyframes archify-lens-in {\n      from { opacity: 0; transform: translateY(5px) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    /* Route Probe answers a reader question over the compiled semantic graph:\n       choose two stable nodes and reveal the shortest authored directed route.\n       The receipt and signal live entirely in the viewer layer. */\n    .route-probe {\n      position: absolute;\n      left: 1rem;\n      bottom: calc(1rem + var(--archify-nav-reserve));\n      z-index: 12;\n      width: min(46rem, calc(100% - 25rem));\n      min-width: 18rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 62%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(115deg, color-mix(in srgb, var(--backend-fill) 50%, transparent), transparent 62%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.625rem;\n    }\n    .route-probe[hidden] { display: none; }\n    .route-probe[data-route-dock=\"top\"] {\n      top: 1rem;\n      bottom: auto;\n    }\n    html[data-preset=\"blueprint\"] .route-probe { border-radius: 0.25rem; }\n    .route-probe-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.65rem;\n      padding: 0.52rem 0.58rem 0.44rem;\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 80%, transparent);\n    }\n    .route-probe-copy { min-width: 0; }\n    .route-probe-eyebrow {\n      display: block;\n      color: var(--backend-stroke);\n      font-size: 0.48rem;\n      font-weight: 800;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n    }\n    .route-probe-title {\n      display: block;\n      margin-top: 0.14rem;\n      overflow: hidden;\n      color: var(--toolbar-text);\n      font-size: 0.72rem;\n      line-height: 1.25;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .route-probe-actions { display: flex; gap: 0.2rem; }\n    .route-probe button {\n      min-height: 1.55rem;\n      padding: 0.25rem 0.42rem;\n      border: 0;\n      border-radius: 0.36rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      cursor: pointer;\n    }\n    .route-probe button:hover,\n    .route-probe button:focus-visible { background: var(--toolbar-hover); }\n    .route-probe button:focus-visible {\n      outline: 2px solid var(--backend-stroke);\n      outline-offset: 1px;\n    }\n    .route-probe-copy-link { color: var(--frontend-stroke) !important; }\n    .route-probe-find { color: var(--backend-stroke) !important; }\n    .route-probe-copy-link[hidden] { display: none; }\n    .route-probe-find[hidden] { display: none; }\n    .route-probe-path {\n      display: flex;\n      align-items: center;\n      min-height: 2.2rem;\n      padding: 0.42rem 0.58rem 0.24rem;\n      overflow-x: auto;\n      scrollbar-width: thin;\n      white-space: nowrap;\n    }\n    .route-probe-node,\n    .route-probe button.route-probe-node {\n      flex: none;\n      max-width: 9.5rem;\n      overflow: hidden;\n      min-height: 1.75rem !important;\n      padding: 0.22rem 0.38rem;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 46%, var(--toolbar-border));\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--backend-fill) 52%, transparent);\n      color: var(--text);\n      font-size: 0.56rem;\n      font-weight: 700;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .route-probe-node[data-endpoint=\"start\"] {\n      border-color: var(--frontend-stroke);\n      color: var(--frontend-stroke);\n    }\n    .route-probe-node[data-endpoint=\"end\"] {\n      border-color: var(--security-stroke);\n      color: var(--security-stroke);\n    }\n    .route-probe-node[data-route-journey-state=\"past\"] { opacity: 0.66; }\n    .route-probe-node[data-route-journey-state=\"future\"] { opacity: 0.48; }\n    .route-probe-node[aria-current=\"step\"] {\n      border-color: var(--backend-stroke);\n      background: color-mix(in srgb, var(--backend-fill) 82%, var(--toolbar-menu-bg));\n      color: var(--text);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--backend-stroke) 42%, transparent), 0 0 14px color-mix(in srgb, var(--backend-stroke) 34%, transparent);\n      opacity: 1;\n    }\n    html[data-preset=\"blueprint\"] .route-probe-node[aria-current=\"step\"] {\n      border-style: double;\n      border-width: 3px;\n      border-radius: 0.2rem;\n      box-shadow: none;\n    }\n    .route-probe-arrow {\n      flex: none;\n      padding: 0 0.28rem;\n      color: var(--text-faint);\n      font-size: 0.65rem;\n    }\n    .route-probe-placeholder {\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.03em;\n    }\n    .route-probe-status {\n      display: block;\n      min-height: 1.45rem;\n      padding: 0.08rem 0.58rem 0.44rem;\n      color: var(--text-faint);\n      font-size: 0.52rem;\n      line-height: 1.35;\n    }\n    .route-journey-controls {\n      display: grid;\n      grid-template-columns: 2rem minmax(5.8rem, auto) 2rem minmax(4.8rem, auto);\n      justify-content: start;\n      gap: 0.22rem;\n      padding: 0.08rem 0.58rem 0.28rem;\n    }\n    .route-journey-controls[hidden] { display: none; }\n    .route-journey-controls button {\n      min-height: 1.8rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);\n      background: color-mix(in srgb, var(--toolbar-bg) 72%, transparent);\n      font-size: 0.54rem;\n      font-weight: 700;\n    }\n    .route-journey-controls button:disabled {\n      cursor: default;\n      opacity: 0.34;\n    }\n    .route-journey-play { color: var(--backend-stroke) !important; }\n    .route-journey-overview { color: var(--frontend-stroke) !important; }\n    .route-journey-controls[data-playing=\"true\"] .route-journey-play {\n      border-color: color-mix(in srgb, var(--backend-stroke) 64%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--backend-fill) 62%, transparent);\n    }\n    .route-probe[data-state=\"error\"] {\n      border-color: color-mix(in srgb, var(--security-stroke) 72%, var(--toolbar-border));\n    }\n    .route-probe[data-state=\"error\"] .route-probe-status { color: var(--security-stroke); }\n\n    .focus-chip {\n      position: absolute;\n      left: 1rem;\n      top: 1rem;\n      z-index: 12;\n      display: block;\n      width: min(22rem, calc(100% - 13rem));\n      max-width: calc(100% - 13rem);\n      overflow: hidden;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 0.85rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);\n      backdrop-filter: blur(16px);\n      font-size: 0.6875rem;\n    }\n    .focus-chip[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .focus-chip { border-radius: 0.3rem; }\n    .focus-chip button {\n      flex: none;\n      padding: 0.3rem 0.45rem;\n      border-radius: 0.35rem;\n      font-size: 0.625rem;\n    }\n    .relationship-lens-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 0.75rem;\n      padding: 0.7rem 0.75rem 0.65rem;\n      border-bottom: 1px solid var(--toolbar-border);\n      background: linear-gradient(120deg, color-mix(in srgb, var(--frontend-fill) 34%, transparent), transparent 72%);\n    }\n    .relationship-lens-copy { min-width: 0; }\n    .relationship-lens-actions {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      gap: 0.18rem;\n    }\n    .relationship-lens-actions button { white-space: nowrap; }\n    .relationship-lens-actions #btn-focus-clear {\n      display: grid;\n      width: 1.75rem;\n      height: 1.75rem;\n      padding: 0;\n      place-items: center;\n      color: var(--text-muted);\n      font-size: 1rem;\n      line-height: 1;\n    }\n    .relationship-lens-actions #btn-focus-clear:hover,\n    .relationship-lens-actions #btn-focus-clear:focus-visible {\n      background: var(--toolbar-hover);\n      color: var(--text);\n    }\n    .relationship-lens-actions #btn-focus-copy { color: var(--frontend-stroke); }\n    .relationship-lens-actions #btn-focus-relations { display: none; }\n    .relationship-lens-eyebrow {\n      display: block;\n      margin-bottom: 0.18rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n    }\n    .relationship-lens-title {\n      display: block;\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.8rem;\n      line-height: 1.35;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-detail {\n      display: block;\n      margin-top: 0.12rem;\n      overflow: hidden;\n      color: var(--text-muted);\n      font-size: 0.625rem;\n      line-height: 1.4;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-detail[hidden] { display: none; }\n    .semantic-passport-meta {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.24rem;\n      margin-top: 0.42rem;\n    }\n    .semantic-passport-meta span,\n    .semantic-passport-meta code {\n      max-width: 100%;\n      overflow: hidden;\n      padding: 0.14rem 0.34rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--panel) 68%, transparent);\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5rem;\n      letter-spacing: 0.04em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-meta [data-passport=\"kind\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 50%, var(--toolbar-border));\n      color: var(--frontend-stroke);\n      font-weight: 800;\n      text-transform: uppercase;\n    }\n    .semantic-passport-meta [data-passport=\"tag\"] { color: var(--cloud-stroke); }\n    .semantic-passport-meta [data-passport=\"brand\"] {\n      border-color: color-mix(in srgb, var(--messagebus-stroke) 52%, var(--toolbar-border));\n      color: var(--messagebus-stroke);\n      font-weight: 700;\n    }\n    .semantic-passport-meta [hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .semantic-passport-meta span,\n    html[data-preset=\"blueprint\"] .semantic-passport-meta code { border-radius: 0.1rem; }\n    .semantic-passport-evidence {\n      margin-top: 0.52rem;\n      padding: 0.5rem;\n      border: 1px solid color-mix(in srgb, var(--backend-stroke) 32%, var(--toolbar-border));\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--backend-fill) 18%, var(--panel));\n    }\n    .semantic-passport-evidence[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .semantic-passport-evidence { border-radius: 0.18rem; }\n    .semantic-passport-evidence-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.55rem;\n      margin-bottom: 0.35rem;\n    }\n    .semantic-passport-evidence-status {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.28rem;\n      color: var(--backend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .semantic-passport-evidence-status::before {\n      content: '';\n      width: 0.38rem;\n      height: 0.38rem;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--backend-stroke) 14%, transparent);\n    }\n    .semantic-passport-repository {\n      min-width: 0;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-repository:hover,\n    .semantic-passport-repository:focus-visible { color: var(--backend-stroke); }\n    .semantic-passport-evidence-links { display: grid; gap: 0.22rem; }\n    .semantic-passport-source {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.15rem 0.45rem;\n      align-items: center;\n      padding: 0.34rem 0.4rem;\n      border: 1px solid transparent;\n      border-radius: 0.38rem;\n      color: var(--text-muted);\n      text-decoration: none;\n    }\n    .semantic-passport-source:hover,\n    .semantic-passport-source:focus-visible {\n      border-color: color-mix(in srgb, var(--backend-stroke) 42%, transparent);\n      background: color-mix(in srgb, var(--backend-fill) 32%, transparent);\n      color: var(--text);\n    }\n    .semantic-passport-source strong {\n      overflow: hidden;\n      font-size: 0.5625rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .semantic-passport-source code {\n      color: var(--backend-stroke);\n      font: inherit;\n      font-size: 0.5rem;\n    }\n    .semantic-passport-source small {\n      grid-column: 1 / -1;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-summary {\n      display: block;\n      margin-top: 0.12rem;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n    }\n    .semantic-passport-reach {\n      display: grid;\n      gap: 0.28rem;\n      margin-top: 0.52rem;\n      padding-top: 0.48rem;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 76%, transparent);\n    }\n    .semantic-passport-reach[hidden] { display: none; }\n    .semantic-passport-reach-label {\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n    }\n    .semantic-passport-reach-actions {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 0.25rem;\n    }\n    .semantic-passport-reach-actions button {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.5rem;\n      min-width: 0;\n      min-height: 2rem;\n      padding: 0.32rem 0.42rem;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);\n      background: color-mix(in srgb, var(--panel) 70%, transparent);\n      color: var(--text-muted);\n      text-align: left;\n    }\n    .semantic-passport-reach-actions button:hover:not(:disabled),\n    .semantic-passport-reach-actions button:focus-visible {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 62%, var(--toolbar-border));\n      color: var(--text);\n    }\n    .semantic-passport-reach-actions button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .semantic-passport-reach-actions button:disabled {\n      cursor: default;\n      opacity: 0.5;\n    }\n    .semantic-passport-reach-actions button[aria-pressed=\"true\"] {\n      border-color: color-mix(in srgb, var(--reach-color, var(--frontend-stroke)) 72%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--reach-fill, var(--frontend-fill)) 48%, transparent);\n      color: var(--text);\n    }\n    #btn-reach-upstream {\n      --reach-color: var(--database-stroke);\n      --reach-fill: var(--database-fill);\n    }\n    #btn-reach-downstream {\n      --reach-color: var(--backend-stroke);\n      --reach-fill: var(--backend-fill);\n    }\n    .semantic-passport-reach-actions strong {\n      color: var(--reach-color, var(--frontend-stroke));\n      font-size: 0.625rem;\n    }\n    .semantic-passport-reach-status {\n      color: var(--text-faint);\n      font-size: 0.525rem;\n      line-height: 1.4;\n    }\n    .semantic-passport-reach-status[hidden] { display: none; }\n    .relationship-lens-list {\n      max-height: min(18rem, 46vh);\n      overflow: auto;\n      padding: 0.4rem;\n      scrollbar-width: thin;\n      scrollbar-color: var(--frontend-stroke) transparent;\n    }\n    .relationship-lens-list::-webkit-scrollbar { width: 4px; }\n    .relationship-lens-list::-webkit-scrollbar-thumb {\n      border-radius: 999px;\n      background: color-mix(in srgb, var(--frontend-stroke) 68%, transparent);\n    }\n    .relationship-lens-group + .relationship-lens-group { margin-top: 0.35rem; }\n    .relationship-lens-group-title {\n      display: block;\n      padding: 0.24rem 0.38rem 0.16rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .relationship-lens-row {\n      display: grid;\n      grid-template-columns: 2.1rem minmax(0, 1fr);\n      gap: 0.06rem 0.45rem;\n      width: 100%;\n      padding: 0.45rem 0.5rem !important;\n      text-align: left;\n    }\n    .relationship-lens-row:hover,\n    .relationship-lens-row:focus-visible,\n    .relationship-lens-row[data-preview-active=\"true\"] {\n      background: var(--toolbar-hover);\n      box-shadow: inset 2px 0 0 var(--frontend-stroke);\n    }\n    .relationship-lens-row:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: -2px;\n    }\n    .relationship-lens-direction {\n      grid-row: 1 / 3;\n      align-self: center;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n    }\n    .relationship-lens-row[data-direction=\"in\"] .relationship-lens-direction { color: var(--database-stroke); }\n    .relationship-lens-row[data-direction=\"loop\"] .relationship-lens-direction { color: var(--security-stroke); }\n    .relationship-lens-row strong {\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.6875rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-row small {\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .relationship-lens-empty {\n      margin: 0;\n      padding: 0.75rem;\n      color: var(--text-faint);\n      font-size: 0.625rem;\n      text-align: center;\n    }\n\n    /* Diagram Guide keeps the artifact's growing reader vocabulary\n       discoverable without widening the permanent control bar. It derives\n       honest counts at runtime and delegates every action to an existing\n       production interaction instead of creating a second command system. */\n    .diagram-guide {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      z-index: 26;\n      width: min(32rem, calc(100% - 2rem));\n      max-height: min(42rem, calc(100% - 2rem));\n      overflow: auto;\n      border: 1px solid color-mix(in srgb, var(--cloud-stroke) 58%, var(--toolbar-border));\n      border-radius: 0.82rem;\n      background:\n        linear-gradient(135deg, color-mix(in srgb, var(--cloud-fill) 32%, transparent), transparent 42%),\n        var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 22px 64px rgba(0, 0, 0, 0.4);\n      backdrop-filter: blur(18px);\n      animation: archify-guide-in 180ms cubic-bezier(0.22, 1, 0.36, 1);\n    }\n    .diagram-guide[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .diagram-guide { border-radius: 0.28rem; }\n    .diagram-guide-head {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      align-items: start;\n      gap: 1rem;\n      padding: 0.82rem 0.9rem 0.68rem;\n      border-bottom: 1px solid var(--toolbar-border);\n    }\n    .diagram-guide-eyebrow {\n      display: block;\n      color: var(--cloud-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n    .diagram-guide-title {\n      display: block;\n      margin-top: 0.16rem;\n      color: var(--text);\n      font-size: 0.86rem;\n      letter-spacing: -0.02em;\n    }\n    .diagram-guide-close {\n      width: 1.8rem;\n      height: 1.8rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .diagram-guide-close:hover,\n    .diagram-guide-close:focus-visible { background: var(--toolbar-hover); }\n    .diagram-guide-stats {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 0;\n      padding: 0.54rem 0.9rem;\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 74%, transparent);\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.025em;\n    }\n    .diagram-guide-stats::before {\n      content: '';\n      width: 0.42rem;\n      height: 0.42rem;\n      flex: none;\n      border-radius: 50%;\n      background: var(--backend-stroke);\n      box-shadow: 0 0 10px color-mix(in srgb, var(--backend-stroke) 72%, transparent);\n    }\n    .diagram-guide-actions {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0.38rem;\n      padding: 0.62rem;\n    }\n    .diagram-guide-action {\n      --guide-accent: var(--frontend-stroke);\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.55rem;\n      min-height: 4.15rem;\n      padding: 0.55rem 0.58rem;\n      border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, var(--toolbar-border));\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 78%, transparent);\n      color: var(--toolbar-text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;\n    }\n    .diagram-guide-action[data-guide-action=\"route\"] { --guide-accent: var(--backend-stroke); }\n    .diagram-guide-action[data-guide-action=\"map\"] { --guide-accent: var(--database-stroke); }\n    .diagram-guide-action[data-guide-action=\"lens\"] { --guide-accent: var(--messagebus-stroke); }\n    .diagram-guide-action[data-guide-action=\"story\"] { --guide-accent: var(--security-stroke); }\n    .diagram-guide-action[data-guide-action=\"present\"] {\n      --guide-accent: var(--cloud-stroke);\n    }\n    .diagram-guide-action:hover,\n    .diagram-guide-action:focus-visible {\n      border-color: color-mix(in srgb, var(--guide-accent) 76%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--guide-accent) 9%, var(--panel));\n      transform: translateY(-1px);\n    }\n    .diagram-guide-action:focus-visible,\n    .diagram-guide-close:focus-visible {\n      outline: 2px solid var(--cloud-stroke);\n      outline-offset: 1px;\n    }\n    .diagram-guide-action:disabled {\n      opacity: 0.42;\n      cursor: default;\n      transform: none;\n    }\n    .diagram-guide-index {\n      display: grid;\n      place-items: center;\n      width: 1.65rem;\n      height: 1.65rem;\n      border: 1px solid color-mix(in srgb, var(--guide-accent) 64%, var(--toolbar-border));\n      border-radius: 0.35rem;\n      color: var(--guide-accent);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n    }\n    .diagram-guide-action-copy { min-width: 0; }\n    .diagram-guide-action strong {\n      display: block;\n      overflow: hidden;\n      color: var(--text);\n      font-size: 0.66rem;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .diagram-guide-action small {\n      display: -webkit-box;\n      margin-top: 0.18rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      line-height: 1.35;\n      -webkit-box-orient: vertical;\n      -webkit-line-clamp: 2;\n    }\n    .diagram-guide kbd {\n      align-self: start;\n      min-width: 1.45rem;\n      padding: 0.12rem 0.3rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.25rem;\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5rem;\n      text-align: center;\n    }\n    .diagram-guide-shortcuts {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.34rem 0.62rem;\n      padding: 0.58rem 0.9rem 0.68rem;\n      border-top: 1px solid var(--toolbar-border);\n      color: var(--text-faint);\n      font-size: 0.5rem;\n    }\n    .diagram-guide-shortcuts span {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.28rem;\n      white-space: nowrap;\n    }\n    .diagram-guide-feedback {\n      min-height: 1rem;\n      margin: -0.18rem 0.9rem 0.62rem;\n      color: var(--security-stroke);\n      font-size: 0.5rem;\n    }\n    .diagram-guide-feedback:empty { display: none; }\n    @keyframes archify-guide-in {\n      from { opacity: 0; transform: translateY(-5px) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .node-finder {\n      position: absolute;\n      top: 1rem;\n      left: 1rem;\n      z-index: 24;\n      display: flex;\n      flex-direction: column;\n      width: min(22rem, calc(100% - 2rem));\n      max-height: calc(100% - 2rem);\n      overflow: hidden;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.85rem;\n      background: var(--toolbar-menu-bg);\n      color: var(--toolbar-text);\n      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.22);\n      backdrop-filter: blur(16px);\n    }\n    .node-finder[hidden] { display: none; }\n    .node-finder[data-context=\"route-source\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 68%, var(--toolbar-border));\n    }\n    .node-finder[data-context=\"route-target\"] {\n      border-color: color-mix(in srgb, var(--security-stroke) 68%, var(--toolbar-border));\n    }\n    html[data-preset=\"blueprint\"] .node-finder { border-radius: 0.3rem; }\n    .node-finder-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.7rem 0.8rem 0.45rem;\n    }\n    .node-finder-head strong {\n      color: var(--text);\n      font-size: 0.6875rem;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .node-finder[data-context=\"route-source\"] .node-finder-head strong { color: var(--frontend-stroke); }\n    .node-finder[data-context=\"route-target\"] .node-finder-head strong { color: var(--security-stroke); }\n    .node-finder-close {\n      width: 1.75rem;\n      height: 1.75rem;\n      border: 0;\n      border-radius: 0.35rem;\n      background: transparent;\n      color: var(--toolbar-text);\n      font: inherit;\n      font-size: 1rem;\n      cursor: pointer;\n    }\n    .node-finder-close:hover,\n    .node-finder-close:focus-visible { background: var(--toolbar-hover); }\n    .node-finder-close:focus-visible,\n    .node-finder-result:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: -2px;\n    }\n    .node-finder-search {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      align-items: center;\n      gap: 0.55rem;\n      margin: 0 0.55rem 0.55rem;\n      padding: 0 0.7rem;\n      min-height: 2.6rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 78%, transparent);\n      transition: border-color 160ms ease-out, box-shadow 160ms ease-out;\n    }\n    html[data-preset=\"blueprint\"] .node-finder-search { border-radius: 0.18rem; }\n    .node-finder-search \u003e span { color: var(--frontend-stroke); font-size: 0.875rem; }\n    .node-finder-search:focus-within {\n      border-color: var(--frontend-stroke);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--frontend-stroke) 20%, transparent);\n    }\n    .node-finder-input {\n      appearance: none;\n      width: 100%;\n      min-width: 0;\n      border: 0;\n      outline: 0;\n      background: transparent;\n      color: var(--text);\n      font: inherit;\n      font-size: 0.75rem;\n    }\n    .node-finder-input:focus-visible { outline: none; }\n    .node-finder-input::placeholder { color: var(--text-faint); }\n    .node-finder kbd {\n      padding: 0.1rem 0.32rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.25rem;\n      color: var(--text-faint);\n      font: inherit;\n      font-size: 0.5625rem;\n    }\n    .node-finder-results {\n      display: grid;\n      flex: 1 1 auto;\n      gap: 0;\n      min-height: 0;\n      max-height: min(18rem, 48vh);\n      margin: 0 0.55rem 0.45rem;\n      padding: 0;\n      overflow-y: auto;\n      overscroll-behavior: contain;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 78%, transparent);\n      border-radius: 0.55rem;\n      background: color-mix(in srgb, var(--panel) 54%, transparent);\n      scroll-padding-block: 0.25rem;\n      scrollbar-width: thin;\n    }\n    html[data-preset=\"blueprint\"] .node-finder-results { border-radius: 0.18rem; }\n    .node-finder-result {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 0.2rem 0.75rem;\n      width: 100%;\n      min-height: 3.25rem;\n      padding: 0.58rem 0.65rem;\n      border: 0;\n      border-radius: 0;\n      background: transparent;\n      color: var(--text);\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      transition: background-color 160ms ease-out;\n    }\n    .node-finder-result:not(:last-child) {\n      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 62%, transparent);\n    }\n    .node-finder-result:hover,\n    .node-finder-result:focus-visible {\n      position: relative;\n      z-index: 1;\n      background: color-mix(in srgb, var(--frontend-fill) 48%, var(--toolbar-hover));\n    }\n    .node-finder-result strong {\n      overflow: hidden;\n      font-size: 0.75rem;\n      line-height: 1.25;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .node-finder-result small {\n      grid-column: 1 / -1;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n      letter-spacing: 0.015em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .node-finder-result em {\n      align-self: center;\n      color: var(--frontend-stroke);\n      font-size: 0.625rem;\n      font-style: normal;\n    }\n    .node-finder[data-context^=\"route-\"] .node-finder-result em {\n      padding: 0.1rem 0.3rem;\n      border: 1px solid color-mix(in srgb, currentColor 52%, transparent);\n      border-radius: 999px;\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n    }\n    .node-finder[data-context=\"route-target\"] .node-finder-result em { color: var(--security-stroke); }\n    .node-finder-empty {\n      padding: 1.1rem 0.75rem 1.25rem;\n      color: var(--text-faint);\n      font-size: 0.6875rem;\n      text-align: center;\n    }\n    .node-finder-status {\n      margin: 0;\n      padding: 0.1rem 0.8rem 0.65rem;\n      color: var(--text-faint);\n      font-size: 0.5625rem;\n    }\n\n    .guided-views {\n      display: grid;\n      grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem auto;\n      align-items: stretch;\n      gap: 0.35rem;\n      min-width: 0;\n      margin: 0 0 0.75rem;\n      padding: 0.35rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.85rem;\n      background: var(--toolbar-bg);\n      background: linear-gradient(120deg, var(--toolbar-bg), color-mix(in srgb, var(--toolbar-bg) 82%, var(--frontend-fill)));\n      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);\n      backdrop-filter: blur(12px);\n    }\n    .guided-views[hidden] { display: none; }\n\n    html[data-preset=\"blueprint\"] .guided-views {\n      border-color: var(--panel-border);\n      border-radius: 0.35rem;\n      background:\n        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 36%, transparent), transparent 24%),\n        var(--toolbar-bg);\n      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);\n    }\n    html[data-preset=\"blueprint\"] .guided-views button { border-radius: 0.2rem; }\n    html[data-preset=\"blueprint\"] .guided-view-progress { border-radius: 0; }\n    html[data-preset=\"blueprint\"] .guided-view-progress span { border-radius: 0; }\n    .guided-views button {\n      min-width: 0;\n      padding: 0.45rem 0.6rem;\n      border-radius: 0.55rem;\n      font-size: 0.75rem;\n    }\n    .guided-views \u003e #guided-view-prev,\n    .guided-views \u003e #guided-view-next { min-width: 2.75rem; min-height: 2.75rem; }\n    .guided-views button:disabled { opacity: 0.3; cursor: default; }\n    .guided-view-copy {\n      min-width: 0;\n      padding: 0.2rem 0.5rem;\n      border-left: 1px solid var(--toolbar-border);\n      overflow: hidden;\n    }\n    .guided-view-meta {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      min-height: 1rem;\n      margin-bottom: 0.12rem;\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 700;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .guided-view-handoff {\n      box-sizing: border-box;\n      height: 1rem;\n      min-width: 0;\n      max-width: 15rem;\n      overflow: hidden;\n      padding: 0 0.38rem;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 46%, transparent);\n      border-radius: 999px;\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-fill) 44%, transparent);\n      font-size: 0.5rem;\n      line-height: calc(1rem - 2px);\n      letter-spacing: 0.06em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-view-handoff[hidden] { display: none; }\n    html[data-preset=\"blueprint\"] .guided-view-handoff { border-radius: 0.15rem; }\n    .chapter-handoff-overlay { pointer-events: none; }\n    .chapter-handoff-anchor {\n      fill: color-mix(in srgb, var(--frontend-fill) 10%, transparent);\n      stroke: var(--frontend-stroke);\n      stroke-width: 2;\n      stroke-dasharray: 4 4;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n      animation: archify-chapter-anchor 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"stay\"] { opacity: 1; }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"enter\"] { opacity: 0.78; }\n    svg[data-chapter-handoff] [data-node-id][data-chapter-role=\"leave\"] { opacity: 0.26; }\n    @keyframes archify-chapter-anchor {\n      0% { opacity: 0.35; stroke-dashoffset: 8; }\n      45% { opacity: 1; }\n      100% { opacity: 0.72; stroke-dashoffset: 0; }\n    }\n    .guided-view-progress {\n      width: 3.5rem;\n      height: 2px;\n      overflow: hidden;\n      border-radius: 999px;\n      background: var(--toolbar-border);\n    }\n    .guided-view-progress span {\n      display: block;\n      width: 100%;\n      height: 100%;\n      border-radius: inherit;\n      background: var(--frontend-stroke);\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n    .guided-view-copy strong,\n    .guided-view-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .guided-view-copy strong { color: var(--toolbar-text); font-size: 0.75rem; line-height: 1.35; }\n    .guided-view-copy small { margin-top: 0; color: var(--text-muted); font-size: 0.625rem; line-height: 1.35; }\n    .guided-story-caption {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr) auto;\n      gap: 0.12rem 0.55rem;\n      align-items: center;\n      min-width: 0;\n      margin-top: 0.18rem;\n      padding: 0.3rem 0.5rem;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 32%, var(--toolbar-border));\n      border-radius: 0.58rem;\n      background: color-mix(in srgb, var(--frontend-fill) 26%, transparent);\n      animation: archify-story-caption-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    .guided-story-caption[hidden] { display: none; }\n    .guided-story-caption-index {\n      grid-row: 1 / span 2;\n      align-self: stretch;\n      display: inline-grid;\n      min-width: 3.3rem;\n      place-items: center;\n      padding-right: 0.52rem;\n      border-right: 1px solid color-mix(in srgb, var(--frontend-stroke) 28%, var(--toolbar-border));\n      color: var(--frontend-stroke);\n      font-size: 0.5625rem;\n      font-weight: 800;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n    .guided-story-caption strong,\n    .guided-story-caption small {\n      display: block;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-story-caption strong { color: var(--toolbar-text); font-size: 0.6875rem; line-height: 1.3; }\n    .guided-story-caption small { color: var(--text-muted); font-size: 0.5625rem; line-height: 1.35; }\n    .guided-story-caption-next {\n      grid-column: 3;\n      grid-row: 1 / span 2;\n      display: grid;\n      min-width: 6.4rem;\n      max-width: 9.5rem;\n      align-self: stretch;\n      align-content: center;\n      padding-left: 0.58rem;\n      border-left: 1px solid color-mix(in srgb, var(--frontend-stroke) 22%, var(--toolbar-border));\n    }\n    .guided-story-caption-next[hidden] { display: none; }\n    .guided-story-caption-next small {\n      color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--text-muted));\n      font-weight: 800;\n      letter-spacing: 0.09em;\n      text-transform: uppercase;\n    }\n    .guided-story-caption-next strong { color: var(--text-muted); font-weight: 700; }\n    html[data-preset=\"blueprint\"] .guided-story-caption { border-radius: 0.2rem; }\n    .guided-views[data-story-beat] .guided-view-copy \u003e #guided-view-label,\n    .guided-views[data-story-beat] .guided-view-copy \u003e #guided-view-note { display: none; }\n    @keyframes archify-story-caption-in {\n      from { opacity: 0; transform: translateY(3px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .guided-view-trail {\n      display: flex;\n      align-items: center;\n      gap: 0.28rem;\n      min-width: 0;\n      min-height: 1.7rem;\n      margin-top: 0;\n      padding: 0;\n      overflow-x: auto;\n      color: var(--text-faint);\n      overscroll-behavior-x: contain;\n      touch-action: pan-x;\n      scrollbar-width: none;\n      white-space: nowrap;\n    }\n    .guided-view-trail[hidden] { display: none; }\n    .guided-view-trail::-webkit-scrollbar { display: none; }\n    .guided-view-trail .guided-view-stop {\n      appearance: none;\n      box-sizing: border-box;\n      display: inline-flex;\n      flex: 0 0 auto;\n      align-items: center;\n      gap: 0.28rem;\n      min-height: 1.5rem;\n      padding: 0.1rem 0.3rem 0.1rem 0.18rem;\n      border: 1px solid transparent;\n      border-radius: 999px;\n      background: transparent;\n      color: var(--text-muted);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: 0.5625rem;\n      font-weight: 650;\n      letter-spacing: 0.02em;\n      line-height: 1;\n      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;\n    }\n    .guided-view-stop:hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);\n      background: color-mix(in srgb, var(--frontend-fill) 34%, transparent);\n    }\n    .guided-view-stop:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .guided-view-stop:disabled { cursor: wait; }\n    .guided-view-stop::before {\n      display: inline-grid;\n      width: 1rem;\n      height: 1rem;\n      place-items: center;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));\n      border-radius: 50%;\n      background: color-mix(in srgb, var(--frontend-fill) 58%, var(--toolbar-bg));\n      color: var(--frontend-stroke);\n      content: attr(data-story-number);\n      font-size: 0.5rem;\n      line-height: 1;\n    }\n    .guided-view-stop + .guided-view-stop::after {\n      order: -1;\n      color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--text-faint));\n      content: '\\00b7';\n      font-size: 0.65rem;\n    }\n    .guided-view-stop[data-story-link=\"forward\"]::after { content: '\\2192'; }\n    .guided-view-stop[data-story-link=\"reverse\"]::after { content: '\\2190'; }\n    .guided-view-stop[data-story-link=\"multiple\"]::after { content: '\\21c4'; }\n    .guided-view-stop[data-story-beat-state=\"pending\"] { opacity: 0.38; }\n    .guided-view-stop[data-story-beat-state=\"next\"] {\n      border-style: dashed;\n      border-color: color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));\n      color: color-mix(in srgb, var(--toolbar-text) 68%, var(--text-muted));\n      opacity: 0.58;\n    }\n    .guided-view-stop[data-story-beat-state=\"past\"] { color: var(--text-muted); opacity: 0.76; }\n    .guided-view-stop[data-story-beat-state=\"active\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--frontend-fill) 42%, transparent);\n      color: var(--toolbar-text);\n      font-weight: 800;\n      opacity: 1;\n    }\n    .guided-view-stop[data-story-beat-state=\"active\"]::before {\n      border-color: var(--frontend-stroke);\n      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 54%, transparent);\n    }\n    html[data-preset=\"blueprint\"] .guided-view-stop,\n    html[data-preset=\"blueprint\"] .guided-view-stop::before { border-radius: 0.1rem; }\n    html[data-preset=\"blueprint\"] .guided-view-stop[data-story-beat-state=\"active\"]::before { box-shadow: none; }\n    .guided-view-actions { display: flex; align-items: stretch; gap: 0.2rem; }\n    .guided-view-actions button { white-space: nowrap; }\n    .guided-view-play {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.38rem;\n      min-width: 6.25rem !important;\n      color: var(--frontend-stroke) !important;\n      font-size: 0.625rem !important;\n    }\n    .guided-view-play[aria-pressed=\"true\"] { background: var(--toolbar-hover); }\n    .guided-view-all { min-width: 3.25rem !important; color: var(--text-muted) !important; font-size: 0.625rem !important; }\n    .guided-view-beat-link {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 0.3rem;\n      min-width: 5.4rem !important;\n      min-height: 1.5rem;\n      color: var(--text-muted) !important;\n      font-size: 0.5625rem !important;\n      letter-spacing: 0.025em;\n      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;\n    }\n    .guided-view-beat-link:not(:disabled):hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));\n      color: var(--frontend-stroke) !important;\n    }\n    .guided-view-beat-link[data-copy-state=\"copied\"] {\n      border-color: color-mix(in srgb, var(--backend-stroke) 58%, var(--toolbar-border));\n      background: color-mix(in srgb, var(--backend-fill) 46%, transparent);\n      color: var(--backend-stroke) !important;\n    }\n    .guided-view-index {\n      grid-column: 1 / -1;\n      min-width: 0;\n      padding: 0.28rem 0.12rem 0.08rem;\n      overflow: hidden;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    @media (min-width: 721px) {\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-index,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-beat-link,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-all,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-trail,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-copy \u003e #guided-view-label,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-view-copy \u003e #guided-view-note { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views[data-playing=\"true\"] .guided-story-caption { margin-top: 0.08rem; }\n    }\n    .guided-view-chapters {\n      display: flex;\n      gap: 0.28rem;\n      min-width: 0;\n      margin: 0;\n      padding: 0.08rem 0.05rem 0.2rem;\n      overflow-x: auto;\n      list-style: none;\n      scroll-padding-inline: 0.05rem;\n      scroll-snap-type: x proximity;\n      scrollbar-width: none;\n    }\n    .guided-view-chapters::-webkit-scrollbar { display: none; }\n    .guided-view-chapters li {\n      display: flex;\n      flex: 1 1 0;\n      min-width: 9.5rem;\n      scroll-snap-align: center;\n    }\n    .guided-view-chapter {\n      position: relative;\n      display: grid !important;\n      grid-template-columns: 1.55rem minmax(0, 1fr) auto;\n      align-items: center;\n      width: 100%;\n      min-height: 2.75rem;\n      padding: 0.36rem 0.48rem !important;\n      overflow: hidden;\n      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent) !important;\n      border-radius: 0.48rem !important;\n      background: color-mix(in srgb, var(--toolbar-bg) 88%, transparent) !important;\n      color: var(--text-muted) !important;\n      text-align: left;\n      transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;\n    }\n    .guided-view-chapter:hover {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--toolbar-border)) !important;\n      background: color-mix(in srgb, var(--frontend-fill) 42%, var(--toolbar-bg)) !important;\n    }\n    .guided-view-chapter:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 1px;\n    }\n    .guided-view-chapter-index {\n      display: inline-grid;\n      width: 1.32rem;\n      height: 1.32rem;\n      place-items: center;\n      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));\n      border-radius: 50%;\n      color: var(--frontend-stroke);\n      font-size: 0.5rem;\n      font-weight: 800;\n      letter-spacing: 0.03em;\n    }\n    .guided-view-chapter-title {\n      min-width: 0;\n      overflow: hidden;\n      color: var(--toolbar-text);\n      font-size: 0.625rem;\n      font-weight: 700;\n      line-height: 1.3;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-count {\n      grid-column: 3;\n      grid-row: 1;\n      margin-left: 0.38rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-style: normal;\n      font-weight: 650;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-delta {\n      display: inline-flex;\n      grid-column: 3;\n      grid-row: 1;\n      align-items: center;\n      gap: 0.22rem;\n      margin-left: 0.38rem;\n      color: var(--text-faint);\n      font-size: 0.5rem;\n      font-weight: 750;\n      letter-spacing: 0.01em;\n      white-space: nowrap;\n    }\n    .guided-view-chapter-delta[hidden] { display: none; }\n    .guided-view-chapter-delta [data-delta-kind=\"stay\"] { color: var(--text-muted); }\n    .guided-view-chapter-delta [data-delta-kind=\"enter\"] { color: var(--frontend-stroke); }\n    .guided-view-chapter-delta [data-delta-kind=\"leave\"] { color: var(--security-stroke); }\n    .guided-view-chapter[data-preview-active=\"true\"] {\n      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border)) !important;\n      background: color-mix(in srgb, var(--frontend-fill) 54%, var(--toolbar-bg)) !important;\n    }\n    .guided-view-chapter[data-chapter-position=\"current\"] {\n      border: 2px solid var(--frontend-stroke) !important;\n      padding: calc(0.36rem - 1px) calc(0.48rem - 1px) !important;\n      box-shadow: inset 3px 0 0 var(--frontend-stroke);\n      color: var(--toolbar-text) !important;\n    }\n    .guided-view-chapter[data-chapter-position=\"current\"] .guided-view-chapter-index {\n      background: var(--frontend-stroke);\n      color: var(--bg);\n    }\n    .guided-view-chapter[data-chapter-position=\"before\"] {\n      border-style: solid !important;\n      opacity: 0.72;\n    }\n    .guided-view-chapter[data-chapter-position=\"after\"] { border-style: dashed !important; }\n    html[data-preset=\"signal-flow\"] .guided-view-chapter[data-chapter-position=\"current\"] {\n      box-shadow: inset 3px 0 0 var(--frontend-stroke), 0 0 18px color-mix(in srgb, var(--frontend-stroke) 18%, transparent);\n    }\n    html[data-preset=\"blueprint\"] .guided-view-chapter,\n    html[data-preset=\"blueprint\"] .guided-view-chapter-index { border-radius: 0.12rem !important; }\n\n    /* Story Shelf — keep every authored chapter and the Play action visible,\n       but do not spend a second row on unavailable director controls before\n       the reader enters a chapter. Existing data-active-view state expands\n       the full guided surface without a new toggle or stored preference. */\n    .guided-views[data-active-view=\"all\"] {\n      grid-template-columns: minmax(11rem, .72fr) auto minmax(0, 2fr);\n      align-items: center;\n      padding: 0.28rem 0.35rem;\n    }\n    .guided-views[data-active-view=\"all\"] \u003e #guided-view-prev,\n    .guided-views[data-active-view=\"all\"] \u003e #guided-view-next,\n    .guided-views[data-active-view=\"all\"] .guided-view-beat-link,\n    .guided-views[data-active-view=\"all\"] .guided-view-all { display: none; }\n    .guided-views[data-active-view=\"all\"] .guided-view-copy {\n      grid-column: 1;\n      grid-row: 1;\n      padding: 0.1rem 0.55rem;\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-copy \u003e #guided-view-note { display: none; }\n    .guided-views[data-active-view=\"all\"] .guided-view-actions {\n      display: block;\n      grid-column: 2;\n      grid-row: 1;\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-play { min-height: 2.75rem; }\n    .guided-views[data-active-view=\"all\"] .guided-view-index {\n      grid-column: 3;\n      grid-row: 1;\n      padding: 0 0.08rem 0 0.42rem;\n      border-top: 0;\n      border-left: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n    }\n    .guided-views[data-active-view=\"all\"] .guided-view-chapters {\n      gap: 0.3rem;\n      padding: 0;\n    }\n\n    .cards {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n      gap: 1rem;\n      margin-top: 2rem;\n    }\n\n    .card {\n      background: var(--panel);\n      border-radius: 0.75rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.25rem;\n    }\n\n    html[data-preset=\"signal-flow\"] .card {\n      background: linear-gradient(145deg, rgba(10, 24, 43, 0.86), rgba(5, 12, 24, 0.92));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);\n    }\n    html[data-preset=\"signal-flow\"][data-theme=\"light\"] .card {\n      background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 246, 250, 0.9));\n      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 32px rgba(45, 78, 99, 0.08);\n    }\n\n    /* Preserve the one-screen guarantee on ordinary laptop displays. The\n       high-screen expansion above must not trade a fuller canvas for page\n       scrolling at 900–1080px heights. */\n    @media (min-width: 768px) and (max-height: 1100px) {\n      .header { margin-bottom: 1rem; }\n      .diagram-container {\n        padding: 0.875rem;\n        padding-bottom: calc(0.875rem + var(--archify-nav-reserve));\n      }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      body { padding-block: 1.25rem; }\n      .header { margin-bottom: 0.875rem; }\n      .cards { margin-top: 0.75rem; }\n      html[data-nav-stage-rail=\"true\"] body { padding-block: 0.375rem; }\n      html[data-nav-stage-rail=\"true\"] .header { margin-bottom: 0.5rem; }\n      html[data-nav-stage-rail=\"true\"] .guided-views { margin-bottom: 0.375rem; }\n      html[data-nav-stage-rail=\"true\"] .diagram-container[data-nav-stage-rail=\"true\"] { padding-top: 0.5rem; }\n      html[data-nav-stage-rail=\"true\"] .cards { margin-top: 0.375rem; }\n    }\n\n    html[data-preset=\"blueprint\"] .card {\n      position: relative;\n      border-color: var(--panel-border);\n      border-radius: 0.3rem;\n      background: var(--panel);\n      box-shadow: none;\n    }\n    html[data-preset=\"blueprint\"] .card::before {\n      content: \"\";\n      position: absolute;\n      top: -1px;\n      left: 1rem;\n      width: 2.5rem;\n      border-top: 2px solid var(--frontend-stroke);\n    }\n\n    html[data-preset=\"editorial\"] .card {\n      position: relative;\n      border-radius: 0.28rem;\n      background: var(--panel);\n      box-shadow: 0 10px 28px color-mix(in srgb, #000 10%, transparent);\n    }\n    html[data-preset=\"editorial\"] .card::before {\n      position: absolute;\n      top: -1px;\n      left: 1.25rem;\n      width: 3.25rem;\n      border-top: 3px solid var(--arrow-emphasis);\n      content: \"\";\n    }\n    html[data-preset=\"editorial\"] .card-dot { border-radius: 0; transform: rotate(45deg) scale(0.78); }\n\n    .card-header {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .card-dot {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n    }\n\n    .card-dot.cyan     { background: var(--frontend-stroke); }\n    .card-dot.emerald  { background: var(--backend-stroke); }\n    .card-dot.violet   { background: var(--database-stroke); }\n    .card-dot.amber    { background: var(--cloud-stroke); }\n    .card-dot.rose     { background: var(--security-stroke); }\n    .card-dot.orange   { background: var(--messagebus-stroke); }\n    .card-dot.slate    { background: var(--external-stroke); }\n\n    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }\n\n    .card ul {\n      list-style: none;\n      color: var(--text-muted);\n      font-size: 0.75rem;\n    }\n\n    .card li { margin-bottom: 0.375rem; }\n\n    /* ==========================================================\n       Print stylesheet — hide interactive controls, force light,\n       drop the grid so the diagram doesn't waste ink, use landscape\n       so wide diagrams fit, pack summary cards into 2 columns to\n       avoid an orphan card on a trailing page.\n       ========================================================== */\n    @page { size: landscape; margin: 1.5cm; }\n\n    @media print {\n      /* Force the FULL light palette — including component fills/strokes and\n         lane/arrow colors — so printing from dark theme doesn't put neon\n         strokes and translucent dark fills on white paper. */\n      :root, [data-theme=\"dark\"], [data-theme=\"light\"] {\n        --bg: #ffffff;\n        --grid: transparent;\n        --panel: #ffffff;\n        --panel-border: #e2e8f0;\n        --text: #0f172a;\n        --text-muted: #475569;\n        --text-dim: #94a3b8;\n        --text-faint: #64748b;\n        --mask: #ffffff;\n        --lane-fill: rgba(248, 250, 252, 0.65);\n        --lane-stroke: #cbd5e1;\n        --arrow: #94a3b8;\n        --arrow-emphasis: #059669;\n        --frontend-fill:    rgba(34, 211, 238, 0.15);\n        --frontend-stroke:  #0891b2;\n        --backend-fill:     rgba(52, 211, 153, 0.18);\n        --backend-stroke:   #059669;\n        --database-fill:    rgba(167, 139, 250, 0.2);\n        --database-stroke:  #7c3aed;\n        --cloud-fill:       rgba(251, 191, 36, 0.18);\n        --cloud-stroke:     #d97706;\n        --security-fill:    rgba(251, 113, 133, 0.15);\n        --security-stroke:  #e11d48;\n        --messagebus-fill:  rgba(251, 146, 60, 0.15);\n        --messagebus-stroke:#ea580c;\n        --external-fill:    rgba(148, 163, 184, 0.18);\n        --external-stroke:  #64748b;\n      }\n      body { background: #ffffff !important; padding: 0; }\n      .container { max-width: none; }\n      .toolbar, .diagram-nav, .focus-chip, .guided-views, .archify-toast, .no-print { display: none !important; }\n      .chapter-handoff-overlay { display: none !important; }\n      svg [data-node-id][data-chapter-role] { opacity: 1 !important; }\n      svg[data-chapter-preview] [data-node-id],\n      svg[data-chapter-preview] [data-edge-from] { opacity: 1 !important; filter: none !important; }\n      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }\n      .diagram-container { --archify-nav-reserve: 0px !important; }\n      html[data-preset=\"signal-flow\"] .diagram-container,\n      html[data-preset=\"signal-flow\"] .card { background: #ffffff; }\n      .cards { grid-template-columns: 1fr 1fr; }\n      /* Ensure elements break sensibly across pages */\n      .card { break-inside: avoid; page-break-inside: avoid; }\n      .diagram-container { break-inside: avoid; page-break-inside: avoid; }\n      .diagram-container svg [data-detail] {\n        opacity: 1 !important;\n        pointer-events: auto !important;\n      }\n      .diagram-container svg [data-detail-anchor] { transform: none !important; }\n      .diagram-container svg[data-lens-active] [data-node-id],\n      .diagram-container svg[data-lens-active] [data-edge-from],\n      .diagram-container svg[data-legend-preview-active] [data-node-id],\n      .diagram-container svg[data-legend-preview-active] [data-edge-from] {\n        opacity: 1 !important;\n        filter: none !important;\n      }\n      [data-legend-bridge-runtime] { display: none !important; }\n      .semantic-lens-overlay { display: none !important; }\n      .relationship-hit-overlay { display: none !important; }\n      .relationship-pulse-overlay { display: none !important; }\n      .route-probe-overlay, .route-journey-overlay { display: none !important; }\n      .story-trail-overlay,\n      .story-carrier-overlay { display: none !important; }\n      .diagram-container svg[data-focus-active] [data-node-id],\n      .diagram-container svg[data-focus-active] [data-edge-from],\n      .diagram-container svg[data-reach-active] [data-node-id],\n      .diagram-container svg[data-reach-active] [data-edge-from],\n      .diagram-container svg[data-story-beat] [data-story-step],\n      .diagram-container svg[data-story-beat] [data-edge-from][data-story-beat-step],\n      .diagram-container svg[data-route-active] [data-node-id],\n      .diagram-container svg[data-route-active] [data-edge-from] {\n        opacity: 1 !important;\n        filter: none !important;\n        animation: none !important;\n      }\n      h1, .subtitle { color: #0f172a; }\n    }\n\n    /* ==========================================================\n       TOOLBAR (theme toggle + export menu)\n       ========================================================== */\n    .toolbar {\n      position: fixed;\n      top: 1rem;\n      right: 1rem;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      padding: 0;\n      border: 0;\n      background: transparent;\n      box-shadow: none;\n      z-index: 100;\n    }\n    .toolbar button {\n      background: var(--toolbar-bg);\n      color: var(--toolbar-text);\n      border: 1px solid var(--toolbar-border);\n      padding: 0.5rem 0.875rem;\n      border-radius: 0.625rem;\n      font-family: inherit;\n      font-size: 0.75rem;\n      font-weight: 500;\n      cursor: pointer;\n      white-space: nowrap;\n      backdrop-filter: blur(10px);\n      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n      transition: background 0.15s, border-color 0.15s, color 0.15s;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.375rem;\n      min-height: 2.75rem;\n    }\n    .toolbar button:hover {\n      background: var(--toolbar-hover);\n      border-color: color-mix(in srgb, var(--arrow) 62%, var(--toolbar-border));\n    }\n    .toolbar button[aria-expanded=\"true\"],\n    .toolbar button[aria-pressed=\"true\"]:not(#btn-theme) {\n      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));\n      border-color: color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));\n    }\n    .toolbar #btn-export {\n      padding-right: 0.82rem;\n      padding-left: 0.82rem;\n    }\n    .toolbar #btn-export:hover,\n    .toolbar #btn-export[aria-expanded=\"true\"] {\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));\n      border-color: color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));\n    }\n    .toolbar button:focus-visible {\n      outline: 2px solid var(--frontend-stroke);\n      outline-offset: 2px;\n    }\n    .toolbar #btn-motion[hidden] { display: none !important; }\n    .toolbar #btn-motion { min-width: 4.4rem; }\n    .toolbar #btn-motion:disabled { cursor: default; opacity: 0.58; }\n    .toolbar .preset-wrap,\n    .toolbar .export-wrap {\n      position: relative;\n    }\n    .toolbar-icon {\n      display: inline-block;\n      width: 0.95rem;\n      height: 0.95rem;\n      flex: 0 0 auto;\n      background: currentColor;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .toolbar-chevron {\n      width: 0.65rem;\n      height: 0.65rem;\n      transition: transform 0.15s ease;\n    }\n    [aria-expanded=\"true\"] \u003e .toolbar-chevron { transform: rotate(180deg); }\n    [data-theme=\"light\"] #theme-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='3.1'/%3E%3Cpath d='M10 2.2v1.4M10 16.4v1.4M2.2 10h1.4M16.4 10h1.4M4.5 4.5l1 1M14.5 14.5l1 1M15.5 4.5l-1 1M5.5 14.5l-1 1'/%3E%3C/g%3E%3C/svg%3E\");\n    }\n    [data-theme=\"dark\"] #theme-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.2 12.7A6.3 6.3 0 017.3 4.8a6.3 6.3 0 107.9 7.9Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    }\n    #btn-present[aria-pressed=\"false\"] #present-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 3.2h-4v4M12.8 3.2h4v4M7.2 16.8h-4v-4M12.8 16.8h4v-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 3.2h-4v4M12.8 3.2h4v4M7.2 16.8h-4v-4M12.8 16.8h4v-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    #btn-present[aria-pressed=\"true\"] #present-icon {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2h-4v-4M12.8 7.2h4v-4M7.2 12.8h-4v4M12.8 12.8h4v4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 7.2h-4v-4M12.8 7.2h4v-4M7.2 12.8h-4v4M12.8 12.8h4v4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E\");\n    }\n    .toolbar-chevron {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n    }\n    .toolbar #btn-preset { min-width: 5.4rem; }\n    .preset-control-mark {\n      width: 0.58rem;\n      height: 0.58rem;\n      flex: 0 0 auto;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 0.2rem;\n      background: color-mix(in srgb, var(--frontend-stroke) 28%, transparent);\n      transition: border-radius 0.15s, box-shadow 0.15s, transform 0.15s;\n    }\n    #btn-preset[data-preset-option=\"signal-flow\"] .preset-control-mark {\n      border-radius: 50%;\n      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 78%, transparent);\n    }\n    #btn-preset[data-preset-option=\"blueprint\"] .preset-control-mark {\n      border-radius: 0.06rem;\n      background: transparent;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frontend-stroke) 32%, transparent);\n      transform: rotate(45deg) scale(0.84);\n    }\n    #btn-preset[data-preset-option=\"editorial\"] .preset-control-mark {\n      border-color: var(--arrow-emphasis);\n      border-radius: 0;\n      background: var(--arrow-emphasis);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);\n      transform: rotate(45deg) scale(0.72);\n    }\n    .toolbar .preset-menu {\n      position: absolute;\n      top: calc(100% + 0.375rem);\n      right: 0;\n      display: none;\n      width: 18.5rem;\n      max-width: calc(100vw - 2rem);\n      padding: 0.45rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.875rem;\n      background: var(--toolbar-menu-bg);\n      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);\n    }\n    .toolbar .preset-menu.open { display: block; }\n    .toolbar .preset-menu.open,\n    .toolbar .export-menu.open {\n      animation: toolbar-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);\n      transform-origin: top right;\n    }\n    @keyframes toolbar-menu-in {\n      from { opacity: 0; transform: translateY(-0.25rem) scale(0.985); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n    .preset-menu-heading {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.42rem 0.6rem 0.55rem;\n      color: var(--text-faint);\n      font-size: 0.56rem;\n      letter-spacing: 0.13em;\n      text-transform: uppercase;\n    }\n    .preset-menu-heading span:last-child {\n      font-size: 0.52rem;\n      letter-spacing: 0.04em;\n      text-transform: none;\n    }\n    .toolbar .preset-option {\n      display: grid;\n      grid-template-columns: 2rem minmax(0, 1fr) 1rem;\n      align-items: center;\n      gap: 0.68rem;\n      width: 100%;\n      min-height: 3.35rem;\n      padding: 0.5rem 0.62rem;\n      border: 0;\n      border-radius: 0.5rem;\n      background: transparent;\n      box-shadow: none;\n      backdrop-filter: none;\n      text-align: left;\n    }\n    .toolbar .preset-option:hover,\n    .toolbar .preset-option:focus-visible { background: var(--toolbar-hover); }\n    .toolbar .preset-option[aria-checked=\"true\"] {\n      background: color-mix(in srgb, var(--frontend-stroke) 9%, transparent);\n      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);\n    }\n    .preset-option-swatch {\n      position: relative;\n      width: 2rem;\n      height: 1.55rem;\n      overflow: hidden;\n      border: 1px solid #64748b;\n      border-radius: 0.24rem;\n      background: #0f172a;\n      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);\n    }\n    .preset-option-swatch::before,\n    .preset-option-swatch::after { position: absolute; content: \"\"; }\n    .preset-option-swatch.classic::before {\n      top: 0.42rem;\n      right: 0.35rem;\n      bottom: 0.42rem;\n      left: 0.35rem;\n      border: 1px solid #22d3ee;\n      border-radius: 0.16rem;\n      background: rgba(34, 211, 238, 0.14);\n    }\n    .preset-option-swatch.signal-flow {\n      border-color: #29415f;\n      background: linear-gradient(135deg, #07101e 10%, #10243c 100%);\n    }\n    .preset-option-swatch.signal-flow::before {\n      top: 50%;\n      right: 0.2rem;\n      left: 0.2rem;\n      height: 1px;\n      background: linear-gradient(90deg, #67e8f9, #c4b5fd);\n      box-shadow: 0 0 8px #67e8f9;\n    }\n    .preset-option-swatch.signal-flow::after {\n      top: calc(50% - 0.13rem);\n      right: 0.28rem;\n      width: 0.26rem;\n      height: 0.26rem;\n      border-radius: 50%;\n      background: #67e8f9;\n      box-shadow: 0 0 7px #67e8f9;\n    }\n    .preset-option-swatch.blueprint {\n      border-color: #34799a;\n      border-radius: 0.08rem;\n      background-color: #0a2031;\n      background-image:\n        linear-gradient(rgba(102, 217, 239, 0.18) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(102, 217, 239, 0.18) 1px, transparent 1px);\n      background-size: 0.42rem 0.42rem;\n    }\n    .preset-option-swatch.blueprint::before {\n      top: 0.34rem;\n      right: 0.38rem;\n      bottom: 0.34rem;\n      left: 0.38rem;\n      border: 1px solid #66d9ef;\n    }\n    .preset-option-swatch.editorial {\n      border-color: #b8aa94;\n      border-radius: 0.08rem;\n      background: repeating-linear-gradient(0deg, #f2eee5 0 0.34rem, #d8d0c2 0.36rem, #f2eee5 0.38rem);\n    }\n    .preset-option-swatch.editorial::before {\n      top: 0;\n      bottom: 0;\n      left: 0.42rem;\n      width: 1px;\n      background: #c9502d;\n      opacity: 0.72;\n    }\n    .preset-option-swatch.editorial::after {\n      top: 0.52rem;\n      right: 0.45rem;\n      width: 0.38rem;\n      height: 0.38rem;\n      background: #c9502d;\n      transform: rotate(45deg);\n    }\n    .preset-option-copy { min-width: 0; }\n    .preset-option-copy strong,\n    .preset-option-copy small { display: block; }\n    .preset-option-copy strong {\n      color: var(--toolbar-text);\n      font-size: 0.72rem;\n      font-weight: 600;\n    }\n    .preset-option-copy small {\n      margin-top: 0.16rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.57rem;\n      font-weight: 400;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n    .preset-option-check {\n      display: inline-block;\n      width: 0.9rem;\n      height: 0.9rem;\n      color: var(--frontend-stroke);\n      background: currentColor;\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n      opacity: 0;\n    }\n    .preset-option[aria-checked=\"true\"] .preset-option-check { opacity: 1; }\n    html[data-preset=\"editorial\"] .toolbar button,\n    html[data-preset=\"editorial\"] .preset-menu,\n    html[data-preset=\"editorial\"] .export-menu,\n    html[data-preset=\"editorial\"] .overview-map,\n    html[data-preset=\"editorial\"] .semantic-lens,\n    html[data-preset=\"editorial\"] .route-probe,\n    html[data-preset=\"editorial\"] .focus-chip,\n    html[data-preset=\"editorial\"] .diagram-guide,\n    html[data-preset=\"editorial\"] .node-finder,\n    html[data-preset=\"editorial\"] .guided-views,\n    html[data-preset=\"editorial\"] .share-chapter-cue {\n      border-radius: 0.3rem;\n    }\n    .motion-control-dot {\n      width: 0.46rem;\n      height: 0.46rem;\n      flex: 0 0 auto;\n      border: 1px solid var(--frontend-stroke);\n      border-radius: 50%;\n      background: var(--frontend-stroke);\n      box-shadow: 0 0 9px color-mix(in srgb, var(--frontend-stroke) 72%, transparent);\n    }\n    #btn-motion[aria-pressed=\"false\"] .motion-control-dot {\n      background: transparent;\n      box-shadow: none;\n    }\n    .toolbar .export-menu {\n      position: absolute;\n      top: calc(100% + 0.375rem);\n      right: 0;\n      background: var(--toolbar-menu-bg);\n      border: 1px solid var(--toolbar-border);\n      width: 19rem;\n      max-width: calc(100vw - 2rem);\n      max-height: calc(100vh - 5.5rem);\n      overflow-y: auto;\n      border-radius: 0.875rem;\n      padding: 0.55rem;\n      display: none;\n      flex-direction: column;\n      box-shadow: 0 18px 48px rgba(0,0,0,0.24);\n    }\n    .toolbar .export-menu.open { display: flex; }\n    .export-menu-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 1rem;\n      padding: 0.5rem 0.55rem 0.72rem;\n    }\n    .export-menu-header strong,\n    .export-menu-header span { display: block; }\n    .export-menu-header strong {\n      color: var(--toolbar-text);\n      font-size: 0.78rem;\n      font-weight: 650;\n      letter-spacing: -0.015em;\n    }\n    .export-menu-header span {\n      margin-top: 0.16rem;\n      color: var(--text-faint);\n      font-size: 0.56rem;\n    }\n    .export-menu-header kbd {\n      padding: 0.16rem 0.36rem;\n      border: 1px solid var(--toolbar-border);\n      border-radius: 0.3rem;\n      color: var(--text-faint);\n      background: color-mix(in srgb, var(--toolbar-border) 16%, transparent);\n      font-family: inherit;\n      font-size: 0.54rem;\n      font-weight: 600;\n    }\n    .export-menu-section {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr);\n      gap: 0.18rem;\n    }\n    .export-menu-section + .export-menu-section {\n      margin-top: 0.42rem;\n      padding-top: 0.42rem;\n      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 68%, transparent);\n    }\n    .export-menu-heading {\n      grid-column: 1 / -1;\n      display: block;\n      padding: 0.24rem 0.55rem 0.2rem;\n      color: var(--text-faint);\n      font-size: 0.54rem;\n      font-weight: 600;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n    }\n    .toolbar .export-menu button {\n      display: grid;\n      grid-template-columns: 1.15rem minmax(0, 1fr);\n      align-items: center;\n      column-gap: 0.52rem;\n      background: transparent;\n      border: 1px solid transparent;\n      box-shadow: none;\n      backdrop-filter: none;\n      width: 100%;\n      min-height: 3rem;\n      text-align: left;\n      padding: 0.48rem 0.55rem;\n      border-radius: 0.5rem;\n      white-space: nowrap;\n    }\n    .export-item-copy {\n      display: block;\n      min-width: 0;\n    }\n    .export-item-copy strong,\n    .export-item-copy small { display: block; }\n    .export-item-copy strong {\n      overflow: hidden;\n      color: inherit;\n      font-size: 0.7rem;\n      font-weight: 550;\n      text-overflow: ellipsis;\n    }\n    .export-item-copy small {\n      margin-top: 0.12rem;\n      overflow: hidden;\n      color: var(--text-faint);\n      font-size: 0.55rem;\n      font-weight: 450;\n      text-overflow: ellipsis;\n    }\n    .toolbar .export-menu button::before {\n      width: 1rem;\n      height: 1rem;\n      background: currentColor;\n      content: \"\";\n      opacity: 0.72;\n      -webkit-mask-position: center;\n      -webkit-mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-position: center;\n      mask-repeat: no-repeat;\n      mask-size: contain;\n    }\n    .toolbar .export-menu button[data-format=\"share-card\"]::before,\n    .toolbar .export-menu button[data-action=\"route-share-card\"]::before,\n    .toolbar .export-menu button[data-action=\"reach-share-card\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' d='M3 4.5h14v11H3zM6 12l2.5-2.5 2 2 1.5-1.5 2 2'/%3E%3Ccircle cx='13.8' cy='7.3' r='1.2' fill='black'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' d='M3 4.5h14v11H3zM6 12l2.5-2.5 2 2 1.5-1.5 2 2'/%3E%3Ccircle cx='13.8' cy='7.3' r='1.2' fill='black'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-action^=\"copy\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 13H3.5A1.5 1.5 0 012 11.5v-8A1.5 1.5 0 013.5 2h8A1.5 1.5 0 0113 3.5V4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='10' height='10' rx='1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M4 13H3.5A1.5 1.5 0 012 11.5v-8A1.5 1.5 0 013.5 2h8A1.5 1.5 0 0113 3.5V4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"png\"]::before,\n    .toolbar .export-menu button[data-format=\"jpeg\"]::before,\n    .toolbar .export-menu button[data-format=\"webp\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h7l3 3v12H5zM12 2.5v3h3' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.5 14l2-2 1.5 1.5 1.5-1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5h7l3 3v12H5zM12 2.5v3h3' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7.5 14l2-2 1.5 1.5 1.5-1.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"svg\"]::before,\n    .toolbar .export-menu button[data-format=\"webm\"]::before {\n      -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n      mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E\");\n    }\n    .toolbar .export-menu button[data-format=\"share-card\"],\n    .toolbar .export-menu button[data-action=\"route-share-card\"],\n    .toolbar .export-menu button[data-action=\"reach-share-card\"] {\n      min-height: 3.35rem;\n      color: var(--toolbar-text);\n      background: color-mix(in srgb, var(--frontend-stroke) 8%, transparent);\n      border-color: color-mix(in srgb, var(--frontend-stroke) 24%, var(--toolbar-border));\n    }\n    .toolbar .export-menu button[hidden] { display: none; }\n    .toolbar .export-menu button:hover {\n      background: var(--toolbar-hover);\n    }\n    .toolbar .export-menu button:focus-visible {\n      background: var(--toolbar-hover);\n      outline-offset: -2px;\n    }\n    .toolbar .export-menu button:disabled {\n      color: var(--text-faint);\n      background: color-mix(in srgb, var(--toolbar-border) 18%, transparent);\n      cursor: not-allowed;\n    }\n    .toolbar .export-menu button:disabled:hover {\n      border-color: transparent;\n    }\n    .toolbar .export-menu .hint {\n      color: var(--text-faint);\n      font-size: 0.55rem;\n    }\n\n    /* Toast — brief feedback for actions like \"copied\" */\n    .archify-toast {\n      position: fixed;\n      top: 1rem;\n      left: 50%;\n      transform: translateX(-50%) translateY(-8px);\n      background: var(--toolbar-menu-bg);\n      color: var(--text);\n      border: 1px solid var(--toolbar-border);\n      padding: 0.5rem 1rem;\n      border-radius: 0.5rem;\n      font-family: inherit;\n      font-size: 0.75rem;\n      opacity: 0;\n      transition: opacity 0.2s, transform 0.2s;\n      z-index: 200;\n      pointer-events: none;\n      box-shadow: 0 4px 20px rgba(0,0,0,0.25);\n    }\n    .archify-toast.show {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n\n    @media (max-width: 720px) {\n      body { padding: 1rem; }\n      .toolbar .preset-menu,\n      .toolbar .export-menu {\n        position: fixed;\n        top: 4.5rem;\n        right: 1rem;\n        left: 1rem;\n        width: auto;\n        max-width: none;\n      }\n      .toolbar {\n        position: relative;\n        justify-content: flex-end;\n        width: max-content;\n        max-width: 100%;\n        margin-left: auto;\n        margin-bottom: 1rem;\n      }\n      .header { margin-bottom: 1.25rem; padding-right: 0; }\n      html[data-preset=\"signal-flow\"] .header,\n      html[data-preset=\"blueprint\"] .header,\n      html[data-preset=\"editorial\"] .header { padding-right: 0; }\n      .header-row {\n        gap: 0.75rem;\n        align-items: flex-start;\n      }\n      html[data-preset=\"signal-flow\"] .header-row,\n      html[data-preset=\"blueprint\"] .header-row,\n      html[data-preset=\"editorial\"] .header-row { flex-wrap: wrap; }\n      html[data-preset=\"signal-flow\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      html[data-preset=\"blueprint\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      html[data-preset=\"editorial\"] .header-row::after {\n        margin-left: 0;\n        order: 3;\n      }\n      h1 {\n        font-size: 1.25rem;\n        line-height: 1.25;\n      }\n      .subtitle {\n        margin-left: 0;\n        font-size: 0.8125rem;\n        line-height: 1.55;\n      }\n      .diagram-container {\n        padding: 0.75rem;\n        border-radius: 0.75rem;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container {\n        padding: 0.75rem 0.75rem 4.25rem;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] {\n        overflow-x: auto;\n        overflow-y: hidden;\n        overscroll-behavior-x: contain;\n        scrollbar-width: thin;\n        scroll-behavior: smooth;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] \u003e svg {\n        min-width: 720px;\n      }\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .diagram-nav,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .overview-map,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .focus-chip,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .route-probe,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .semantic-lens,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .diagram-guide,\n      html:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] .node-finder {\n        transform: translateX(var(--archify-scroll-x, 0px));\n      }\n      .diagram-nav { right: 0.5rem; bottom: 0.5rem; }\n      .diagram-nav button {\n        min-width: 2.75rem;\n        height: 2.75rem;\n      }\n      .diagram-nav [data-view=\"reset\"] { min-width: 3.75rem; }\n      .diagram-nav [data-view=\"reset\"][data-detail-visible] { min-width: 4.35rem; }\n      .overview-map {\n        right: 0.5rem;\n        bottom: 3.7rem;\n        width: min(10.25rem, calc(100% - 1rem));\n      }\n      .overview-map[data-docked=\"true\"] {\n        right: var(--archify-radar-right, 0.5rem);\n        top: var(--archify-radar-top, 0.5rem);\n        bottom: auto;\n        transform: none !important;\n      }\n      .overview-map[data-docked=\"true\"][data-dock-side=\"left\"] {\n        right: auto;\n        left: var(--archify-radar-left, 0.5rem);\n      }\n      .overview-map-surface { height: 4rem; }\n      .overview-map-feedback { right: 0.5rem; bottom: 3.7rem; }\n      .semantic-lens {\n        right: 0.5rem;\n        bottom: 3.7rem;\n        width: calc(100% - 1rem);\n        max-height: calc(100% - 4.2rem);\n      }\n      .semantic-lens[data-dock-side] { left: auto; right: 0.5rem; }\n      .semantic-lens-kinds { max-height: min(12rem, 34vh); }\n      .focus-chip {\n        left: 0.5rem;\n        top: 0.5rem;\n        width: calc(100% - 1rem);\n        max-width: none;\n      }\n      .relationship-lens-list { max-height: min(12rem, 38vh); }\n      .relationship-lens-actions #btn-focus-relations { display: block; color: var(--database-stroke); }\n      .focus-chip:not([data-relations-expanded=\"true\"]) .relationship-lens-head { border-bottom-color: transparent; }\n      .focus-chip:not([data-relations-expanded=\"true\"]) .relationship-lens-list { display: none; }\n      /* While a mobile reader previews one relationship, turn the full Lens\n         into a compact peek card. This keeps the exact source and target on\n         canvas instead of covering them with a long, scrollable list. */\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-list {\n        max-height: none;\n        padding: 0.35rem;\n        overflow: hidden;\n      }\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-group { margin: 0; }\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-group-title,\n      .focus-chip[data-relationship-previewing=\"true\"] .relationship-lens-row:not([data-preview-active=\"true\"]) {\n        display: none;\n      }\n      .node-finder {\n        top: 0.5rem;\n        left: 0.5rem;\n        width: min(22rem, calc(100% - 1rem));\n        max-height: calc(100% - 1rem);\n      }\n      .diagram-guide {\n        top: 0.5rem;\n        right: 0.5rem;\n        left: 0.5rem;\n        width: auto;\n        max-height: calc(100% - 1rem);\n      }\n      .diagram-guide-head { padding: 0.62rem 0.7rem 0.52rem; }\n      .diagram-guide-stats { padding: 0.42rem 0.7rem; }\n      .diagram-guide-actions {\n        grid-template-columns: 1fr;\n        gap: 0.28rem;\n        padding: 0.42rem;\n      }\n      .diagram-guide-action {\n        min-height: 3.1rem;\n        padding: 0.42rem 0.48rem;\n      }\n      .diagram-guide-action small {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .diagram-guide-index {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n      .diagram-guide-shortcuts { padding: 0.46rem 0.7rem 0.52rem; }\n      .diagram-guide-action[data-guide-action=\"present\"] { grid-column: auto; }\n      .route-probe[data-guide-open=\"true\"] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n      .node-finder-results { max-height: min(16rem, 38vh); }\n      .route-probe {\n        left: 0.5rem;\n        bottom: 3.7rem;\n        width: calc(100% - 1rem);\n        min-width: 0;\n      }\n      .route-probe[data-route-dock=\"top\"] {\n        top: 0.5rem;\n        bottom: auto;\n      }\n      .route-probe[data-finder-open=\"true\"] {\n        visibility: hidden;\n        pointer-events: none;\n      }\n      .route-probe-head { padding: 0.45rem 0.48rem 0.38rem; }\n      .route-probe-path { padding: 0.35rem 0.48rem 0.2rem; }\n      .route-probe-node { min-height: 2.75rem !important; }\n      .route-journey-controls {\n        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem minmax(0, 1fr);\n        padding: 0.08rem 0.48rem 0.32rem;\n      }\n      .route-journey-controls button { min-height: 2.75rem; }\n      .route-probe-status { padding: 0.05rem 0.48rem 0.38rem; }\n      .route-probe-node { max-width: 7.5rem; }\n      .guided-views {\n        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;\n        gap: 0.2rem;\n        padding: 0.25rem;\n      }\n      .guided-view-actions {\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n      }\n      .guided-views \u003e #guided-view-prev,\n      .guided-views \u003e #guided-view-next {\n        align-self: center;\n        height: 2.75rem;\n      }\n      .guided-view-play,\n      .guided-view-all,\n      .guided-view-beat-link { min-height: 2.75rem; }\n      .guided-view-copy small { white-space: normal; }\n      .guided-story-caption { padding: 0.32rem 0.45rem; }\n      .guided-story-caption-index { min-width: 2.9rem; padding-right: 0.42rem; }\n      .guided-story-caption strong,\n      .guided-story-caption small { white-space: normal; }\n      .guided-story-caption-next { display: none; }\n      .guided-view-trail { min-height: 2rem; }\n      .guided-view-trail .guided-view-stop {\n        min-height: 2rem;\n        padding: 0.22rem 0.42rem 0.22rem 0.28rem;\n      }\n      .guided-view-handoff { max-width: min(9rem, 32vw); }\n      .guided-view-index { padding-top: 0.35rem; }\n      .guided-view-chapters {\n        gap: 0.35rem;\n        scroll-padding-inline: 0.2rem;\n      }\n      .guided-view-chapters li {\n        flex: 0 0 min(14rem, 78vw);\n        min-width: 0;\n      }\n      .guided-view-chapter { min-height: 2.75rem; }\n      .guided-views[data-active-view=\"all\"] {\n        grid-template-columns: minmax(0, 1fr) auto;\n        gap: 0.2rem;\n        padding: 0.25rem;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-copy {\n        grid-column: 1;\n        grid-row: 1;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-actions {\n        grid-column: 2;\n        grid-row: 1;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-play {\n        min-width: 6rem !important;\n        min-height: 2.75rem;\n      }\n      .guided-views[data-active-view=\"all\"] .guided-view-index {\n        grid-column: 1 / -1;\n        grid-row: 2;\n        padding: 0.3rem 0.08rem 0;\n        border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);\n        border-left: 0;\n      }\n      html[data-embed=\"true\"][data-share-playback=\"true\"] .share-chapter-cue:not([hidden]),\n      html[data-embed=\"true\"][data-share-moment=\"true\"] .share-chapter-cue:not([hidden]) {\n        top: 0.5rem;\n        grid-template-columns: auto minmax(0, 1fr);\n        gap: 0.28rem 0.55rem;\n        width: calc(100% - 1rem);\n        min-height: 0;\n        padding: 0.45rem 0.55rem 0.55rem;\n      }\n      html[data-embed=\"true\"][data-share-playback=\"true\"] .diagram-container {\n        padding-top: 4.25rem;\n      }\n      html[data-embed=\"true\"][data-share-moment=\"true\"] .diagram-container {\n        padding-top: 4.25rem;\n      }\n      .share-chapter-index {\n        min-width: 4.4rem;\n        padding-right: 0.5rem;\n      }\n      .share-chapter-copy small { font-size: 0.46rem; }\n      .share-chapter-route {\n        grid-column: 1 / -1;\n        font-size: 0.5rem;\n        text-align: left;\n      }\n      .cards {\n        grid-template-columns: 1fr;\n        margin-top: 1rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) body { padding: 0.5rem; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .container {\n        gap: 0.5rem;\n        height: calc(100dvh - 1rem);\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .toolbar {\n        position: fixed;\n        top: 0.5rem;\n        right: 0.5rem;\n        margin: 0;\n        gap: 0.25rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .toolbar button {\n        min-height: 2.75rem;\n        padding: 0.42rem 0.58rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header {\n        min-height: 2.25rem;\n        padding: 3.5rem 0 0;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row {\n        min-height: 2.25rem;\n        margin: 0;\n        align-items: center;\n        flex-wrap: nowrap;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .header-row::after,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .pulse-dot,\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .subtitle { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) h1 {\n        flex: 1 1 auto;\n        min-width: 0;\n        max-width: 100%;\n        overflow: hidden;\n        font-size: 0.875rem;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-views {\n        padding: 0.2rem;\n      }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-view-copy small { display: none; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .guided-story-caption small { display: block; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container { padding: 0.5rem 0.5rem 3.75rem; }\n      html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container[data-wide-diagram=\"true\"] \u003e svg {\n        width: 720px;\n        height: auto;\n        min-width: 720px;\n      }\n    }\n\n    @media (max-width: 420px) {\n      .export-menu-section { grid-template-columns: 1fr; }\n      .export-menu-heading,\n      .toolbar .export-menu button[data-format=\"share-card\"],\n      .toolbar .export-menu button[data-action=\"route-share-card\"],\n      .toolbar .export-menu button[data-action=\"reach-share-card\"] { grid-column: 1; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .guided-story-caption { animation: none !important; }\n      .toolbar .preset-menu.open,\n      .toolbar .export-menu.open { animation: none; }\n      .toolbar-chevron { transition: none; }\n    }\n\n    @media (max-width: 360px) {\n      .toolbar { gap: 0.25rem; }\n      .toolbar button { padding-right: 0.58rem; padding-left: 0.58rem; }\n      .toolbar #btn-motion { min-width: 4.4rem; padding-right: 0.58rem; padding-left: 0.58rem; }\n      #theme-label, #preset-label, #present-label { display: none; }\n      .guided-view-handoff { max-width: 6.5rem; }\n    }\n\n    /* ==========================================================\n       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke\n       ========================================================== */\n    .c-grid       { stroke: var(--grid); fill: none; }\n    .c-mask       { fill: var(--mask); stroke: none; }\n\n    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }\n    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }\n    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }\n    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }\n    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }\n    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }\n    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }\n\n    /* Text helpers */\n    .t-primary { fill: var(--text); }\n    .t-muted   { fill: var(--text-muted); }\n    .t-dim     { fill: var(--text-dim); }\n    .t-frontend   { fill: var(--frontend-stroke); }\n    .t-backend    { fill: var(--backend-stroke); }\n    .t-database   { fill: var(--database-stroke); }\n    .t-cloud      { fill: var(--cloud-stroke); }\n    .t-security   { fill: var(--security-stroke); }\n    .t-messagebus { fill: var(--messagebus-stroke); }\n    .t-external   { fill: var(--external-stroke); }\n\n    /* Semantic Sigils are small authored role stamps, not icons from a brand\n       pack and not viewer controls. Prefix selectors with svg so the canonical\n       export's SVG-only stylesheet collector keeps them automatically. */\n    svg .semantic-sigil {\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.35;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.76;\n      pointer-events: none;\n    }\n    svg .semantic-sigil \u003e * { vector-effect: non-scaling-stroke; }\n    svg .semantic-sigil .sigil-fill { fill: currentColor; stroke: none; }\n    svg .s-frontend   { color: var(--frontend-stroke); }\n    svg .s-backend    { color: var(--backend-stroke); }\n    svg .s-database   { color: var(--database-stroke); }\n    svg .s-cloud      { color: var(--cloud-stroke); }\n    svg .s-security   { color: var(--security-stroke); }\n    svg .s-messagebus { color: var(--messagebus-stroke); }\n    svg .s-external   { color: var(--external-stroke); }\n\n    /* Brand Marks are authored identity badges. Their color is contained\n       inside one neutral plate so vendor color never replaces Archify's\n       semantic node and relationship vocabulary. */\n    svg .brand-mark { pointer-events: none; }\n    svg .brand-mark-badge { fill: #fff; stroke: none; }\n    svg .brand-mark-frame {\n      fill: none;\n      stroke: #cbd5e1;\n      stroke-width: 0.8;\n      vector-effect: non-scaling-stroke;\n    }\n    svg .brand-mark-fallback {\n      fill: none;\n      stroke: #475569;\n      stroke-width: 1.15;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n    svg[data-preset=\"blueprint\"] .brand-mark-badge,\n    svg[data-preset=\"blueprint\"] .brand-mark-frame { rx: 1px; }\n\n    /* Reading Depth is a viewer-only level-of-detail layer. MAP preserves the\n       authored structure and primary labels, READ restores relationship labels\n       and node context, and FULL restores tags and fine annotations. Semantic\n       intent can reveal the relevant detail without moving any geometry. */\n    svg [data-detail] { transition: opacity 160ms ease; }\n    svg [data-detail-anchor] {\n      transform-box: fill-box;\n      transform-origin: center;\n      transition: transform 160ms ease;\n    }\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail=\"context\"],\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail=\"fine\"],\n    .diagram-container[data-detail-level=\"read\"] svg [data-detail=\"fine\"] {\n      opacity: 0;\n      pointer-events: none;\n    }\n    .diagram-container[data-detail-level=\"map\"] svg [data-detail-anchor] {\n      transform: translateY(8px);\n    }\n\n    /* Focus, lens, preview, route, and story states are stronger reader intent than\n       the global zoom level. Reveal only their exact semantic matches. */\n    svg[data-focus-active] [data-focus-match][data-detail],\n    svg[data-focus-active] [data-focus-match] [data-detail],\n    svg[data-reach-active] [data-reach-match][data-detail],\n    svg[data-reach-active] [data-reach-match] [data-detail],\n    svg[data-lens-active] [data-lens-match][data-detail],\n    svg[data-lens-active] [data-lens-match] [data-detail],\n    svg[data-legend-preview-active] [data-legend-preview-match][data-detail],\n    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail],\n    svg[data-intent-trace-active] [data-intent-trace-match][data-detail],\n    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail],\n    svg[data-route-active] [data-route-match][data-detail],\n    svg[data-route-active] [data-route-match] [data-detail],\n    svg[data-story-active] [data-story-step][data-detail],\n    svg[data-story-active] [data-story-step] [data-detail],\n    svg[data-relationship-preview-active] [data-relationship-preview][data-detail],\n    svg[data-relationship-preview-active] [data-relationship-preview] [data-detail],\n    svg [data-node-id]:hover [data-detail],\n    svg [data-node-id]:focus-visible [data-detail] {\n      opacity: 1;\n      pointer-events: auto;\n    }\n    svg[data-focus-active] [data-focus-match] [data-detail-anchor],\n    svg[data-reach-active] [data-reach-match] [data-detail-anchor],\n    svg[data-lens-active] [data-lens-match] [data-detail-anchor],\n    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail-anchor],\n    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail-anchor],\n    svg[data-route-active] [data-route-match] [data-detail-anchor],\n    svg[data-story-active] [data-story-step] [data-detail-anchor],\n    svg [data-node-id]:hover [data-detail-anchor],\n    svg [data-node-id]:focus-visible [data-detail-anchor] { transform: none; }\n\n    /* Arrows */\n    .a-default   { stroke: var(--arrow); fill: none; }\n    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }\n    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }\n    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }\n\n    /* Arrowhead markers reference these */\n    .m-default   { fill: var(--arrow); }\n    .m-emphasis  { fill: var(--arrow-emphasis); }\n    .m-security  { fill: var(--security-stroke); }\n    .m-dashed    { fill: var(--database-stroke); }\n\n    /* Stable semantic exploration hooks emitted by every renderer. */\n    svg [data-node-id] {\n      cursor: pointer;\n      transition: opacity 0.18s ease, filter 0.18s ease;\n    }\n    svg [data-edge-from] { transition: opacity 0.18s ease, filter 0.18s ease; }\n    svg [data-node-id]:hover,\n    svg [data-node-id]:focus-visible {\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n      outline: none;\n    }\n    /* Verified Source Beacons are installed at runtime only for nodes whose\n       repository evidence passed the local revision/blob/line checks. They\n       live inside the owning node so every focus, route, story, and guided\n       view keeps one coherent opacity state. Export serialization removes\n       them before producing the canonical SVG or any derived visual. */\n    .source-evidence-beacon {\n      pointer-events: none;\n      opacity: 0.76;\n      transition: opacity 160ms ease, filter 160ms ease;\n    }\n    .source-evidence-beacon rect {\n      fill: color-mix(in srgb, var(--mask) 92%, var(--backend-stroke));\n      stroke: color-mix(in srgb, var(--backend-stroke) 82%, var(--panel-border));\n      stroke-width: 1;\n      vector-effect: non-scaling-stroke;\n    }\n    .source-evidence-beacon text {\n      fill: var(--backend-stroke);\n      font-size: 5.5px;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n      text-anchor: middle;\n      text-transform: uppercase;\n    }\n    svg [data-node-id]:hover .source-evidence-beacon,\n    svg [data-node-id]:focus-visible .source-evidence-beacon,\n    svg [data-node-id][data-focus-selected] .source-evidence-beacon {\n      opacity: 1;\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));\n    }\n    svg[data-preset=\"signal-flow\"] .source-evidence-beacon { opacity: 0.9; }\n    svg[data-preset=\"blueprint\"] .source-evidence-beacon rect {\n      rx: 0.8px;\n      filter: none;\n    }\n    svg [data-legend-kind][role=\"button\"] { cursor: pointer; }\n    svg [data-legend-kind]:focus { outline: none; }\n    svg [data-legend-hit] {\n      fill: transparent;\n      stroke: transparent;\n      stroke-width: 1.4;\n      pointer-events: all;\n      vector-effect: non-scaling-stroke;\n      transition: stroke 150ms ease, stroke-width 150ms ease, filter 150ms ease;\n    }\n    svg [data-legend-count-badge] { pointer-events: none; }\n    svg [data-legend-count-badge] rect {\n      fill: var(--mask);\n      stroke: var(--panel-border);\n      stroke-width: 1;\n      vector-effect: non-scaling-stroke;\n    }\n    svg [data-legend-count-badge] text {\n      fill: var(--text-muted);\n      font-size: 8px;\n      font-weight: 700;\n      text-anchor: middle;\n    }\n    svg [data-legend-kind][role=\"button\"]:hover [data-legend-hit] {\n      stroke: color-mix(in srgb, var(--database-stroke) 58%, transparent);\n    }\n    svg [data-legend-kind][role=\"button\"]:focus-visible [data-legend-hit] {\n      stroke: var(--frontend-stroke);\n      stroke-width: 1.8;\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg [data-legend-kind][data-legend-selected] [data-legend-hit] {\n      stroke: var(--database-stroke);\n      stroke-width: 2.2;\n      stroke-dasharray: 3 2;\n    }\n    svg [data-legend-kind][data-legend-selected] [data-legend-count-badge] rect {\n      stroke: var(--database-stroke);\n      stroke-width: 1.8;\n    }\n    svg [data-legend-kind][data-legend-zero] { opacity: 0.44; }\n    svg[data-preset=\"signal-flow\"] [data-legend-kind][data-legend-selected] [data-legend-hit] {\n      filter: drop-shadow(0 0 4px var(--database-stroke));\n    }\n    svg[data-preset=\"blueprint\"] [data-legend-hit],\n    svg[data-preset=\"blueprint\"] [data-legend-count-badge] rect { rx: 0; filter: none; }\n    svg[data-legend-preview-active] [data-node-id],\n    svg[data-legend-preview-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-legend-preview-active] [data-legend-preview-match] { opacity: 1; }\n    svg[data-legend-preview-active] [data-legend-preview-peer] { opacity: 0.62; }\n    svg[data-legend-preview-active] [data-legend-preview-selected] {\n      filter: drop-shadow(0 0 8px var(--database-stroke));\n    }\n    svg[data-lens-active] [data-node-id],\n    svg[data-lens-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-lens-active] [data-lens-match] { opacity: 1; }\n    svg[data-lens-active] [data-lens-peer] { opacity: 0.62; }\n    svg[data-lens-active] [data-lens-selected] {\n      filter: drop-shadow(0 0 10px var(--database-stroke));\n    }\n    .semantic-lens-overlay { pointer-events: none; }\n    .semantic-lens-flow {\n      fill: none;\n      stroke-width: 3.05;\n      stroke-linecap: round;\n      stroke-dasharray: 0.075 0.925;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.9;\n      animation: archify-semantic-lens-flow 1.35s linear 1 both;\n      animation-delay: var(--lens-flow-delay, 0s);\n    }\n    .semantic-lens-flow[data-direction=\"out\"],\n    .semantic-lens-flow[data-direction=\"forward\"] {\n      stroke: var(--frontend-stroke);\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    .semantic-lens-flow[data-direction=\"in\"],\n    .semantic-lens-flow[data-direction=\"reverse\"] {\n      stroke: var(--database-stroke);\n      filter: drop-shadow(0 0 3px var(--database-stroke));\n    }\n    .semantic-lens-flow[data-direction=\"within\"] {\n      stroke: var(--messagebus-stroke);\n      filter: drop-shadow(0 0 3px var(--messagebus-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow {\n      stroke-width: 3.7;\n      opacity: 1;\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"out\"],\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"forward\"] {\n      filter: drop-shadow(0 0 6px var(--frontend-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"in\"],\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"reverse\"] {\n      filter: drop-shadow(0 0 6px var(--database-stroke));\n    }\n    svg[data-preset=\"signal-flow\"] .semantic-lens-flow[data-direction=\"within\"] {\n      filter: drop-shadow(0 0 6px var(--messagebus-stroke));\n    }\n    svg[data-preset=\"blueprint\"] .semantic-lens-flow {\n      stroke-width: 2.45;\n      stroke-linecap: square;\n      filter: none;\n      opacity: 0.78;\n    }\n    html[data-embed=\"true\"] .semantic-lens-overlay { display: none; }\n    svg[data-focus-active] [data-node-id],\n    svg[data-focus-active] [data-edge-from] { opacity: 0.13; }\n    svg[data-focus-active] [data-focus-match] { opacity: 1; }\n    svg[data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n\n    /* Authored Reachability is a bounded graph query over the relationships\n       already present in the artifact. Upstream walks incoming edges;\n       downstream walks outgoing edges. It never claims runtime causality and\n       changes only viewer emphasis, not canonical geometry or export bytes. */\n    svg[data-reach-active] [data-node-id],\n    svg[data-reach-active] [data-edge-from] { opacity: 0.09; }\n    svg[data-reach-active] [data-reach-match] { opacity: 1; }\n    svg[data-reach-active=\"upstream\"] [data-reach-origin] {\n      filter: drop-shadow(0 0 11px var(--database-stroke));\n    }\n    svg[data-reach-active=\"downstream\"] [data-reach-origin] {\n      filter: drop-shadow(0 0 11px var(--backend-stroke));\n    }\n    svg[data-reach-active=\"upstream\"] [data-edge-from][data-reach-match] {\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--database-stroke) 72%, transparent));\n    }\n    svg[data-reach-active=\"downstream\"] [data-edge-from][data-reach-match] {\n      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));\n    }\n    svg[data-preset=\"blueprint\"][data-reach-active] [data-reach-origin],\n    svg[data-preset=\"blueprint\"][data-reach-active] [data-edge-from][data-reach-match] {\n      filter: none;\n    }\n\n    /* Direct Relationship Explorer makes authored paths a real input surface\n       without changing their visible stroke or canonical SVG. A transparent\n       runtime rail supplies forgiving pointer geometry; the exact authored\n       path and endpoints continue to carry every visible state. */\n    .relationship-hit-overlay { pointer-events: none; }\n    .relationship-hit-target { outline: none; }\n    .relationship-hit-rail {\n      fill: none;\n      stroke: transparent;\n      stroke-width: 24;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n      pointer-events: stroke;\n      cursor: pointer;\n    }\n    .relationship-focus-rail {\n      fill: none;\n      stroke: color-mix(in srgb, var(--frontend-stroke) 34%, transparent);\n      stroke-width: 6;\n      stroke-dasharray: 2 4;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n      pointer-events: none;\n      opacity: 0;\n    }\n    .relationship-hit-target:focus-visible .relationship-focus-rail {\n      opacity: 1;\n    }\n    svg[data-preset=\"blueprint\"] .relationship-hit-target:focus-visible .relationship-focus-rail {\n      stroke-linecap: square;\n      filter: none;\n    }\n    svg[data-relationship-direct-active] [data-node-id],\n    svg[data-relationship-direct-active] [data-edge-from] { opacity: 0.16; }\n    svg[data-relationship-direct-active] [data-relationship-preview],\n    svg[data-relationship-direct-active] [data-relationship-preview-node] { opacity: 1; }\n    svg[data-focus-active]:not([data-relationship-pin-active]) .relationship-hit-rail,\n    svg[data-story-active] .relationship-hit-rail,\n    svg[data-route-picking] .relationship-hit-rail,\n    svg[data-route-active] .relationship-hit-rail,\n    svg[data-lens-active] .relationship-hit-rail,\n    svg[data-chapter-preview] .relationship-hit-rail { pointer-events: none; }\n    html[data-embed=\"true\"] .relationship-hit-overlay { display: none; }\n    @media (hover: none), (pointer: coarse) {\n      .relationship-hit-rail { stroke-width: 24; }\n    }\n\n    /* Relationship Preview is temporary exploration state layered on top of\n       neighborhood focus. It changes emphasis only; exported geometry and the\n       relationship's original solid/dashed visual language stay untouched. */\n    svg[data-relationship-preview-active] [data-focus-match] { opacity: 0.18; }\n    svg[data-relationship-preview-active] [data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview-node] { opacity: 1; }\n    svg[data-relationship-preview-active] [data-relationship-preview] {\n      filter: drop-shadow(0 0 5px var(--arrow-emphasis));\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview] path,\n    svg[data-relationship-preview-active] path[data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview] line,\n    svg[data-relationship-preview-active] line[data-relationship-preview],\n    svg[data-relationship-preview-active] [data-relationship-preview] polyline,\n    svg[data-relationship-preview-active] polyline[data-relationship-preview] {\n      stroke-width: 2.75;\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview-source] {\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n    }\n    svg[data-relationship-preview-active] [data-relationship-preview-target] {\n      filter: drop-shadow(0 0 7px var(--database-stroke));\n    }\n    .relationship-pulse-overlay { pointer-events: none; }\n    .relationship-flow-pulse {\n      fill: none;\n      stroke: var(--arrow-emphasis);\n      stroke-width: 3.35;\n      stroke-linecap: round;\n      stroke-dasharray: 0.085 0.915;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0;\n      filter: drop-shadow(0 0 4px var(--arrow-emphasis));\n      animation: archify-relationship-pulse 1.2s linear 1 both;\n    }\n    svg[data-preset=\"signal-flow\"] .relationship-flow-pulse {\n      stroke: var(--frontend-stroke);\n      stroke-width: 3.85;\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"] .relationship-flow-pulse {\n      stroke-width: 2.5;\n      stroke-linecap: square;\n      filter: none;\n    }\n    svg[data-preset=\"editorial\"] .relationship-flow-pulse {\n      stroke: var(--arrow-emphasis);\n      stroke-width: 2.75;\n      filter: none;\n    }\n    .semantic-flow-token {\n      color: var(--frontend-stroke);\n      opacity: 0;\n      pointer-events: none;\n    }\n    .relationship-flow-token {\n      animation: archify-relationship-token-life 1.2s linear 1 both;\n    }\n    .story-flow-token {\n      animation: archify-relationship-token-life 0.78s linear 1 both;\n    }\n    .semantic-flow-token-halo {\n      fill: var(--mask);\n      stroke: currentColor;\n      stroke-width: 1.1;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n    }\n    .relationship-flow-token-shape {\n      fill: var(--mask);\n      stroke: currentColor;\n      stroke-width: 1.35;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      vector-effect: non-scaling-stroke;\n    }\n    .relationship-flow-token-ink {\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.05;\n      stroke-linecap: round;\n      vector-effect: non-scaling-stroke;\n    }\n    .relationship-flow-token-dot { fill: currentColor; stroke: none; }\n    .semantic-flow-token[data-token-kind=\"data\"] { color: var(--database-stroke); }\n    .semantic-flow-token[data-token-kind=\"event\"] { color: var(--messagebus-stroke); }\n    .semantic-flow-token[data-token-kind=\"security\"] { color: var(--security-stroke); }\n    .semantic-flow-token[data-token-kind=\"state\"] { color: var(--cloud-stroke); }\n    svg[data-preset=\"signal-flow\"] .semantic-flow-token {\n      filter: drop-shadow(0 0 5px currentColor);\n    }\n    svg[data-preset=\"blueprint\"] .semantic-flow-token { filter: none; }\n    svg[data-preset=\"editorial\"] .semantic-flow-token { filter: none; }\n    html[data-embed=\"true\"] .relationship-pulse-overlay { display: none; }\n\n    /* Intent Trace is a temporary, pre-click exploration layer. Related\n       topology stays readable while a short viewer-only signal runs over\n       cloned edge geometry; the authored edge remains untouched underneath. */\n    svg[data-intent-trace-active] [data-node-id],\n    svg[data-intent-trace-active] [data-edge-from] { opacity: 0.2; }\n    svg[data-intent-trace-active] [data-intent-trace-match] { opacity: 1; }\n    svg[data-intent-trace-active] [data-intent-trace-selected] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n    .intent-trace-overlay { pointer-events: none; }\n    .intent-trace-flow {\n      fill: none;\n      stroke-width: 3.1;\n      stroke-linecap: round;\n      stroke-dasharray: 0.1 0.9;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.94;\n      animation: archify-intent-trace-flow 1.15s linear 1 both;\n    }\n    /* Direction names describe each edge relative to the focused node only.\n       The cloned geometry already runs from the authored source to target, so\n       incoming and outgoing signals must share the same playback direction. */\n    .intent-trace-flow[data-direction=\"out\"] {\n      stroke: var(--frontend-stroke);\n      filter: drop-shadow(0 0 4px var(--frontend-stroke));\n    }\n    .intent-trace-flow[data-direction=\"in\"] {\n      stroke: var(--database-stroke);\n      filter: drop-shadow(0 0 4px var(--database-stroke));\n      animation-direction: normal;\n    }\n    .intent-trace-flow[data-direction=\"loop\"] {\n      stroke: var(--security-stroke);\n      filter: drop-shadow(0 0 4px var(--security-stroke));\n    }\n    svg[data-preset=\"blueprint\"] [data-intent-trace-selected],\n    svg[data-preset=\"blueprint\"] .intent-trace-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"editorial\"] [data-intent-trace-selected],\n    svg[data-preset=\"editorial\"] .intent-trace-flow { filter: none; }\n    .intent-trace-status {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      clip-path: inset(50%);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* Route Probe separates a durable two-point query from selection and\n       one-hop hover. Only the chosen shortest directed path stays prominent;\n       the traveling signal is cloned viewer geometry and never authored SVG. */\n    svg[data-route-picking=\"target\"] [data-node-id] { opacity: 0.24; }\n    svg[data-route-picking=\"target\"] [data-route-candidate],\n    svg[data-route-picking=\"target\"] [data-route-start] { opacity: 1; }\n    svg[data-route-picking] [data-node-id] { cursor: crosshair; }\n    svg[data-route-picking] [data-route-start] {\n      filter: drop-shadow(0 0 10px var(--frontend-stroke));\n    }\n    svg[data-route-active] [data-node-id],\n    svg[data-route-active] [data-edge-from] { opacity: 0.11; }\n    svg[data-route-active] [data-route-match] { opacity: 1; }\n    svg[data-route-active] [data-route-start] {\n      filter: drop-shadow(0 0 11px var(--frontend-stroke));\n    }\n    svg[data-route-active] [data-route-end] {\n      filter: drop-shadow(0 0 11px var(--security-stroke));\n    }\n    svg[data-route-active] [data-route-step]:not([data-route-start]):not([data-route-end]) {\n      filter: drop-shadow(0 0 7px var(--backend-stroke));\n    }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"past\"] { opacity: 0.62; }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"future\"] { opacity: 0.34; }\n    svg[data-route-journey] [data-route-match][data-route-journey-state=\"current\"] { opacity: 1; }\n    svg[data-route-journey] [data-node-id][data-route-journey-current] {\n      filter: drop-shadow(0 0 10px var(--backend-stroke));\n    }\n    svg[data-route-journey] [data-edge-from][data-route-journey-current] {\n      opacity: 1;\n      filter: drop-shadow(0 0 6px var(--backend-stroke));\n    }\n    .route-probe-overlay { pointer-events: none; }\n    .route-journey-overlay { pointer-events: none; }\n    .route-probe-flow {\n      fill: none;\n      stroke: var(--backend-stroke);\n      stroke-width: 3.25;\n      stroke-linecap: round;\n      stroke-dasharray: 0.085 0.915;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.96;\n      filter: drop-shadow(0 0 5px var(--backend-stroke));\n      animation: archify-route-probe-flow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1 both;\n      animation-delay: calc(var(--route-step, 0) * 0.16s);\n    }\n    .route-journey-flow {\n      fill: none;\n      stroke: var(--backend-stroke);\n      stroke-width: 3.5;\n      stroke-linecap: round;\n      stroke-dasharray: 0.1 0.9;\n      stroke-dashoffset: 0;\n      vector-effect: non-scaling-stroke;\n      opacity: 0;\n      filter: drop-shadow(0 0 6px var(--backend-stroke));\n      animation: archify-route-journey-flow 780ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;\n    }\n    svg[data-preset=\"blueprint\"] [data-route-start],\n    svg[data-preset=\"blueprint\"] [data-route-end],\n    svg[data-preset=\"blueprint\"] [data-route-step],\n    svg[data-preset=\"blueprint\"] .route-probe-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"blueprint\"] .route-journey-flow {\n      filter: none;\n      stroke-linecap: square;\n    }\n    svg[data-preset=\"editorial\"] [data-route-start],\n    svg[data-preset=\"editorial\"] [data-route-end],\n    svg[data-preset=\"editorial\"] [data-route-step],\n    svg[data-preset=\"editorial\"] .route-probe-flow,\n    svg[data-preset=\"editorial\"] .route-journey-flow { filter: none; }\n\n    svg[data-preset=\"editorial\"] .c-grid {\n      stroke-dasharray: 1 4;\n      opacity: 0.48;\n    }\n    svg[data-preset=\"editorial\"] .c-region {\n      fill: color-mix(in srgb, var(--cloud-fill) 48%, transparent);\n      stroke-dasharray: 9 4;\n    }\n    svg[data-preset=\"editorial\"] [data-node-id]:hover,\n    svg[data-preset=\"editorial\"] [data-node-id]:focus-visible,\n    svg[data-preset=\"editorial\"][data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent));\n    }\n\n    svg[data-preset=\"blueprint\"] .c-grid {\n      stroke-dasharray: 1 3;\n      opacity: 0.78;\n    }\n    svg[data-preset=\"blueprint\"] .c-region {\n      fill: color-mix(in srgb, var(--cloud-fill) 58%, transparent);\n      stroke-dasharray: 12 4 2 4;\n    }\n    svg[data-preset=\"blueprint\"] .c-security-group,\n    svg[data-preset=\"blueprint\"] .c-lane { stroke-dasharray: 7 3; }\n    svg[data-preset=\"blueprint\"] [data-node-id]:hover,\n    svg[data-preset=\"blueprint\"] [data-node-id]:focus-visible {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"][data-focus-active] [data-focus-selected] {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n    svg[data-preset=\"blueprint\"][data-focus-active][data-reach-active] [data-focus-selected][data-reach-origin] {\n      filter: none;\n    }\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview],\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview-source],\n    svg[data-preset=\"blueprint\"][data-relationship-preview-active] [data-relationship-preview-target] {\n      filter: drop-shadow(0 0 3px var(--frontend-stroke));\n    }\n\n    /* Story Trail is a viewer-only overlay derived from the ordered focus IDs\n       of the active guided view. The authored edge stays underneath with its\n       original color, dash pattern, marker, and geometry intact. */\n    .story-trail-overlay { pointer-events: none; }\n    .story-carrier-overlay { pointer-events: none; }\n    .story-trail-flow {\n      fill: none;\n      stroke: var(--frontend-stroke);\n      stroke-width: 2.8;\n      stroke-linecap: round;\n      vector-effect: non-scaling-stroke;\n      opacity: 0.34;\n      filter: drop-shadow(0 0 2px var(--frontend-stroke));\n    }\n    svg[data-story-beat] [data-story-step] {\n      opacity: 0.22;\n      filter: saturate(0.42);\n      transition: opacity 180ms ease, filter 180ms ease;\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"past\"] {\n      opacity: 0.72;\n      filter: saturate(0.82);\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"next\"] {\n      opacity: 0.5;\n      filter: saturate(0.66);\n    }\n    svg[data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      opacity: 1;\n      filter: drop-shadow(0 0 7px var(--frontend-stroke));\n      animation: archify-story-beat-node 360ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step] {\n      opacity: 0.16;\n      transition: opacity 160ms ease;\n    }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"past\"] { opacity: 0.58; }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"next\"] { opacity: 0.34; }\n    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state=\"active\"] { opacity: 1; }\n    svg[data-story-beat] .story-trail-flow { opacity: 0; transition: opacity 160ms ease; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"past\"] { opacity: 0.34; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"next\"] { opacity: 0.2; }\n    svg[data-story-beat] .story-trail-flow[data-story-beat-state=\"active\"] { opacity: 0.92; }\n    svg[data-story-beat] .story-trail-flow[data-story-pulse=\"true\"] {\n      stroke-dasharray: 2 13;\n      stroke-dashoffset: 30;\n      opacity: 0.92;\n      animation: archify-story-flow 0.78s linear 1 both;\n    }\n    svg[data-preset=\"blueprint\"] .story-trail-flow {\n      stroke-linecap: square;\n      filter: none;\n      opacity: 0.5;\n    }\n    svg[data-preset=\"blueprint\"][data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      filter: none;\n      animation: none;\n    }\n    svg[data-preset=\"editorial\"] .story-trail-flow { filter: none; }\n    svg[data-preset=\"editorial\"][data-story-beat] [data-story-step][data-story-beat-state=\"active\"] {\n      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 16%, transparent));\n    }\n\n    /* Chapter Delta Preview is a static, pre-commit comparison between two\n       chapter focus sets. Symbols in the rail carry the meaning without color;\n       these SVG rules only make exact stable-ID membership easier to scan. */\n    svg[data-chapter-preview] [data-node-id],\n    svg[data-chapter-preview] [data-edge-from] {\n      opacity: 0.1 !important;\n      filter: none !important;\n      transition: none !important;\n    }\n    svg[data-chapter-preview] .story-trail-overlay { opacity: 0.08 !important; }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"stay\"] {\n      opacity: 0.76 !important;\n      filter: saturate(0.7) !important;\n    }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"enter\"] {\n      opacity: 1 !important;\n      filter: saturate(1.2) !important;\n    }\n    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role=\"leave\"] {\n      opacity: 0.28 !important;\n      filter: grayscale(0.72) !important;\n    }\n    svg[data-preset=\"blueprint\"][data-chapter-preview] [data-node-id] { filter: none !important; }\n\n    /* Dashed boundary variants */\n    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }\n    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }\n    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }\n\n    /* Optional trace animation, enabled only by meta.animation = \"trace\".\n       The ordinary viewer performs one ambient pass and then restores the\n       authored solid/security/async line language. WebM samples the same\n       authored geometry into an explicit canvas timeline. */\n    html[data-ambient-motion=\"running\"] svg[data-animation=\"trace\"] [data-animate=\"edge\"] {\n      animation: archify-edge-flow 2.4s linear 1;\n      animation-delay: calc(var(--step, 0) * 160ms);\n    }\n    html[data-ambient-motion=\"running\"] svg[data-animation=\"trace\"] [data-animate=\"node\"] {\n      transform-box: fill-box;\n      transform-origin: center;\n      animation: archify-node-pulse 3.6s ease-in-out 1;\n      animation-delay: calc(var(--step, 0) * 160ms);\n    }\n    svg[data-preset=\"signal-flow\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      stroke-linecap: round;\n      filter: drop-shadow(0 0 3px var(--arrow-emphasis));\n      animation-duration: 1.75s;\n    }\n    svg[data-preset=\"signal-flow\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-duration: 3.1s;\n    }\n    svg[data-preset=\"blueprint\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      stroke-linecap: square;\n      filter: none;\n      animation-duration: 2.15s;\n    }\n    svg[data-preset=\"blueprint\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-name: archify-blueprint-node-pulse;\n      animation-duration: 3.8s;\n    }\n    svg[data-preset=\"editorial\"][data-animation=\"trace\"] [data-animate=\"edge\"] {\n      filter: none;\n      animation-duration: 2.2s;\n    }\n    svg[data-preset=\"editorial\"][data-animation=\"trace\"] [data-animate=\"node\"] {\n      animation-name: archify-editorial-node-pulse;\n      animation-duration: 3.5s;\n    }\n    /* Embedded proofs are static until a named Story Trail chapter is played.\n       This keeps proof grids calm and ensures ?play=1 stops all viewer motion\n       after one 3.2 second chapter instead of leaving ambient trace loops on. */\n    html[data-embed=\"true\"] svg[data-animation=\"trace\"] [data-animate],\n    html[data-share-playback=\"true\"] svg[data-animation=\"trace\"] [data-animate] {\n      animation: none !important;\n      stroke-dashoffset: 0;\n    }\n    @keyframes archify-edge-flow {\n      0% { stroke-dasharray: 10 8; stroke-dashoffset: 54; opacity: 0.42; }\n      88% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }\n      99.9% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }\n      100% { stroke-dashoffset: 0; opacity: 1; }\n    }\n    @keyframes archify-node-pulse {\n      0%, 72%, 100% { filter: none; stroke-width: 1.5; }\n      18%, 36% {\n        filter: drop-shadow(0 0 8px var(--arrow-emphasis));\n        stroke-width: 2.4;\n      }\n    }\n    @keyframes archify-blueprint-node-pulse {\n      0%, 72%, 100% { opacity: 1; filter: none; }\n      18%, 36% { opacity: 0.72; filter: drop-shadow(0 0 2px var(--frontend-stroke)); }\n    }\n    @keyframes archify-editorial-node-pulse {\n      0%, 72%, 100% { opacity: 1; filter: none; }\n      18%, 36% { opacity: 0.78; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent)); }\n    }\n    @keyframes archify-signal-scan {\n      0%, 18% { opacity: 1; transform: translateX(-70%); }\n      70% { opacity: 1; transform: translateX(70%); }\n      100% { opacity: 0; transform: translateX(70%); }\n    }\n    @keyframes archify-radar-live {\n      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent); }\n      55%, 100% { box-shadow: 0 0 0 0.32rem transparent; }\n    }\n    @keyframes archify-guided-progress {\n      from { transform: scaleX(var(--guided-progress-start, 0)); }\n      to { transform: scaleX(1); }\n    }\n    @keyframes archify-story-flow {\n      to { stroke-dashoffset: 0; }\n    }\n    @keyframes archify-intent-trace-flow {\n      0% { opacity: 0.28; stroke-dashoffset: 0; }\n      12%, 78% { opacity: 0.94; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-route-probe-flow {\n      0% { stroke-dashoffset: 0; opacity: 0.96; }\n      78% { stroke-dashoffset: -1; opacity: 0.96; }\n      100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.58; }\n    }\n    @keyframes archify-route-journey-flow {\n      0% { opacity: 0.16; stroke-dashoffset: 0; }\n      14%, 76% { opacity: 1; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-semantic-lens-flow {\n      0% { opacity: 0.2; stroke-dashoffset: 0; }\n      12%, 78% { opacity: 0.9; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-relationship-pulse {\n      0% { opacity: 0.18; stroke-dashoffset: 0; }\n      10%, 76% { opacity: 0.98; }\n      100% { opacity: 0; stroke-dashoffset: -1; }\n    }\n    @keyframes archify-relationship-token-life {\n      0%, 7% { opacity: 0; }\n      13%, 82% { opacity: 1; }\n      100% { opacity: 0; }\n    }\n    @keyframes archify-story-beat-node {\n      from { opacity: 0.48; filter: saturate(0.6); }\n      58% { opacity: 1; filter: drop-shadow(0 0 10px var(--frontend-stroke)); }\n      to { opacity: 1; filter: drop-shadow(0 0 7px var(--frontend-stroke)); }\n    }\n    @keyframes archify-share-cue-enter {\n      from { opacity: 0; transform: translate(-50%, -0.45rem); }\n      to { opacity: 1; transform: translate(-50%, 0); }\n    }\n    @keyframes archify-share-cue-pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.48; transform: scale(0.78); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      html[data-preset=\"signal-flow\"] .diagram-container::before {\n        animation: none !important;\n      }\n      .pulse-dot { animation: none !important; }\n      svg[data-animation=\"trace\"] [data-animate] {\n        animation: none !important;\n        stroke-dashoffset: 0;\n      }\n      .guided-view-progress span {\n        animation: none !important;\n        transform: scaleX(1) !important;\n      }\n      .story-trail-flow,\n      .intent-trace-flow,\n      .route-probe-flow,\n      .semantic-lens,\n      .diagram-guide,\n      [data-story-step],\n      .overview-map-live,\n      .guided-view-stop,\n      .share-chapter-cue,\n      .chapter-handoff-anchor,\n      .share-chapter-state::before,\n      .share-chapter-progress span { animation: none !important; }\n      .guided-view-chapter,\n      svg[data-chapter-preview] [data-node-id],\n      svg[data-chapter-preview] [data-edge-from] { transition: none !important; }\n      svg[data-story-playing=\"true\"] .story-trail-flow {\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.55;\n      }\n      .intent-trace-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.72;\n      }\n      .route-probe-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-dashoffset: 0;\n        opacity: 0.78;\n      }\n      .route-journey-overlay,\n      .story-carrier-overlay { display: none !important; }\n      .semantic-lens-flow {\n        animation: none !important;\n        stroke-dasharray: none;\n        stroke-width: 2.2;\n        opacity: 0.34;\n        filter: none;\n      }\n      .relationship-pulse-overlay { display: none !important; }\n      .guided-view-chapter { transition: none !important; }\n      .source-evidence-beacon,\n      svg [data-node-id], svg [data-edge-from], svg [data-detail], svg [data-detail-anchor], svg [data-legend-hit], svg { transition: none !important; }\n    }\n  ";
   let activeIndex = -1;
   let playbackToken = 0;
   let playbackTimer = 0;
diff --git a/examples/checkout-platform-delta.receipt.json b/examples/checkout-platform-delta.receipt.json
index 1e37e6857..fa79e8ba6 100644
--- a/examples/checkout-platform-delta.receipt.json
+++ b/examples/checkout-platform-delta.receipt.json
@@ -219,8 +219,8 @@
     "Boundary identity is conservatively derived from kind + label."
   ],
   "artifact": {
-    "sha256": "b509920b635dc816d7b0f9848bec5bbbf0b77a049ccb50225afbd1dae7a62e39",
-    "bytes": 2023841
+    "sha256": "3dec55b62e5b03f8c148a06105a835a9856b6c30699259fbd34272a7d9d2f04d",
+    "bytes": 2025546
   },
   "validation": {
     "checksPassed": 28,
diff --git a/examples/dataflow-product-analytics.html b/examples/dataflow-product-analytics.html
index e56dd1bbb..bc2fadab9 100644
--- a/examples/dataflow-product-analytics.html
+++ b/examples/dataflow-product-analytics.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6215,9 +6214,9 @@ <h3>Derived Consumers</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/examples/lifecycle-agent-run.html b/examples/lifecycle-agent-run.html
index 141719b50..288de372c 100644
--- a/examples/lifecycle-agent-run.html
+++ b/examples/lifecycle-agent-run.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6164,9 +6163,9 @@ <h3>Terminal + Recovery</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/examples/sequence-cache-miss-request.html b/examples/sequence-cache-miss-request.html
index d3e2c1e39..761160f39 100644
--- a/examples/sequence-cache-miss-request.html
+++ b/examples/sequence-cache-miss-request.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6230,9 +6229,9 @@ <h3>Async Trace</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/examples/web-app-rendered.html b/examples/web-app-rendered.html
index d6d45a50c..086c307cb 100644
--- a/examples/web-app-rendered.html
+++ b/examples/web-app-rendered.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6179,9 +6178,9 @@ <h3>Security</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/examples/web-app.html b/examples/web-app.html
index d6d45a50c..086c307cb 100644
--- a/examples/web-app.html
+++ b/examples/web-app.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6179,9 +6178,9 @@ <h3>Security</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/examples/workflow-agent-tool-call-rendered.html b/examples/workflow-agent-tool-call-rendered.html
index 0fb6bb9aa..d5ac68267 100644
--- a/examples/workflow-agent-tool-call-rendered.html
+++ b/examples/workflow-agent-tool-call-rendered.html
@@ -31,15 +31,14 @@
       } catch (_) {}
     })();
   </script>
-  <!-- Async font load: a blackholed network must not block first paint.
-       The body font stack falls back to system monospace until it lands. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-        rel="stylesheet" media="print" onload="this.media='all'">
-  <noscript>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  </noscript>
   <style>
+    /* Offline-first typography: prefer a locally installed JetBrains Mono and
+       fall through to the system monospace stack. Delivered HTML must not
+       request third-party font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     /* ==========================================================
        THEME VARIABLES — switch by toggling [data-theme] on <html>
        ========================================================== */
@@ -6221,9 +6220,9 @@ <h3>Runtime Semantics</h3>
         // Prepend a local()-only @font-face block for each weight so that the
         // sandboxed image-rendering context used during PNG/JPEG/WebP export
         // can find JetBrains Mono if the user has it installed locally, and
-        // falls through cleanly to the monospace stack otherwise. The usual
-        // Google-Fonts <link> in the host document is unreachable from the
-        // serialized SVG, so url()-sourced faces would just hang.
+        // falls through cleanly to the monospace stack otherwise. Remote font
+        // hosts are unreachable from the serialized SVG, so url()-sourced
+        // faces would just hang.
         var fontFallback = [400, 500, 600, 700].map(function (w) {
           return "@font-face { font-family: 'JetBrains Mono'; font-weight: " + w +
                  "; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }";
diff --git a/scripts/gallery-template.html b/scripts/gallery-template.html
index 95418ab9b..4e2727dc4 100644
--- a/scripts/gallery-template.html
+++ b/scripts/gallery-template.html
@@ -8,11 +8,15 @@
   <meta name="description" content="A generated gallery of validated, self-contained Archify diagrams. Every preview links to its exact JSON source and interactive HTML artifact.">
   <meta name="theme-color" content="#eff2f1">
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><polygon points='14,2 26,8 26,20 14,26 2,20 2,8' fill='%23083344' stroke='%2322d3ee' stroke-width='1.5'/><circle cx='14' cy='15' r='2.5' fill='%2322d3ee'/></svg>">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="assets/site-navigation.css">
   <style>
+    /* Offline-first typography: prefer locally installed JetBrains Mono and
+       fall through to system stacks. Gallery pages must not request third-party
+       font hosts. */
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: local('JetBrains Mono'), local('JetBrainsMono-Regular'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: local('JetBrains Mono Medium'), local('JetBrainsMono-Medium'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 600; src: local('JetBrains Mono SemiBold'), local('JetBrainsMono-SemiBold'); }
+    @font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: local('JetBrains Mono Bold'), local('JetBrainsMono-Bold'); }
     :root {
       /* Drafted-sheet palette — shared with the project page */
       --paper-site:#eff2f1; --paper-raised:#f8faf9;
@@ -21,9 +25,9 @@
       --accent-site:#e14a0e; --accent-soft:rgba(225,74,14,0.08);
       --plate:#0f1216;
       --emerald:#047857;
-      --font-display:'Fraunces','Songti SC','STSong',Georgia,serif;
-      --font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
-      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
+      --font-display:'Songti SC','STSong',Georgia,'Times New Roman',serif;
+      --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
+      --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
       --ease-out:cubic-bezier(.22,1,.36,1);
       --content: 1320px;
     }
