diff --git a/archify.zip b/archify.zip
index 4249d32..89a085d 100644
Binary files a/archify.zip and b/archify.zip differ
diff --git a/archify/assets/template.html b/archify/assets/template.html
index 9942250..5a4a37d 100644
--- a/archify/assets/template.html
+++ b/archify/assets/template.html
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6536,7 +6543,7 @@ <h3>Card Title 3</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6641,6 +6648,698 @@ <h3>Card Title 3</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6658,6 +7357,30 @@ <h3>Card Title 3</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/bin/archify.mjs b/archify/bin/archify.mjs
index 1475b43..c7b189a 100755
--- a/archify/bin/archify.mjs
+++ b/archify/bin/archify.mjs
@@ -26,6 +26,7 @@ function usage() {
   archify examples
   archify doctor
   archify demo [output-directory]
+  archify export-drawio <type> <input.json> [output.drawio] [--strict] [--json]
 
 Types:
   architecture, workflow, sequence, dataflow, lifecycle
@@ -1156,6 +1157,41 @@ function commandCheck(args) {
   if (result.status !== 0) exitFrom(result);
 }
 
+function commandExportDrawio(args) {
+  const json = args.includes('--json');
+  const strict = args.includes('--strict');
+  const knownOptions = new Set(['--json', '--strict']);
+  const unknown = args.filter((arg) => arg.startsWith('--') && !knownOptions.has(arg));
+  if (unknown.length) fail(`Unknown export-drawio option "${unknown[0]}".`);
+  const positional = args.filter((arg) => !knownOptions.has(arg));
+  const [type, input, output] = positional;
+  if (!type || !input || positional.length > 3) fail(usage());
+  rendererPath(type); // validates type against TYPES, fails(2) on unknown.
+  const exporter = path.join(skillRoot, 'scripts/export-drawio.mjs');
+  const result = runNode(
+    [exporter, type, input, ...(output ? [output] : []), ...(strict ? ['--strict'] : [])],
+    { stdio: json ? 'pipe' : 'inherit' },
+  );
+  if (result.status !== 0) {
+    if (json) {
+      console.log(JSON.stringify({
+        schemaVersion: 1, ok: false, command: 'export-drawio',
+        type, input: path.resolve(input),
+        error: 'Drawio export failed.',
+      }, null, 2));
+    }
+    exitFrom(result);
+  }
+  if (json) {
+    console.log(JSON.stringify({
+      schemaVersion: 1, ok: true, command: 'export-drawio',
+      type, input: path.resolve(input),
+      ...(strict ? { strict: true } : {}),
+      ...(output ? { output: path.resolve(output) } : {}),
+    }, null, 2));
+  }
+}
+
 async function commandVisualCheck(args) {
   const json = args.includes('--json');
   const knownOptions = new Set(['--json']);
@@ -1578,6 +1614,9 @@ switch (command) {
   case 'demo':
     commandDemo(args);
     break;
+  case 'export-drawio':
+    commandExportDrawio(args);
+    break;
   default:
     fail(`Unknown command "${command}".\n\n${usage()}`);
 }
diff --git a/archify/examples/dataflow-product-analytics.html b/archify/examples/dataflow-product-analytics.html
index 9904584..1810bd2 100644
--- a/archify/examples/dataflow-product-analytics.html
+++ b/archify/examples/dataflow-product-analytics.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="dataflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6647,7 +6654,7 @@ <h3>Derived Consumers</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6752,6 +6759,698 @@ <h3>Derived Consumers</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6769,6 +7468,30 @@ <h3>Derived Consumers</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/examples/lifecycle-agent-run.html b/archify/examples/lifecycle-agent-run.html
index 0bb6297..e8371bb 100644
--- a/archify/examples/lifecycle-agent-run.html
+++ b/archify/examples/lifecycle-agent-run.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="lifecycle">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6596,7 +6603,7 @@ <h3>Terminal + Recovery</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6701,6 +6708,698 @@ <h3>Terminal + Recovery</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6718,6 +7417,30 @@ <h3>Terminal + Recovery</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/examples/sequence-cache-miss-request.html b/archify/examples/sequence-cache-miss-request.html
index 2582199..94f34d1 100644
--- a/archify/examples/sequence-cache-miss-request.html
+++ b/archify/examples/sequence-cache-miss-request.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="sequence">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -4925,18 +4932,18 @@ <h1>Cache Miss Request Sequence</h1>
         <path d="M 710 142 L 710 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
 
         <!-- Activations -->
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
 
         <!-- Messages -->
         <g data-edge-from="user" data-edge-to="web" data-edge-label="open page" data-edge-key="0" data-edge-id="open-page">
@@ -6662,7 +6669,7 @@ <h3>Async Trace</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6767,6 +6774,698 @@ <h3>Async Trace</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6784,6 +7483,30 @@ <h3>Async Trace</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/examples/web-app-rendered.html b/archify/examples/web-app-rendered.html
index b454244..d3d6579 100644
--- a/archify/examples/web-app-rendered.html
+++ b/archify/examples/web-app-rendered.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6602,7 +6609,7 @@ <h3>Security</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6707,6 +6714,698 @@ <h3>Security</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6724,6 +7423,30 @@ <h3>Security</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/examples/workflow-agent-tool-call-rendered.html b/archify/examples/workflow-agent-tool-call-rendered.html
index 4732bcd..a0c7379 100644
--- a/archify/examples/workflow-agent-tool-call-rendered.html
+++ b/archify/examples/workflow-agent-tool-call-rendered.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6644,7 +6651,7 @@ <h3>Why It Matters</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6749,6 +6756,698 @@ <h3>Why It Matters</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6766,6 +7465,30 @@ <h3>Why It Matters</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/archify/renderers/sequence/render-sequence.mjs b/archify/renderers/sequence/render-sequence.mjs
index 84c9d6c..c3a2025 100644
--- a/archify/renderers/sequence/render-sequence.mjs
+++ b/archify/renderers/sequence/render-sequence.mjs
@@ -346,8 +346,9 @@ function renderActivation(activation) {
   const fill = componentFill[activation.type] || componentFill[participant.type] || 'c-external';
   const x = participant.cx - 5;
   const height = activation.to - activation.from;
-  return `        <rect x="${x}" y="${activation.from}" width="10" height="${height}" rx="3" class="c-mask"/>
-        <rect x="${x}" y="${activation.from}" width="10" height="${height}" rx="3" class="${fill}" stroke-width="1"/>`;
+  const identity = ` data-graph-role="activation" data-activation-participant="${esc(activation.participant)}"`;
+  return `        <rect${identity} x="${x}" y="${activation.from}" width="10" height="${height}" rx="3" class="c-mask"/>
+        <rect${identity} x="${x}" y="${activation.from}" width="10" height="${height}" rx="3" class="${fill}" stroke-width="1"/>`;
 }
 
 function messageLabel(message, x1, x2) {
diff --git a/archify/renderers/shared/cli.mjs b/archify/renderers/shared/cli.mjs
index 2198a83..ef07aa6 100644
--- a/archify/renderers/shared/cli.mjs
+++ b/archify/renderers/shared/cli.mjs
@@ -52,6 +52,7 @@ export function writeDiagram({ outPath, template, diagramType, meta, svg, cards,
     visualPreset: meta.visual_preset || 'classic',
     guidedViews: meta.views || [],
     sourceEvidence,
+    diagramType,
   }));
   outputPathGuards.delete(outPath);
   console.log(outPath);
@@ -166,6 +167,10 @@ export function animateAttr(meta, kind, step) {
 // Stable semantic hooks for the standalone HTML explorer. IDs already pass
 // the schema's conservative identifier pattern; escape again at the markup
 // boundary so these helpers remain safe if that contract expands later.
+// Attribute-order contract: `id` must stay FIRST with data-node-* after —
+// the draw.io exporters regex-parse these groups and anchor on that order
+// (NODE_G_RE in renderers/shared/svg-to-drawio.mjs and the viewer's
+// drawioParseSvg in assets/template.html).
 export function focusNodeAttrs(id, label, metadata = {}) {
   const optional = [
     ['data-node-kind', metadata.kind],
diff --git a/archify/renderers/shared/svg-to-drawio.mjs b/archify/renderers/shared/svg-to-drawio.mjs
new file mode 100644
index 0000000..806ece6
--- /dev/null
+++ b/archify/renderers/shared/svg-to-drawio.mjs
@@ -0,0 +1,1203 @@
+/**
+ * Archify SVG → draw.io converter.
+ *
+ * Converts a rendered Archify SVG (embedded in the standalone HTML artifact)
+ * into draw.io mxGraphModel XML. The SVG is a fully self-describing source:
+ * every node carries `data-node-id/kind/label`, every edge carries
+ * `data-edge-from/to/id` plus `data-composition-points` (the complete routed
+ * polyline including computed anchors), and every boundary carries
+ * `data-graph-role="structural-frame"`.
+ *
+ * Design goals:
+ *  - Preserve the exact rendered geometry (coordinates come from the SVG,
+ *    never recomputed).
+ *  - Real topology: draw.io edges bind source/target to vertex cell ids so
+ *    dragging a box keeps its connections intact.
+ *  - Fixed waypoints: the authored/computed route is pinned via
+ *    `<Array as="points">` so the line shape is preserved.
+ *  - Zero runtime dependencies (pure Node ESM, no DOM/cheerio/jsdom).
+ */
+
+// ─── XML helpers ────────────────────────────────────────────────────────────
+
+const ATTR_ESCAPE = { '&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;', "'": '&#39;' };
+
+function escapeAttr(value) {
+  return String(value ?? '').replace(/[&"<>']/g, (ch) => ATTR_ESCAPE[ch]);
+}
+
+/**
+ * Extract the value of a `name="value"` attribute from an SVG element tag.
+ * Returns null when absent.
+ */
+function attr(tag, name) {
+  const re = new RegExp(`\\s${name}="([^"]*)"`);
+  const match = tag.match(re);
+  return match ? match[1] : null;
+}
+
+// ─── SVG parsing ────────────────────────────────────────────────────────────
+
+// Attribute-order contract: node groups are emitted by nodeGroup() in
+// renderers/shared/cli.mjs (and mirrored by the viewer's drawioParseSvg in
+// assets/template.html) with `id` FIRST and the data-node-* attributes after.
+// The regexes below anchor on that order — keep the three call sites aligned
+// when adding or reordering attributes.
+const NODE_G_RE = /<g\s+id="node-[^"]*"[^>]*data-node-id="[^"]*"[^>]*>/g;
+const RECT_RE = /<rect\b[^>]*>/g;
+const NUM = '([-\\d.]+)';
+
+function parseRect(tag) {
+  const x = parseFloat(attr(tag, 'x') || '0');
+  const y = parseFloat(attr(tag, 'y') || '0');
+  const width = parseFloat(attr(tag, 'width') || '0');
+  const height = parseFloat(attr(tag, 'height') || '0');
+  return { x, y, width, height };
+}
+
+/**
+ * Parse a `data-composition-points="x,y;x,y;..."` value into [[x,y],...].
+ */
+function parsePoints(value) {
+  if (!value) return [];
+  return value
+    .split(';')
+    .filter(Boolean)
+    .map((pair) => {
+      const [x, y] = pair.split(',').map(Number);
+      return [x, y];
+    });
+}
+
+/**
+ * Find the first <rect .../> child of a <g>...</g> block and return its box.
+ * The node's geometry lives in the first rect (the c-mask background rect,
+ * which shares x/y/width/height with the fill rect on top of it).
+ */
+function firstRectInGroup(gOpenTag, groupCloseIndex, svg) {
+  const searchStart = gOpenTag.index + gOpenTag[0].length;
+  const inner = svg.slice(searchStart, groupCloseIndex);
+  const rectMatch = inner.match(RECT_RE);
+  if (!rectMatch) return null;
+  return parseRect(rectMatch[0]);
+}
+
+/**
+ * Among the rects inside a node <g>, find the FILL rect: the c-* rect that is
+ * not the opaque c-mask backdrop. Sigil decoration rects are smaller, so the
+ * largest non-mask c- rect wins. Returns the full rect tag (for class/rx/
+ * stroke-width) or null.
+ */
+function fillRectInGroup(gOpenTag, groupCloseIndex, svg) {
+  const searchStart = gOpenTag.index + gOpenTag[0].length;
+  const inner = svg.slice(searchStart, groupCloseIndex);
+  let best = null;
+  let bestArea = -1;
+  for (const m of inner.matchAll(RECT_RE)) {
+    const cls = attr(m[0], 'class') || '';
+    if (!cls.startsWith('c-') || cls === 'c-mask') continue;
+    const box = parseRect(m[0]);
+    const area = box.width * box.height;
+    if (area > bestArea) {
+      bestArea = area;
+      best = m[0];
+    }
+  }
+  return best;
+}
+
+/**
+ * Measure the corner rounding radius from an SVG path's `d` attribute. The
+ * renderers round polyline corners with quadratic curves ("L a b Q cx cy d e");
+ * the radius is the distance from the incoming point to the control point.
+ * Returns 0 for sharp polylines.
+ */
+function cornerRadiusFromD(d) {
+  if (!d) return 0;
+  const m = d.match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+  if (!m) return 0;
+  const dx = parseFloat(m[3]) - parseFloat(m[1]);
+  const dy = parseFloat(m[4]) - parseFloat(m[2]);
+  return Math.round(Math.hypot(dx, dy));
+}
+
+/**
+ * Parse edge label groups: `<g data-detail="context" data-edge-from=...>`
+ * wrapping a mask rect plus a positioned <text>. The text x/y anchor gives the
+ * exact label position (y is the text baseline; the visual center sits ~4px
+ * above it at font-size 8).
+ */
+const EDGE_LABEL_RE = /<g\b[^>]*\bdata-detail="context"[^>]*\bdata-edge-from="([^"]*)"[^>]*\bdata-edge-to="([^"]*)"[^>]*>[\s\S]*?<text\b[^>]*\bx="(-?[\d.]+)"[^>]*\by="(-?[\d.]+)"[^>]*\bclass="([^"]*)"[^>]*>([^<]*)<\/text>/g;
+
+function parseEdgeLabels(svg) {
+  const labels = [];
+  for (const m of svg.matchAll(EDGE_LABEL_RE)) {
+    labels.push({
+      from: m[1],
+      to: m[2],
+      x: parseFloat(m[3]),
+      y: parseFloat(m[4]) - 4,
+      className: m[5],
+      label: m[6],
+    });
+  }
+  return labels;
+}
+
+/**
+ * Locate the matching </g> for a <g ...> opening tag (naive depth scan).
+ */
+function findGroupClose(svg, openIndex) {
+  let depth = 1;
+  let i = openIndex;
+  while (depth > 0 && i < svg.length) {
+    const nextOpen = svg.indexOf('<g', i + 1);
+    const nextClose = svg.indexOf('</g>', i + 1);
+    if (nextClose === -1) return -1;
+    if (nextOpen !== -1 && nextOpen < nextClose) {
+      depth += 1;
+      i = nextOpen;
+    } else {
+      depth -= 1;
+      i = nextClose;
+    }
+  }
+  return i;
+}
+
+/**
+ * Parse all nodes from the SVG: each `<g id="node-..." data-node-id=...>`
+ * carries identity + the first inner <rect> carries geometry.
+ */
+function parseNodes(svg) {
+  const nodes = [];
+  const matches = [...svg.matchAll(NODE_G_RE)];
+  for (const m of matches) {
+    const openTag = m[0];
+    const closeIndex = findGroupClose(svg, m.index);
+    const gOpen = { index: m.index, [0]: openTag };
+    const box = firstRectInGroup(gOpen, closeIndex, svg);
+    if (!box) continue;
+    const fillTag = fillRectInGroup(gOpen, closeIndex, svg) || '';
+    nodes.push({
+      id: attr(openTag, 'data-node-id'),
+      kind: attr(openTag, 'data-node-kind') || 'backend',
+      label: attr(openTag, 'data-node-label') || '',
+      sublabel: attr(openTag, 'data-node-sublabel'),
+      tag: attr(openTag, 'data-node-tag'),
+      x: box.x,
+      y: box.y,
+      width: box.width,
+      height: box.height,
+      // Strict-mode visual fields (all optional; fall back gracefully).
+      fillClass: fillTag ? attr(fillTag, 'class') : null,
+      rx: fillTag ? parseFloat(attr(fillTag, 'rx') || '0') : 0,
+      strokeWidth: fillTag ? parseFloat(attr(fillTag, 'stroke-width') || '1.5') : 1.5,
+    });
+  }
+  return nodes;
+}
+
+/**
+ * Parse all edges from the SVG. Each rendered connection is a `<path>` that
+ * carries `data-composition-points` (the complete routed polyline). Two
+ * attribute-prefix conventions exist across renderers:
+ *  (a) architecture/workflow/dataflow/lifecycle —
+ *      `<path data-edge-from=.. data-edge-to=.. data-edge-id=..
+ *             data-composition-points=..>`
+ *  (b) sequence — the outer `<g data-edge-..>` holds the label, while the
+ *      inner `<path data-composition-edge-from=.. data-composition-edge-to=..
+ *             data-composition-edge-id=.. data-composition-points=..>`
+ *      holds the geometry.
+ *
+ * We anchor exclusively on paths that carry `data-composition-points`: this
+ * naturally skips the label-wrapper `<g>` duplicates (which have no points)
+ * and yields exactly one entry per connection.
+ */
+const EDGE_POINTS_RE = /<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g;
+
+/**
+ * Message labels for sequence diagrams live on the FOCUS GROUP wrapping the
+ * path (`<g data-edge-from=.. data-edge-label=..>`), not on the path itself.
+ * Index those labels so parseEdges can fall back to them.
+ */
+function outerEdgeLabels(svg) {
+  const byId = new Map();
+  const byPair = new Map();
+  const re = /<g\b[^>]*\bdata-edge-label="([^"]*)"[^>]*>/g;
+  for (const m of svg.matchAll(re)) {
+    const from = attr(m[0], 'data-edge-from');
+    const to = attr(m[0], 'data-edge-to');
+    const id = attr(m[0], 'data-edge-id');
+    if (id) byId.set(id, m[1]);
+    if (from && to) byPair.set(`${from}\u0000${to}`, m[1]);
+  }
+  return { byId, byPair };
+}
+
+function parseEdges(svg) {
+  const edges = [];
+  const outer = outerEdgeLabels(svg);
+  const matches = [...svg.matchAll(EDGE_POINTS_RE)];
+  for (const m of matches) {
+    const tag = m[0];
+    const points = parsePoints(m[1]);
+    if (points.length < 2) continue;
+    // Accept either prefix; sequence uses data-composition-edge-*.
+    const from = attr(tag, 'data-edge-from') || attr(tag, 'data-composition-edge-from');
+    const to = attr(tag, 'data-edge-to') || attr(tag, 'data-composition-edge-to');
+    if (!from || !to) continue;
+    const id = attr(tag, 'data-edge-id') || attr(tag, 'data-composition-edge-id');
+    const label = attr(tag, 'data-edge-label') || attr(tag, 'data-composition-edge-label')
+      || (id ? outer.byId.get(id) : undefined) || outer.byPair.get(`${from}\u0000${to}`);
+    edges.push({
+      from, to, label: label ?? null, id, points,
+      // Strict-mode visual fields.
+      strokeClass: attr(tag, 'class'),
+      strokeWidth: parseFloat(attr(tag, 'stroke-width') || '1.5'),
+      radius: cornerRadiusFromD(attr(tag, 'd')),
+      // Sequence return messages carry their dash as an inline attribute.
+      inlineDash: attr(tag, 'stroke-dasharray'),
+    });
+  }
+  return edges;
+}
+
+/**
+ * Parse structural frames (boundaries, lanes, stages, segments) that act as
+ * containers. Only the geometry + label come from the SVG; the membership
+ * (which nodes belong inside) is resolved from the JSON IR by the caller.
+ */
+function parseBoundaries(svg) {
+  const boundaries = [];
+  const re = /<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g;
+  const matches = [...svg.matchAll(re)];
+  for (const m of matches) {
+    const tag = m[0];
+    const kind = attr(tag, 'data-composition-frame-kind') || 'boundary';
+    const frameId = attr(tag, 'data-composition-frame-id');
+    const box = parseRect(tag);
+    if (box.width <= 0 || box.height <= 0) continue;
+    // The boundary label lives in the <text> immediately following the rect.
+    let label = '';
+    let labelClass = null;
+    const afterRect = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+    const textMatch = afterRect.match(/<text\b([^>]*)>([^<]*)<\/text>/);
+    if (textMatch) {
+      label = textMatch[2].trim();
+      labelClass = attr(`<text ${textMatch[1]}>`, 'class');
+    }
+    boundaries.push({
+      kind, frameId, label, ...box,
+      // Strict-mode visual fields.
+      fillClass: attr(tag, 'class'),
+      rx: parseFloat(attr(tag, 'rx') || '0'),
+      strokeWidth: parseFloat(attr(tag, 'stroke-width') || '1'),
+      labelClass,
+    });
+  }
+  return boundaries;
+}
+
+/**
+ * Parse sequence lifelines: vertical dashed `<path d="M cx top L cx bottom">`.
+ * These are rendered as standalone vertical lines (not connected edges).
+ */
+function parseLifelines(svg) {
+  const lifelines = [];
+  // The stroke-dasharray guard keeps solid vertical edges (e.g. lifecycle
+  // drop transitions) from being mistaken for sequence lifelines.
+  const re = /<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray[^>]*>/g;
+  const matches = [...svg.matchAll(re)];
+  for (const m of matches) {
+    lifelines.push({
+      x: parseFloat(m[1]),
+      y1: parseFloat(m[2]),
+      y2: parseFloat(m[3]),
+      strokeClass: attr(m[0], 'class'),
+      strokeWidth: parseFloat(attr(m[0], 'stroke-width') || '0.8'),
+    });
+  }
+  return lifelines;
+}
+
+/**
+ * Parse sequence activation bars: kind-colored rects carrying
+ * `data-graph-role="activation"` + `data-activation-participant`. The twin
+ * `c-mask` backdrop (same identity, no color info) is skipped.
+ */
+const ACTIVATION_RE = /<rect\b[^>]*\bdata-graph-role="activation"[^>]*>/g;
+
+function parseActivations(svg) {
+  const activations = [];
+  for (const m of svg.matchAll(ACTIVATION_RE)) {
+    const tag = m[0];
+    const cls = attr(tag, 'class') || '';
+    if (!cls || cls === 'c-mask') continue;
+    const box = parseRect(tag);
+    if (box.width <= 0 || box.height <= 0) continue;
+    activations.push({
+      participant: attr(tag, 'data-activation-participant'),
+      fillClass: cls,
+      rx: parseFloat(attr(tag, 'rx') || '0'),
+      strokeWidth: parseFloat(attr(tag, 'stroke-width') || '1'),
+      ...box,
+    });
+  }
+  return activations;
+}
+
+/**
+ * Sequence segment bands (Request/Fallback/…) render their labels as separate
+ * `g[data-graph-role="segment-label"]` groups (they dodge message labels), so
+ * match them back onto the boundary by segment id.
+ */
+const SEGMENT_LABEL_RE = /<g\b[^>]*\bdata-graph-role="segment-label"[^>]*\bdata-segment-id="([^"]*)"[^>]*>[\s\S]*?<text\b[^>]*>([^<]*)<\/text>/g;
+
+function applySegmentLabels(boundaries, svg) {
+  for (const m of svg.matchAll(SEGMENT_LABEL_RE)) {
+    const boundary = boundaries.find((b) => b.frameId === m[1]);
+    if (boundary) boundary.label = m[2].trim();
+  }
+}
+
+/**
+ * Extract the full self-describing intermediate representation from an
+ * Archify SVG string.
+ */
+export function parseArchifySvg(svg, _diagramType) {
+  const viewBoxMatch = svg.match(/<svg[^>]*\bviewBox="0 0 (\d+\.?\d*) (\d+\.?\d*)"/);
+  const viewBox = viewBoxMatch
+    ? [parseFloat(viewBoxMatch[1]), parseFloat(viewBoxMatch[2])]
+    : [1000, 700];
+  const boundaries = parseBoundaries(svg);
+  applySegmentLabels(boundaries, svg);
+  return {
+    viewBox,
+    nodes: parseNodes(svg),
+    edges: parseEdges(svg),
+    boundaries,
+    lifelines: parseLifelines(svg),
+    activations: parseActivations(svg),
+    edgeLabels: parseEdgeLabels(svg),
+  };
+}
+
+// ─── draw.io style mapping ──────────────────────────────────────────────────
+
+/**
+ * Map an Archify component kind to a draw.io base style string.
+ * Uses draw.io's built-in shapes so each type reads with correct semantics.
+ */
+const KIND_STYLE = {
+  frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+  backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+  database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+  cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+  security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+  messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+  external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;',
+};
+
+/**
+ * Map lifecycle state types (start/active/decision/...) to draw.io styles.
+ */
+const STATE_STYLE = {
+  start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+  active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+  waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+  decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+  success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+  failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+  neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+  external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;',
+};
+
+/**
+ * Map boundary/frame kinds to container styles.
+ */
+const FRAME_STYLE = {
+  region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+  'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+  lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+  'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+  stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+  group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+  segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+};
+
+const VARIANT_EDGE_STYLE = {
+  default: 'edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;',
+  emphasis: 'edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#0891b2;strokeWidth=2;',
+  security: 'edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#d79b00;strokeWidth=2;',
+  dashed: 'edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;dashed=1;',
+  return: 'edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#82b366;dashed=1;',
+};
+
+/**
+ * Pick a node style. Lifecycle states use their own type enum; everything
+ * else uses the componentType map.
+ */
+function nodeStyle(node, diagramType) {
+  if (diagramType === 'lifecycle' && STATE_STYLE[node.kind]) {
+    return STATE_STYLE[node.kind];
+  }
+  return KIND_STYLE[node.kind] || KIND_STYLE.backend;
+}
+
+// ─── draw.io XML generation ─────────────────────────────────────────────────
+
+const LIFELINE_STYLE = 'endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;';
+
+/**
+ * Resolve which boundary each node belongs to. Membership is taken from the
+ * JSON IR (the `wraps` field on architecture boundaries) when available;
+ * otherwise we fall back to geometric containment (node center inside frame).
+ *
+ * Returns a Map<nodeId, {drawioId, offsetX, offsetY}> where offsetX/Y is the
+ * parent container's top-left corner — needed because draw.io child cell
+ * coordinates are RELATIVE to their parent, not absolute.
+ */
+function resolveContainerParents(parsed, diagram) {
+  const parents = new Map();
+  const boundaries = parsed.boundaries;
+  if (!boundaries.length) return parents;
+
+  // Prefer explicit wraps from the JSON IR (architecture). The architecture
+  // renderer stamps each JSON boundary with its array index as
+  // data-composition-frame-id, so resolve membership by that id rather than
+  // by position: a boundary the SVG parser skipped (zero-size frames) then
+  // only loses its own wraps instead of shifting every later boundary onto
+  // the wrong frame — and onto a parent cell id that does not exist.
+  // Synthetic inputs without frame-ids keep the positional pairing.
+  const explicit = Array.isArray(diagram?.boundaries);
+  if (explicit) {
+    const stamped = boundaries.some((b) => b.frameId != null);
+    const parsedIndexOf = new Map(boundaries.map((b, i) => [b.frameId, i]));
+    for (let i = 0; i < diagram.boundaries.length; i += 1) {
+      const b = diagram.boundaries[i];
+      const parsedIndex = stamped ? parsedIndexOf.get(String(i)) : i;
+      if (parsedIndex === undefined) continue;
+      const frame = boundaries[parsedIndex];
+      const drawioId = `boundary-${parsedIndex}`;
+      for (const wrappedId of b.wraps || []) {
+        // Innermost wins: a node wrapped by multiple boundaries (e.g.
+        // region + security-group) parents to the last/most-specific one.
+        parents.set(wrappedId, { drawioId, offsetX: frame.x, offsetY: frame.y });
+      }
+    }
+    return parents;
+  }
+
+  // Geometric fallback: assign each node to the smallest boundary whose rect
+  // contains the node's center.
+  const candidates = boundaries
+    .map((b, i) => ({ ...b, drawioId: `boundary-${i}` }))
+    .sort((a, b) => a.width * a.height - b.width * b.height);
+  for (const node of parsed.nodes) {
+    const cx = node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    for (const b of candidates) {
+      if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+        parents.set(node.id, { drawioId: b.drawioId, offsetX: b.x, offsetY: b.y });
+        break;
+      }
+    }
+  }
+  return parents;
+}
+
+/**
+ * Build the mxGraphModel XML from the parsed SVG representation.
+ * `diagram` is the original JSON IR (used only for boundary `wraps`).
+ */
+export function buildDrawioXml(parsed, diagramType, diagram = null) {
+  const [vw, vh] = parsed.viewBox;
+  const nodeParents = resolveContainerParents(parsed, diagram);
+  const nodeIdOf = (id) => `node-${id}`;
+
+  const lines = [];
+  lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+  lines.push(
+    `<mxGraphModel dx="${Math.round(vw)}" dy="${Math.round(vh)}" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="${Math.round(vw)}" pageHeight="${Math.round(vh)}" math="0" shadow="0">`,
+  );
+  lines.push('  <root>');
+  lines.push('    <mxCell id="0"/>');
+  lines.push('    <mxCell id="1" parent="0"/>');
+
+  // Boundaries first (they become parent containers).
+  for (let i = 0; i < parsed.boundaries.length; i += 1) {
+    const b = parsed.boundaries[i];
+    const id = `boundary-${i}`;
+    const style = FRAME_STYLE[b.kind] || FRAME_STYLE.region;
+    lines.push(
+      `    <mxCell id="${id}" value="${escapeAttr(b.label || b.kind)}" style="${style}" vertex="1" parent="1">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(b.x)}" y="${Math.round(b.y)}" width="${Math.round(b.width)}" height="${Math.round(b.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Nodes.
+  for (const node of parsed.nodes) {
+    const id = nodeIdOf(node.id);
+    const style = nodeStyle(node, diagramType);
+    const parentInfo = nodeParents.get(node.id);
+    const parentId = parentInfo ? parentInfo.drawioId : '1';
+    // draw.io child cells use coordinates RELATIVE to their parent container.
+    // Subtract the parent's origin so the node lands at its authored position.
+    const relX = node.x - (parentInfo ? parentInfo.offsetX : 0);
+    const relY = node.y - (parentInfo ? parentInfo.offsetY : 0);
+    const labelParts = [node.label, node.sublabel, node.tag].filter(Boolean);
+    // Build the draw.io label as an HTML fragment. The raw text is inserted
+    // without pre-escaping (Archify labels are already user-facing copy, not
+    // markup); the whole fragment is then XML-attribute-escaped once so that
+    // the HTML tags survive as entities and draw.io decodes+renders them.
+    const htmlValue = labelParts.length > 1
+      ? `<b>${labelParts[0]}</b><br/><font style="font-size:9px">${labelParts.slice(1).join(' · ')}</font>`
+      : node.label;
+    const value = escapeAttr(htmlValue);
+    lines.push(
+      `    <mxCell id="${id}" value="${value}" style="${style}" vertex="1" parent="${parentId}">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(relX)}" y="${Math.round(relY)}" width="${Math.round(node.width)}" height="${Math.round(node.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Sequence lifelines (standalone vertical dashed edges, no source/target).
+  for (const ll of parsed.lifelines) {
+    const id = `lifeline-${Math.round(ll.x)}-${Math.round(ll.y1)}`;
+    lines.push(
+      `    <mxCell id="${id}" value="" style="${LIFELINE_STYLE}" edge="1" parent="1">`,
+    );
+    lines.push('      <mxGeometry relative="1" as="geometry">');
+    lines.push(
+      `        <mxPoint x="${Math.round(ll.x)}" y="${Math.round(ll.y1)}" as="sourcePoint"/>`,
+    );
+    lines.push(
+      `        <mxPoint x="${Math.round(ll.x)}" y="${Math.round(ll.y2)}" as="targetPoint"/>`,
+    );
+    lines.push('      </mxGeometry>');
+    lines.push('    </mxCell>');
+  }
+
+  // Edges: real source/target binding + fixed waypoints.
+  for (let i = 0; i < parsed.edges.length; i += 1) {
+    const edge = parsed.edges[i];
+    const sourceId = nodeIdOf(edge.from);
+    const targetId = nodeIdOf(edge.to);
+    const id = edge.id ? `edge-${edge.id}` : `edge-${i}`;
+    const style = VARIANT_EDGE_STYLE.default;
+    const value = edge.label ? escapeAttr(edge.label) : '';
+    const hasValidBinding = parsed.nodes.some((n) => n.id === edge.from)
+      && parsed.nodes.some((n) => n.id === edge.to);
+    if (!hasValidBinding) continue;
+    lines.push(
+      `    <mxCell id="${id}" value="${value}" style="${style}" edge="1" parent="1" source="${sourceId}" target="${targetId}">`,
+    );
+    lines.push('      <mxGeometry relative="1" as="geometry">');
+    if (edge.points && edge.points.length >= 2) {
+      // Drop the first and last points: draw.io computes them from the
+      // boundied source/target vertices. Keep the interior waypoints so the
+      // authored route shape is preserved.
+      const interior = edge.points.slice(1, -1);
+      if (interior.length) {
+        lines.push('        <Array as="points">');
+        for (const [x, y] of interior) {
+          lines.push(`          <mxPoint x="${Math.round(x)}" y="${Math.round(y)}"/>`);
+        }
+        lines.push('        </Array>');
+      }
+    }
+    lines.push('      </mxGeometry>');
+    lines.push('    </mxCell>');
+  }
+
+  lines.push('  </root>');
+  lines.push('</mxGraphModel>');
+  return lines.join('\n');
+}
+
+// ─── Sequence builder: timeline semantics via UML lifelines ────────────────
+
+/** draw.io kind palette for the non-strict sequence variant. */
+function kindColorPair(kind) {
+  const style = KIND_STYLE[kind] || KIND_STYLE.backend;
+  return {
+    fill: style.match(/fillColor=(#[0-9a-f]{6})/i)?.[1],
+    stroke: style.match(/strokeColor=(#[0-9a-f]{6})/i)?.[1],
+  };
+}
+
+/**
+ * Build the sequence mxGraphModel with draw.io's native UML lifeline model:
+ *  - participants become `shape=umlLifeline` cells spanning header→timeline
+ *    foot (rendered as header box + dashed line), so a message's authored y
+ *    survives as exitY/entryY fractions of the full timeline;
+ *  - activation bars become thin child rects of their lifeline;
+ *  - segment bands become labeled background frames;
+ *  - messages bind lifeline→lifeline with exact exit/entry y and keep their
+ *    labels and return-message dashes.
+ * With `strict: false` the same topology uses draw.io's default palette.
+ */
+export function buildDrawioXmlSequence(parsed, palette, diagram = null, { strict = true } = {}) {
+  const [vw, vh] = parsed.viewBox;
+  const nodeById = new Map(parsed.nodes.map((n) => [n.id, n]));
+  const FONT_STACK = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+  // Timeline foot: deepest lifeline end, else just below the last header,
+  // else a sane default when the artifact carries neither (viewer parity).
+  const footY = Math.max(0, ...parsed.lifelines.map((l) => l.y2))
+    || Math.max(0, ...parsed.nodes.map((n) => n.y + n.height + 60))
+    || 400;
+  const colors = (className, base) => (
+    strict && className && palette ? palette.paletteFor(className, base) : null
+  );
+  const dashOf = (inline, classDash) => normalizeDash(inline) || normalizeDash(classDash);
+
+  const lines = [];
+  lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+  lines.push(
+    `<mxGraphModel dx="${Math.round(vw)}" dy="${Math.round(vh)}" grid="${strict ? 0 : 1}" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="${Math.round(vw)}" pageHeight="${Math.round(vh)}" math="0" shadow="0"${strict ? ` background="${palette.bg}"` : ''}>`,
+  );
+  lines.push('  <root>');
+  lines.push('    <mxCell id="0"/>');
+  lines.push('    <mxCell id="1" parent="0"/>');
+
+  // Segment bands (background frames, never parents of participants).
+  for (let i = 0; i < parsed.boundaries.length; i += 1) {
+    const b = parsed.boundaries[i];
+    const lane = colors(b.fillClass, 'bg');
+    const rx = Number.isFinite(b.rx) && b.rx > 0 ? Math.round(b.rx) : 0;
+    const style = [
+      'rounded=' + (rx > 0 ? 1 : 0),
+      ...(rx > 0 ? ['absoluteArcSize=1', `arcSize=${rx}`] : []),
+      `fillColor=${lane?.fill || 'none'}`,
+      `strokeColor=${lane?.stroke || '#b0b0b0'}`,
+      `strokeWidth=${b.strokeWidth || 1}`,
+      ...(dashOf(null, lane?.dash) ? ['dashed=1', `dashPattern=${dashOf(null, lane?.dash)}`] : []),
+      `fontColor=${strict ? palette.textMuted : '#666666'}`,
+      'fontSize=9',
+      `fontFamily=${FONT_STACK}`,
+      'whiteSpace=wrap',
+      'html=1',
+      'verticalAlign=top',
+      'align=left',
+      'spacingLeft=8',
+    ].join(';') + ';';
+    lines.push(
+      `    <mxCell id="boundary-${i}" value="${escapeAttr(b.label || '')}" style="${style}" vertex="1" parent="1">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(b.x)}" y="${Math.round(b.y)}" width="${Math.round(b.width)}" height="${Math.round(b.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Participants as UML lifelines spanning the full timeline.
+  for (const node of parsed.nodes) {
+    const c = colors(node.fillClass, 'mask') || (strict ? null : kindColorPair(node.kind));
+    const labelParts = [node.label, node.sublabel].filter(Boolean);
+    const htmlValue = labelParts.length > 1
+      ? `<b>${labelParts[0]}</b><br/><font style="font-size:8px" color="${strict ? palette.textMuted : '#666666'}">${labelParts.slice(1).join(' · ')}</font>`
+      : node.label;
+    const style = [
+      'shape=umlLifeline',
+      'perimeter=lifelinePerimeter',
+      `size=${Math.round(node.height)}`,
+      'container=1',
+      'collapsible=0',
+      'recursiveResize=0',
+      'outlineConnect=0',
+      ...(c?.fill ? [`fillColor=${c.fill}`] : []),
+      ...(c?.stroke ? [`strokeColor=${c.stroke}`] : []),
+      `strokeWidth=${node.strokeWidth || 1.5}`,
+      `fontColor=${strict ? palette.text : '#000000'}`,
+      'fontSize=11',
+      `fontFamily=${FONT_STACK}`,
+      'whiteSpace=wrap',
+      'html=1',
+    ].join(';') + ';';
+    lines.push(
+      `    <mxCell id="node-${node.id}" value="${escapeAttr(htmlValue)}" style="${style}" vertex="1" parent="1">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(node.x)}" y="${Math.round(node.y)}" width="${Math.round(node.width)}" height="${Math.round(footY - node.y)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Activation bars: thin child rects of their lifeline.
+  for (let i = 0; i < parsed.activations.length; i += 1) {
+    const act = parsed.activations[i];
+    const participant = act.participant ? nodeById.get(act.participant) : null;
+    const c = colors(act.fillClass, 'mask') || (strict ? null : kindColorPair(participant?.kind));
+    if (!participant) continue;
+    const rx = Number.isFinite(act.rx) && act.rx > 0 ? Math.round(act.rx) : 0;
+    const style = [
+      'rounded=' + (rx > 0 ? 1 : 0),
+      ...(rx > 0 ? ['absoluteArcSize=1', `arcSize=${rx}`] : []),
+      `fillColor=${c?.fill || '#ffffff'}`,
+      `strokeColor=${c?.stroke || '#999999'}`,
+      `strokeWidth=${act.strokeWidth || 1}`,
+      'html=1',
+    ].join(';') + ';';
+    lines.push(
+      `    <mxCell id="activation-${i}" value="" style="${style}" vertex="1" parent="node-${participant.id}">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(act.x - participant.x)}" y="${Math.round(act.y - participant.y)}" width="${Math.round(act.width)}" height="${Math.round(act.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Messages: lifeline→lifeline edges with the authored y as exit/entry
+  // fractions of each endpoint's full timeline height.
+  for (let i = 0; i < parsed.edges.length; i += 1) {
+    const edge = parsed.edges[i];
+    const src = nodeById.get(edge.from);
+    const tgt = nodeById.get(edge.to);
+    if (!src || !tgt) continue;
+    const c = colors(edge.strokeClass, 'bg');
+    const sw = Number.isFinite(edge.strokeWidth) ? edge.strokeWidth : 1.5;
+    const labelText = parsed.edgeLabels?.find(
+      (l) => l.from === edge.from && l.to === edge.to && (l.label || '') === (edge.label || ''),
+    ) || parsed.edgeLabels?.find((l) => l.from === edge.from && l.to === edge.to);
+    const labelColors = strict && labelText?.className ? palette.paletteFor(labelText.className, 'bg') : null;
+    const dash = dashOf(edge.inlineDash, c?.dash);
+    const fracY = (y, cell) => Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y)));
+    const exitY = fracY(edge.points[0][1], src);
+    const entryY = fracY(edge.points[edge.points.length - 1][1], tgt);
+    const style = [
+      'edgeStyle=none',
+      'rounded=0',
+      `strokeColor=${c?.stroke || '#666666'}`,
+      `strokeWidth=${sw}`,
+      ...(dash ? ['dashed=1', `dashPattern=${dash}`] : []),
+      'endArrow=block',
+      'endFill=1',
+      `endSize=${Math.max(4, Math.round(10 * sw))}`,
+      `fontColor=${labelColors?.fill || (strict ? palette.textMuted : '#666666')}`,
+      'fontSize=8',
+      `fontFamily=${FONT_STACK}`,
+      `labelBackgroundColor=${strict ? palette.mask : '#ffffff'}`,
+      'html=1',
+    ].join(';')
+      + `;exitX=0.5;exitY=${exitY.toFixed(3)};exitDx=0;exitDy=0`
+      + `;entryX=0.5;entryY=${entryY.toFixed(3)};entryDx=0;entryDy=0;`;
+    const id = edge.id ? `edge-${edge.id}` : `edge-${i}`;
+    lines.push(
+      `    <mxCell id="${id}" value="${edge.label ? escapeAttr(edge.label) : ''}" style="${style}" edge="1" parent="1" source="node-${edge.from}" target="node-${edge.to}">`,
+    );
+    // Label geometry y=-1 lifts the label one label-height above the line,
+    // matching the Archify artifact (labels sit above their message).
+    lines.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+    const interior = edge.points.slice(1, -1);
+    if (interior.length) {
+      lines.push('        <Array as="points">');
+      for (const [x, y] of interior) {
+        lines.push(`          <mxPoint x="${Math.round(x)}" y="${Math.round(y)}"/>`);
+      }
+      lines.push('        </Array>');
+    }
+    lines.push('      </mxGeometry>');
+    lines.push('    </mxCell>');
+  }
+
+  lines.push('  </root>');
+  lines.push('</mxGraphModel>');
+  return lines.join('\n');
+}
+
+/**
+ * One-shot convenience: parse an Archify SVG and emit draw.io XML.
+ * Pass `{ strict: true, css }` to emit the 1:1 visual-fidelity variant.
+ * Sequence diagrams always route through the dedicated sequence builder:
+ * their geometry is a timeline (lifelines + messages at authored y), not a
+ * node graph, so generic border-anchored edges would collapse the timeline.
+ */
+export function convertArchifyToDrawio(svg, diagramType, diagram = null, options = {}) {
+  const parsed = parseArchifySvg(svg, diagramType);
+  if (options.strict) {
+    const palette = extractPalette(options.css || '');
+    return diagramType === 'sequence'
+      ? buildDrawioXmlSequence(parsed, palette, diagram, { strict: true })
+      : buildDrawioXmlStrict(parsed, palette, diagramType, diagram);
+  }
+  return diagramType === 'sequence'
+    ? buildDrawioXmlSequence(parsed, null, diagram, { strict: false })
+    : buildDrawioXml(parsed, diagramType, diagram);
+}
+
+/**
+ * Extract the inner `<svg>...</svg>` fragment from a rendered Archify HTML
+ * artifact. Returns the SVG string (without the surrounding HTML).
+ */
+export function extractSvgFromHtml(html) {
+  const start = html.indexOf('<svg');
+  const end = html.indexOf('</svg>');
+  if (start === -1 || end === -1) {
+    throw new Error('No <svg> element found in the rendered HTML artifact.');
+  }
+  return html.slice(start, end + '</svg>'.length);
+}
+
+// ─── Strict palette: resolve Archify CSS to concrete colors ────────────────
+
+function parseColorValue(value) {
+  const v = String(value).trim();
+  const rgba = v.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+  if (rgba) {
+    return { r: parseFloat(rgba[1]), g: parseFloat(rgba[2]), b: parseFloat(rgba[3]), a: rgba[4] === undefined ? 1 : parseFloat(rgba[4]) };
+  }
+  const hex = v.match(/^#([0-9a-f]{6})$/i);
+  if (hex) {
+    return {
+      r: parseInt(hex[1].slice(0, 2), 16),
+      g: parseInt(hex[1].slice(2, 4), 16),
+      b: parseInt(hex[1].slice(4, 6), 16),
+      a: 1,
+    };
+  }
+  return null;
+}
+
+function colorToHex(c) {
+  const h = (n) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0');
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
+}
+
+/**
+ * Alpha-composite `fg` over an opaque `bg`. Semi-transparent Archify fills
+ * (e.g. rgba(8, 51, 68, 0.4)) sit on an opaque mask or page background, so the
+ * pre-composited hex reproduces the rendered pixel exactly in draw.io, which
+ * has no two-layer shape fill.
+ */
+function blendOver(fg, bg) {
+  const a = fg.a;
+  return {
+    r: fg.r * a + bg.r * (1 - a),
+    g: fg.g * a + bg.g * (1 - a),
+    b: fg.b * a + bg.b * (1 - a),
+    a: 1,
+  };
+}
+
+/**
+ * Extract the visual palette from the rendered artifact's CSS. Variables
+ * always resolve from the LIGHT theme block so the exported diagram is a
+ * stable light-themed file regardless of the artifact's dark default or any
+ * viewer/browser theme preference. The dark `:root` block is only a fallback
+ * for custom templates that define no light theme. Preset-scoped rules such as
+ * `svg[data-preset=…] .c-x` are intentionally skipped because their selectors
+ * do not start at a class name.
+ */
+export function extractPalette(css) {
+  // Comments inside declaration blocks would break per-`;` splitting.
+  const cleanCss = String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+  // Variable blocks. The light selector is anchored to line start so compound
+  // selectors (`[data-preset=…][data-theme="light"]`,
+  // `:root, [data-theme="dark"], [data-theme="light"]`) never match.
+  const vars = {};
+  const varBlock = cleanCss.match(/^[ \t]*\[data-theme="light"\]\s*\{([^}]*)\}/m)?.[1]
+    // Artifact default, used only when no light theme exists.
+    ?? cleanCss.match(/:root\s*,\s*\[data-theme="dark"\]\s*\{([^}]*)\}/)?.[1]
+    ?? '';
+  if (varBlock) {
+    for (const rawDecl of varBlock.split(';')) {
+      const m = rawDecl.trim().match(/^([\w-]+)\s*:\s*(.+)$/);
+      if (m) vars[m[1]] = m[2].trim();
+    }
+  }
+  const resolveVar = (value) => {
+    let v = String(value || '').trim();
+    for (let depth = 0; depth < 8; depth += 1) {
+      const m = v.match(/^var\(\s*([\w-]+)\s*(?:,\s*([^)]+))?\)$/);
+      if (!m) return v;
+      v = vars[m[1]] ?? (m[2] ? m[2].trim() : '');
+    }
+    return v;
+  };
+  // Plain class rules only (line-start selectors).
+  const rules = {};
+  const ruleRe = /^[ \t]*\.([A-Za-z][\w-]*)\s*\{([^}]*)\}/gm;
+  for (const m of cleanCss.matchAll(ruleRe)) {
+    const decls = {};
+    for (const rawDecl of m[2].split(';')) {
+      const d = rawDecl.trim().match(/^([\w-]+)\s*:\s*(.+)$/);
+      if (d) decls[d[1]] = d[2].trim();
+    }
+    rules[m[1]] = decls;
+  }
+  const maskColor = parseColorValue(resolveVar(vars['--mask'] || '#ffffff')) || { r: 255, g: 255, b: 255, a: 1 };
+  const bgColor = parseColorValue(resolveVar(vars['--bg'] || '#ffffff')) || { r: 255, g: 255, b: 255, a: 1 };
+  const textColor = parseColorValue(resolveVar(vars['--text'] || '#000000')) || { r: 0, g: 0, b: 0, a: 1 };
+  const mutedColor = parseColorValue(resolveVar(vars['--text-muted'] || '#888888')) || { r: 136, g: 136, b: 136, a: 1 };
+
+  /**
+   * Resolve a class to concrete colors. `over` picks the compositing base:
+   * 'mask' for node fills (mask + translucent fill), 'bg' for frames.
+   */
+  const paletteFor = (className, over = 'mask') => {
+    const decls = rules[className];
+    if (!decls) return null;
+    const base = over === 'mask' ? maskColor : bgColor;
+    const out = {};
+    if (decls.fill) {
+      const raw = parseColorValue(resolveVar(decls.fill));
+      if (raw) out.fill = colorToHex(raw.a >= 1 ? raw : blendOver(raw, base));
+    }
+    if (decls.stroke) {
+      const raw = parseColorValue(resolveVar(decls.stroke));
+      if (raw) out.stroke = colorToHex(raw.a >= 1 ? raw : blendOver(raw, base));
+    }
+    if (decls['stroke-dasharray']) {
+      out.dash = resolveVar(decls['stroke-dasharray']).replace(/\s+/g, ' ').trim();
+    }
+    return out;
+  };
+
+  return {
+    paletteFor,
+    mask: colorToHex(maskColor),
+    bg: colorToHex(bgColor),
+    text: colorToHex(textColor),
+    textMuted: colorToHex(mutedColor),
+  };
+}
+
+// ─── Strict builder: 1:1 shape / color / corner fidelity ───────────────────
+
+const FALLBACK_NODE_FILL = '#d5e8d4';
+const FALLBACK_STROKE = '#82b366';
+
+function normalizeDash(dash) {
+  if (!dash) return null;
+  const parts = dash.split(/[\s,]+/).filter(Boolean).map(Number);
+  if (!parts.length || parts.some((n) => !Number.isFinite(n) || n <= 0)) return null;
+  return parts.join(' ');
+}
+
+/** Pin the exact authored connection point on a node border (0..1 floats). */
+function borderFraction(point, node) {
+  if (!node || !node.width || !node.height) return null;
+  const fx = (point[0] - node.x) / node.width;
+  const fy = (point[1] - node.y) / node.height;
+  // Snap near-border values so draw.io treats them as side anchors.
+  const snap = (v) => (v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100);
+  return [snap(fx), snap(fy)];
+}
+
+/**
+ * Fraction t∈[0,1] along the polyline where the point closest to `target`
+ * sits (used to position edge labels at their authored location).
+ */
+function fractionAlongPolyline(points, target) {
+  let total = 0;
+  const segs = [];
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const [ax, ay] = points[i];
+    const [bx, by] = points[i + 1];
+    const len = Math.hypot(bx - ax, by - ay) || 1;
+    segs.push({ ax, ay, dx: bx - ax, dy: by - ay, len, start: total });
+    total += len;
+  }
+  let best = Infinity;
+  let result = 0.5;
+  for (const s of segs) {
+    const t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+    const px = s.ax + t * s.dx;
+    const py = s.ay + t * s.dy;
+    const dist = Math.hypot(target[0] - px, target[1] - py);
+    if (dist < best) {
+      best = dist;
+      result = (s.start + t * s.len) / (total || 1);
+    }
+  }
+  return Math.max(0, Math.min(1, result));
+}
+
+/**
+ * Build the strict (1:1) mxGraphModel: every node keeps the Archify rounded
+ * rectangle with its exact corner radius, exact composited fill/stroke colors,
+ * exact stroke width and dash pattern; edges keep their exact routed polyline
+ * with the measured corner radius (`arcSize` = 2 × radius in draw.io) and their
+ * exact anchor points pinned via exitX/exitY / entryX/entryY.
+ */
+export function buildDrawioXmlStrict(parsed, palette, diagramType, diagram = null) {
+  const [vw, vh] = parsed.viewBox;
+  const nodeParents = resolveContainerParents(parsed, diagram);
+  const nodeById = new Map(parsed.nodes.map((n) => [n.id, n]));
+  const FONT_STACK = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+
+  const strictNodeStyle = (node) => {
+    const colors = node.fillClass ? palette.paletteFor(node.fillClass, 'mask') : null;
+    const rx = Number.isFinite(node.rx) && node.rx > 0 ? Math.round(node.rx) : 0;
+    const sw = Number.isFinite(node.strokeWidth) ? node.strokeWidth : 1.5;
+    return [
+      'rounded=' + (rx > 0 ? 1 : 0),
+      ...(rx > 0 ? ['absoluteArcSize=1', `arcSize=${rx}`] : []),
+      `fillColor=${colors?.fill || FALLBACK_NODE_FILL}`,
+      `strokeColor=${colors?.stroke || FALLBACK_STROKE}`,
+      `strokeWidth=${sw}`,
+      `fontColor=${palette.text}`,
+      'fontSize=11',
+      `fontFamily=${FONT_STACK}`,
+      'whiteSpace=wrap',
+      'html=1',
+      'verticalAlign=middle',
+    ].join(';') + ';';
+  };
+
+  const strictBoundaryStyle = (b) => {
+    const colors = b.fillClass ? palette.paletteFor(b.fillClass, 'bg') : null;
+    const rx = Number.isFinite(b.rx) && b.rx > 0 ? Math.round(b.rx) : 0;
+    const dash = normalizeDash(colors?.dash);
+    const labelColors = b.labelClass ? palette.paletteFor(b.labelClass, 'bg') : null;
+    const alignLeft = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+    return [
+      'rounded=' + (rx > 0 ? 1 : 0),
+      ...(rx > 0 ? ['absoluteArcSize=1', `arcSize=${rx}`] : []),
+      `fillColor=${colors?.fill || 'none'}`,
+      `strokeColor=${colors?.stroke || '#666666'}`,
+      `strokeWidth=${b.strokeWidth || 1}`,
+      ...(dash ? ['dashed=1', `dashPattern=${dash}`] : []),
+      `fontColor=${labelColors?.fill || palette.textMuted}`,
+      'fontSize=9',
+      `fontFamily=${FONT_STACK}`,
+      'whiteSpace=wrap',
+      'html=1',
+      'verticalAlign=top',
+      ...(alignLeft ? ['align=left', 'spacingLeft=8'] : []),
+    ].join(';') + ';';
+  };
+
+  const labelFor = (edge, index) => parsed.edgeLabels?.find(
+    (l) => l.from === edge.from && l.to === edge.to && (l.label || '') === (edge.label || ''),
+  ) || parsed.edgeLabels?.find((l) => l.from === edge.from && l.to === edge.to);
+
+  const lines = [];
+  lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+  lines.push(
+    `<mxGraphModel dx="${Math.round(vw)}" dy="${Math.round(vh)}" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="${Math.round(vw)}" pageHeight="${Math.round(vh)}" math="0" shadow="0" background="${palette.bg}">`,
+  );
+  lines.push('  <root>');
+  lines.push('    <mxCell id="0"/>');
+  lines.push('    <mxCell id="1" parent="0"/>');
+
+  // Boundaries.
+  for (let i = 0; i < parsed.boundaries.length; i += 1) {
+    const b = parsed.boundaries[i];
+    lines.push(
+      `    <mxCell id="boundary-${i}" value="${escapeAttr(b.label || b.kind)}" style="${strictBoundaryStyle(b)}" vertex="1" parent="1">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(b.x)}" y="${Math.round(b.y)}" width="${Math.round(b.width)}" height="${Math.round(b.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Nodes.
+  for (const node of parsed.nodes) {
+    const parentInfo = nodeParents.get(node.id);
+    const parentId = parentInfo ? parentInfo.drawioId : '1';
+    const relX = node.x - (parentInfo ? parentInfo.offsetX : 0);
+    const relY = node.y - (parentInfo ? parentInfo.offsetY : 0);
+    const labelParts = [node.label, node.sublabel, node.tag].filter(Boolean);
+    const tagColor = node.fillClass ? (palette.paletteFor(node.fillClass, 'mask')?.stroke || palette.text) : palette.text;
+    const htmlValue = labelParts.length > 1
+      ? `<b>${node.label}</b><br/>`
+        + (node.sublabel ? `<font style="font-size:8px" color="${palette.textMuted}">${node.sublabel}</font>` : '')
+        + (node.sublabel && node.tag ? '<br/>' : '')
+        + (node.tag ? `<font style="font-size:7px" color="${tagColor}">${node.tag}</font>` : '')
+      : node.label;
+    lines.push(
+      `    <mxCell id="node-${node.id}" value="${escapeAttr(htmlValue)}" style="${strictNodeStyle(node)}" vertex="1" parent="${parentId}">`,
+    );
+    lines.push(
+      `      <mxGeometry x="${Math.round(relX)}" y="${Math.round(relY)}" width="${Math.round(node.width)}" height="${Math.round(node.height)}" as="geometry"/>`,
+    );
+    lines.push('    </mxCell>');
+  }
+
+  // Sequence lifelines.
+  for (const ll of parsed.lifelines) {
+    const id = `lifeline-${Math.round(ll.x)}-${Math.round(ll.y1)}`;
+    const colors = ll.strokeClass ? palette.paletteFor(ll.strokeClass, 'bg') : null;
+    const style = [
+      'endArrow=none',
+      'html=1',
+      `strokeColor=${colors?.stroke || '#999999'}`,
+      `strokeWidth=${ll.strokeWidth || 0.8}`,
+      'dashed=1',
+      'dashPattern=3 7',
+    ].join(';') + ';';
+    lines.push(`    <mxCell id="${id}" value="" style="${style}" edge="1" parent="1">`);
+    lines.push('      <mxGeometry relative="1" as="geometry">');
+    lines.push(`        <mxPoint x="${Math.round(ll.x)}" y="${Math.round(ll.y1)}" as="sourcePoint"/>`);
+    lines.push(`        <mxPoint x="${Math.round(ll.x)}" y="${Math.round(ll.y2)}" as="targetPoint"/>`);
+    lines.push('      </mxGeometry>');
+    lines.push('    </mxCell>');
+  }
+
+  // Edges.
+  for (let i = 0; i < parsed.edges.length; i += 1) {
+    const edge = parsed.edges[i];
+    const src = nodeById.get(edge.from);
+    const tgt = nodeById.get(edge.to);
+    if (!src || !tgt) continue;
+    const colors = edge.strokeClass ? palette.paletteFor(edge.strokeClass, 'bg') : null;
+    const sw = Number.isFinite(edge.strokeWidth) ? edge.strokeWidth : 1.5;
+    const dash = normalizeDash(colors?.dash);
+    const radius = Number.isFinite(edge.radius) ? edge.radius : 0;
+    const labelText = labelFor(edge, i);
+    const labelColors = labelText?.className ? palette.paletteFor(labelText.className, 'bg') : null;
+    const style = [
+      'edgeStyle=none',
+      ...(radius > 0 ? ['rounded=1', `arcSize=${radius * 2}`] : ['rounded=0']),
+      `strokeColor=${colors?.stroke || '#666666'}`,
+      `strokeWidth=${sw}`,
+      ...(dash ? ['dashed=1', `dashPattern=${dash}`] : []),
+      'endArrow=block',
+      'endFill=1',
+      `endSize=${Math.max(4, Math.round(10 * sw))}`,
+      `fontColor=${labelColors?.fill || palette.textMuted}`,
+      'fontSize=8',
+      `fontFamily=${FONT_STACK}`,
+      `labelBackgroundColor=${palette.mask}`,
+      'html=1',
+    ].join(';') + ';';
+
+    const exit = borderFraction(edge.points[0], src);
+    const entry = borderFraction(edge.points[edge.points.length - 1], tgt);
+    const styleAttrs = [
+      ...(exit ? [`exitX=${exit[0]}`, `exitY=${exit[1]}`, 'exitDx=0', 'exitDy=0'] : []),
+      ...(entry ? [`entryX=${entry[0]}`, `entryY=${entry[1]}`, 'entryDx=0', 'entryDy=0'] : []),
+    ].join(';');
+    const id = edge.id ? `edge-${edge.id}` : `edge-${i}`;
+    lines.push(
+      `    <mxCell id="${id}" value="${edge.label ? escapeAttr(edge.label) : ''}" style="${style}${styleAttrs}" edge="1" parent="1" source="node-${edge.from}" target="node-${edge.to}">`,
+    );
+    lines.push('      <mxGeometry relative="1" as="geometry">');
+    if (labelText && edge.label) {
+      const t = fractionAlongPolyline(edge.points, [labelText.x, labelText.y]);
+      lines.push(`        <mxGeometry x="${(2 * t - 1).toFixed(3)}" y="0" relative="1" as="geometry"/>`);
+    }
+    const interior = edge.points.slice(1, -1);
+    if (interior.length) {
+      lines.push('        <Array as="points">');
+      for (const [x, y] of interior) {
+        lines.push(`          <mxPoint x="${Math.round(x)}" y="${Math.round(y)}"/>`);
+      }
+      lines.push('        </Array>');
+    }
+    lines.push('      </mxGeometry>');
+    lines.push('    </mxCell>');
+  }
+
+  lines.push('  </root>');
+  lines.push('</mxGraphModel>');
+  return lines.join('\n');
+}
diff --git a/archify/renderers/shared/utils.mjs b/archify/renderers/shared/utils.mjs
index 739a8e6..99c86ad 100644
--- a/archify/renderers/shared/utils.mjs
+++ b/archify/renderers/shared/utils.mjs
@@ -111,7 +111,7 @@ const TEMPLATE_PLACEHOLDERS = [
   GUIDED_VIEWS_PLACEHOLDER,
 ];
 
-export function applyTemplate(template, { title, subtitle, svg, cards, visualPreset = 'classic', guidedViews = [], sourceEvidence = null }) {
+export function applyTemplate(template, { title, subtitle, svg, cards, visualPreset = 'classic', guidedViews = [], sourceEvidence = null, diagramType = '' }) {
   if (!SVG_SLOT_RE.test(template)) {
     throw new Error('applyTemplate: template missing ARCHIFY:SVG_SLOT sentinel');
   }
@@ -146,7 +146,7 @@ export function applyTemplate(template, { title, subtitle, svg, cards, visualPre
     ? `<p class="subtitle">${esc(subtitle)}</p>`
     : '';
   return template
-    .replace(TEMPLATE_PLACEHOLDERS[0], () => `<html lang="en" data-theme="dark" data-preset="${esc(visualPreset)}">`)
+    .replace(TEMPLATE_PLACEHOLDERS[0], () => `<html lang="en" data-theme="dark" data-preset="${esc(visualPreset)}"${diagramType ? ` data-diagram-type="${esc(diagramType)}"` : ''}>`)
     .replace(TEMPLATE_PLACEHOLDERS[1], () => `<title>${esc(title)} Diagram</title>`)
     .replace(TEMPLATE_PLACEHOLDERS[2], () => `<h1>${esc(title)}</h1>`)
     .replace(SUBTITLE_SLOT_RE, (_match, indent, newline = '') => renderedSubtitle
diff --git a/archify/scripts/export-drawio.mjs b/archify/scripts/export-drawio.mjs
new file mode 100644
index 0000000..e523cbf
--- /dev/null
+++ b/archify/scripts/export-drawio.mjs
@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * Archify → draw.io exporter.
+ *
+ * Pipeline: JSON IR  --render-->  HTML artifact  --extract SVG-->  draw.io XML.
+ *
+ * The SVG is the geometry source (it already contains the renderer's computed
+ * layout, routing, and port spreading); the JSON IR contributes semantic
+ * relationships that are not in the SVG (architecture boundary `wraps`).
+ *
+ * Usage: node scripts/export-drawio.mjs <type> <input.json> [output.drawio] [--strict]
+ */
+
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { extractSvgFromHtml, convertArchifyToDrawio } from '../renderers/shared/svg-to-drawio.mjs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const skillRoot = path.resolve(__dirname, '..');
+
+const TYPES = new Set(['architecture', 'workflow', 'sequence', 'dataflow', 'lifecycle']);
+const DEFAULT_EXAMPLE = {
+  architecture: 'web-app.architecture.json',
+  workflow: 'agent-tool-call.workflow.json',
+  sequence: 'cache-miss-request.sequence.json',
+  dataflow: 'event-stream.dataflow.json',
+  lifecycle: 'agent-run.lifecycle.json',
+};
+
+function fail(message, code = 2) {
+  console.error(message);
+  process.exit(code);
+}
+
+const argv = process.argv.slice(2).filter((arg) => arg !== '--strict');
+const strict = process.argv.includes('--strict');
+const [diagramType, inputArg, outputArg] = argv;
+
+if (!diagramType || !TYPES.has(diagramType)) {
+  fail(`Unknown diagram type "${diagramType}". Expected one of: ${[...TYPES].join(', ')}`);
+}
+
+const inputPath = path.resolve(inputArg || path.join(skillRoot, 'examples', DEFAULT_EXAMPLE[diagramType]));
+if (!fs.existsSync(inputPath)) {
+  fail(`Input file not found: ${inputPath}`, 1);
+}
+
+// Resolve output path: explicit arg, or replace .json/.html with .drawio
+// (strict appends "-strict", matching the viewer button's filename, so both
+// variants can coexist).
+const outputPath = outputArg
+  ? path.resolve(outputArg)
+  : inputPath.replace(/\.(json|html)$/, strict ? '-strict.drawio' : '.drawio');
+
+// 1. Read + validate the JSON IR (light parse; full schema validation happens
+//    inside the renderer via loadDiagram).
+const diagram = JSON.parse(fs.readFileSync(inputPath, 'utf8'));
+
+// 2. Render the HTML artifact via the type's renderer (reuse the existing,
+//    validated rendering pipeline). Output to a temp file.
+const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-drawio-'));
+const tmpHtml = path.join(tmpDir, 'rendered.html');
+try {
+  const rendererScript = path.join(skillRoot, `renderers/${diagramType}/render-${diagramType}.mjs`);
+  execFileSync(process.execPath, [rendererScript, inputPath, tmpHtml], { stdio: 'inherit' });
+
+  // 3. Extract the SVG and convert to draw.io XML. Strict mode additionally
+  //    feeds the artifact CSS so shapes keep their exact Archify colors,
+  //    corner radii, and dash patterns — always resolved from the light theme
+  //    so the .drawio file reads correctly under any draw.io theme.
+  const html = fs.readFileSync(tmpHtml, 'utf8');
+  const svg = extractSvgFromHtml(html);
+  const css = html.match(/<style[^>]*>([\s\S]*?)<\/style>/)?.[1] || '';
+  const drawioXml = convertArchifyToDrawio(svg, diagramType, diagram, { strict, css });
+
+  // 4. Write the .drawio file.
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, drawioXml);
+  console.log(outputPath);
+} finally {
+  fs.rmSync(tmpDir, { recursive: true, force: true });
+}
diff --git a/archify/test/animation.test.mjs b/archify/test/animation.test.mjs
index dffb995..92cf3f6 100644
--- a/archify/test/animation.test.mjs
+++ b/archify/test/animation.test.mjs
@@ -54,13 +54,13 @@ test('static output omits animation attributes', () => {
 
 test('classic preset remains the default for existing diagrams', () => {
   const html = render('architecture', CASES.architecture, null, null);
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="classic">/);
+  assert.match(html, /<html lang="en" data-theme="dark" data-preset="classic"/);
   assert.match(svgBlock(html), /data-preset="classic"/);
 });
 
 test('signal-flow preset reaches the page, SVG, and motion export surface', () => {
   const html = render('workflow', CASES.workflow, 'trace', 'signal-flow');
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="signal-flow">/);
+  assert.match(html, /<html lang="en" data-theme="dark" data-preset="signal-flow"/);
   assert.match(svgBlock(html), /data-preset="signal-flow"/);
   assert.match(html, /content: "SIGNAL FLOW"/);
   assert.match(html, /data-format="webm"/);
@@ -97,7 +97,7 @@ test('webm renders an explicit time-varying canvas scene instead of replaying on
 
 test('blueprint preset reaches every visual surface without changing the default', () => {
   const html = render('architecture', CASES.architecture, null, 'blueprint');
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="blueprint">/);
+  assert.match(html, /<html lang="en" data-theme="dark" data-preset="blueprint"/);
   assert.match(svgBlock(html), /data-preset="blueprint"/);
   assert.match(html, /content: "BLUEPRINT \/ REV 01"/);
   assert.match(html, /\[data-preset="blueprint"\]\[data-theme="dark"\]/);
@@ -117,7 +117,7 @@ test('blueprint preset is accepted by all five typed renderers', () => {
 test('editorial preset reaches every visual surface and all five typed renderers', () => {
   for (const [mode, example] of Object.entries(CASES)) {
     const html = render(mode, example, null, 'editorial');
-    assert.match(html, /<html lang="en" data-theme="dark" data-preset="editorial">/, mode);
+    assert.match(html, /<html lang="en" data-theme="dark" data-preset="editorial"/, mode);
     assert.match(svgBlock(html), /data-preset="editorial"/, mode);
     assert.match(html, /content: "EDITORIAL \/ FIELD NOTE"/, mode);
     assert.match(html, /\[data-preset="editorial"\]\[data-theme="dark"\]/, mode);
diff --git a/archify/test/export-drawio.test.mjs b/archify/test/export-drawio.test.mjs
new file mode 100644
index 0000000..aa22d08
--- /dev/null
+++ b/archify/test/export-drawio.test.mjs
@@ -0,0 +1,648 @@
+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';
+
+import { parseArchifySvg, buildDrawioXml, buildDrawioXmlStrict, buildDrawioXmlSequence, extractPalette, convertArchifyToDrawio, extractSvgFromHtml } from '../renderers/shared/svg-to-drawio.mjs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const skillRoot = path.resolve(__dirname, '..');
+const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-drawio-'));
+const cli = path.join(skillRoot, 'bin/archify.mjs');
+
+function run(args, options = {}) {
+  return spawnSync(process.execPath, [cli, ...args], {
+    cwd: options.cwd || skillRoot,
+    encoding: 'utf8',
+    env: options.env || process.env,
+  });
+}
+
+// ─── Unit: SVG parsing ─────────────────────────────────────────────────────
+
+test('parseArchifySvg extracts nodes with id, kind, label, and geometry', () => {
+  const svg = `<svg viewBox="0 0 200 100">
+    <g id="node-a" data-node-id="a" data-node-label="Alpha" data-node-kind="database">
+      <rect x="10" y="20" width="60" height="40" rx="6" class="c-mask"/>
+      <rect x="10" y="20" width="60" height="40" rx="6" class="c-database"/>
+    </g>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'architecture');
+  assert.equal(parsed.nodes.length, 1);
+  const node = parsed.nodes[0];
+  assert.equal(node.id, 'a');
+  assert.equal(node.kind, 'database');
+  assert.equal(node.label, 'Alpha');
+  assert.equal(node.x, 10);
+  assert.equal(node.y, 20);
+  assert.equal(node.width, 60);
+  assert.equal(node.height, 40);
+});
+
+test('parseArchifySvg extracts edges with composition points (path pattern)', () => {
+  const svg = `<svg viewBox="0 0 200 100">
+    <path data-edge-from="a" data-edge-to="b" data-edge-label="flow" data-edge-id="ab"
+          data-composition-points="70,40;130,40" d="M 70 40 L 130 40"/>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'architecture');
+  assert.equal(parsed.edges.length, 1);
+  const edge = parsed.edges[0];
+  assert.equal(edge.from, 'a');
+  assert.equal(edge.to, 'b');
+  assert.equal(edge.label, 'flow');
+  assert.equal(edge.id, 'ab');
+  assert.deepEqual(edge.points, [[70, 40], [130, 40]]);
+});
+
+test('parseArchifySvg extracts sequence edges (composition-edge prefix in g>path)', () => {
+  const svg = `<svg viewBox="0 0 200 100">
+    <g data-edge-from="a" data-edge-to="b" data-edge-label="call" data-edge-id="ab">
+      <path data-composition-edge-from="a" data-composition-edge-to="b" data-composition-edge-id="ab"
+            data-composition-points="30,50;100,50" d="M 30 50 L 100 50"/>
+    </g>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'sequence');
+  assert.equal(parsed.edges.length, 1);
+  assert.equal(parsed.edges[0].from, 'a');
+  assert.equal(parsed.edges[0].to, 'b');
+  assert.equal(parsed.edges[0].points.length, 2);
+});
+
+test('parseArchifySvg dedupes label-wrapper g duplicates', () => {
+  // The real SVG renders each edge twice: once as a <path> with points, once
+  // as a label <g> without points. Only the path should be captured.
+  const svg = `<svg viewBox="0 0 200 100">
+    <path data-edge-from="a" data-edge-to="b" data-composition-points="10,50;90,50"/>
+    <g data-detail="context" data-edge-from="a" data-edge-to="b" data-edge-label="x">
+      <rect x="40" y="40" width="20" height="14"/>
+    </g>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'architecture');
+  assert.equal(parsed.edges.length, 1);
+});
+
+test('parseArchifySvg extracts boundaries with kind and label', () => {
+  const svg = `<svg viewBox="0 0 200 100">
+    <rect data-graph-role="structural-frame" data-composition-frame-kind="region"
+          data-composition-frame-id="0" x="5" y="5" width="190" height="90" rx="12" class="c-region"/>
+    <text x="13" y="23">My Region</text>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'architecture');
+  assert.equal(parsed.boundaries.length, 1);
+  assert.equal(parsed.boundaries[0].kind, 'region');
+  assert.equal(parsed.boundaries[0].label, 'My Region');
+});
+
+test('parseArchifySvg extracts sequence lifelines', () => {
+  const svg = `<svg viewBox="0 0 200 200">
+    <path d="M 50 60 L 50 180" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+    <path d="M 150 60 L 150 180" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'sequence');
+  assert.equal(parsed.lifelines.length, 2);
+  assert.equal(parsed.lifelines[0].x, 50);
+});
+
+test('extractSvgFromHtml throws when no svg present', () => {
+  assert.throws(() => extractSvgFromHtml('<html><body>no diagram</body></html>'), /No <svg>/);
+});
+
+// ─── Unit: draw.io XML generation ──────────────────────────────────────────
+
+test('buildDrawioXml emits valid mxGraphModel with root cells', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [{ id: 'a', kind: 'backend', label: 'A', x: 10, y: 10, width: 80, height: 40 }],
+    edges: [{ from: 'a', to: 'a', points: [[50, 30], [50, 30]] }],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  assert.match(xml, /<mxGraphModel/);
+  assert.match(xml, /<root>/);
+  assert.match(xml, /<mxCell id="0"\/>/);
+  assert.match(xml, /<mxCell id="1" parent="0"\/>/);
+});
+
+test('buildDrawioXml binds edges to real vertex cell ids (not floating)', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 'a', kind: 'backend', label: 'A', x: 10, y: 10, width: 80, height: 40 },
+      { id: 'b', kind: 'backend', label: 'B', x: 200, y: 10, width: 80, height: 40 },
+    ],
+    edges: [{ from: 'a', to: 'b', label: 'call', id: 'ab', points: [[90, 30], [200, 30]] }],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  // The core guarantee: source/target point to node vertex ids.
+  assert.match(xml, /edge="1"[^>]*source="node-a"[^>]*target="node-b"/);
+});
+
+test('buildDrawioXml preserves interior waypoints', () => {
+  const parsed = {
+    viewBox: [600, 300],
+    nodes: [
+      { id: 'a', kind: 'backend', label: 'A', x: 10, y: 10, width: 80, height: 40 },
+      { id: 'b', kind: 'backend', label: 'B', x: 400, y: 200, width: 80, height: 40 },
+    ],
+    edges: [{
+      from: 'a', to: 'b', id: 'ab',
+      points: [[90, 30], [200, 30], [200, 220], [400, 220]],
+    }],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  assert.match(xml, /<Array as="points">/);
+  // First and last points are dropped (draw.io computes them from vertices).
+  assert.match(xml, /<mxPoint x="200" y="30"\/>/);
+  assert.match(xml, /<mxPoint x="200" y="220"\/>/);
+  // Endpoints should NOT appear as waypoints.
+  assert.doesNotMatch(xml, /<mxPoint x="90" y="30"\/>/);
+});
+
+test('buildDrawioXml maps node kind to draw.io shape styles', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 'db', kind: 'database', label: 'DB', x: 10, y: 10, width: 80, height: 40 },
+      { id: 'cl', kind: 'cloud', label: 'Cloud', x: 100, y: 10, width: 80, height: 40 },
+    ],
+    edges: [],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  assert.match(xml, /shape=cylinder3/);
+  assert.match(xml, /shape=cloud/);
+});
+
+test('buildDrawioXml maps lifecycle state types to shapes', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 's', kind: 'start', label: 'Start', x: 10, y: 10, width: 80, height: 40 },
+      { id: 'd', kind: 'decision', label: 'Decide', x: 100, y: 10, width: 80, height: 40 },
+    ],
+    edges: [],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'lifecycle');
+  assert.match(xml, /ellipse;whiteSpace/); // start state
+  assert.match(xml, /rhombus;whiteSpace/); // decision state
+});
+
+test('buildDrawioXml parents nodes into boundaries via JSON wraps', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 'inner', kind: 'backend', label: 'Inner', x: 50, y: 50, width: 80, height: 40 },
+    ],
+    edges: [],
+    boundaries: [{ kind: 'region', label: 'Box', x: 10, y: 10, width: 200, height: 200 }],
+    lifelines: [],
+  };
+  const diagram = { boundaries: [{ wraps: ['inner'] }] };
+  const xml = buildDrawioXml(parsed, 'architecture', diagram);
+  assert.match(xml, /id="node-inner"[^>]*parent="boundary-0"/);
+});
+
+test('buildDrawioXml skips edges with unresolvable endpoints', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [{ id: 'a', kind: 'backend', label: 'A', x: 10, y: 10, width: 80, height: 40 }],
+    edges: [
+      { from: 'a', to: 'ghost', points: [[50, 30], [60, 30]] }, // ghost missing
+    ],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  assert.doesNotMatch(xml, /edge="1"/);
+});
+
+test('buildDrawioXml produces XML-parseable output', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 'a', kind: 'backend', label: 'A&B', x: 10, y: 10, width: 80, height: 40 },
+    ],
+    edges: [],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  // The ampersand in the label must survive as a single &amp; (not double-escaped).
+  assert.match(xml, /value="A&amp;B"/);
+  assert.doesNotMatch(xml, /A&amp;amp;/);
+});
+
+test('convertArchifyToDrawio chains parse + build', () => {
+  const svg = `<svg viewBox="0 0 200 100">
+    <g id="node-a" data-node-id="a" data-node-label="A" data-node-kind="backend">
+      <rect x="10" y="20" width="60" height="40" class="c-mask"/>
+    </g>
+  </svg>`;
+  const xml = convertArchifyToDrawio(svg, 'architecture');
+  assert.match(xml, /<mxGraphModel/);
+  assert.match(xml, /id="node-a"/);
+});
+
+// ─── Integration: CLI end-to-end for all 5 types ────────────────────────────
+
+const EXAMPLES = [
+  ['architecture', 'web-app.architecture.json'],
+  ['workflow', 'agent-tool-call.workflow.json'],
+  ['sequence', 'cache-miss-request.sequence.json'],
+  ['dataflow', 'event-stream.dataflow.json'],
+  ['lifecycle', 'agent-run.lifecycle.json'],
+];
+
+for (const [type, file] of EXAMPLES) {
+  test(`cli: export-drawio ${type} produces valid drawio with real bindings`, () => {
+    const input = path.join(skillRoot, 'examples', file);
+    const output = path.join(tmp, `${type}.drawio`);
+    const result = run(['export-drawio', type, input, output]);
+    assert.equal(result.status, 0, result.stderr);
+    assert.ok(fs.existsSync(output), 'output file created');
+    const xml = fs.readFileSync(output, 'utf8');
+    assert.match(xml, /<mxGraphModel/);
+    assert.match(xml, /edge="1"/);
+    // Every edge must reference real vertex cell ids.
+    const edgeSources = [...xml.matchAll(/source="(node-[^"]*)"/g)].map((m) => m[1]);
+    const edgeTargets = [...xml.matchAll(/target="(node-[^"]*)"/g)].map((m) => m[1]);
+    assert.ok(edgeSources.length > 0, `${type} has at least one bound edge`);
+    const vertexIds = new Set([...xml.matchAll(/id="(node-[^"]*)"[^>]*vertex="1"/g)].map((m) => m[1]));
+    for (const id of [...edgeSources, ...edgeTargets]) {
+      assert.ok(vertexIds.has(id), `${type}: edge endpoint ${id} resolves to a real vertex`);
+    }
+  });
+}
+
+test('cli: export-drawio architecture preserves waypoints for routed edges', () => {
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const output = path.join(tmp, 'waypoints.drawio');
+  const result = run(['export-drawio', 'architecture', input, output]);
+  assert.equal(result.status, 0, result.stderr);
+  const xml = fs.readFileSync(output, 'utf8');
+  // The web-app example has multi-point routes (e.g. jwt-verification).
+  assert.match(xml, /<Array as="points">/);
+});
+
+test('cli: export-drawio --json emits structured receipt', () => {
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const output = path.join(tmp, 'json-receipt.drawio');
+  const result = run(['export-drawio', 'architecture', input, output, '--json']);
+  assert.equal(result.status, 0, result.stderr);
+  const receipt = JSON.parse(result.stdout);
+  assert.equal(receipt.ok, true);
+  assert.equal(receipt.command, 'export-drawio');
+  assert.equal(receipt.type, 'architecture');
+});
+
+test('cli: export-drawio rejects unknown type with exit 2', () => {
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const result = run(['export-drawio', 'bogus', input]);
+  assert.equal(result.status, 2);
+  assert.match(result.stderr, /Unknown diagram type/);
+});
+
+test('cli: export-drawio rejects unknown option with exit 2', () => {
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const result = run(['export-drawio', 'architecture', input, '--bogus']);
+  assert.equal(result.status, 2);
+});
+
+test('cli: help lists export-drawio', () => {
+  const result = run(['--help']);
+  assert.equal(result.status, 0);
+  assert.match(result.stdout, /archify export-drawio <type>/);
+});
+
+// ─── Strict mode: 1:1 shape/color/corner fidelity ──────────────────────────
+
+test('extractPalette resolves CSS vars, class rules, and blends translucent fills (dark fallback)', () => {
+  // No light block: custom templates keep working through the dark fallback.
+  const css = `
+    :root, [data-theme="dark"] {
+      --bg: #020617;
+      --mask: #0f172a;
+      --text: #ffffff;
+      --backend-fill: rgba(6, 78, 59, 0.4);
+      /* a comment that must not break parsing */
+      --backend-stroke: #34d399;
+    }
+    .c-backend { fill: var(--backend-fill); stroke: var(--backend-stroke); }
+    .c-region  { fill: rgba(251, 191, 36, 0.05); stroke: #fbbf24; stroke-dasharray: 8,4; }
+  `;
+  const palette = extractPalette(css);
+  assert.equal(palette.bg, '#020617');
+  assert.equal(palette.mask, '#0f172a');
+  assert.equal(palette.text, '#ffffff');
+  // rgba(6,78,59,0.4) over mask #0f172a → exact composite.
+  const backend = palette.paletteFor('c-backend', 'mask');
+  assert.equal(backend.fill, '#0b2d31');
+  assert.equal(backend.stroke, '#34d399');
+  const region = palette.paletteFor('c-region', 'bg');
+  assert.equal(region.dash, '8,4');
+  assert.ok(region.fill.startsWith('#'));
+});
+
+test('extractPalette always resolves the light theme over the dark default', () => {
+  const css = `
+    :root, [data-theme="dark"] {
+      --bg: #020617; --mask: #0f172a; --text: #ffffff; --text-muted: #94a3b8;
+      --backend-fill: rgba(6, 78, 59, 0.4); --backend-stroke: #34d399;
+    }
+    [data-theme="light"] {
+      --bg: #f8fafc; --mask: #ffffff; --text: #0f172a; --text-muted: #64748b;
+      --backend-fill: rgba(52, 211, 153, 0.18); --backend-stroke: #059669;
+    }
+    [data-preset="signal-flow"][data-theme="light"] { --bg: #030711; }
+    .c-backend { fill: var(--backend-fill); stroke: var(--backend-stroke); }
+  `;
+  const palette = extractPalette(css);
+  // Light values win; the preset-scoped light block must not be picked up.
+  assert.equal(palette.bg, '#f8fafc');
+  assert.equal(palette.mask, '#ffffff');
+  assert.equal(palette.text, '#0f172a');
+  assert.equal(palette.textMuted, '#64748b');
+  // rgba(52,211,153,0.18) over the white light-theme mask → light composite.
+  const backend = palette.paletteFor('c-backend', 'mask');
+  assert.equal(backend.fill, '#daf7ed');
+  assert.equal(backend.stroke, '#059669');
+});
+
+test('strict build keeps rounded rectangles, exact radii, and colors', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [{ id: 'a', kind: 'database', label: 'DB', x: 10, y: 10, width: 80, height: 40, rx: 6, strokeWidth: 1.5, fillClass: 'c-database' }],
+    edges: [{
+      from: 'a', to: 'a', label: null, points: [[50, 30], [50, 30]], radius: 8, strokeWidth: 1.5, strokeClass: 'a-security',
+    }],
+    boundaries: [{ kind: 'region', label: 'R', x: 0, y: 0, width: 300, height: 200, rx: 12, strokeWidth: 1, fillClass: 'c-region', labelClass: 't-cloud' }],
+    lifelines: [],
+    edgeLabels: [],
+  };
+  const palette = extractPalette(`
+    :root, [data-theme="dark"] {
+      --bg: #020617; --mask: #0f172a; --text: #ffffff; --text-muted: #94a3b8;
+      --database-fill: rgba(76, 29, 149, 0.4); --database-stroke: #a78bfa;
+      --cloud-stroke: #fbbf24; --security-stroke: #fb7185;
+    }
+    [data-theme="light"] {
+      --bg: #f8fafc; --mask: #ffffff; --text: #0f172a; --text-muted: #64748b;
+      --database-fill: rgba(167, 139, 250, 0.2); --database-stroke: #7c3aed;
+      --cloud-stroke: #d97706; --security-stroke: #e11d48;
+    }
+    .c-database { fill: var(--database-fill); stroke: var(--database-stroke); }
+    .c-region { fill: rgba(251,191,36,0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }
+    .t-cloud { fill: var(--cloud-stroke); }
+    .a-security { stroke: var(--security-stroke); stroke-dasharray: 5,5; }
+  `);
+  const xml = buildDrawioXmlStrict(parsed, palette, 'architecture');
+  // No draw.io built-in shape substitutions — plain rounded rects.
+  assert.doesNotMatch(xml, /shape=cylinder|shape=cloud|shape=shield/);
+  // Exact corner radius: rx=6 → absoluteArcSize=1;arcSize=6.
+  assert.match(xml, /absoluteArcSize=1;arcSize=6;/);
+  // Boundary keeps rx=12 and its dashed pattern from CSS.
+  assert.match(xml, /arcSize=12;/);
+  assert.match(xml, /dashPattern=8 4/);
+  // Edge corner radius: measured 8 → arcSize=16.
+  assert.match(xml, /arcSize=16/);
+  // Edge keeps the security variant color and dash.
+  assert.match(xml, /strokeColor=#e11d48/);
+  assert.match(xml, /dashPattern=5 5/);
+  // Composited database fill over the light-theme white mask.
+  assert.match(xml, /fillColor=#ede8fe/);
+  // Always-light export: light page background and dark ink.
+  assert.match(xml, /background="#f8fafc"/);
+  assert.match(xml, /fontColor=#0f172a/);
+});
+
+test('cli: export-drawio --strict emits 1:1 styles for all five types', () => {
+  for (const [type, file] of EXAMPLES) {
+    const input = path.join(skillRoot, 'examples', file);
+    const output = path.join(tmp, `${type}-strict.drawio`);
+    const result = run(['export-drawio', type, input, output, '--strict']);
+    assert.equal(result.status, 0, result.stderr);
+    const xml = fs.readFileSync(output, 'utf8');
+    // Always-light palette: light page background and dark ink, exact radii,
+    // no built-in shape mapping.
+    assert.match(xml, /background="#f8fafc"/, type);
+    assert.match(xml, /fontColor=#0f172a/, type);
+    assert.doesNotMatch(xml, /background="#020617"/, type);
+    assert.match(xml, /absoluteArcSize=1/, type);
+    assert.doesNotMatch(xml, /shape=cylinder3|shape=cloud|shape=shield/, type);
+    // Real edge bindings survive strict mode.
+    const sources = [...xml.matchAll(/source="(node-[^"]*)"/g)].length;
+    assert.ok(sources > 0, `${type} keeps bound edges`);
+  }
+});
+
+test('cli: export-drawio --strict receipt reports strict mode', () => {
+  const input = path.join(skillRoot, 'examples/web-app.architecture.json');
+  const output = path.join(tmp, 'strict-receipt.drawio');
+  const result = run(['export-drawio', 'architecture', input, output, '--strict', '--json']);
+  assert.equal(result.status, 0, result.stderr);
+  const receipt = JSON.parse(result.stdout);
+  assert.equal(receipt.ok, true);
+  assert.equal(receipt.strict, true);
+});
+
+// ─── Sequence: timeline semantics via UML lifelines ────────────────────────
+
+test('parseArchifySvg enriches sequence artifacts (labels, activations, segments, dash)', () => {
+  const svg = `<svg viewBox="0 0 820 760">
+    <g data-edge-from="user" data-edge-to="web" data-edge-label="open page" data-edge-id="open-page">
+      <path data-composition-edge-from="user" data-composition-edge-to="web" data-composition-edge-id="open-page"
+            data-composition-points="69,185;163,185" d="M 69 185 L 163 185" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+      <g data-detail="context"><rect x="90" y="170" width="52" height="14" class="c-mask"/><text x="116" y="180" class="t-backend">open page</text></g>
+    </g>
+    <g data-edge-from="api" data-edge-to="user" data-edge-label="page" data-edge-id="page-render">
+      <path data-composition-edge-from="api" data-composition-edge-to="user" data-composition-edge-id="page-render"
+            data-composition-points="271,662;69,662" d="M 271 662 L 69 662" class="a-default" stroke-width="1.4" stroke-dasharray="3,5"/>
+    </g>
+    <rect data-graph-role="structural-frame" data-composition-frame-kind="segment" data-composition-frame-id="0"
+          x="48" y="150" width="724" height="145" rx="10" class="c-lane" stroke-width="1"/>
+    <g data-graph-role="segment-label" data-segment-id="0">
+      <rect x="56" y="128" width="60" height="18" rx="3" class="c-mask"/>
+      <text x="62" y="141" class="t-dim" font-size="9">Request</text>
+    </g>
+    <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
+    <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
+    <path d="M 62 142 L 62 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+  </svg>`;
+  const parsed = parseArchifySvg(svg, 'sequence');
+  assert.equal(parsed.edges.length, 2);
+  // Message label comes from the outer focus group, not the path.
+  assert.equal(parsed.edges[0].label, 'open page');
+  // Return-message dash lives as an inline path attribute.
+  assert.equal(parsed.edges[1].inlineDash, '3,5');
+  // One activation (the opaque c-mask twin is skipped), with identity.
+  assert.equal(parsed.activations.length, 1);
+  assert.equal(parsed.activations[0].participant, 'web');
+  assert.equal(parsed.activations[0].fillClass, 'c-frontend');
+  assert.equal(parsed.activations[0].height, 448);
+  // Segment label matched back onto the boundary by segment id.
+  assert.equal(parsed.boundaries.length, 1);
+  assert.equal(parsed.boundaries[0].label, 'Request');
+});
+
+test('sequence build maps the timeline onto UML lifelines', () => {
+  const parsed = {
+    viewBox: [820, 760],
+    nodes: [
+      { id: 'user', kind: 'external', label: 'user', x: 19, y: 72, width: 86, height: 54, rx: 6, strokeWidth: 1.5, fillClass: 'c-external' },
+      { id: 'web', kind: 'frontend', label: 'web', x: 127, y: 72, width: 86, height: 54, rx: 6, strokeWidth: 1.5, fillClass: 'c-frontend' },
+    ],
+    edges: [
+      { from: 'user', to: 'web', label: 'open page', id: 'open-page', points: [[69, 185], [163, 185]], strokeClass: 'a-default', strokeWidth: 1.4, radius: 0 },
+      { from: 'web', to: 'user', label: 'render', id: 'render', points: [[163, 625], [69, 625]], strokeClass: 'a-default', strokeWidth: 1.4, radius: 0, inlineDash: '3,5' },
+    ],
+    boundaries: [{ kind: 'segment', frameId: '0', label: 'Request', x: 48, y: 150, width: 724, height: 145, rx: 10, strokeWidth: 1, fillClass: 'c-lane' }],
+    lifelines: [{ x: 62, y1: 142, y2: 695 }, { x: 170, y1: 142, y2: 695 }],
+    activations: [{ participant: 'web', fillClass: 'c-frontend', rx: 3, strokeWidth: 1, x: 165, y: 220, width: 10, height: 448 }],
+    edgeLabels: [],
+  };
+  const palette = extractPalette(`
+    [data-theme="light"] {
+      --bg: #f8fafc; --mask: #ffffff; --text: #0f172a; --text-muted: #64748b;
+      --frontend-fill: rgba(34, 211, 238, 0.15); --frontend-stroke: #0891b2;
+      --external-fill: rgba(148, 163, 184, 0.18); --external-stroke: #64748b;
+    }
+    .c-frontend { fill: var(--frontend-fill); stroke: var(--frontend-stroke); }
+    .c-external { fill: var(--external-fill); stroke: var(--external-stroke); }
+    .c-lane { fill: rgba(248, 250, 252, 0.65); stroke: #cbd5e1; stroke-dasharray: 6,6; }
+    .a-default { stroke: #94a3b8; }
+  `);
+  const xml = buildDrawioXmlSequence(parsed, palette, 'sequence', { strict: true });
+  // Participants become full-timeline UML lifelines (foot 695 - top 72 = 623)
+  // with the header height preserved via size.
+  assert.match(xml, /shape=umlLifeline;perimeter=lifelinePerimeter/);
+  assert.match(xml, /size=54/);
+  assert.match(xml, /height="623"/);
+  // The authored message y survives as an exit fraction: (185-72)/623.
+  assert.match(xml, /exitX=0\.5;exitY=0\.181/);
+  assert.match(xml, /value="open page"/);
+  // Return message keeps its inline dash.
+  assert.match(xml, /dashPattern=3 5/);
+  // Activation is a kind-colored child of its lifeline.
+  assert.match(xml, /id="activation-0"[^>]*parent="node-web"/);
+  assert.match(xml, /fillColor=#def8fc/);
+  // Segment band keeps its authored label and lane dash.
+  assert.match(xml, /id="boundary-0" value="Request"/);
+  assert.match(xml, /dashPattern=6 6/);
+  // No floating lifeline edges remain.
+  assert.doesNotMatch(xml, /endArrow=none/);
+
+  // Non-strict keeps the same topology with draw.io's default palette.
+  const plain = buildDrawioXmlSequence(parsed, null, 'sequence', { strict: false });
+  assert.match(plain, /shape=umlLifeline/);
+  assert.match(plain, /exitX=0\.5;exitY=0\.181/);
+  assert.doesNotMatch(plain, /background="/);
+});
+
+test('cli: export-drawio sequence --strict restores the timeline', () => {
+  const input = path.join(skillRoot, 'examples/cache-miss-request.sequence.json');
+  const output = path.join(tmp, 'sequence-timeline.drawio');
+  const result = run(['export-drawio', 'sequence', input, output, '--strict']);
+  assert.equal(result.status, 0, result.stderr);
+  const xml = fs.readFileSync(output, 'utf8');
+  assert.match(xml, /shape=umlLifeline/);
+  assert.match(xml, /value="open page"/);
+  assert.match(xml, /exitX=0\.5;exitY=0\.181/);
+  assert.match(xml, /parent="node-web"/);
+  assert.match(xml, /value="Request"/);
+  assert.doesNotMatch(xml, /endArrow=none/);
+});
+
+// ─── Regressions from the draw.io export code review ────────────────────────
+
+test('buildDrawioXml escapes quotes in edge labels (raw-input callers)', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [
+      { id: 'a', kind: 'backend', label: 'A', x: 10, y: 10, width: 80, height: 40 },
+      { id: 'b', kind: 'backend', label: 'B', x: 200, y: 10, width: 80, height: 40 },
+    ],
+    edges: [{ from: 'a', to: 'b', label: 'say "hi" now', points: [[90, 30], [200, 30]] }],
+    boundaries: [],
+    lifelines: [],
+  };
+  const xml = buildDrawioXml(parsed, 'architecture');
+  // Attribute-safe: the quote survives as a single entity, never a raw ",
+  // so direct builder calls with un-escaped labels stay well-formed XML.
+  assert.match(xml, /value="say &quot;hi&quot; now"/);
+});
+
+test('wraps parenting survives a boundary skipped by the SVG parser', () => {
+  const parsed = {
+    viewBox: [400, 300],
+    nodes: [{ id: 'kept', kind: 'backend', label: 'Kept', x: 50, y: 50, width: 60, height: 30 }],
+    edges: [],
+    // Only the SECOND JSON boundary rendered; it kept its authored frame-id,
+    // so the parsed list is shorter than diagram.boundaries.
+    boundaries: [{ kind: 'region', label: 'Inner', frameId: '1', x: 40, y: 40, width: 200, height: 120 }],
+    lifelines: [],
+  };
+  const diagram = { boundaries: [{ wraps: ['ghost'] }, { wraps: ['kept'] }] };
+  const xml = buildDrawioXml(parsed, 'architecture', diagram);
+  // The surviving wrap resolves to the REAL parsed cell (boundary-0) instead
+  // of a positional boundary-1 that was never emitted.
+  assert.match(xml, /id="node-kept"[^>]*parent="boundary-0"/);
+  assert.doesNotMatch(xml, /parent="boundary-1"/);
+});
+
+test('sequence builder tolerates an empty participant set (no NaN geometry)', () => {
+  const parsed = { viewBox: [820, 760], nodes: [], edges: [], boundaries: [], lifelines: [], activations: [], edgeLabels: [] };
+  const palette = extractPalette('[data-theme="light"] { --bg: #f8fafc; --mask: #ffffff; --text: #0f172a; --text-muted: #64748b; }');
+  const xml = buildDrawioXmlSequence(parsed, palette, null, { strict: true });
+  assert.match(xml, /<mxGraphModel/);
+  assert.doesNotMatch(xml, /NaN/);
+});
+
+test('cli: export-drawio --strict default output uses the -strict.drawio suffix', () => {
+  const input = path.join(tmp, 'naming.json');
+  fs.copyFileSync(path.join(skillRoot, 'examples/web-app.architecture.json'), input);
+  const result = run(['export-drawio', 'architecture', input, '--strict']);
+  assert.equal(result.status, 0, result.stderr);
+  assert.ok(
+    fs.existsSync(path.join(tmp, 'naming-strict.drawio')),
+    'default strict name matches the viewer button (-strict.drawio)',
+  );
+});
+
+// ─── Parity: viewer and Node converters stay in lockstep ────────────────────
+
+// The viewer's inline converter (assets/template.html) and the Node converter
+// (renderers/shared/svg-to-drawio.mjs) are hand-mirrored implementations of
+// the non-strict export. Extract the viewer section from the live template
+// and assert both produce byte-identical XML for a real artifact, so editing
+// one side without the other fails here instead of drifting silently.
+// (The strict and sequence paths need a live DOM for computed styles and so
+// cannot run under Node; this guards the shared regex-parsing core.)
+function viewerConverterFromTemplate() {
+  const template = fs.readFileSync(path.join(skillRoot, 'assets/template.html'), 'utf8');
+  const start = template.indexOf('var DRAWIO_KIND_STYLE');
+  const end = template.indexOf('// ---- draw.io strict export');
+  assert.ok(start !== -1 && end !== -1 && start < end, 'template.html drawio converter section not found — anchor moved?');
+  const documentShim = { documentElement: { getAttribute: () => 'architecture' } };
+  return new Function('document', `"use strict";\n${template.slice(start, end)}\nreturn archifySvgToDrawio;`)(documentShim);
+}
+
+test('viewer and Node non-strict converters emit identical XML', () => {
+  const htmlOut = path.join(tmp, 'parity.html');
+  const rendered = run(['render', 'architecture', path.join(skillRoot, 'examples/web-app.architecture.json'), htmlOut]);
+  assert.equal(rendered.status, 0, rendered.stderr);
+  const svg = extractSvgFromHtml(fs.readFileSync(htmlOut, 'utf8'));
+  const nodeXml = convertArchifyToDrawio(svg, 'architecture');
+  const viewerXml = viewerConverterFromTemplate()(svg);
+  assert.equal(viewerXml, nodeXml);
+});
diff --git a/archify/test/preset-tryon.test.mjs b/archify/test/preset-tryon.test.mjs
index 37c55dd..fef8694 100644
--- a/archify/test/preset-tryon.test.mjs
+++ b/archify/test/preset-tryon.test.mjs
@@ -68,7 +68,7 @@ test('style selection synchronizes page, picker, and canonical SVG without touch
 test('omitted visual preset opens as Classic and theme switching cannot change it', () => {
   const html = render('architecture');
   const themeRuntime = html.match(/Archify\.theme = \(function \(\) \{[\s\S]*?\n    \}\)\(\);/)?.[0] || '';
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="classic">/);
+  assert.match(html, /<html lang="en" data-theme="dark" data-preset="classic"/);
   assert.match(svgBlock(html), /<svg\b[^>]* data-preset="classic"/);
   assert.match(themeRuntime, /html\.setAttribute\('data-theme', theme\)/);
   assert.doesNotMatch(themeRuntime, /data-preset|Archify\.preset/);
diff --git a/docs/assets/archify-live-proof.gif b/docs/assets/archify-live-proof.gif
index 9be575e..07935e0 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 f21a599..d4237e9 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": 1570846,
-  "sha256": "7cda809adfbc3ed34eb95652f5a6658d8dc2f0a1fa8837ad39b2a0cf7e88c068",
+  "bytes": 1626604,
+  "sha256": "c6a59a9397eb3324555413686255dbf91d2b50c876e684dd2d009f9dea62a1bb",
   "scenes": [
     {
       "id": "signal-flow",
       "artifact": "docs/gallery/artifacts/agent-tool-call.workflow.html",
-      "artifactSha256": "a7a3b2836f7f5795173db40527a9d2df1c53c99ac3a08049617ccef3072629c0",
+      "artifactSha256": "c6e63dda2a337bd81bf5adedaebeb0bbee81cc999eeed06205c92e8b761b2890",
       "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": "c41965605d4b7157c8a080aa52cf7d1075d96bdcae3cbbd2f82a6974bc5160cc",
+      "artifactSha256": "300f90aae568b4fd4bd8e3113065a64333edc413e2969747a3ff7e93b09caee9",
       "view": "request-boundary",
       "eyebrow": "ARCHITECTURE · BLUEPRINT",
       "title": "Production Deployment",
@@ -31,7 +31,7 @@
     {
       "id": "classic",
       "artifact": "docs/gallery/artifacts/cache-miss.sequence.html",
-      "artifactSha256": "738d651b8c3f3ff8b5b5298834cbd8b7acda5f46a456c5be031647cbc6eb2216",
+      "artifactSha256": "ac0937105ee8a8e1f2dd48350f8a5514b7ba887f1a63b172f997638f9998b72b",
       "view": "cache-fallback",
       "eyebrow": "SEQUENCE · CLASSIC",
       "title": "Cache Miss Request",
diff --git a/docs/gallery.html b/docs/gallery.html
index 36cebed..64691bf 100644
--- a/docs/gallery.html
+++ b/docs/gallery.html
@@ -339,7 +339,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="a7a3b2836f7f5795173db40527a9d2df1c53c99ac3a08049617ccef3072629c0">a7a3b2836f7f</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="c6e63dda2a337bd81bf5adedaebeb0bbee81cc999eeed06205c92e8b761b2890">c6e63dda2a33</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>
@@ -369,7 +369,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="c41965605d4b7157c8a080aa52cf7d1075d96bdcae3cbbd2f82a6974bc5160cc">c41965605d4b</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="300f90aae568b4fd4bd8e3113065a64333edc413e2969747a3ff7e93b09caee9">300f90aae568</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>
@@ -398,7 +398,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="738d651b8c3f3ff8b5b5298834cbd8b7acda5f46a456c5be031647cbc6eb2216">738d651b8c3f</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="ac0937105ee8a8e1f2dd48350f8a5514b7ba887f1a63b172f997638f9998b72b">ac0937105ee8</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>
@@ -427,7 +427,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="9380260f7e27c0051d62c0fa31629f27c1f75b9470709e14226665bc97174436">9380260f7e27</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="b961828879772f67e54ebf45544dae271f6283ae994e1097aaa0a07b24dfc387">b96182887977</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>
@@ -456,7 +456,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="8897a1e52ef56907790854d52abd15230b58f29319aac3ab0004938396cfb74a">8897a1e52ef5</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="36ffca62fe43910bf93e92ca709daae5bf9b92c7b7328c9a75db109d785565bd">36ffca62fe43</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>
@@ -485,7 +485,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="3c30dd770f181415c11ec0b0526d86991af2177fb790182ecb7bf47d0c798cd7">3c30dd770f18</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="3f3912ab833f561a6cf93b9d65cdb4027fee6d5fa78fd9c7fd31ace5630c2ad5">3f3912ab833f</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>
@@ -514,7 +514,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="48d171db0c78bd06a4c404d9a8d4d461d458445002acc1bb50ae518f9f416fb5">48d171db0c78</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="ffcde32b6b5199d82f9c251735dea6cab81c26572661e4dff7c0a74a3db3de30">ffcde32b6b51</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>
@@ -543,7 +543,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="f4f58688101dc5fbcc918f2208daf99d44755876c41dc31454655296b218da20">f4f58688101d</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="8285443e5198b8d21e42051ef43c9ab7ea3fdce04af24a4d382c9f603a8efcff">8285443e5198</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>
@@ -572,7 +572,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="9ef047c4a029fa4649d84a0c299552a5d02f31ac0e3a51b7187b6696f33ed718">9ef047c4a029</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="c3146f9cdda8df3ce50ec3c45b4e2a3042445a13604e27cf5551336cb896a3ee">c3146f9cdda8</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>
@@ -601,7 +601,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="3f13e00c25236bfdb214e8c10659ac2fbc0cb8d5cc6d727ef19207ee4abfdde3">3f13e00c2523</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="b544137df372a2ffa8f660939c0ee7c39e2fe89140362bd619ab205a156b7217">b544137df372</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>
@@ -630,7 +630,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="b1753910784abc7e37952868051861c2c90d953aeb80342ebb59febdeec87612">b1753910784a</span></div>
+                <div class="receipt-cell"><span class="receipt-label">SHA-256</span><span class="receipt-value" title="4972ff260888f6acfc714b9068af0b35b74088655cb74a6ac86d4c9a9f235962">4972ff260888</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>
@@ -716,8 +716,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 11,
-      "artifactBytes": 644009,
-      "artifactSha256": "a7a3b2836f7f5795173db40527a9d2df1c53c99ac3a08049617ccef3072629c0",
+      "artifactBytes": 689138,
+      "artifactSha256": "c6e63dda2a337bd81bf5adedaebeb0bbee81cc999eeed06205c92e8b761b2890",
       "sourceBytes": 6367,
       "sourceSha256": "9c94c8c0b2104478b77befb4cc5e343d381acba6e66645ab17616fde20b60e05",
       "checks": [
@@ -814,8 +814,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": "deployment-ownership",
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 646602,
-      "artifactSha256": "c41965605d4b7157c8a080aa52cf7d1075d96bdcae3cbbd2f82a6974bc5160cc",
+      "artifactBytes": 691735,
+      "artifactSha256": "300f90aae568b4fd4bd8e3113065a64333edc413e2969747a3ff7e93b09caee9",
       "sourceBytes": 5454,
       "sourceSha256": "738e9c7f22e4e6e88f5aafc087dc58409105927daa9a79aaf240c8393654494f",
       "checks": [
@@ -912,8 +912,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 12,
-      "artifactBytes": 640506,
-      "artifactSha256": "738d651b8c3f3ff8b5b5298834cbd8b7acda5f46a456c5be031647cbc6eb2216",
+      "artifactBytes": 686399,
+      "artifactSha256": "ac0937105ee8a8e1f2dd48350f8a5514b7ba887f1a63b172f997638f9998b72b",
       "sourceBytes": 4345,
       "sourceSha256": "4bbaa6ca3cd4036002fd5d0f3a332eb922cec69d09bac3d7925f95beb4308389",
       "checks": [
@@ -1010,8 +1010,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 642833,
-      "artifactSha256": "9380260f7e27c0051d62c0fa31629f27c1f75b9470709e14226665bc97174436",
+      "artifactBytes": 687962,
+      "artifactSha256": "b961828879772f67e54ebf45544dae271f6283ae994e1097aaa0a07b24dfc387",
       "sourceBytes": 5164,
       "sourceSha256": "e5c880417eac1623923c3dd5461e0c78acd762e1621a28bd53fc14a84cad6a91",
       "checks": [
@@ -1108,8 +1108,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 10,
-      "artifactBytes": 640146,
-      "artifactSha256": "8897a1e52ef56907790854d52abd15230b58f29319aac3ab0004938396cfb74a",
+      "artifactBytes": 685275,
+      "artifactSha256": "36ffca62fe43910bf93e92ca709daae5bf9b92c7b7328c9a75db109d785565bd",
       "sourceBytes": 5375,
       "sourceSha256": "5c760c82eee545dfb7da38a4e628059d7891af4cfbfc13c8a7009ea64f69aa1b",
       "checks": [
@@ -1206,8 +1206,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 644091,
-      "artifactSha256": "3c30dd770f181415c11ec0b0526d86991af2177fb790182ecb7bf47d0c798cd7",
+      "artifactBytes": 689220,
+      "artifactSha256": "3f3912ab833f561a6cf93b9d65cdb4027fee6d5fa78fd9c7fd31ace5630c2ad5",
       "sourceBytes": 5627,
       "sourceSha256": "6fa38a7ccedf96da592d60b392783b846188eaa3ec9136c6dc06ca020e43a110",
       "checks": [
@@ -1304,8 +1304,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 14,
-      "artifactBytes": 640916,
-      "artifactSha256": "48d171db0c78bd06a4c404d9a8d4d461d458445002acc1bb50ae518f9f416fb5",
+      "artifactBytes": 686957,
+      "artifactSha256": "ffcde32b6b5199d82f9c251735dea6cab81c26572661e4dff7c0a74a3db3de30",
       "sourceBytes": 4370,
       "sourceSha256": "545f20920c89b69c2bb1f15508d5543fddbeb15cffba61e102206e04bd5a5cd9",
       "checks": [
@@ -1402,8 +1402,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 648010,
-      "artifactSha256": "f4f58688101dc5fbcc918f2208daf99d44755876c41dc31454655296b218da20",
+      "artifactBytes": 693139,
+      "artifactSha256": "8285443e5198b8d21e42051ef43c9ab7ea3fdce04af24a4d382c9f603a8efcff",
       "sourceBytes": 5433,
       "sourceSha256": "a92d6597ddbe164f395da32a7d4b33cfae08edd7d9600a6fb45a2058e5bbb43e",
       "checks": [
@@ -1500,8 +1500,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 6,
-      "artifactBytes": 637726,
-      "artifactSha256": "9ef047c4a029fa4649d84a0c299552a5d02f31ac0e3a51b7187b6696f33ed718",
+      "artifactBytes": 682856,
+      "artifactSha256": "c3146f9cdda8df3ce50ec3c45b4e2a3042445a13604e27cf5551336cb896a3ee",
       "sourceBytes": 4417,
       "sourceSha256": "af939579dcafc8b4c49f09594591577994398aee57a57369d4c791dfc0d85a42",
       "checks": [
@@ -1598,8 +1598,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 6,
-      "artifactBytes": 638696,
-      "artifactSha256": "3f13e00c25236bfdb214e8c10659ac2fbc0cb8d5cc6d727ef19207ee4abfdde3",
+      "artifactBytes": 683826,
+      "artifactSha256": "b544137df372a2ffa8f660939c0ee7c39e2fe89140362bd619ab205a156b7217",
       "sourceBytes": 4274,
       "sourceSha256": "735c2c5819266e6ea2a71775b6eefce98b53030ce90cb721dc8e1d022ce5be71",
       "checks": [
@@ -1696,8 +1696,8 @@ <h2 data-en="The gallery cannot drift from the product." data-zh="画廊不会
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 9,
-      "artifactBytes": 637933,
-      "artifactSha256": "b1753910784abc7e37952868051861c2c90d953aeb80342ebb59febdeec87612",
+      "artifactBytes": 683066,
+      "artifactSha256": "4972ff260888f6acfc714b9068af0b35b74088655cb74a6ac86d4c9a9f235962",
       "sourceBytes": 3793,
       "sourceSha256": "483350f5297df682aba4e4a0fa491307ce3d3abd725ae4df07fab177490752cf",
       "checks": [
diff --git a/docs/gallery/artifacts/agent-run.lifecycle.html b/docs/gallery/artifacts/agent-run.lifecycle.html
index 0bb6297..e8371bb 100644
--- a/docs/gallery/artifacts/agent-run.lifecycle.html
+++ b/docs/gallery/artifacts/agent-run.lifecycle.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="lifecycle">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6596,7 +6603,7 @@ <h3>Terminal + Recovery</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6701,6 +6708,698 @@ <h3>Terminal + Recovery</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6718,6 +7417,30 @@ <h3>Terminal + Recovery</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/agent-tool-call.workflow.html b/docs/gallery/artifacts/agent-tool-call.workflow.html
index 4732bcd..a0c7379 100644
--- a/docs/gallery/artifacts/agent-tool-call.workflow.html
+++ b/docs/gallery/artifacts/agent-tool-call.workflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6644,7 +6651,7 @@ <h3>Why It Matters</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6749,6 +6756,698 @@ <h3>Why It Matters</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6766,6 +7465,30 @@ <h3>Why It Matters</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/async-job-roundtrip.sequence.html b/docs/gallery/artifacts/async-job-roundtrip.sequence.html
index 3132ab3..a51ecdf 100644
--- a/docs/gallery/artifacts/async-job-roundtrip.sequence.html
+++ b/docs/gallery/artifacts/async-job-roundtrip.sequence.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="sequence">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -4925,20 +4932,20 @@ <h1>Async Job Roundtrip</h1>
         <path d="M 710 142 L 710 855" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
 
         <!-- Activations -->
-        <rect x="165" y="174" width="10" height="98" rx="3" class="c-mask"/>
-        <rect x="165" y="174" width="10" height="98" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="273" y="216" width="10" height="118" rx="3" class="c-mask"/>
-        <rect x="273" y="216" width="10" height="118" rx="3" class="c-messagebus" stroke-width="1"/>
-        <rect x="381" y="320" width="10" height="254" rx="3" class="c-mask"/>
-        <rect x="381" y="320" width="10" height="254" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="489" y="362" width="10" height="54" rx="3" class="c-mask"/>
-        <rect x="489" y="362" width="10" height="54" rx="3" class="c-cloud" stroke-width="1"/>
-        <rect x="597" y="488" width="10" height="254" rx="3" class="c-mask"/>
-        <rect x="597" y="488" width="10" height="254" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="705" y="560" width="10" height="56" rx="3" class="c-mask"/>
-        <rect x="705" y="560" width="10" height="56" rx="3" class="c-messagebus" stroke-width="1"/>
-        <rect x="165" y="644" width="10" height="140" rx="3" class="c-mask"/>
-        <rect x="165" y="644" width="10" height="140" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="165" y="174" width="10" height="98" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="165" y="174" width="10" height="98" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="queue" x="273" y="216" width="10" height="118" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="queue" x="273" y="216" width="10" height="118" rx="3" class="c-messagebus" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="worker" x="381" y="320" width="10" height="254" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="worker" x="381" y="320" width="10" height="254" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="provider" x="489" y="362" width="10" height="54" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="provider" x="489" y="362" width="10" height="54" rx="3" class="c-cloud" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="store" x="597" y="488" width="10" height="254" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="store" x="597" y="488" width="10" height="254" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="notify" x="705" y="560" width="10" height="56" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="notify" x="705" y="560" width="10" height="56" rx="3" class="c-messagebus" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="165" y="644" width="10" height="140" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="165" y="644" width="10" height="140" rx="3" class="c-backend" stroke-width="1"/>
 
         <!-- Messages -->
         <g data-edge-from="client" data-edge-to="api" data-edge-label="POST /jobs" data-edge-key="0">
@@ -6674,7 +6681,7 @@ <h3>Two Observation Paths</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6779,6 +6786,698 @@ <h3>Two Observation Paths</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6796,6 +7495,30 @@ <h3>Two Observation Paths</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/cache-miss.sequence.html b/docs/gallery/artifacts/cache-miss.sequence.html
index 2582199..94f34d1 100644
--- a/docs/gallery/artifacts/cache-miss.sequence.html
+++ b/docs/gallery/artifacts/cache-miss.sequence.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="sequence">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -4925,18 +4932,18 @@ <h1>Cache Miss Request Sequence</h1>
         <path d="M 710 142 L 710 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
 
         <!-- Activations -->
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
 
         <!-- Messages -->
         <g data-edge-from="user" data-edge-to="web" data-edge-label="open page" data-edge-key="0" data-edge-id="open-page">
@@ -6662,7 +6669,7 @@ <h3>Async Trace</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6767,6 +6774,698 @@ <h3>Async Trace</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6784,6 +7483,30 @@ <h3>Async Trace</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/deployment-release.lifecycle.html b/docs/gallery/artifacts/deployment-release.lifecycle.html
index 4fb1135..7581de1 100644
--- a/docs/gallery/artifacts/deployment-release.lifecycle.html
+++ b/docs/gallery/artifacts/deployment-release.lifecycle.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="lifecycle">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6608,7 +6615,7 @@ <h3>Explicit Endings</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6713,6 +6720,698 @@ <h3>Explicit Endings</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6730,6 +7429,30 @@ <h3>Explicit Endings</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/event-stream.dataflow.html b/docs/gallery/artifacts/event-stream.dataflow.html
index d546949..c92ce46 100644
--- a/docs/gallery/artifacts/event-stream.dataflow.html
+++ b/docs/gallery/artifacts/event-stream.dataflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="dataflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6686,7 +6693,7 @@ <h3>Failure Ownership</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6791,6 +6798,698 @@ <h3>Failure Ownership</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6808,6 +7507,30 @@ <h3>Failure Ownership</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/incident-response.workflow.html b/docs/gallery/artifacts/incident-response.workflow.html
index 613aaee..f598544 100644
--- a/docs/gallery/artifacts/incident-response.workflow.html
+++ b/docs/gallery/artifacts/incident-response.workflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6613,7 +6620,7 @@ <h3>Communication Contract</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6718,6 +6725,698 @@ <h3>Communication Contract</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6735,6 +7434,30 @@ <h3>Communication Contract</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/product-analytics.dataflow.html b/docs/gallery/artifacts/product-analytics.dataflow.html
index 9904584..1810bd2 100644
--- a/docs/gallery/artifacts/product-analytics.dataflow.html
+++ b/docs/gallery/artifacts/product-analytics.dataflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="dataflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6647,7 +6654,7 @@ <h3>Derived Consumers</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6752,6 +6759,698 @@ <h3>Derived Consumers</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6769,6 +7468,30 @@ <h3>Derived Consumers</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/production-deployment.architecture.html b/docs/gallery/artifacts/production-deployment.architecture.html
index 2a3dda2..b1501bd 100644
--- a/docs/gallery/artifacts/production-deployment.architecture.html
+++ b/docs/gallery/artifacts/production-deployment.architecture.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="blueprint">
+<html lang="en" data-theme="dark" data-preset="blueprint" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6661,7 +6668,7 @@ <h3>Operational Evidence</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6766,6 +6773,698 @@ <h3>Operational Evidence</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6783,6 +7482,30 @@ <h3>Operational Evidence</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/release-delivery.workflow.html b/docs/gallery/artifacts/release-delivery.workflow.html
index 01c4ccc..ea50a4d 100644
--- a/docs/gallery/artifacts/release-delivery.workflow.html
+++ b/docs/gallery/artifacts/release-delivery.workflow.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6639,7 +6646,7 @@ <h3>Release Evidence</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6744,6 +6751,698 @@ <h3>Release Evidence</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6761,6 +7460,30 @@ <h3>Release Evidence</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/artifacts/web-app.architecture.html b/docs/gallery/artifacts/web-app.architecture.html
index b454244..d3d6579 100644
--- a/docs/gallery/artifacts/web-app.architecture.html
+++ b/docs/gallery/artifacts/web-app.architecture.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6602,7 +6609,7 @@ <h3>Security</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6707,6 +6714,698 @@ <h3>Security</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6724,6 +7423,30 @@ <h3>Security</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/docs/gallery/manifest.json b/docs/gallery/manifest.json
index 366b54f..1ca1915 100644
--- a/docs/gallery/manifest.json
+++ b/docs/gallery/manifest.json
@@ -27,8 +27,8 @@
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 11,
-      "artifactBytes": 644009,
-      "artifactSha256": "a7a3b2836f7f5795173db40527a9d2df1c53c99ac3a08049617ccef3072629c0",
+      "artifactBytes": 689138,
+      "artifactSha256": "c6e63dda2a337bd81bf5adedaebeb0bbee81cc999eeed06205c92e8b761b2890",
       "sourceBytes": 6367,
       "sourceSha256": "9c94c8c0b2104478b77befb4cc5e343d381acba6e66645ab17616fde20b60e05",
       "checks": [
@@ -125,8 +125,8 @@
       "engineeringProfile": "deployment-ownership",
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 646602,
-      "artifactSha256": "c41965605d4b7157c8a080aa52cf7d1075d96bdcae3cbbd2f82a6974bc5160cc",
+      "artifactBytes": 691735,
+      "artifactSha256": "300f90aae568b4fd4bd8e3113065a64333edc413e2969747a3ff7e93b09caee9",
       "sourceBytes": 5454,
       "sourceSha256": "738e9c7f22e4e6e88f5aafc087dc58409105927daa9a79aaf240c8393654494f",
       "checks": [
@@ -223,8 +223,8 @@
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 12,
-      "artifactBytes": 640506,
-      "artifactSha256": "738d651b8c3f3ff8b5b5298834cbd8b7acda5f46a456c5be031647cbc6eb2216",
+      "artifactBytes": 686399,
+      "artifactSha256": "ac0937105ee8a8e1f2dd48350f8a5514b7ba887f1a63b172f997638f9998b72b",
       "sourceBytes": 4345,
       "sourceSha256": "4bbaa6ca3cd4036002fd5d0f3a332eb922cec69d09bac3d7925f95beb4308389",
       "checks": [
@@ -321,8 +321,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 642833,
-      "artifactSha256": "9380260f7e27c0051d62c0fa31629f27c1f75b9470709e14226665bc97174436",
+      "artifactBytes": 687962,
+      "artifactSha256": "b961828879772f67e54ebf45544dae271f6283ae994e1097aaa0a07b24dfc387",
       "sourceBytes": 5164,
       "sourceSha256": "e5c880417eac1623923c3dd5461e0c78acd762e1621a28bd53fc14a84cad6a91",
       "checks": [
@@ -419,8 +419,8 @@
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 10,
-      "artifactBytes": 640146,
-      "artifactSha256": "8897a1e52ef56907790854d52abd15230b58f29319aac3ab0004938396cfb74a",
+      "artifactBytes": 685275,
+      "artifactSha256": "36ffca62fe43910bf93e92ca709daae5bf9b92c7b7328c9a75db109d785565bd",
       "sourceBytes": 5375,
       "sourceSha256": "5c760c82eee545dfb7da38a4e628059d7891af4cfbfc13c8a7009ea64f69aa1b",
       "checks": [
@@ -517,8 +517,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 10,
-      "artifactBytes": 644091,
-      "artifactSha256": "3c30dd770f181415c11ec0b0526d86991af2177fb790182ecb7bf47d0c798cd7",
+      "artifactBytes": 689220,
+      "artifactSha256": "3f3912ab833f561a6cf93b9d65cdb4027fee6d5fa78fd9c7fd31ace5630c2ad5",
       "sourceBytes": 5627,
       "sourceSha256": "6fa38a7ccedf96da592d60b392783b846188eaa3ec9136c6dc06ca020e43a110",
       "checks": [
@@ -615,8 +615,8 @@
       "engineeringProfile": null,
       "nodeCount": 7,
       "edgeCount": 14,
-      "artifactBytes": 640916,
-      "artifactSha256": "48d171db0c78bd06a4c404d9a8d4d461d458445002acc1bb50ae518f9f416fb5",
+      "artifactBytes": 686957,
+      "artifactSha256": "ffcde32b6b5199d82f9c251735dea6cab81c26572661e4dff7c0a74a3db3de30",
       "sourceBytes": 4370,
       "sourceSha256": "545f20920c89b69c2bb1f15508d5543fddbeb15cffba61e102206e04bd5a5cd9",
       "checks": [
@@ -713,8 +713,8 @@
       "engineeringProfile": null,
       "nodeCount": 12,
       "edgeCount": 12,
-      "artifactBytes": 648010,
-      "artifactSha256": "f4f58688101dc5fbcc918f2208daf99d44755876c41dc31454655296b218da20",
+      "artifactBytes": 693139,
+      "artifactSha256": "8285443e5198b8d21e42051ef43c9ab7ea3fdce04af24a4d382c9f603a8efcff",
       "sourceBytes": 5433,
       "sourceSha256": "a92d6597ddbe164f395da32a7d4b33cfae08edd7d9600a6fb45a2058e5bbb43e",
       "checks": [
@@ -811,8 +811,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 6,
-      "artifactBytes": 637726,
-      "artifactSha256": "9ef047c4a029fa4649d84a0c299552a5d02f31ac0e3a51b7187b6696f33ed718",
+      "artifactBytes": 682856,
+      "artifactSha256": "c3146f9cdda8df3ce50ec3c45b4e2a3042445a13604e27cf5551336cb896a3ee",
       "sourceBytes": 4417,
       "sourceSha256": "af939579dcafc8b4c49f09594591577994398aee57a57369d4c791dfc0d85a42",
       "checks": [
@@ -909,8 +909,8 @@
       "engineeringProfile": null,
       "nodeCount": 11,
       "edgeCount": 6,
-      "artifactBytes": 638696,
-      "artifactSha256": "3f13e00c25236bfdb214e8c10659ac2fbc0cb8d5cc6d727ef19207ee4abfdde3",
+      "artifactBytes": 683826,
+      "artifactSha256": "b544137df372a2ffa8f660939c0ee7c39e2fe89140362bd619ab205a156b7217",
       "sourceBytes": 4274,
       "sourceSha256": "735c2c5819266e6ea2a71775b6eefce98b53030ce90cb721dc8e1d022ce5be71",
       "checks": [
@@ -1007,8 +1007,8 @@
       "engineeringProfile": null,
       "nodeCount": 10,
       "edgeCount": 9,
-      "artifactBytes": 637933,
-      "artifactSha256": "b1753910784abc7e37952868051861c2c90d953aeb80342ebb59febdeec87612",
+      "artifactBytes": 683066,
+      "artifactSha256": "4972ff260888f6acfc714b9068af0b35b74088655cb74a6ac86d4c9a9f235962",
       "sourceBytes": 3793,
       "sourceSha256": "483350f5297df682aba4e4a0fa491307ce3d3abd725ae4df07fab177490752cf",
       "checks": [
diff --git a/examples/archify-repo-grid-strict.drawio b/examples/archify-repo-grid-strict.drawio
new file mode 100644
index 0000000..6c69692
--- /dev/null
+++ b/examples/archify-repo-grid-strict.drawio
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1064" dy="356" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1064" pageHeight="356" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="archify/ skill package" style="rounded=1;absoluteArcSize=1;arcSize=12;fillColor=#f8f7f1;strokeColor=#d97706;strokeWidth=1;dashed=1;dashPattern=8 4;fontColor=#d97706;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="298" y="70" width="612" height="218" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;NL / Mermaid&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agents" value="&lt;b&gt;Agent Hosts&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Claude · Codex&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="184" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-skill" value="&lt;b&gt;SKILL.md&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;layout rules&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="184" y="100" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ir" value="&lt;b&gt;JSON IR&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;schema v1&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-schemas" value="&lt;b&gt;Schema&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;ajv&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="30" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-renderers" value="Renderers ×5" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="174" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-template" value="template.html" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="318" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checker" value="Output Check" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="462" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-html" value="&lt;b&gt;HTML&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;artifact&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="904" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-agents">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agents" target="node-skill">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agents" target="node-ir">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-ir" target="node-schemas">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-ir" target="node-renderers">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-renderers" target="node-template">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-template" target="node-checker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-checker" target="node-html">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/archify-repo-grid.drawio b/examples/archify-repo-grid.drawio
new file mode 100644
index 0000000..9f68c06
--- /dev/null
+++ b/examples/archify-repo-grid.drawio
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1064" dy="356" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1064" pageHeight="356" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="archify/ skill package" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="298" y="70" width="612" height="218" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;NL / Mermaid&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="40" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agents" value="&lt;b&gt;Agent Hosts&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Claude · Codex&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="184" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-skill" value="&lt;b&gt;SKILL.md&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;layout rules&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="184" y="100" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ir" value="&lt;b&gt;JSON IR&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;schema v1&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-schemas" value="&lt;b&gt;Schema&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;ajv&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="30" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-renderers" value="Renderers ×5" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="174" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-template" value="template.html" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="318" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checker" value="Output Check" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-0">
+      <mxGeometry x="462" y="138" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-html" value="&lt;b&gt;HTML&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;artifact&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+      <mxGeometry x="904" y="208" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-agents">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agents" target="node-skill">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agents" target="node-ir">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-ir" target="node-schemas">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-ir" target="node-renderers">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-renderers" target="node-template">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-template" target="node-checker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-checker" target="node-html">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/archify-repo-grid.html b/examples/archify-repo-grid.html
index fcacfe4..c96d0ff 100644
--- a/examples/archify-repo-grid.html
+++ b/examples/archify-repo-grid.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6550,7 +6557,7 @@ <h3>Grid mode</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6655,6 +6662,698 @@ <h3>Grid mode</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6672,6 +7371,30 @@ <h3>Grid mode</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/archify-repo-strict.drawio b/examples/archify-repo-strict.drawio
new file mode 100644
index 0000000..6279d3a
--- /dev/null
+++ b/examples/archify-repo-strict.drawio
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1340" dy="568" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1340" pageHeight="568" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="archify/ skill package" style="rounded=1;absoluteArcSize=1;arcSize=12;fillColor=#f8f7f1;strokeColor=#d97706;strokeWidth=1;dashed=1;dashPattern=8 4;fontColor=#d97706;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="370" y="110" width="770" height="270" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;NL or Mermaid&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agents" value="&lt;b&gt;Agent Hosts&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Claude · Codex · opencode&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="200" y="300" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-skill" value="&lt;b&gt;SKILL.md&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;layout judgment&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;prompt dialect&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="200" y="140" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ir" value="&lt;b&gt;JSON IR&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;schema_version: 1&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-schemas" value="&lt;b&gt;JSON Schema&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;ajv strict&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;fail-closed&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="30" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-renderers" value="&lt;b&gt;Renderers ×5&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;layout checks&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;no auto-layout&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="220" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-template" value="&lt;b&gt;template.html&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;theme + export&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="410" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checker" value="&lt;b&gt;Output Check&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;SVG gates&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="600" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-html" value="&lt;b&gt;HTML Artifact&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;single file&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="1160" y="300" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-zip" value="&lt;b&gt;archify.zip&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;skill package&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="1160" y="140" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ci" value="&lt;b&gt;CI Gates&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;golden + zip&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="590" y="440" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-agents">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agents" target="node-skill">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="write IR" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agents" target="node-ir">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-ir" target="node-schemas">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-ir" target="node-renderers">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-renderers" target="node-template">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-template" target="node-checker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="deliver" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-checker" target="node-html">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-renderers" target="node-ci">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-html" target="node-zip">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/archify-repo.drawio b/examples/archify-repo.drawio
new file mode 100644
index 0000000..79ebfb8
--- /dev/null
+++ b/examples/archify-repo.drawio
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1340" dy="568" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1340" pageHeight="568" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="archify/ skill package" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="370" y="110" width="770" height="270" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;NL or Mermaid&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agents" value="&lt;b&gt;Agent Hosts&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Claude · Codex · opencode&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="200" y="300" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-skill" value="&lt;b&gt;SKILL.md&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;layout judgment · prompt dialect&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="200" y="140" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ir" value="&lt;b&gt;JSON IR&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;schema_version: 1&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-schemas" value="&lt;b&gt;JSON Schema&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;ajv strict · fail-closed&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="30" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-renderers" value="&lt;b&gt;Renderers ×5&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;layout checks · no auto-layout&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="220" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-template" value="&lt;b&gt;template.html&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;theme + export&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="410" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checker" value="&lt;b&gt;Output Check&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;SVG gates&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-0">
+      <mxGeometry x="600" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-html" value="&lt;b&gt;HTML Artifact&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;single file&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+      <mxGeometry x="1160" y="300" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-zip" value="&lt;b&gt;archify.zip&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;skill package&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+      <mxGeometry x="1160" y="140" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ci" value="&lt;b&gt;CI Gates&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;golden + zip&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+      <mxGeometry x="590" y="440" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-agents">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agents" target="node-skill">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="write IR" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agents" target="node-ir">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-ir" target="node-schemas">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-ir" target="node-renderers">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-renderers" target="node-template">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-template" target="node-checker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="deliver" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-checker" target="node-html">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-renderers" target="node-ci">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-html" target="node-zip">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/archify-repo.html b/examples/archify-repo.html
index e53437e..78b2199 100644
--- a/examples/archify-repo.html
+++ b/examples/archify-repo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6612,7 +6619,7 @@ <h3>Quality gates</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6717,6 +6724,698 @@ <h3>Quality gates</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6734,6 +7433,30 @@ <h3>Quality gates</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/architecture-strict.drawio b/examples/architecture-strict.drawio
new file mode 100644
index 0000000..10b9c6a
--- /dev/null
+++ b/examples/architecture-strict.drawio
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="588" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="588" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="AWS Region: us-west-2" style="rounded=1;absoluteArcSize=1;arcSize=12;fillColor=#f8f7f1;strokeColor=#d97706;strokeWidth=1;dashed=1;dashPattern=8 4;fontColor=#d97706;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="220" y="120" width="820" height="400" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="sg-api :443/:8000" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="430" y="270" width="400" height="110" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-users" value="&lt;b&gt;Users&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Browser / Mobile&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth Provider&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;OAuth 2.0&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;JWT + PKCE&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="110" width="120" height="64" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cdn" value="&lt;b&gt;CloudFront&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;CDN&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-lb" value="&lt;b&gt;Load Balancer&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;HTTPS :443&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API Server&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;FastAPI :8000&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="240" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cache" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;cache :6379&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;PostgreSQL&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;primary :5432&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-s3" value="&lt;b&gt;S3&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;static assets&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;OAI protected&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-queue" value="&lt;b&gt;SQS&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;job queue&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-worker" value="&lt;b&gt;Worker&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;async jobs&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-users-to-cdn" value="HTTPS" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-users" target="node-cdn">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-jwt-verification" value="verify JWT" style="edgeStyle=none;rounded=1;arcSize=16;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.359" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="620" y="142"/>
+          <mxPoint x="620" y="246"/>
+          <mxPoint x="735" y="246"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cdn-to-lb" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-cdn" target="node-lb">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-static-assets" value="static" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-cdn" target="node-s3">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.100" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-lb-to-api" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-lb" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read-through" value="read-through" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-cache">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.822" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-api-sql" value="SQL" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-enqueue-job" value="enqueue" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-queue">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.100" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-queue-to-worker" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-queue" target="node-worker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/architecture.drawio b/examples/architecture.drawio
new file mode 100644
index 0000000..2daac24
--- /dev/null
+++ b/examples/architecture.drawio
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="588" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="588" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="AWS Region: us-west-2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="220" y="120" width="820" height="400" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="sg-api :443/:8000" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="430" y="270" width="400" height="110" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-users" value="&lt;b&gt;Users&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Browser / Mobile&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth Provider&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;OAuth 2.0 · JWT + PKCE&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+      <mxGeometry x="40" y="110" width="120" height="64" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cdn" value="&lt;b&gt;CloudFront&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;CDN&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-lb" value="&lt;b&gt;Load Balancer&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;HTTPS :443&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API Server&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;FastAPI :8000&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-1">
+      <mxGeometry x="240" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cache" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;cache :6379&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;PostgreSQL&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;primary :5432&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-s3" value="&lt;b&gt;S3&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;static assets · OAI protected&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-queue" value="&lt;b&gt;SQS&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;job queue&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-worker" value="&lt;b&gt;Worker&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;async jobs&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-users-to-cdn" value="HTTPS" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-users" target="node-cdn">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-jwt-verification" value="verify JWT" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="620" y="142"/>
+          <mxPoint x="620" y="246"/>
+          <mxPoint x="735" y="246"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cdn-to-lb" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-cdn" target="node-lb">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-static-assets" value="static" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-cdn" target="node-s3">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-lb-to-api" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-lb" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read-through" value="read-through" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-cache">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-api-sql" value="SQL" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-enqueue-job" value="enqueue" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-queue">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-queue-to-worker" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-queue" target="node-worker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/checkout-platform-delta.html b/examples/checkout-platform-delta.html
index 7c9820a..1e0e75e 100644
--- a/examples/checkout-platform-delta.html
+++ b/examples/checkout-platform-delta.html
@@ -3387,6 +3387,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4709,7 +4714,7 @@
 <div class="proof-tools"><div class="view-switch" role="tablist" aria-label="Architecture snapshot"><button role="tab" data-target="base" aria-selected="false">Before</button><button role="tab" data-target="delta" aria-selected="true">Delta</button><button role="tab" data-target="head" aria-selected="false">After</button></div><div class="legend"><span class="add"><i></i>+ ADD</span><span class="remove"><i></i>− DEL</span><span class="change"><i></i>~ MOD</span><span class="move"><i></i>↔ MOVE</span></div><div><button class="utility" id="export-svg" type="button">Export SVG</button> <button class="utility" id="share-card" type="button">Share Card</button> <button class="utility" id="preset" type="button">Preset</button> <button class="utility" id="theme" type="button">Theme</button></div></div>
 <nav class="review-strip" aria-label="Authored change review"><button class="review-step" id="review-overview" type="button" disabled>Overview</button><button class="review-step" id="review-previous" type="button" aria-label="Previous authored change" disabled>←</button><button class="review-step" id="review-play" type="button" aria-pressed="false">Review</button><button class="review-step" id="review-next" type="button" aria-label="Next authored change" disabled>→</button><div class="review-status" id="review-status" role="status" aria-live="polite">Overview · 11 authored changes</div></nav>
 <section class="canvas" data-view="base" hidden><iframe class="snapshot-frame" title="Before architecture explorer" srcdoc="&lt;!DOCTYPE html&gt;
-&lt;html lang=&quot;en&quot; data-theme=&quot;dark&quot; data-preset=&quot;signal-flow&quot;&gt;
+&lt;html lang=&quot;en&quot; data-theme=&quot;dark&quot; data-preset=&quot;signal-flow&quot; data-diagram-type=&quot;architecture&quot;&gt;
 &lt;head&gt;
   &lt;meta charset=&quot;UTF-8&quot;&gt;
   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
@@ -8134,6 +8139,11 @@
       -webkit-mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Cpath d=&#39;M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
       mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Cpath d=&#39;M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
     }
+    .toolbar .export-menu button[data-format=&quot;drawio&quot;]::before,
+    .toolbar .export-menu button[data-format=&quot;drawio-strict&quot;]::before {
+      -webkit-mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Crect x=&#39;2.5&#39; y=&#39;2.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Crect x=&#39;11.5&#39; y=&#39;12.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Cpath d=&#39;M8.5 5h6v7.5&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
+      mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Crect x=&#39;2.5&#39; y=&#39;2.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Crect x=&#39;11.5&#39; y=&#39;12.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Cpath d=&#39;M8.5 5h6v7.5&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
+    }
     .toolbar .export-menu button[data-format=&quot;share-card&quot;],
     .toolbar .export-menu button[data-action=&quot;route-share-card&quot;],
     .toolbar .export-menu button[data-action=&quot;reach-share-card&quot;] {
@@ -9535,6 +9545,8 @@
         &lt;div class=&quot;export-menu-section&quot; role=&quot;group&quot; aria-label=&quot;Vector and motion&quot;&gt;
           &lt;span class=&quot;export-menu-heading&quot; aria-hidden=&quot;true&quot;&gt;Vector &amp;amp; motion&lt;/span&gt;
           &lt;button data-format=&quot;svg&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;SVG&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Editable vector&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
+          &lt;button data-format=&quot;drawio&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;draw.io&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Editable diagram&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
+          &lt;button data-format=&quot;drawio-strict&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;draw.io strict&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Exact shapes &amp;amp; colors&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
           &lt;button data-format=&quot;webm&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;WebM&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;6s motion&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
@@ -11245,7 +11257,7 @@
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === &#39;share-card&#39;) return true;
-        if (format === &#39;svg&#39; || format === &#39;png&#39;) return true;
+        if (format === &#39;svg&#39; || format === &#39;png&#39; || format === &#39;drawio&#39; || format === &#39;drawio-strict&#39;) return true;
         if (format === &#39;webm&#39;) return canRecordMotion();
         var mime = format === &#39;jpeg&#39; ? &#39;image/jpeg&#39; : &#39;image/webp&#39;;
         try {
@@ -11350,6 +11362,698 @@
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;&#39;,
+        backend: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;&#39;,
+        database: &#39;shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;&#39;,
+        cloud: &#39;ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;&#39;,
+        security: &#39;shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;&#39;,
+        messagebus: &#39;shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;&#39;,
+        external: &#39;shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;&#39;
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: &#39;ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;&#39;,
+        active: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;&#39;,
+        waiting: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;&#39;,
+        decision: &#39;rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;&#39;,
+        success: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;&#39;,
+        failure: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;&#39;,
+        neutral: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;&#39;,
+        external: &#39;shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;&#39;
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;&#39;,
+        &#39;security-group&#39;: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;&#39;,
+        lane: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;&#39;,
+        &#39;exception-lane&#39;: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;&#39;,
+        stage: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;&#39;,
+        group: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;&#39;,
+        segment: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;&#39;
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? &#39;&#39; : v).replace(/[&amp;&quot;&lt;&gt;&#39;]/g, function (ch) {
+          return ch === &#39;&amp;&#39; ? &#39;&amp;amp;&#39; : ch === &#39;&quot;&#39; ? &#39;&amp;quot;&#39; : ch === &#39;&lt;&#39; ? &#39;&amp;lt;&#39; : ch === &#39;&gt;&#39; ? &#39;&amp;gt;&#39; : &#39;&amp;#39;&#39;;
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp(&#39;\\s&#39; + name + &#39;=&quot;([^&quot;]*)&quot;&#39;));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+          var c = pair.split(&#39;,&#39;).map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth &gt; 0 &amp;&amp; i &lt; svg.length) {
+          var no = svg.indexOf(&#39;&lt;g&#39;, i + 1), nc = svg.indexOf(&#39;&lt;/g&gt;&#39;, i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 &amp;&amp; no &lt; nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp(&#39;&lt;&#39; + &#39;svg[^&gt;]*\\bviewBox=&quot;0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)&quot;&#39;));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: &lt;g id=&quot;node-...&quot; data-node-id=...&gt; with first inner &lt;rect&gt;.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/&lt;g\s+id=&quot;node-[^&quot;]*&quot;[^&gt;]*\bdata-node-id=&quot;([^&quot;]*)&quot;[^&gt;]*&gt;/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/&lt;rect\b[^&gt;]*&gt;/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, &#39;data-node-kind&#39;) || &#39;backend&#39;,
+            label: drawioAttr(open, &#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: drawioAttr(open, &#39;data-node-sublabel&#39;),
+            tag: drawioAttr(open, &#39;data-node-tag&#39;),
+            x: parseFloat(drawioAttr(box, &#39;x&#39;) || &#39;0&#39;),
+            y: parseFloat(drawioAttr(box, &#39;y&#39;) || &#39;0&#39;),
+            width: parseFloat(drawioAttr(box, &#39;width&#39;) || &#39;0&#39;),
+            height: parseFloat(drawioAttr(box, &#39;height&#39;) || &#39;0&#39;)
+          });
+        });
+        // Edges: &lt;path&gt; with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/&lt;path\b[^&gt;]*\bdata-composition-points=&quot;([^&quot;]*)&quot;[^&gt;]*&gt;/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length &lt; 2) return;
+          var from = drawioAttr(tag, &#39;data-edge-from&#39;) || drawioAttr(tag, &#39;data-composition-edge-from&#39;);
+          var to = drawioAttr(tag, &#39;data-edge-to&#39;) || drawioAttr(tag, &#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, &#39;data-edge-label&#39;) || drawioAttr(tag, &#39;data-composition-edge-label&#39;),
+            id: drawioAttr(tag, &#39;data-edge-id&#39;) || drawioAttr(tag, &#39;data-composition-edge-id&#39;),
+            points: points
+          });
+        });
+        // Boundaries: &lt;rect data-graph-role=&quot;structural-frame&quot;&gt;.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/&lt;rect\b[^&gt;]*\bdata-graph-role=&quot;structural-frame&quot;[^&gt;]*&gt;/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, &#39;width&#39;) || &#39;0&#39;);
+          var h = parseFloat(drawioAttr(tag, &#39;height&#39;) || &#39;0&#39;);
+          if (w &lt;= 0 || h &lt;= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/&lt;text\b[^&gt;]*&gt;([^&lt;]*)&lt;\/text&gt;/);
+          boundaries.push({
+            kind: drawioAttr(tag, &#39;data-composition-frame-kind&#39;) || &#39;boundary&#39;,
+            label: tm ? tm[1].trim() : &#39;&#39;,
+            x: parseFloat(drawioAttr(tag, &#39;x&#39;) || &#39;0&#39;),
+            y: parseFloat(drawioAttr(tag, &#39;y&#39;) || &#39;0&#39;),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/&lt;path\b[^&gt;]*\bd=&quot;M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)&quot;[^&gt;]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) || &#39;&#39;;
+        if (diagramType === &#39;lifecycle&#39; &amp;&amp; DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary&#39;s origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: &#39;boundary-&#39; + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i &lt; sorted.length; i++) {
+            var b = sorted[i];
+            if (cx &gt;= b.x &amp;&amp; cx &lt;= b.x + b.width &amp;&amp; cy &gt;= b.y &amp;&amp; cy &lt;= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        lines.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + Math.round(vw) + &#39;&quot; dy=&quot;&#39; + Math.round(vh) + &#39;&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + Math.round(vw) + &#39;&quot; pageHeight=&quot;&#39; + Math.round(vh) + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#39;);
+        lines.push(&#39;  &lt;root&gt;&#39;);
+        lines.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        lines.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(b.label || b.kind) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(b.x) + &#39;&quot; y=&quot;&#39; + Math.round(b.y) + &#39;&quot; width=&quot;&#39; + Math.round(b.width) + &#39;&quot; height=&quot;&#39; + Math.round(b.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : &#39;1&#39;;
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length &gt; 1
+            ? &#39;&lt;b&gt;&#39; + parts[0] + &#39;&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;&#39; + parts.slice(1).join(&#39; · &#39;) + &#39;&lt;/font&gt;&#39;
+            : n.label;
+          lines.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(htmlVal) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;&#39; + parentId + &#39;&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(relX) + &#39;&quot; y=&quot;&#39; + Math.round(relY) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(n.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = &#39;lifeline-&#39; + Math.round(ll.x) + &#39;-&#39; + Math.round(ll.y1);
+          lines.push(&#39;    &lt;mxCell id=&quot;&#39; + id + &#39;&quot; value=&quot;&quot; style=&quot;endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;&quot; edge=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          lines.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y1) + &#39;&quot; as=&quot;sourcePoint&quot;/&gt;&#39;);
+          lines.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y2) + &#39;&quot; as=&quot;targetPoint&quot;/&gt;&#39;);
+          lines.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? &#39;edge-&#39; + edge.id : &#39;edge-&#39; + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : &#39;&#39;;
+          lines.push(&#39;    &lt;mxCell id=&quot;&#39; + id + &#39;&quot; value=&quot;&#39; + value + &#39;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + edge.from + &#39;&quot; target=&quot;node-&#39; + edge.to + &#39;&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length &gt; 2) {
+            lines.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; edge.points.length - 1; p++) {
+              lines.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(edge.points[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(edge.points[p][1]) + &#39;&quot;/&gt;&#39;);
+            }
+            lines.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          lines.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        lines.push(&#39;  &lt;/root&gt;&#39;);
+        lines.push(&#39;&lt;/mxGraphModel&gt;&#39;);
+        return lines.join(&#39;\n&#39;);
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact&#39;s LIGHT theme, so the exported file never depends on the
+      // reader&#39;s current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || &#39;&#39;).trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split(&#39;&#39;).map(function (c) { return c + c; }).join(&#39;&#39;) : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length &lt; 2 ? &#39;0&#39; + s : s; };
+        return &#39;#&#39; + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a &gt;= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || &#39;&#39;).match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader&#39;s theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute(&#39;data-theme&#39;);
+        root.setAttribute(&#39;data-theme&#39;, &#39;light&#39;);
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute(&#39;data-theme&#39;);
+          else root.setAttribute(&#39;data-theme&#39;, prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue(&#39;--mask&#39;).trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue(&#39;--bg&#39;).trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue(&#39;--text&#39;).trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue(&#39;--text-muted&#39;).trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === &#39;mask&#39; ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash &amp;&amp; dash !== &#39;none&#39;) {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n &gt; 0; });
+              if (parts.length) out.dash = parts.join(&#39; &#39;);
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector(&#39;.diagram-container svg&#39;);
+        if (!svgEl) throw new Error(&#39;No diagram SVG found.&#39;);
+        var P = drawioStrictPalette(svgEl);
+        var FONT = &#39;JetBrains Mono,ui-monospace,Menlo,monospace&#39;;
+        var vb = (svgEl.getAttribute(&#39;viewBox&#39;) || &#39;0 0 1000 700&#39;).split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll(&#39;g[id^=&quot;node-&quot;]&#39;).forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll(&#39;rect&#39;).forEach(function (r) {
+            var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+            if (!fillRect &amp;&amp; cls.indexOf(&#39;c-&#39;) === 0 &amp;&amp; cls !== &#39;c-mask&#39;) fillRect = r;
+            else if (fillRect &amp;&amp; cls !== &#39;c-mask&#39; &amp;&amp; +r.getAttribute(&#39;width&#39;) &gt; +fillRect.getAttribute(&#39;width&#39;)) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector(&#39;rect&#39;);
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute(&#39;data-node-id&#39;),
+            label: g.getAttribute(&#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: g.getAttribute(&#39;data-node-sublabel&#39;),
+            tag: g.getAttribute(&#39;data-node-tag&#39;),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute(&#39;rx&#39;) : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute(&#39;stroke-width&#39;) : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;structural-frame&quot;]&#39;).forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute(&#39;data-composition-frame-kind&#39;) || &#39;boundary&#39;,
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first &lt;text&gt; sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t &amp;&amp; t.tagName.toLowerCase() === &#39;text&#39;) b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll(&#39;path[data-composition-points]&#39;).forEach(function (p) {
+          var from = p.getAttribute(&#39;data-edge-from&#39;) || p.getAttribute(&#39;data-composition-edge-from&#39;);
+          var to = p.getAttribute(&#39;data-edge-to&#39;) || p.getAttribute(&#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          var pts = (p.getAttribute(&#39;data-composition-points&#39;) || &#39;&#39;).split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+            var c = pair.split(&#39;,&#39;);
+            return [+c[0], +c[1]];
+          });
+          if (pts.length &lt; 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute(&#39;data-edge-label&#39;) || p.getAttribute(&#39;data-composition-edge-label&#39;),
+            el: p, pts: pts,
+            sw: +p.getAttribute(&#39;stroke-width&#39;) || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute(&#39;d&#39;))
+          });
+        });
+        // -- edge labels (positioned &lt;text&gt; in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll(&#39;g[data-detail=&quot;context&quot;][data-edge-from]&#39;).forEach(function (g) {
+          var t = g.querySelector(&#39;text&#39;);
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute(&#39;data-edge-from&#39;), to: g.getAttribute(&#39;data-edge-to&#39;),
+            x: +t.getAttribute(&#39;x&#39;), y: +t.getAttribute(&#39;y&#39;) - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll(&#39;path&#39;).forEach(function (p) {
+          if (p.hasAttribute(&#39;data-composition-points&#39;)) return;
+          var d = p.getAttribute(&#39;d&#39;) || &#39;&#39;;
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === &#39;none&#39;) return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute(&#39;stroke-width&#39;) || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: &#39;boundary-&#39; + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i &lt; sorted.length; i++) {
+              var b = sorted[i];
+              if (cx &gt;= b.x &amp;&amp; cx &lt;= b.x + b.width &amp;&amp; cy &gt;= b.y &amp;&amp; cy &lt;= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i &lt; pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist &lt; best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v &lt; 0.04 ? 0 : v &gt; 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        L.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + vw + &#39;&quot; dy=&quot;&#39; + vh + &#39;&quot; grid=&quot;0&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + vw + &#39;&quot; pageHeight=&quot;&#39; + vh + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot; background=&quot;&#39; + P.bg + &#39;&quot;&gt;&#39;);
+        L.push(&#39;  &lt;root&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, &#39;bg&#39;);
+          var tc = b.textEl ? P.of(b.textEl, &#39;bg&#39;) : null;
+          var left = b.kind === &#39;lane&#39; || b.kind === &#39;exception-lane&#39; || b.kind === &#39;segment&#39;;
+          var style = [&#39;rounded=&#39; + (b.rx &gt; 0 ? 1 : 0), b.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(b.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c.fill || &#39;none&#39;), &#39;strokeColor=&#39; + (c.stroke || &#39;#666666&#39;), &#39;strokeWidth=&#39; + b.sw,
+            c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;fontColor=&#39; + (tc &amp;&amp; tc.fill ? tc.fill : P.textMuted), &#39;fontSize=9&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=top&#39;, left ? &#39;align=left;spacingLeft=8&#39; : &#39;&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(b.x) + &#39;&quot; y=&quot;&#39; + Math.round(b.y) + &#39;&quot; width=&quot;&#39; + Math.round(b.width) + &#39;&quot; height=&quot;&#39; + Math.round(b.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, &#39;mask&#39;);
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = &#39;&lt;b&gt;&#39; + n.label + &#39;&lt;/b&gt;&lt;br/&gt;&#39;
+              + (n.sublabel ? &#39;&lt;font style=&quot;font-size:8px&quot; color=&quot;&#39; + P.textMuted + &#39;&quot;&gt;&#39; + n.sublabel + &#39;&lt;/font&gt;&#39; : &#39;&#39;)
+              + (n.sublabel &amp;&amp; n.tag ? &#39;&lt;br/&gt;&#39; : &#39;&#39;)
+              + (n.tag ? &#39;&lt;font style=&quot;font-size:7px&quot; color=&quot;&#39; + (c.stroke || P.text) + &#39;&quot;&gt;&#39; + n.tag + &#39;&lt;/font&gt;&#39; : &#39;&#39;);
+          }
+          var style = [&#39;rounded=&#39; + (n.rx &gt; 0 ? 1 : 0), n.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(n.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c.fill || &#39;#d5e8d4&#39;), &#39;strokeColor=&#39; + (c.stroke || &#39;#82b366&#39;), &#39;strokeWidth=&#39; + n.sw,
+            &#39;fontColor=&#39; + P.text, &#39;fontSize=11&#39;, &#39;fontFamily=&#39; + FONT, &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=middle&#39;]
+            .filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(html) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;&#39; + (p ? p.id : &#39;1&#39;) + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(relX) + &#39;&quot; y=&quot;&#39; + Math.round(relY) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(n.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, &#39;bg&#39;);
+          L.push(&#39;    &lt;mxCell id=&quot;lifeline-&#39; + i + &#39;&quot; value=&quot;&quot; style=&quot;endArrow=none;html=1;strokeColor=&#39; + (c.stroke || &#39;#999999&#39;) + &#39;;strokeWidth=&#39; + ll.sw + &#39;;dashed=1;dashPattern=3 7;&quot; edge=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          L.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y1) + &#39;&quot; as=&quot;sourcePoint&quot;/&gt;&#39;);
+          L.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y2) + &#39;&quot; as=&quot;targetPoint&quot;/&gt;&#39;);
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, &#39;bg&#39;);
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from &amp;&amp; l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, &#39;bg&#39;) : null;
+          var style = [&#39;edgeStyle=none&#39;, e.radius &gt; 0 ? &#39;rounded=1;arcSize=&#39; + e.radius * 2 : &#39;rounded=0&#39;,
+            &#39;strokeColor=&#39; + (c.stroke || &#39;#666666&#39;), &#39;strokeWidth=&#39; + e.sw,
+            c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;endArrow=block&#39;, &#39;endFill=1&#39;, &#39;endSize=&#39; + Math.max(4, Math.round(10 * e.sw)),
+            &#39;fontColor=&#39; + (lc &amp;&amp; lc.fill ? lc.fill : P.textMuted), &#39;fontSize=8&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;labelBackgroundColor=&#39; + P.mask, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;);
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += &#39;;exitX=&#39; + exit[0] + &#39;;exitY=&#39; + exit[1] + &#39;;exitDx=0;exitDy=0&#39;;
+          if (entry) style += &#39;;entryX=&#39; + entry[0] + &#39;;entryY=&#39; + entry[1] + &#39;;entryDx=0;entryDy=0&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;edge-&#39; + i + &#39;&quot; value=&quot;&#39; + (e.label ? drawioEscapeAttr(e.label) : &#39;&#39;) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + e.from + &#39;&quot; target=&quot;node-&#39; + e.to + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          if (lbl &amp;&amp; e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push(&#39;        &lt;mxGeometry x=&quot;&#39; + (2 * t - 1).toFixed(3) + &#39;&quot; y=&quot;0&quot; relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          }
+          if (e.pts.length &gt; 2) {
+            L.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; e.pts.length - 1; p++) L.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(e.pts[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(e.pts[p][1]) + &#39;&quot;/&gt;&#39;);
+            L.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        L.push(&#39;  &lt;/root&gt;&#39;);
+        L.push(&#39;&lt;/&#39; + &#39;mxGraphModel&gt;&#39;);
+        return L.join(&#39;\n&#39;);
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message&#39;s authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector(&#39;.diagram-container svg&#39;);
+        if (!svgEl) throw new Error(&#39;No diagram SVG found.&#39;);
+        var P = drawioStrictPalette(svgEl);
+        var FONT = &#39;JetBrains Mono,ui-monospace,Menlo,monospace&#39;;
+        var vb = (svgEl.getAttribute(&#39;viewBox&#39;) || &#39;0 0 1000 700&#39;).split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll(&#39;g[id^=&quot;node-&quot;]&#39;).forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll(&#39;rect&#39;).forEach(function (r) {
+            var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+            if (!fillRect &amp;&amp; cls.indexOf(&#39;c-&#39;) === 0 &amp;&amp; cls !== &#39;c-mask&#39;) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector(&#39;rect&#39;);
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute(&#39;data-node-id&#39;),
+            label: g.getAttribute(&#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: g.getAttribute(&#39;data-node-sublabel&#39;),
+            kind: g.getAttribute(&#39;data-node-kind&#39;) || &#39;backend&#39;,
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute(&#39;rx&#39;) : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute(&#39;stroke-width&#39;) : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll(&#39;path&#39;).forEach(function (p) {
+          if (p.hasAttribute(&#39;data-composition-points&#39;)) return;
+          var d = p.getAttribute(&#39;d&#39;) || &#39;&#39;;
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m &amp;&amp; getComputedStyle(p).strokeDasharray !== &#39;none&#39;) footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll(&#39;g[data-graph-role=&quot;segment-label&quot;]&#39;).forEach(function (g) {
+          segLabels[g.getAttribute(&#39;data-segment-id&#39;)] = (g.textContent || &#39;&#39;).trim();
+        });
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;structural-frame&quot;]&#39;).forEach(function (r) {
+          var sid = r.getAttribute(&#39;data-composition-frame-id&#39;);
+          segments.push({
+            label: sid != null &amp;&amp; segLabels[sid] ? segLabels[sid] : &#39;&#39;,
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;activation&quot;]&#39;).forEach(function (r) {
+          var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+          if (!cls || cls === &#39;c-mask&#39;) return;
+          activations.push({
+            participant: r.getAttribute(&#39;data-activation-participant&#39;),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll(&#39;path[data-composition-points]&#39;).forEach(function (p) {
+          var from = p.getAttribute(&#39;data-edge-from&#39;) || p.getAttribute(&#39;data-composition-edge-from&#39;);
+          var to = p.getAttribute(&#39;data-edge-to&#39;) || p.getAttribute(&#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          var pts = (p.getAttribute(&#39;data-composition-points&#39;) || &#39;&#39;).split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+            var c = pair.split(&#39;,&#39;);
+            return [+c[0], +c[1]];
+          });
+          if (pts.length &lt; 2) return;
+          var label = p.getAttribute(&#39;data-edge-label&#39;) || p.getAttribute(&#39;data-composition-edge-label&#39;);
+          var owner = p.parentElement;
+          if (!label &amp;&amp; owner &amp;&amp; owner.tagName.toLowerCase() === &#39;g&#39;) label = owner.getAttribute(&#39;data-edge-label&#39;);
+          var dashParts = (getComputedStyle(p).strokeDasharray || &#39;&#39;).split(/[\s,]+/).map(Number).filter(function (n) { return n &gt; 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute(&#39;data-edge-id&#39;) || p.getAttribute(&#39;data-composition-edge-id&#39;),
+            label: label || &#39;&#39;, pts: pts, el: p,
+            sw: +p.getAttribute(&#39;stroke-width&#39;) || 1.5,
+            dash: dashParts.length ? dashParts.join(&#39; &#39;) : &#39;&#39;
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        L.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + vw + &#39;&quot; dy=&quot;&#39; + vh + &#39;&quot; grid=&quot;&#39; + (strict ? 0 : 1) + &#39;&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + vw + &#39;&quot; pageHeight=&quot;&#39; + vh + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot;&#39; + (strict ? &#39; background=&quot;&#39; + P.bg + &#39;&quot;&#39; : &#39;&#39;) + &#39;&gt;&#39;);
+        L.push(&#39;  &lt;root&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, &#39;bg&#39;);
+          var style = [&#39;rounded=&#39; + (s.rx &gt; 0 ? 1 : 0), s.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(s.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c &amp;&amp; c.fill ? c.fill : &#39;none&#39;), &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#b0b0b0&#39;), &#39;strokeWidth=&#39; + s.sw,
+            c &amp;&amp; c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;fontColor=&#39; + (strict ? P.textMuted : &#39;#666666&#39;), &#39;fontSize=9&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=top&#39;, &#39;align=left&#39;, &#39;spacingLeft=8&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(s.label) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(s.x) + &#39;&quot; y=&quot;&#39; + Math.round(s.y) + &#39;&quot; width=&quot;&#39; + Math.round(s.width) + &#39;&quot; height=&quot;&#39; + Math.round(s.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, &#39;mask&#39;) || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length &gt; 1
+            ? &#39;&lt;b&gt;&#39; + parts[0] + &#39;&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;&#39; + (strict ? P.textMuted : &#39;#666666&#39;) + &#39;&quot;&gt;&#39; + parts.slice(1).join(&#39; · &#39;) + &#39;&lt;/font&gt;&#39;
+            : n.label;
+          var style = [&#39;shape=umlLifeline&#39;, &#39;perimeter=lifelinePerimeter&#39;, &#39;size=&#39; + Math.round(n.height),
+            &#39;container=1&#39;, &#39;collapsible=0&#39;, &#39;recursiveResize=0&#39;, &#39;outlineConnect=0&#39;,
+            c &amp;&amp; c.fill ? &#39;fillColor=&#39; + c.fill : &#39;&#39;,
+            c &amp;&amp; c.stroke ? &#39;strokeColor=&#39; + c.stroke : &#39;&#39;,
+            &#39;strokeWidth=&#39; + n.sw,
+            &#39;fontColor=&#39; + (strict ? P.text : &#39;#000000&#39;), &#39;fontSize=11&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(html) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(n.x) + &#39;&quot; y=&quot;&#39; + Math.round(n.y) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(footY - n.y) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, &#39;mask&#39;) || (strict ? null : drawioKindPair(participant.kind));
+          var style = [&#39;rounded=&#39; + (a.rx &gt; 0 ? 1 : 0), a.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(a.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c &amp;&amp; c.fill ? c.fill : &#39;#ffffff&#39;), &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#999999&#39;),
+            &#39;strokeWidth=&#39; + a.sw, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;activation-&#39; + i + &#39;&quot; value=&quot;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;node-&#39; + participant.id + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(a.x - participant.x) + &#39;&quot; y=&quot;&#39; + Math.round(a.y - participant.y) + &#39;&quot; width=&quot;&#39; + Math.round(a.width) + &#39;&quot; height=&quot;&#39; + Math.round(a.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, &#39;bg&#39;);
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = [&#39;edgeStyle=none&#39;, &#39;rounded=0&#39;,
+            &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#666666&#39;), &#39;strokeWidth=&#39; + e.sw,
+            e.dash ? &#39;dashed=1;dashPattern=&#39; + e.dash : &#39;&#39;,
+            &#39;endArrow=block&#39;, &#39;endFill=1&#39;, &#39;endSize=&#39; + Math.max(4, Math.round(10 * e.sw)),
+            &#39;fontColor=&#39; + (strict ? P.textMuted : &#39;#666666&#39;), &#39;fontSize=8&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;labelBackgroundColor=&#39; + (strict ? P.mask : &#39;#ffffff&#39;), &#39;html=1&#39;]
+            .filter(Boolean).join(&#39;;&#39;)
+            + &#39;;exitX=0.5;exitY=&#39; + exitY + &#39;;exitDx=0;exitDy=0&#39;
+            + &#39;;entryX=0.5;entryY=&#39; + entryY + &#39;;entryDx=0;entryDy=0;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;edge-&#39; + (e.id || i) + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(e.label) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + e.from + &#39;&quot; target=&quot;node-&#39; + e.to + &#39;&quot;&gt;&#39;);
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push(&#39;      &lt;mxGeometry x=&quot;0&quot; y=&quot;-1&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          if (e.pts.length &gt; 2) {
+            L.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; e.pts.length - 1; p++) L.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(e.pts[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(e.pts[p][1]) + &#39;&quot;/&gt;&#39;);
+            L.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        L.push(&#39;  &lt;/root&gt;&#39;);
+        L.push(&#39;&lt;/&#39; + &#39;mxGraphModel&gt;&#39;);
+        return L.join(&#39;\n&#39;);
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer&#39;s current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) === &#39;sequence&#39;;
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -11367,6 +12071,30 @@
               recordExportReceipt(&#39;svg&#39;, blob, d.canonicalStateClean);
               download(blob, base + &#39;.svg&#39;);
             })
+          : format === &#39;drawio&#39;
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) === &#39;sequence&#39;;
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: &#39;application/xml;charset=utf-8&#39; });
+              recordExportReceipt(&#39;drawio&#39;, blob, d.canonicalStateClean);
+              download(blob, base + &#39;.drawio&#39;);
+              toast(&#39;Downloaded draw.io&#39;);
+            })
+          : format === &#39;drawio-strict&#39;
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader&#39;s current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: &#39;application/xml;charset=utf-8&#39; });
+              recordExportReceipt(&#39;drawio-strict&#39;, blob, d.canonicalStateClean);
+              download(blob, base + &#39;-strict.drawio&#39;);
+              toast(&#39;Downloaded draw.io (strict)&#39;);
+            })
           : format === &#39;webm&#39;
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute(&#39;data-last-motion-bytes&#39;, String(blob.size));
@@ -18609,7 +19337,7 @@
           </g>
         </g>
       </svg></section><section class="canvas" data-view="head" hidden><iframe class="snapshot-frame" title="After architecture explorer" srcdoc="&lt;!DOCTYPE html&gt;
-&lt;html lang=&quot;en&quot; data-theme=&quot;dark&quot; data-preset=&quot;signal-flow&quot;&gt;
+&lt;html lang=&quot;en&quot; data-theme=&quot;dark&quot; data-preset=&quot;signal-flow&quot; data-diagram-type=&quot;architecture&quot;&gt;
 &lt;head&gt;
   &lt;meta charset=&quot;UTF-8&quot;&gt;
   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
@@ -22034,6 +22762,11 @@
       -webkit-mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Cpath d=&#39;M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
       mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Cpath d=&#39;M10 2.5l7 4v7l-7 4-7-4v-7zM3 6.5l7 4 7-4M10 10.5v7&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
     }
+    .toolbar .export-menu button[data-format=&quot;drawio&quot;]::before,
+    .toolbar .export-menu button[data-format=&quot;drawio-strict&quot;]::before {
+      -webkit-mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Crect x=&#39;2.5&#39; y=&#39;2.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Crect x=&#39;11.5&#39; y=&#39;12.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Cpath d=&#39;M8.5 5h6v7.5&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
+      mask-image: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 20 20&#39;%3E%3Crect x=&#39;2.5&#39; y=&#39;2.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Crect x=&#39;11.5&#39; y=&#39;12.5&#39; width=&#39;6&#39; height=&#39;5&#39; rx=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3Cpath d=&#39;M8.5 5h6v7.5&#39; fill=&#39;none&#39; stroke=&#39;black&#39; stroke-width=&#39;1.7&#39;/%3E%3C/svg%3E&quot;);
+    }
     .toolbar .export-menu button[data-format=&quot;share-card&quot;],
     .toolbar .export-menu button[data-action=&quot;route-share-card&quot;],
     .toolbar .export-menu button[data-action=&quot;reach-share-card&quot;] {
@@ -23435,6 +24168,8 @@
         &lt;div class=&quot;export-menu-section&quot; role=&quot;group&quot; aria-label=&quot;Vector and motion&quot;&gt;
           &lt;span class=&quot;export-menu-heading&quot; aria-hidden=&quot;true&quot;&gt;Vector &amp;amp; motion&lt;/span&gt;
           &lt;button data-format=&quot;svg&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;SVG&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Editable vector&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
+          &lt;button data-format=&quot;drawio&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;draw.io&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Editable diagram&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
+          &lt;button data-format=&quot;drawio-strict&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;draw.io strict&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;Exact shapes &amp;amp; colors&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
           &lt;button data-format=&quot;webm&quot; type=&quot;button&quot; role=&quot;menuitem&quot; tabindex=&quot;-1&quot;&gt;&lt;span class=&quot;export-item-copy&quot;&gt;&lt;strong&gt;WebM&lt;/strong&gt;&lt;small class=&quot;hint&quot;&gt;6s motion&lt;/small&gt;&lt;/span&gt;&lt;/button&gt;
         &lt;/div&gt;
       &lt;/div&gt;
@@ -25150,7 +25885,7 @@
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === &#39;share-card&#39;) return true;
-        if (format === &#39;svg&#39; || format === &#39;png&#39;) return true;
+        if (format === &#39;svg&#39; || format === &#39;png&#39; || format === &#39;drawio&#39; || format === &#39;drawio-strict&#39;) return true;
         if (format === &#39;webm&#39;) return canRecordMotion();
         var mime = format === &#39;jpeg&#39; ? &#39;image/jpeg&#39; : &#39;image/webp&#39;;
         try {
@@ -25255,6 +25990,698 @@
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;&#39;,
+        backend: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;&#39;,
+        database: &#39;shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;&#39;,
+        cloud: &#39;ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;&#39;,
+        security: &#39;shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;&#39;,
+        messagebus: &#39;shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;&#39;,
+        external: &#39;shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;&#39;
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: &#39;ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;&#39;,
+        active: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;&#39;,
+        waiting: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;&#39;,
+        decision: &#39;rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;&#39;,
+        success: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;&#39;,
+        failure: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;&#39;,
+        neutral: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;&#39;,
+        external: &#39;shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;&#39;
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;&#39;,
+        &#39;security-group&#39;: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;&#39;,
+        lane: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;&#39;,
+        &#39;exception-lane&#39;: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;&#39;,
+        stage: &#39;rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;&#39;,
+        group: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;&#39;,
+        segment: &#39;rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;&#39;
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? &#39;&#39; : v).replace(/[&amp;&quot;&lt;&gt;&#39;]/g, function (ch) {
+          return ch === &#39;&amp;&#39; ? &#39;&amp;amp;&#39; : ch === &#39;&quot;&#39; ? &#39;&amp;quot;&#39; : ch === &#39;&lt;&#39; ? &#39;&amp;lt;&#39; : ch === &#39;&gt;&#39; ? &#39;&amp;gt;&#39; : &#39;&amp;#39;&#39;;
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp(&#39;\\s&#39; + name + &#39;=&quot;([^&quot;]*)&quot;&#39;));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+          var c = pair.split(&#39;,&#39;).map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth &gt; 0 &amp;&amp; i &lt; svg.length) {
+          var no = svg.indexOf(&#39;&lt;g&#39;, i + 1), nc = svg.indexOf(&#39;&lt;/g&gt;&#39;, i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 &amp;&amp; no &lt; nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp(&#39;&lt;&#39; + &#39;svg[^&gt;]*\\bviewBox=&quot;0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)&quot;&#39;));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: &lt;g id=&quot;node-...&quot; data-node-id=...&gt; with first inner &lt;rect&gt;.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/&lt;g\s+id=&quot;node-[^&quot;]*&quot;[^&gt;]*\bdata-node-id=&quot;([^&quot;]*)&quot;[^&gt;]*&gt;/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/&lt;rect\b[^&gt;]*&gt;/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, &#39;data-node-kind&#39;) || &#39;backend&#39;,
+            label: drawioAttr(open, &#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: drawioAttr(open, &#39;data-node-sublabel&#39;),
+            tag: drawioAttr(open, &#39;data-node-tag&#39;),
+            x: parseFloat(drawioAttr(box, &#39;x&#39;) || &#39;0&#39;),
+            y: parseFloat(drawioAttr(box, &#39;y&#39;) || &#39;0&#39;),
+            width: parseFloat(drawioAttr(box, &#39;width&#39;) || &#39;0&#39;),
+            height: parseFloat(drawioAttr(box, &#39;height&#39;) || &#39;0&#39;)
+          });
+        });
+        // Edges: &lt;path&gt; with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/&lt;path\b[^&gt;]*\bdata-composition-points=&quot;([^&quot;]*)&quot;[^&gt;]*&gt;/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length &lt; 2) return;
+          var from = drawioAttr(tag, &#39;data-edge-from&#39;) || drawioAttr(tag, &#39;data-composition-edge-from&#39;);
+          var to = drawioAttr(tag, &#39;data-edge-to&#39;) || drawioAttr(tag, &#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, &#39;data-edge-label&#39;) || drawioAttr(tag, &#39;data-composition-edge-label&#39;),
+            id: drawioAttr(tag, &#39;data-edge-id&#39;) || drawioAttr(tag, &#39;data-composition-edge-id&#39;),
+            points: points
+          });
+        });
+        // Boundaries: &lt;rect data-graph-role=&quot;structural-frame&quot;&gt;.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/&lt;rect\b[^&gt;]*\bdata-graph-role=&quot;structural-frame&quot;[^&gt;]*&gt;/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, &#39;width&#39;) || &#39;0&#39;);
+          var h = parseFloat(drawioAttr(tag, &#39;height&#39;) || &#39;0&#39;);
+          if (w &lt;= 0 || h &lt;= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/&lt;text\b[^&gt;]*&gt;([^&lt;]*)&lt;\/text&gt;/);
+          boundaries.push({
+            kind: drawioAttr(tag, &#39;data-composition-frame-kind&#39;) || &#39;boundary&#39;,
+            label: tm ? tm[1].trim() : &#39;&#39;,
+            x: parseFloat(drawioAttr(tag, &#39;x&#39;) || &#39;0&#39;),
+            y: parseFloat(drawioAttr(tag, &#39;y&#39;) || &#39;0&#39;),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/&lt;path\b[^&gt;]*\bd=&quot;M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)&quot;[^&gt;]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) || &#39;&#39;;
+        if (diagramType === &#39;lifecycle&#39; &amp;&amp; DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary&#39;s origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: &#39;boundary-&#39; + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i &lt; sorted.length; i++) {
+            var b = sorted[i];
+            if (cx &gt;= b.x &amp;&amp; cx &lt;= b.x + b.width &amp;&amp; cy &gt;= b.y &amp;&amp; cy &lt;= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        lines.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + Math.round(vw) + &#39;&quot; dy=&quot;&#39; + Math.round(vh) + &#39;&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + Math.round(vw) + &#39;&quot; pageHeight=&quot;&#39; + Math.round(vh) + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#39;);
+        lines.push(&#39;  &lt;root&gt;&#39;);
+        lines.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        lines.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(b.label || b.kind) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(b.x) + &#39;&quot; y=&quot;&#39; + Math.round(b.y) + &#39;&quot; width=&quot;&#39; + Math.round(b.width) + &#39;&quot; height=&quot;&#39; + Math.round(b.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : &#39;1&#39;;
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length &gt; 1
+            ? &#39;&lt;b&gt;&#39; + parts[0] + &#39;&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;&#39; + parts.slice(1).join(&#39; · &#39;) + &#39;&lt;/font&gt;&#39;
+            : n.label;
+          lines.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(htmlVal) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;&#39; + parentId + &#39;&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(relX) + &#39;&quot; y=&quot;&#39; + Math.round(relY) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(n.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = &#39;lifeline-&#39; + Math.round(ll.x) + &#39;-&#39; + Math.round(ll.y1);
+          lines.push(&#39;    &lt;mxCell id=&quot;&#39; + id + &#39;&quot; value=&quot;&quot; style=&quot;endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;&quot; edge=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          lines.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y1) + &#39;&quot; as=&quot;sourcePoint&quot;/&gt;&#39;);
+          lines.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y2) + &#39;&quot; as=&quot;targetPoint&quot;/&gt;&#39;);
+          lines.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? &#39;edge-&#39; + edge.id : &#39;edge-&#39; + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : &#39;&#39;;
+          lines.push(&#39;    &lt;mxCell id=&quot;&#39; + id + &#39;&quot; value=&quot;&#39; + value + &#39;&quot; style=&quot;edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + edge.from + &#39;&quot; target=&quot;node-&#39; + edge.to + &#39;&quot;&gt;&#39;);
+          lines.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length &gt; 2) {
+            lines.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; edge.points.length - 1; p++) {
+              lines.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(edge.points[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(edge.points[p][1]) + &#39;&quot;/&gt;&#39;);
+            }
+            lines.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          lines.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          lines.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        lines.push(&#39;  &lt;/root&gt;&#39;);
+        lines.push(&#39;&lt;/mxGraphModel&gt;&#39;);
+        return lines.join(&#39;\n&#39;);
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact&#39;s LIGHT theme, so the exported file never depends on the
+      // reader&#39;s current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || &#39;&#39;).trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split(&#39;&#39;).map(function (c) { return c + c; }).join(&#39;&#39;) : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length &lt; 2 ? &#39;0&#39; + s : s; };
+        return &#39;#&#39; + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a &gt;= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || &#39;&#39;).match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader&#39;s theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute(&#39;data-theme&#39;);
+        root.setAttribute(&#39;data-theme&#39;, &#39;light&#39;);
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute(&#39;data-theme&#39;);
+          else root.setAttribute(&#39;data-theme&#39;, prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue(&#39;--mask&#39;).trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue(&#39;--bg&#39;).trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue(&#39;--text&#39;).trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue(&#39;--text-muted&#39;).trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === &#39;mask&#39; ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash &amp;&amp; dash !== &#39;none&#39;) {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n &gt; 0; });
+              if (parts.length) out.dash = parts.join(&#39; &#39;);
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector(&#39;.diagram-container svg&#39;);
+        if (!svgEl) throw new Error(&#39;No diagram SVG found.&#39;);
+        var P = drawioStrictPalette(svgEl);
+        var FONT = &#39;JetBrains Mono,ui-monospace,Menlo,monospace&#39;;
+        var vb = (svgEl.getAttribute(&#39;viewBox&#39;) || &#39;0 0 1000 700&#39;).split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll(&#39;g[id^=&quot;node-&quot;]&#39;).forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll(&#39;rect&#39;).forEach(function (r) {
+            var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+            if (!fillRect &amp;&amp; cls.indexOf(&#39;c-&#39;) === 0 &amp;&amp; cls !== &#39;c-mask&#39;) fillRect = r;
+            else if (fillRect &amp;&amp; cls !== &#39;c-mask&#39; &amp;&amp; +r.getAttribute(&#39;width&#39;) &gt; +fillRect.getAttribute(&#39;width&#39;)) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector(&#39;rect&#39;);
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute(&#39;data-node-id&#39;),
+            label: g.getAttribute(&#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: g.getAttribute(&#39;data-node-sublabel&#39;),
+            tag: g.getAttribute(&#39;data-node-tag&#39;),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute(&#39;rx&#39;) : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute(&#39;stroke-width&#39;) : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;structural-frame&quot;]&#39;).forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute(&#39;data-composition-frame-kind&#39;) || &#39;boundary&#39;,
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first &lt;text&gt; sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t &amp;&amp; t.tagName.toLowerCase() === &#39;text&#39;) b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll(&#39;path[data-composition-points]&#39;).forEach(function (p) {
+          var from = p.getAttribute(&#39;data-edge-from&#39;) || p.getAttribute(&#39;data-composition-edge-from&#39;);
+          var to = p.getAttribute(&#39;data-edge-to&#39;) || p.getAttribute(&#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          var pts = (p.getAttribute(&#39;data-composition-points&#39;) || &#39;&#39;).split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+            var c = pair.split(&#39;,&#39;);
+            return [+c[0], +c[1]];
+          });
+          if (pts.length &lt; 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute(&#39;data-edge-label&#39;) || p.getAttribute(&#39;data-composition-edge-label&#39;),
+            el: p, pts: pts,
+            sw: +p.getAttribute(&#39;stroke-width&#39;) || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute(&#39;d&#39;))
+          });
+        });
+        // -- edge labels (positioned &lt;text&gt; in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll(&#39;g[data-detail=&quot;context&quot;][data-edge-from]&#39;).forEach(function (g) {
+          var t = g.querySelector(&#39;text&#39;);
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute(&#39;data-edge-from&#39;), to: g.getAttribute(&#39;data-edge-to&#39;),
+            x: +t.getAttribute(&#39;x&#39;), y: +t.getAttribute(&#39;y&#39;) - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll(&#39;path&#39;).forEach(function (p) {
+          if (p.hasAttribute(&#39;data-composition-points&#39;)) return;
+          var d = p.getAttribute(&#39;d&#39;) || &#39;&#39;;
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === &#39;none&#39;) return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute(&#39;stroke-width&#39;) || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: &#39;boundary-&#39; + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i &lt; sorted.length; i++) {
+              var b = sorted[i];
+              if (cx &gt;= b.x &amp;&amp; cx &lt;= b.x + b.width &amp;&amp; cy &gt;= b.y &amp;&amp; cy &lt;= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i &lt; pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist &lt; best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v &lt; 0.04 ? 0 : v &gt; 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        L.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + vw + &#39;&quot; dy=&quot;&#39; + vh + &#39;&quot; grid=&quot;0&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + vw + &#39;&quot; pageHeight=&quot;&#39; + vh + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot; background=&quot;&#39; + P.bg + &#39;&quot;&gt;&#39;);
+        L.push(&#39;  &lt;root&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, &#39;bg&#39;);
+          var tc = b.textEl ? P.of(b.textEl, &#39;bg&#39;) : null;
+          var left = b.kind === &#39;lane&#39; || b.kind === &#39;exception-lane&#39; || b.kind === &#39;segment&#39;;
+          var style = [&#39;rounded=&#39; + (b.rx &gt; 0 ? 1 : 0), b.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(b.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c.fill || &#39;none&#39;), &#39;strokeColor=&#39; + (c.stroke || &#39;#666666&#39;), &#39;strokeWidth=&#39; + b.sw,
+            c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;fontColor=&#39; + (tc &amp;&amp; tc.fill ? tc.fill : P.textMuted), &#39;fontSize=9&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=top&#39;, left ? &#39;align=left;spacingLeft=8&#39; : &#39;&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(b.x) + &#39;&quot; y=&quot;&#39; + Math.round(b.y) + &#39;&quot; width=&quot;&#39; + Math.round(b.width) + &#39;&quot; height=&quot;&#39; + Math.round(b.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, &#39;mask&#39;);
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = &#39;&lt;b&gt;&#39; + n.label + &#39;&lt;/b&gt;&lt;br/&gt;&#39;
+              + (n.sublabel ? &#39;&lt;font style=&quot;font-size:8px&quot; color=&quot;&#39; + P.textMuted + &#39;&quot;&gt;&#39; + n.sublabel + &#39;&lt;/font&gt;&#39; : &#39;&#39;)
+              + (n.sublabel &amp;&amp; n.tag ? &#39;&lt;br/&gt;&#39; : &#39;&#39;)
+              + (n.tag ? &#39;&lt;font style=&quot;font-size:7px&quot; color=&quot;&#39; + (c.stroke || P.text) + &#39;&quot;&gt;&#39; + n.tag + &#39;&lt;/font&gt;&#39; : &#39;&#39;);
+          }
+          var style = [&#39;rounded=&#39; + (n.rx &gt; 0 ? 1 : 0), n.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(n.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c.fill || &#39;#d5e8d4&#39;), &#39;strokeColor=&#39; + (c.stroke || &#39;#82b366&#39;), &#39;strokeWidth=&#39; + n.sw,
+            &#39;fontColor=&#39; + P.text, &#39;fontSize=11&#39;, &#39;fontFamily=&#39; + FONT, &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=middle&#39;]
+            .filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(html) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;&#39; + (p ? p.id : &#39;1&#39;) + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(relX) + &#39;&quot; y=&quot;&#39; + Math.round(relY) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(n.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, &#39;bg&#39;);
+          L.push(&#39;    &lt;mxCell id=&quot;lifeline-&#39; + i + &#39;&quot; value=&quot;&quot; style=&quot;endArrow=none;html=1;strokeColor=&#39; + (c.stroke || &#39;#999999&#39;) + &#39;;strokeWidth=&#39; + ll.sw + &#39;;dashed=1;dashPattern=3 7;&quot; edge=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          L.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y1) + &#39;&quot; as=&quot;sourcePoint&quot;/&gt;&#39;);
+          L.push(&#39;        &lt;mxPoint x=&quot;&#39; + Math.round(ll.x) + &#39;&quot; y=&quot;&#39; + Math.round(ll.y2) + &#39;&quot; as=&quot;targetPoint&quot;/&gt;&#39;);
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, &#39;bg&#39;);
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from &amp;&amp; l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, &#39;bg&#39;) : null;
+          var style = [&#39;edgeStyle=none&#39;, e.radius &gt; 0 ? &#39;rounded=1;arcSize=&#39; + e.radius * 2 : &#39;rounded=0&#39;,
+            &#39;strokeColor=&#39; + (c.stroke || &#39;#666666&#39;), &#39;strokeWidth=&#39; + e.sw,
+            c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;endArrow=block&#39;, &#39;endFill=1&#39;, &#39;endSize=&#39; + Math.max(4, Math.round(10 * e.sw)),
+            &#39;fontColor=&#39; + (lc &amp;&amp; lc.fill ? lc.fill : P.textMuted), &#39;fontSize=8&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;labelBackgroundColor=&#39; + P.mask, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;);
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += &#39;;exitX=&#39; + exit[0] + &#39;;exitY=&#39; + exit[1] + &#39;;exitDx=0;exitDy=0&#39;;
+          if (entry) style += &#39;;entryX=&#39; + entry[0] + &#39;;entryY=&#39; + entry[1] + &#39;;entryDx=0;entryDy=0&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;edge-&#39; + i + &#39;&quot; value=&quot;&#39; + (e.label ? drawioEscapeAttr(e.label) : &#39;&#39;) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + e.from + &#39;&quot; target=&quot;node-&#39; + e.to + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          if (lbl &amp;&amp; e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push(&#39;        &lt;mxGeometry x=&quot;&#39; + (2 * t - 1).toFixed(3) + &#39;&quot; y=&quot;0&quot; relative=&quot;1&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          }
+          if (e.pts.length &gt; 2) {
+            L.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; e.pts.length - 1; p++) L.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(e.pts[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(e.pts[p][1]) + &#39;&quot;/&gt;&#39;);
+            L.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        L.push(&#39;  &lt;/root&gt;&#39;);
+        L.push(&#39;&lt;/&#39; + &#39;mxGraphModel&gt;&#39;);
+        return L.join(&#39;\n&#39;);
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message&#39;s authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector(&#39;.diagram-container svg&#39;);
+        if (!svgEl) throw new Error(&#39;No diagram SVG found.&#39;);
+        var P = drawioStrictPalette(svgEl);
+        var FONT = &#39;JetBrains Mono,ui-monospace,Menlo,monospace&#39;;
+        var vb = (svgEl.getAttribute(&#39;viewBox&#39;) || &#39;0 0 1000 700&#39;).split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll(&#39;g[id^=&quot;node-&quot;]&#39;).forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll(&#39;rect&#39;).forEach(function (r) {
+            var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+            if (!fillRect &amp;&amp; cls.indexOf(&#39;c-&#39;) === 0 &amp;&amp; cls !== &#39;c-mask&#39;) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector(&#39;rect&#39;);
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute(&#39;data-node-id&#39;),
+            label: g.getAttribute(&#39;data-node-label&#39;) || &#39;&#39;,
+            sublabel: g.getAttribute(&#39;data-node-sublabel&#39;),
+            kind: g.getAttribute(&#39;data-node-kind&#39;) || &#39;backend&#39;,
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute(&#39;rx&#39;) : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute(&#39;stroke-width&#39;) : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll(&#39;path&#39;).forEach(function (p) {
+          if (p.hasAttribute(&#39;data-composition-points&#39;)) return;
+          var d = p.getAttribute(&#39;d&#39;) || &#39;&#39;;
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m &amp;&amp; getComputedStyle(p).strokeDasharray !== &#39;none&#39;) footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll(&#39;g[data-graph-role=&quot;segment-label&quot;]&#39;).forEach(function (g) {
+          segLabels[g.getAttribute(&#39;data-segment-id&#39;)] = (g.textContent || &#39;&#39;).trim();
+        });
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;structural-frame&quot;]&#39;).forEach(function (r) {
+          var sid = r.getAttribute(&#39;data-composition-frame-id&#39;);
+          segments.push({
+            label: sid != null &amp;&amp; segLabels[sid] ? segLabels[sid] : &#39;&#39;,
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll(&#39;rect[data-graph-role=&quot;activation&quot;]&#39;).forEach(function (r) {
+          var cls = r.getAttribute(&#39;class&#39;) || &#39;&#39;;
+          if (!cls || cls === &#39;c-mask&#39;) return;
+          activations.push({
+            participant: r.getAttribute(&#39;data-activation-participant&#39;),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute(&#39;rx&#39;) || 0, sw: +r.getAttribute(&#39;stroke-width&#39;) || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll(&#39;path[data-composition-points]&#39;).forEach(function (p) {
+          var from = p.getAttribute(&#39;data-edge-from&#39;) || p.getAttribute(&#39;data-composition-edge-from&#39;);
+          var to = p.getAttribute(&#39;data-edge-to&#39;) || p.getAttribute(&#39;data-composition-edge-to&#39;);
+          if (!from || !to) return;
+          var pts = (p.getAttribute(&#39;data-composition-points&#39;) || &#39;&#39;).split(&#39;;&#39;).filter(Boolean).map(function (pair) {
+            var c = pair.split(&#39;,&#39;);
+            return [+c[0], +c[1]];
+          });
+          if (pts.length &lt; 2) return;
+          var label = p.getAttribute(&#39;data-edge-label&#39;) || p.getAttribute(&#39;data-composition-edge-label&#39;);
+          var owner = p.parentElement;
+          if (!label &amp;&amp; owner &amp;&amp; owner.tagName.toLowerCase() === &#39;g&#39;) label = owner.getAttribute(&#39;data-edge-label&#39;);
+          var dashParts = (getComputedStyle(p).strokeDasharray || &#39;&#39;).split(/[\s,]+/).map(Number).filter(function (n) { return n &gt; 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute(&#39;data-edge-id&#39;) || p.getAttribute(&#39;data-composition-edge-id&#39;),
+            label: label || &#39;&#39;, pts: pts, el: p,
+            sw: +p.getAttribute(&#39;stroke-width&#39;) || 1.5,
+            dash: dashParts.length ? dashParts.join(&#39; &#39;) : &#39;&#39;
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push(&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&#39;);
+        L.push(&#39;&lt;&#39; + &#39;mxGraphModel dx=&quot;&#39; + vw + &#39;&quot; dy=&quot;&#39; + vh + &#39;&quot; grid=&quot;&#39; + (strict ? 0 : 1) + &#39;&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;&#39; + vw + &#39;&quot; pageHeight=&quot;&#39; + vh + &#39;&quot; math=&quot;0&quot; shadow=&quot;0&quot;&#39; + (strict ? &#39; background=&quot;&#39; + P.bg + &#39;&quot;&#39; : &#39;&#39;) + &#39;&gt;&#39;);
+        L.push(&#39;  &lt;root&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;0&quot;/&gt;&#39;);
+        L.push(&#39;    &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot;/&gt;&#39;);
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, &#39;bg&#39;);
+          var style = [&#39;rounded=&#39; + (s.rx &gt; 0 ? 1 : 0), s.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(s.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c &amp;&amp; c.fill ? c.fill : &#39;none&#39;), &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#b0b0b0&#39;), &#39;strokeWidth=&#39; + s.sw,
+            c &amp;&amp; c.dash ? &#39;dashed=1;dashPattern=&#39; + c.dash : &#39;&#39;,
+            &#39;fontColor=&#39; + (strict ? P.textMuted : &#39;#666666&#39;), &#39;fontSize=9&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;, &#39;verticalAlign=top&#39;, &#39;align=left&#39;, &#39;spacingLeft=8&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;boundary-&#39; + i + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(s.label) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(s.x) + &#39;&quot; y=&quot;&#39; + Math.round(s.y) + &#39;&quot; width=&quot;&#39; + Math.round(s.width) + &#39;&quot; height=&quot;&#39; + Math.round(s.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, &#39;mask&#39;) || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length &gt; 1
+            ? &#39;&lt;b&gt;&#39; + parts[0] + &#39;&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;&#39; + (strict ? P.textMuted : &#39;#666666&#39;) + &#39;&quot;&gt;&#39; + parts.slice(1).join(&#39; · &#39;) + &#39;&lt;/font&gt;&#39;
+            : n.label;
+          var style = [&#39;shape=umlLifeline&#39;, &#39;perimeter=lifelinePerimeter&#39;, &#39;size=&#39; + Math.round(n.height),
+            &#39;container=1&#39;, &#39;collapsible=0&#39;, &#39;recursiveResize=0&#39;, &#39;outlineConnect=0&#39;,
+            c &amp;&amp; c.fill ? &#39;fillColor=&#39; + c.fill : &#39;&#39;,
+            c &amp;&amp; c.stroke ? &#39;strokeColor=&#39; + c.stroke : &#39;&#39;,
+            &#39;strokeWidth=&#39; + n.sw,
+            &#39;fontColor=&#39; + (strict ? P.text : &#39;#000000&#39;), &#39;fontSize=11&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;whiteSpace=wrap&#39;, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;node-&#39; + n.id + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(html) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;1&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(n.x) + &#39;&quot; y=&quot;&#39; + Math.round(n.y) + &#39;&quot; width=&quot;&#39; + Math.round(n.width) + &#39;&quot; height=&quot;&#39; + Math.round(footY - n.y) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, &#39;mask&#39;) || (strict ? null : drawioKindPair(participant.kind));
+          var style = [&#39;rounded=&#39; + (a.rx &gt; 0 ? 1 : 0), a.rx &gt; 0 ? &#39;absoluteArcSize=1;arcSize=&#39; + Math.round(a.rx) : &#39;&#39;,
+            &#39;fillColor=&#39; + (c &amp;&amp; c.fill ? c.fill : &#39;#ffffff&#39;), &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#999999&#39;),
+            &#39;strokeWidth=&#39; + a.sw, &#39;html=1&#39;].filter(Boolean).join(&#39;;&#39;) + &#39;;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;activation-&#39; + i + &#39;&quot; value=&quot;&quot; style=&quot;&#39; + style + &#39;&quot; vertex=&quot;1&quot; parent=&quot;node-&#39; + participant.id + &#39;&quot;&gt;&#39;);
+          L.push(&#39;      &lt;mxGeometry x=&quot;&#39; + Math.round(a.x - participant.x) + &#39;&quot; y=&quot;&#39; + Math.round(a.y - participant.y) + &#39;&quot; width=&quot;&#39; + Math.round(a.width) + &#39;&quot; height=&quot;&#39; + Math.round(a.height) + &#39;&quot; as=&quot;geometry&quot;/&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, &#39;bg&#39;);
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = [&#39;edgeStyle=none&#39;, &#39;rounded=0&#39;,
+            &#39;strokeColor=&#39; + (c &amp;&amp; c.stroke ? c.stroke : &#39;#666666&#39;), &#39;strokeWidth=&#39; + e.sw,
+            e.dash ? &#39;dashed=1;dashPattern=&#39; + e.dash : &#39;&#39;,
+            &#39;endArrow=block&#39;, &#39;endFill=1&#39;, &#39;endSize=&#39; + Math.max(4, Math.round(10 * e.sw)),
+            &#39;fontColor=&#39; + (strict ? P.textMuted : &#39;#666666&#39;), &#39;fontSize=8&#39;, &#39;fontFamily=&#39; + FONT,
+            &#39;labelBackgroundColor=&#39; + (strict ? P.mask : &#39;#ffffff&#39;), &#39;html=1&#39;]
+            .filter(Boolean).join(&#39;;&#39;)
+            + &#39;;exitX=0.5;exitY=&#39; + exitY + &#39;;exitDx=0;exitDy=0&#39;
+            + &#39;;entryX=0.5;entryY=&#39; + entryY + &#39;;entryDx=0;entryDy=0;&#39;;
+          L.push(&#39;    &lt;mxCell id=&quot;edge-&#39; + (e.id || i) + &#39;&quot; value=&quot;&#39; + drawioEscapeAttr(e.label) + &#39;&quot; style=&quot;&#39; + style + &#39;&quot; edge=&quot;1&quot; parent=&quot;1&quot; source=&quot;node-&#39; + e.from + &#39;&quot; target=&quot;node-&#39; + e.to + &#39;&quot;&gt;&#39;);
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push(&#39;      &lt;mxGeometry x=&quot;0&quot; y=&quot;-1&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#39;);
+          if (e.pts.length &gt; 2) {
+            L.push(&#39;        &lt;Array as=&quot;points&quot;&gt;&#39;);
+            for (var p = 1; p &lt; e.pts.length - 1; p++) L.push(&#39;          &lt;mxPoint x=&quot;&#39; + Math.round(e.pts[p][0]) + &#39;&quot; y=&quot;&#39; + Math.round(e.pts[p][1]) + &#39;&quot;/&gt;&#39;);
+            L.push(&#39;        &lt;/Array&gt;&#39;);
+          }
+          L.push(&#39;      &lt;/mxGeometry&gt;&#39;);
+          L.push(&#39;    &lt;/mxCell&gt;&#39;);
+        });
+        L.push(&#39;  &lt;/root&gt;&#39;);
+        L.push(&#39;&lt;/&#39; + &#39;mxGraphModel&gt;&#39;);
+        return L.join(&#39;\n&#39;);
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer&#39;s current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) === &#39;sequence&#39;;
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -25272,6 +26699,30 @@
               recordExportReceipt(&#39;svg&#39;, blob, d.canonicalStateClean);
               download(blob, base + &#39;.svg&#39;);
             })
+          : format === &#39;drawio&#39;
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute(&#39;data-diagram-type&#39;) === &#39;sequence&#39;;
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: &#39;application/xml;charset=utf-8&#39; });
+              recordExportReceipt(&#39;drawio&#39;, blob, d.canonicalStateClean);
+              download(blob, base + &#39;.drawio&#39;);
+              toast(&#39;Downloaded draw.io&#39;);
+            })
+          : format === &#39;drawio-strict&#39;
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader&#39;s current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: &#39;application/xml;charset=utf-8&#39; });
+              recordExportReceipt(&#39;drawio-strict&#39;, blob, d.canonicalStateClean);
+              download(blob, base + &#39;-strict.drawio&#39;);
+              toast(&#39;Downloaded draw.io (strict)&#39;);
+            })
           : format === &#39;webm&#39;
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute(&#39;data-last-motion-bytes&#39;, String(blob.size));
@@ -32493,7 +33944,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    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container \u003e svg {\n      width: 100%;\n      height: 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: \"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: \"BLUEPRINT / REV 01\";\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: \"EDITORIAL / FIELD NOTE\";\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      background: var(--panel);\n      border-radius: 1rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.5rem;\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: \"ARCHIFY / PLATE 04\";\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: 4.15rem;\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    }\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-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-close:hover,\n    .overview-map-close:focus-visible { background: var(--toolbar-hover); }\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    .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: 4.15rem;\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: 1rem;\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 [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 { padding: 0.875rem; }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      .header { margin-bottom: 0.875rem; }\n      .cards { margin-top: 0.75rem; }\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      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: 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: 0.5rem;\n      }\n      .overview-map-surface { height: 4rem; }\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    /* 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    .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: reverse;\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    /* ==========================================================\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    }\n    html[data-present=\"true\"]:not([data-embed=\"true\"]) .diagram-container \u003e svg {\n      width: 100%;\n      height: 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: \"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: \"BLUEPRINT / REV 01\";\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: \"EDITORIAL / FIELD NOTE\";\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      background: var(--panel);\n      border-radius: 1rem;\n      border: 1px solid var(--panel-border);\n      padding: 1.5rem;\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: \"ARCHIFY / PLATE 04\";\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: 4.15rem;\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    }\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-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-close:hover,\n    .overview-map-close:focus-visible { background: var(--toolbar-hover); }\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    .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: 4.15rem;\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: 1rem;\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 [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 { padding: 0.875rem; }\n      .cards { margin-top: 1rem; }\n      .card { padding: 1rem; }\n    }\n    @media (min-width: 768px) and (max-height: 920px) {\n      .header { margin-bottom: 0.875rem; }\n      .cards { margin-top: 0.75rem; }\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      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=\"drawio\"]::before,\n    .toolbar .export-menu button[data-format=\"drawio-strict\"]::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='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.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%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' 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: 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: 0.5rem;\n      }\n      .overview-map-surface { height: 4rem; }\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    /* 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    .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: reverse;\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 9af8d44..f9809e1 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": "b1a96022f0d8396bc9219230b1d41aad1e9ef1841ee69aad004adede7cb7fae3",
-    "bytes": 1836089
+    "sha256": "f4983715ad5cb57f574e91c221db9b32a0268673ac93e1cdeee74f6e30956335",
+    "bytes": 1945750
   },
   "validation": {
     "checksPassed": 28,
diff --git a/examples/dataflow-product-analytics-strict.drawio b/examples/dataflow-product-analytics-strict.drawio
new file mode 100644
index 0000000..7035964
--- /dev/null
+++ b/examples/dataflow-product-analytics-strict.drawio
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="760" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="760" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / Sources" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="16" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Ingest" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="231" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Process" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="446" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="04 / Store" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="661" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="05 / Consume" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="876" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;browser SDK&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;events&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-mobile" value="&lt;b&gt;Mobile&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;iOS / Android&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;events&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-edge" value="&lt;b&gt;Edge API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;collector&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;TLS&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-consent" value="&lt;b&gt;Consent Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;policy filter&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;PII guard&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-stream" value="&lt;b&gt;Event Stream&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Kafka topic&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;ordered&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-pii" value="&lt;b&gt;PII Vault&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;encrypted&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;restricted&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-warehouse" value="&lt;b&gt;Warehouse&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;analytics tables&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;curated&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-features" value="&lt;b&gt;Feature Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;daily batch&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;derived&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-dashboard" value="&lt;b&gt;Dashboards&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;product metrics&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;SQL&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-model" value="&lt;b&gt;ML Model&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;ranking job&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;features&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-web-clickstream" value="clickstream" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-web" target="node-edge">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.281" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="205" y="157"/>
+          <mxPoint x="205" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-mobile-events" value="app events" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-mobile" target="node-edge">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.041" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="222" y="385"/>
+          <mxPoint x="222" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-consent-enrichment" value="identity + consent" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-edge" target="node-consent">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.180" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="315" y="112"/>
+          <mxPoint x="450" y="112"/>
+          <mxPoint x="450" y="157"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-accepted-events" value="accepted events" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-edge" target="node-stream">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.097" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="420" y="271"/>
+          <mxPoint x="420" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-identity-map" value="identity map" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-consent" target="node-pii">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.010" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-normalized-facts" value="normalized facts" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-stream" target="node-warehouse">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.010" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-daily-aggregates" value="daily aggregates" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-warehouse" target="node-features">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.082" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-metrics-query" value="metrics SQL" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-warehouse" target="node-dashboard">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.051" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="852" y="385"/>
+          <mxPoint x="852" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-feature-vectors" value="feature vectors" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-features" target="node-model">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.010" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-restricted-join" value="restricted join" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-pii" target="node-dashboard">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.066" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="878" y="157"/>
+          <mxPoint x="878" y="212"/>
+          <mxPoint x="960" y="212"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/dataflow-product-analytics.drawio b/examples/dataflow-product-analytics.drawio
new file mode 100644
index 0000000..89d287b
--- /dev/null
+++ b/examples/dataflow-product-analytics.drawio
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="760" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="760" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / Sources" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="16" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Ingest" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="231" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Process" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="446" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="04 / Store" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="661" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="05 / Consume" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="876" y="46" width="168" height="640" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;browser SDK · events&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-mobile" value="&lt;b&gt;Mobile&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;iOS / Android · events&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-edge" value="&lt;b&gt;Edge API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;collector · TLS&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-consent" value="&lt;b&gt;Consent Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;policy filter · PII guard&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-stream" value="&lt;b&gt;Event Stream&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Kafka topic · ordered&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-pii" value="&lt;b&gt;PII Vault&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;encrypted · restricted&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-warehouse" value="&lt;b&gt;Warehouse&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;analytics tables · curated&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-features" value="&lt;b&gt;Feature Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;daily batch · derived&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-dashboard" value="&lt;b&gt;Dashboards&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;product metrics · SQL&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-model" value="&lt;b&gt;ML Model&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;ranking job · features&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-web-clickstream" value="clickstream" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-web" target="node-edge">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="205" y="157"/>
+          <mxPoint x="205" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-mobile-events" value="app events" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-mobile" target="node-edge">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="222" y="385"/>
+          <mxPoint x="222" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-consent-enrichment" value="identity + consent" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-edge" target="node-consent">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="315" y="112"/>
+          <mxPoint x="450" y="112"/>
+          <mxPoint x="450" y="157"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-accepted-events" value="accepted events" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-edge" target="node-stream">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="420" y="271"/>
+          <mxPoint x="420" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-identity-map" value="identity map" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-consent" target="node-pii">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-normalized-facts" value="normalized facts" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-stream" target="node-warehouse">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-daily-aggregates" value="daily aggregates" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-warehouse" target="node-features">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-metrics-query" value="metrics SQL" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-warehouse" target="node-dashboard">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="852" y="385"/>
+          <mxPoint x="852" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-feature-vectors" value="feature vectors" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-features" target="node-model">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-restricted-join" value="restricted join" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-pii" target="node-dashboard">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="878" y="157"/>
+          <mxPoint x="878" y="212"/>
+          <mxPoint x="960" y="212"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/dataflow-product-analytics.html b/examples/dataflow-product-analytics.html
index 9904584..1810bd2 100644
--- a/examples/dataflow-product-analytics.html
+++ b/examples/dataflow-product-analytics.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="dataflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6647,7 +6654,7 @@ <h3>Derived Consumers</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6752,6 +6759,698 @@ <h3>Derived Consumers</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6769,6 +7468,30 @@ <h3>Derived Consumers</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/dataflow-strict.drawio b/examples/dataflow-strict.drawio
new file mode 100644
index 0000000..33b6467
--- /dev/null
+++ b/examples/dataflow-strict.drawio
@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="780" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="780" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / Producers" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="16" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Transit" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="231" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Processors" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="446" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="04 / State + recovery" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="661" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="05 / Consumers" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="876" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checkout" value="&lt;b&gt;Checkout API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;order producer&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;team commerce&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-billing" value="&lt;b&gt;Billing API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;payment producer&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;team money&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-orders" value="&lt;b&gt;orders.v1&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;12 partitions&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;key: order_id&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-payments" value="&lt;b&gt;payments.v2&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;8 partitions&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;key: order_id&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-validate" value="&lt;b&gt;Order Validate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;group fulfillment&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;ordered&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-enrich" value="&lt;b&gt;Payment Enrich&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;group analytics&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;at-least-once&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-state" value="&lt;b&gt;Order State&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;materialized view&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;idempotent&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-dlq" value="&lt;b&gt;events.dlq&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;poison events&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;7-day retention&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-fulfillment" value="&lt;b&gt;Fulfillment&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;shipping workflow&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;consumer&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-analytics" value="&lt;b&gt;Analytics&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;streaming facts&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;consumer&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-replay" value="&lt;b&gt;Replay Tool&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;approved batch&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;operator gate&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ops" value="&lt;b&gt;On-call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;DLQ owner&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#64748b&quot;&gt;SRE&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="406" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="OrderPlaced" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-checkout" target="node-orders">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="PaymentCaptured" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-billing" target="node-payments">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="ordered orders" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-orders" target="node-validate">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="payment facts" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-payments" target="node-enrich">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="valid order" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-validate" target="node-state">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.198" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="630" y="157"/>
+          <mxPoint x="630" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="enriched payment" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-enrich" target="node-state">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.060" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="630" y="385"/>
+          <mxPoint x="630" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="ready orders" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-state" target="node-fulfillment">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.060" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="845" y="271"/>
+          <mxPoint x="845" y="157"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="order facts" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-state" target="node-analytics">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.198" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="845" y="271"/>
+          <mxPoint x="845" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="invalid event" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-validate" target="node-dlq">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.464" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="530" y="80"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="20" y="550"/>
+          <mxPoint x="745" y="550"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="poison event" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-enrich" target="node-dlq">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.517" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="586" y="668"/>
+          <mxPoint x="689" y="668"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-10" value="failure sample" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-dlq" target="node-ops">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.055" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="845" y="613"/>
+          <mxPoint x="845" y="481"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-11" value="approved replay" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-dlq" target="node-replay">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/dataflow.drawio b/examples/dataflow.drawio
new file mode 100644
index 0000000..7d99a8e
--- /dev/null
+++ b/examples/dataflow.drawio
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="780" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="780" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / Producers" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="16" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Transit" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="231" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Processors" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="446" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="04 / State + recovery" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="661" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="05 / Consumers" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="876" y="46" width="168" height="660" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-checkout" value="&lt;b&gt;Checkout API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;order producer · team commerce&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-billing" value="&lt;b&gt;Billing API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;payment producer · team money&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-orders" value="&lt;b&gt;orders.v1&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;12 partitions · key: order_id&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-payments" value="&lt;b&gt;payments.v2&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;8 partitions · key: order_id&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-1">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-validate" value="&lt;b&gt;Order Validate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;group fulfillment · ordered&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-enrich" value="&lt;b&gt;Payment Enrich&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;group analytics · at-least-once&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-2">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-state" value="&lt;b&gt;Order State&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;materialized view · idempotent&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="196" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-dlq" value="&lt;b&gt;events.dlq&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;poison events · 7-day retention&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-3">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-fulfillment" value="&lt;b&gt;Fulfillment&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;shipping workflow · consumer&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="82" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-analytics" value="&lt;b&gt;Analytics&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;streaming facts · consumer&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="310" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-replay" value="&lt;b&gt;Replay Tool&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;approved batch · operator gate&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="538" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ops" value="&lt;b&gt;On-call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;DLQ owner · SRE&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="boundary-4">
+      <mxGeometry x="28" y="406" width="112" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="OrderPlaced" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-checkout" target="node-orders">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="PaymentCaptured" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-billing" target="node-payments">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="ordered orders" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-orders" target="node-validate">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="payment facts" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-payments" target="node-enrich">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="valid order" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-validate" target="node-state">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="630" y="157"/>
+          <mxPoint x="630" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="enriched payment" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-enrich" target="node-state">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="630" y="385"/>
+          <mxPoint x="630" y="271"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="ready orders" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-state" target="node-fulfillment">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="845" y="271"/>
+          <mxPoint x="845" y="157"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="order facts" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-state" target="node-analytics">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="845" y="271"/>
+          <mxPoint x="845" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="invalid event" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-validate" target="node-dlq">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="530" y="80"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="20" y="550"/>
+          <mxPoint x="745" y="550"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="poison event" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-enrich" target="node-dlq">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="586" y="668"/>
+          <mxPoint x="689" y="668"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-10" value="failure sample" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-dlq" target="node-ops">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="845" y="613"/>
+          <mxPoint x="845" y="481"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-11" value="approved replay" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-dlq" target="node-replay">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/lifecycle-agent-run-strict.drawio b/examples/lifecycle-agent-run-strict.drawio
new file mode 100644
index 0000000..fcee79d
--- /dev/null
+++ b/examples/lifecycle-agent-run-strict.drawio
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="980" dy="660" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="980" pageHeight="660" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="node-queued" value="&lt;b&gt;Queued&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;request accepted&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;entry&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="35" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planning" value="&lt;b&gt;Planning&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;build task graph&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;model&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="189" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-executing" value="&lt;b&gt;Executing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;tool calls&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;work&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="343" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-reviewing" value="&lt;b&gt;Reviewing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;quality gate&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;check&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="497" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-completed" value="&lt;b&gt;Completed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;final response&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;done&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="651" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Needs Approval&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;human gate&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;pause&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="339" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;missing input&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;wait&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="493" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-failed" value="&lt;b&gt;Failed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;recoverable error&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;retryable&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="339" y="356" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cancelled" value="&lt;b&gt;Cancelled&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;user stopped&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;terminal&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="343" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-expired" value="&lt;b&gt;Expired&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;timeout&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;terminal&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="497" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-approval-needed" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-executing" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-review-blocked" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.1;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-reviewing" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="556" y="233"/>
+          <mxPoint x="556" y="233"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-execution-failed" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-executing" target="node-failed">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="320" y="157"/>
+          <mxPoint x="320" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-failed-retry" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#059669;strokeWidth=2;endArrow=block;endFill=1;endSize=20;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-failed" target="node-executing">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="20" y="385"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="402" y="80"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-block-expired" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-blocked" target="node-expired">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-cancelled" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-cancelled">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="480" y="336"/>
+          <mxPoint x="480" y="432"/>
+          <mxPoint x="402" y="432"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/lifecycle-agent-run.drawio b/examples/lifecycle-agent-run.drawio
new file mode 100644
index 0000000..6668e84
--- /dev/null
+++ b/examples/lifecycle-agent-run.drawio
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="980" dy="660" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="980" pageHeight="660" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="node-queued" value="&lt;b&gt;Queued&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;request accepted · entry&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+      <mxGeometry x="35" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planning" value="&lt;b&gt;Planning&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;build task graph · model&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="189" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-executing" value="&lt;b&gt;Executing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;tool calls · work&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="343" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-reviewing" value="&lt;b&gt;Reviewing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;quality gate · check&lt;/font&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+      <mxGeometry x="497" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-completed" value="&lt;b&gt;Completed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;final response · done&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="651" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Needs Approval&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;human gate · pause&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+      <mxGeometry x="339" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;missing input · wait&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+      <mxGeometry x="493" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-failed" value="&lt;b&gt;Failed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;recoverable error · retryable&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="339" y="356" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cancelled" value="&lt;b&gt;Cancelled&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;user stopped · terminal&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="343" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-expired" value="&lt;b&gt;Expired&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;timeout · terminal&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="497" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-approval-needed" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-executing" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-review-blocked" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-reviewing" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="556" y="233"/>
+          <mxPoint x="556" y="233"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-execution-failed" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-executing" target="node-failed">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="320" y="157"/>
+          <mxPoint x="320" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-failed-retry" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-failed" target="node-executing">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="20" y="385"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="402" y="80"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-block-expired" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-blocked" target="node-expired">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-cancelled" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-cancelled">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="480" y="336"/>
+          <mxPoint x="480" y="432"/>
+          <mxPoint x="402" y="432"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/lifecycle-agent-run.html b/examples/lifecycle-agent-run.html
index 0bb6297..e8371bb 100644
--- a/examples/lifecycle-agent-run.html
+++ b/examples/lifecycle-agent-run.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="lifecycle">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6596,7 +6603,7 @@ <h3>Terminal + Recovery</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6701,6 +6708,698 @@ <h3>Terminal + Recovery</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6718,6 +7417,30 @@ <h3>Terminal + Recovery</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/lifecycle-strict.drawio b/examples/lifecycle-strict.drawio
new file mode 100644
index 0000000..fcee79d
--- /dev/null
+++ b/examples/lifecycle-strict.drawio
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="980" dy="660" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="980" pageHeight="660" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="node-queued" value="&lt;b&gt;Queued&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;request accepted&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#0891b2&quot;&gt;entry&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="35" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planning" value="&lt;b&gt;Planning&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;build task graph&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;model&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="189" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-executing" value="&lt;b&gt;Executing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;tool calls&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;work&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="343" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-reviewing" value="&lt;b&gt;Reviewing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;quality gate&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;check&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="497" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-completed" value="&lt;b&gt;Completed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;final response&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#7c3aed&quot;&gt;done&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="651" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Needs Approval&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;human gate&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;pause&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="339" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;missing input&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;wait&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="493" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-failed" value="&lt;b&gt;Failed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;recoverable error&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;retryable&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="339" y="356" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cancelled" value="&lt;b&gt;Cancelled&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;user stopped&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;terminal&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="343" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-expired" value="&lt;b&gt;Expired&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;timeout&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;terminal&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=7;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="497" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-approval-needed" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-executing" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-review-blocked" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.1;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-reviewing" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="556" y="233"/>
+          <mxPoint x="556" y="233"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-execution-failed" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-executing" target="node-failed">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="320" y="157"/>
+          <mxPoint x="320" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-failed-retry" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#059669;strokeWidth=2;endArrow=block;endFill=1;endSize=20;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-failed" target="node-executing">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="20" y="385"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="402" y="80"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-block-expired" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-blocked" target="node-expired">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-cancelled" value="" style="edgeStyle=none;rounded=1;arcSize=20;strokeColor=#e11d48;strokeWidth=1.1;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=11;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-cancelled">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="480" y="336"/>
+          <mxPoint x="480" y="432"/>
+          <mxPoint x="402" y="432"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/lifecycle.drawio b/examples/lifecycle.drawio
new file mode 100644
index 0000000..6668e84
--- /dev/null
+++ b/examples/lifecycle.drawio
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="980" dy="660" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="980" pageHeight="660" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="node-queued" value="&lt;b&gt;Queued&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;request accepted · entry&lt;/font&gt;" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+      <mxGeometry x="35" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planning" value="&lt;b&gt;Planning&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;build task graph · model&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="189" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-executing" value="&lt;b&gt;Executing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;tool calls · work&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="343" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-reviewing" value="&lt;b&gt;Reviewing&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;quality gate · check&lt;/font&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+      <mxGeometry x="497" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-completed" value="&lt;b&gt;Completed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;final response · done&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="651" y="126" width="118" height="62" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Needs Approval&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;human gate · pause&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+      <mxGeometry x="339" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;missing input · wait&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+      <mxGeometry x="493" y="278" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-failed" value="&lt;b&gt;Failed&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;recoverable error · retryable&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="339" y="356" width="126" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cancelled" value="&lt;b&gt;Cancelled&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;user stopped · terminal&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="343" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-expired" value="&lt;b&gt;Expired&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;timeout · terminal&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;" vertex="1" parent="1">
+      <mxGeometry x="497" y="450" width="118" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-approval-needed" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-executing" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-review-blocked" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-reviewing" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="556" y="233"/>
+          <mxPoint x="556" y="233"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-execution-failed" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-executing" target="node-failed">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="320" y="157"/>
+          <mxPoint x="320" y="385"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-failed-retry" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-failed" target="node-executing">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="20" y="385"/>
+          <mxPoint x="20" y="80"/>
+          <mxPoint x="402" y="80"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-block-expired" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-blocked" target="node-expired">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-cancelled" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-cancelled">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="480" y="336"/>
+          <mxPoint x="480" y="432"/>
+          <mxPoint x="402" y="432"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/maka-architecture-strict.drawio b/examples/maka-architecture-strict.drawio
new file mode 100644
index 0000000..eae4cb8
--- /dev/null
+++ b/examples/maka-architecture-strict.drawio
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1180" dy="588" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1180" pageHeight="588" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Electron app + packages/runtime" style="rounded=1;absoluteArcSize=1;arcSize=12;fillColor=#f8f7f1;strokeColor=#d97706;strokeWidth=1;dashed=1;dashPattern=8 4;fontColor=#d97706;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="170" y="110" width="970" height="410" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="trust boundary" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="550" y="110" width="400" height="410" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;desktop user&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ui" value="&lt;b&gt;Desktop UI&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;React renderer&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-main" value="&lt;b&gt;Main Process&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Electron IPC&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="220" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-session" value="&lt;b&gt;SessionManager&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;public runtime API&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="410" y="190" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agentrun" value="&lt;b&gt;AgentRun&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;turn + recovery&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="610" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-model" value="&lt;b&gt;ModelAdapter&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;stream + usage&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="800" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-providers" value="&lt;b&gt;Model Providers&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;AI SDK / Ollama&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;API keys local&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="970" y="140" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-bots" value="&lt;b&gt;Bots &amp;amp; Gateway&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Telegram · Feishu · HTTP&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="580" y="140" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-permission" value="&lt;b&gt;Permission&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;policy engine&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;fail-closed&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="230" y="30" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-storage" value="&lt;b&gt;Local Storage&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;userData JSONL&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="330" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-toolrt" value="&lt;b&gt;ToolRuntime&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;validate · abort&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="610" y="330" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tools" value="&lt;b&gt;Local Tools&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Read · Write · Bash&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="970" y="440" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-ui">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="IPC" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-ui" target="node-main">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-main" target="node-session">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="turn" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-session" target="node-agentrun">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agentrun" target="node-model">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="stream" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-model" target="node-providers">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.720" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-bots" target="node-session">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agentrun" target="node-permission">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-session" target="node-storage">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-agentrun" target="node-toolrt">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-10" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-toolrt" target="node-tools">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-11" value="" style="edgeStyle=none;rounded=1;arcSize=16;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-toolrt" target="node-permission">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="850" y="540"/>
+          <mxPoint x="1160" y="540"/>
+          <mxPoint x="1160" y="100"/>
+          <mxPoint x="850" y="100"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/maka-architecture.drawio b/examples/maka-architecture.drawio
new file mode 100644
index 0000000..9221919
--- /dev/null
+++ b/examples/maka-architecture.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1180" dy="588" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1180" pageHeight="588" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Electron app + packages/runtime" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="170" y="110" width="970" height="410" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="trust boundary" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="550" y="110" width="400" height="410" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;You&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;desktop user&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-ui" value="&lt;b&gt;Desktop UI&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;React renderer&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-main" value="&lt;b&gt;Main Process&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Electron IPC&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="220" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-session" value="&lt;b&gt;SessionManager&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;public runtime API&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="410" y="190" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-agentrun" value="&lt;b&gt;AgentRun&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;turn + recovery&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="610" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-model" value="&lt;b&gt;ModelAdapter&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;stream + usage&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="800" y="190" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-providers" value="&lt;b&gt;Model Providers&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;AI SDK / Ollama · API keys local&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+      <mxGeometry x="970" y="140" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-bots" value="&lt;b&gt;Bots &amp;amp; Gateway&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Telegram · Feishu · HTTP&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="580" y="140" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-permission" value="&lt;b&gt;Permission&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;policy engine · fail-closed&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-1">
+      <mxGeometry x="230" y="30" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-storage" value="&lt;b&gt;Local Storage&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;userData JSONL&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="330" width="150" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-toolrt" value="&lt;b&gt;ToolRuntime&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;validate · abort&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-0">
+      <mxGeometry x="610" y="330" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tools" value="&lt;b&gt;Local Tools&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Read · Write · Bash&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+      <mxGeometry x="970" y="440" width="140" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-0" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-ui">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-1" value="IPC" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-ui" target="node-main">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-2" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-main" target="node-session">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-3" value="turn" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-session" target="node-agentrun">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agentrun" target="node-model">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-5" value="stream" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-model" target="node-providers">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-bots" target="node-session">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-7" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agentrun" target="node-permission">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-8" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-session" target="node-storage">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-9" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-agentrun" target="node-toolrt">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-10" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-toolrt" target="node-tools">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-11" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-toolrt" target="node-permission">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="850" y="540"/>
+          <mxPoint x="1160" y="540"/>
+          <mxPoint x="1160" y="100"/>
+          <mxPoint x="850" y="100"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/maka-architecture.html b/examples/maka-architecture.html
index 507b263..ffb63d7 100644
--- a/examples/maka-architecture.html
+++ b/examples/maka-architecture.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6634,7 +6641,7 @@ <h3>Local &amp; privacy</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6739,6 +6746,698 @@ <h3>Local &amp; privacy</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6756,6 +7455,30 @@ <h3>Local &amp; privacy</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/sequence-cache-miss-request-strict.drawio b/examples/sequence-cache-miss-request-strict.drawio
new file mode 100644
index 0000000..ac305e9
--- /dev/null
+++ b/examples/sequence-cache-miss-request-strict.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/sequence-cache-miss-request.drawio b/examples/sequence-cache-miss-request.drawio
new file mode 100644
index 0000000..56431f0
--- /dev/null
+++ b/examples/sequence-cache-miss-request.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="1" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/sequence-cache-miss-request.html b/examples/sequence-cache-miss-request.html
index 2582199..94f34d1 100644
--- a/examples/sequence-cache-miss-request.html
+++ b/examples/sequence-cache-miss-request.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="sequence">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -4925,18 +4932,18 @@ <h1>Cache Miss Request Sequence</h1>
         <path d="M 710 142 L 710 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
 
         <!-- Activations -->
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
 
         <!-- Messages -->
         <g data-edge-from="user" data-edge-to="web" data-edge-label="open page" data-edge-key="0" data-edge-id="open-page">
@@ -6662,7 +6669,7 @@ <h3>Async Trace</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6767,6 +6774,698 @@ <h3>Async Trace</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6784,6 +7483,30 @@ <h3>Async Trace</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/sequence-cache-miss-strict.drawio b/examples/sequence-cache-miss-strict.drawio
new file mode 100644
index 0000000..ac305e9
--- /dev/null
+++ b/examples/sequence-cache-miss-strict.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/sequence-cache-miss.drawio b/examples/sequence-cache-miss.drawio
new file mode 100644
index 0000000..56431f0
--- /dev/null
+++ b/examples/sequence-cache-miss.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="1" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/sequence-cache-miss.html b/examples/sequence-cache-miss.html
index bc63cec..94f34d1 100644
--- a/examples/sequence-cache-miss.html
+++ b/examples/sequence-cache-miss.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="sequence">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="generator" content="archify 2.9.0">
+  <meta name="generator" content="archify 2.14.0">
   <title>Cache Miss Request Sequence Diagram</title>
   <script>
     // Resolve the theme before first paint so light-preference users don't
@@ -14,6 +14,12 @@
         try {
           var param = new URLSearchParams(window.location.search).get('theme');
           if (param === 'light' || param === 'dark') theme = param;
+          if (new URLSearchParams(window.location.search).get('embed') === '1') {
+            document.documentElement.setAttribute('data-embed', 'true');
+          }
+          if (new URLSearchParams(window.location.search).get('present') === '1') {
+            document.documentElement.setAttribute('data-present', 'true');
+          }
         } catch (_) {}
         if (!theme) {
           try { theme = localStorage.getItem('archify-theme'); } catch (_) {}
@@ -44,7 +50,7 @@
       --text: #ffffff;
       --text-muted: #94a3b8;
       --text-dim: #475569;
-      /* UI chrome (menu hints, footer) needs more contrast than SVG .t-dim accents */
+      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */
       --text-faint: #7d8da1;
 
       --panel: rgba(15, 23, 42, 0.5);
@@ -121,6 +127,227 @@
       --toolbar-menu-bg:  #ffffff;
     }
 
+    /* ==========================================================
+       SIGNAL FLOW — an opt-in, motion-forward visual preset.
+       The variables also target a standalone exported SVG, whose
+       root carries data-preset and data-theme directly.
+       ========================================================== */
+    [data-preset="signal-flow"][data-theme="dark"] {
+      --bg: #030711;
+      --grid: #15233a;
+      --panel: rgba(6, 14, 28, 0.78);
+      --panel-border: #1d3350;
+      --lane-fill: rgba(9, 22, 40, 0.5);
+      --lane-stroke: #2c4564;
+      --text: #f5fbff;
+      --text-muted: #9eb0c7;
+      --text-dim: #52667f;
+      --text-faint: #7890ad;
+      --mask: #07101e;
+      --frontend-fill: rgba(6, 182, 212, 0.14);
+      --frontend-stroke: #67e8f9;
+      --backend-fill: rgba(16, 185, 129, 0.14);
+      --backend-stroke: #5eead4;
+      --database-fill: rgba(139, 92, 246, 0.16);
+      --database-stroke: #c4b5fd;
+      --cloud-fill: rgba(245, 158, 11, 0.13);
+      --cloud-stroke: #fcd34d;
+      --security-fill: rgba(244, 63, 94, 0.13);
+      --security-stroke: #fda4af;
+      --messagebus-fill: rgba(249, 115, 22, 0.13);
+      --messagebus-stroke: #fdba74;
+      --external-fill: rgba(71, 85, 105, 0.24);
+      --external-stroke: #a5b4c7;
+      --arrow: #7890ad;
+      --arrow-emphasis: #2dd4bf;
+      --toolbar-bg: rgba(7, 16, 30, 0.86);
+      --toolbar-border: #29415f;
+      --toolbar-menu-bg: #07101e;
+    }
+
+    [data-preset="signal-flow"][data-theme="light"] {
+      --bg: #f4f9fc;
+      --grid: #d4e5ee;
+      --panel: rgba(255, 255, 255, 0.82);
+      --panel-border: #bfd5e2;
+      --lane-fill: rgba(232, 243, 248, 0.62);
+      --lane-stroke: #a9c5d5;
+      --text: #102638;
+      --text-muted: #587287;
+      --text-dim: #8aa2b4;
+      --text-faint: #668397;
+      --mask: #ffffff;
+      --frontend-fill: rgba(6, 182, 212, 0.09);
+      --frontend-stroke: #0789a1;
+      --backend-fill: rgba(5, 150, 105, 0.09);
+      --backend-stroke: #087f69;
+      --database-fill: rgba(124, 58, 237, 0.09);
+      --database-stroke: #7254c7;
+      --cloud-fill: rgba(217, 119, 6, 0.08);
+      --cloud-stroke: #b9670b;
+      --security-fill: rgba(225, 29, 72, 0.08);
+      --security-stroke: #c53a59;
+      --messagebus-fill: rgba(234, 88, 12, 0.08);
+      --messagebus-stroke: #c65f27;
+      --external-fill: rgba(100, 116, 139, 0.1);
+      --external-stroke: #607a8c;
+      --arrow: #7b97aa;
+      --arrow-emphasis: #0d9488;
+    }
+
+    /* ==========================================================
+       BLUEPRINT — a review-first drafting preset for deployment,
+       infrastructure, and technical design documentation. It keeps
+       the same semantic palette and geometry while trading glow for
+       precise grid contrast, squared materials, and drafting marks.
+       ========================================================== */
+    [data-preset="blueprint"][data-theme="dark"] {
+      --bg: #06131f;
+      --grid: #17425a;
+      --panel: rgba(7, 27, 43, 0.9);
+      --panel-border: #27627f;
+      --lane-fill: rgba(10, 43, 66, 0.36);
+      --lane-stroke: #34799a;
+      --text: #e3f6ff;
+      --text-muted: #91b8ca;
+      --text-dim: #557e92;
+      --text-faint: #739caf;
+      --mask: #0a2031;
+      --frontend-fill: rgba(26, 157, 193, 0.14);
+      --frontend-stroke: #66d9ef;
+      --backend-fill: rgba(31, 155, 124, 0.13);
+      --backend-stroke: #69dfbd;
+      --database-fill: rgba(120, 105, 196, 0.14);
+      --database-stroke: #b4a8ff;
+      --cloud-fill: rgba(197, 145, 43, 0.13);
+      --cloud-stroke: #ffd166;
+      --security-fill: rgba(199, 76, 104, 0.13);
+      --security-stroke: #ff8da1;
+      --messagebus-fill: rgba(207, 112, 49, 0.13);
+      --messagebus-stroke: #ffad66;
+      --external-fill: rgba(84, 119, 139, 0.18);
+      --external-stroke: #a7cad9;
+      --arrow: #78a3b7;
+      --arrow-emphasis: #64dfc1;
+      --toolbar-bg: rgba(7, 28, 45, 0.92);
+      --toolbar-border: #34799a;
+      --toolbar-text: #d8f3ff;
+      --toolbar-hover: rgba(18, 58, 83, 0.95);
+      --toolbar-menu-bg: #0a2031;
+    }
+
+    [data-preset="blueprint"][data-theme="light"] {
+      --bg: #edf7fa;
+      --grid: #b5d5e1;
+      --panel: rgba(249, 253, 255, 0.94);
+      --panel-border: #78aabd;
+      --lane-fill: rgba(210, 232, 240, 0.42);
+      --lane-stroke: #83b2c4;
+      --text: #123344;
+      --text-muted: #4e7486;
+      --text-dim: #86a6b4;
+      --text-faint: #668c9d;
+      --mask: #f9fdff;
+      --frontend-fill: rgba(8, 145, 178, 0.08);
+      --frontend-stroke: #087f9c;
+      --backend-fill: rgba(5, 128, 101, 0.08);
+      --backend-stroke: #08755f;
+      --database-fill: rgba(100, 75, 180, 0.08);
+      --database-stroke: #6757a8;
+      --cloud-fill: rgba(181, 120, 15, 0.08);
+      --cloud-stroke: #a86609;
+      --security-fill: rgba(190, 48, 80, 0.07);
+      --security-stroke: #b32f50;
+      --messagebus-fill: rgba(196, 81, 22, 0.07);
+      --messagebus-stroke: #b65120;
+      --external-fill: rgba(79, 112, 128, 0.08);
+      --external-stroke: #506f7e;
+      --arrow: #6d93a5;
+      --arrow-emphasis: #087f69;
+      --toolbar-bg: rgba(247, 252, 254, 0.94);
+      --toolbar-border: #8ab5c5;
+      --toolbar-text: #294f61;
+      --toolbar-hover: #ffffff;
+      --toolbar-menu-bg: #f9fdff;
+    }
+
+    /* ==========================================================
+       EDITORIAL — a warm, publication-minded preset for design
+       reviews, launch notes, and documentation. The diagram keeps
+       the same semantic palette and exact geometry, but trades
+       software chrome for paper, ink, ruled structure, and one
+       restrained vermilion accent.
+       ========================================================== */
+    [data-preset="editorial"][data-theme="dark"] {
+      --bg: #181611;
+      --grid: #39342a;
+      --panel: rgba(35, 31, 24, 0.96);
+      --panel-border: #625a4a;
+      --lane-fill: rgba(52, 46, 35, 0.46);
+      --lane-stroke: #726957;
+      --text: #f4eddf;
+      --text-muted: #b9ae9b;
+      --text-dim: #776e60;
+      --text-faint: #9d917e;
+      --mask: #231f18;
+      --frontend-fill: rgba(43, 133, 142, 0.16);
+      --frontend-stroke: #7fc6c7;
+      --backend-fill: rgba(63, 132, 92, 0.16);
+      --backend-stroke: #8fc29e;
+      --database-fill: rgba(117, 91, 141, 0.17);
+      --database-stroke: #c0a4d0;
+      --cloud-fill: rgba(170, 119, 49, 0.16);
+      --cloud-stroke: #d8ad68;
+      --security-fill: rgba(157, 69, 65, 0.17);
+      --security-stroke: #df9085;
+      --messagebus-fill: rgba(174, 79, 42, 0.16);
+      --messagebus-stroke: #df946f;
+      --external-fill: rgba(126, 115, 96, 0.18);
+      --external-stroke: #b8ad99;
+      --arrow: #948978;
+      --arrow-emphasis: #dd6b3d;
+      --toolbar-bg: rgba(35, 31, 24, 0.92);
+      --toolbar-border: #625a4a;
+      --toolbar-text: #eee5d5;
+      --toolbar-hover: #302a20;
+      --toolbar-menu-bg: #231f18;
+    }
+
+    [data-preset="editorial"][data-theme="light"] {
+      --bg: #f2eee5;
+      --grid: #d8d0c2;
+      --panel: rgba(251, 248, 241, 0.97);
+      --panel-border: #c4b9a6;
+      --lane-fill: rgba(229, 221, 207, 0.42);
+      --lane-stroke: #b8aa94;
+      --text: #242018;
+      --text-muted: #6f6658;
+      --text-dim: #a09788;
+      --text-faint: #817767;
+      --mask: #fbf8f1;
+      --frontend-fill: rgba(31, 117, 126, 0.09);
+      --frontend-stroke: #287e84;
+      --backend-fill: rgba(42, 119, 75, 0.09);
+      --backend-stroke: #397b53;
+      --database-fill: rgba(105, 75, 130, 0.09);
+      --database-stroke: #765d86;
+      --cloud-fill: rgba(157, 103, 31, 0.1);
+      --cloud-stroke: #9a671f;
+      --security-fill: rgba(153, 58, 52, 0.09);
+      --security-stroke: #9e463f;
+      --messagebus-fill: rgba(182, 70, 27, 0.09);
+      --messagebus-stroke: #ad4b25;
+      --external-fill: rgba(101, 91, 75, 0.09);
+      --external-stroke: #746b5e;
+      --arrow: #8a806f;
+      --arrow-emphasis: #bb4c23;
+      --toolbar-bg: rgba(251, 248, 241, 0.94);
+      --toolbar-border: #c4b9a6;
+      --toolbar-text: #40392f;
+      --toolbar-hover: #fffdf8;
+      --toolbar-menu-bg: #fbf8f1;
+    }
+
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {
@@ -132,9 +359,266 @@
       transition: background 0.2s ease, color 0.2s ease;
     }
 
-    .container { max-width: 1200px; margin: 0 auto; }
+    html[data-preset="signal-flow"] body {
+      background-image:
+        radial-gradient(circle at 18% -8%, rgba(34, 211, 238, 0.14), transparent 34rem),
+        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.12), transparent 30rem);
+      background-attachment: fixed;
+    }
+    html[data-preset="signal-flow"][data-theme="light"] body {
+      background-image:
+        radial-gradient(circle at 18% -8%, rgba(6, 182, 212, 0.12), transparent 34rem),
+        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.08), transparent 30rem);
+    }
+    html[data-preset="blueprint"] body {
+      background-image:
+        linear-gradient(var(--grid) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+      background-size: 32px 32px;
+      background-position: -1px -1px;
+      background-attachment: fixed;
+    }
+    html[data-preset="editorial"] body {
+      background-image:
+        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)),
+        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);
+      background-attachment: fixed;
+    }
+
+    /* Gallery/embed mode keeps the generated artifact as the source of truth
+       while presenting only its diagram surface inside a proof card. */
+    html[data-embed="true"] body {
+      min-height: 0;
+      padding: 0;
+      overflow: hidden;
+      background: var(--bg);
+      background-image: none;
+    }
+    html[data-embed="true"] .toolbar,
+    html[data-embed="true"] .header,
+    html[data-embed="true"] .cards,
+    html[data-embed="true"] .diagram-nav,
+    html[data-embed="true"] .overview-map,
+    html[data-embed="true"] .focus-chip,
+    html[data-embed="true"] .route-probe,
+    html[data-embed="true"] .semantic-lens,
+    html[data-embed="true"] .diagram-guide,
+    html[data-embed="true"] .node-finder,
+    html[data-embed="true"] .guided-views { display: none !important; }
+    html[data-embed="true"] .container { max-width: none; }
+    html[data-embed="true"] .diagram-container {
+      padding: 0.5rem;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+    html[data-embed="true"] .diagram-container svg { min-width: 0; }
+
+    /* Share Chapter Cue lives in the HTML viewer layer, not inside the SVG.
+       It gives one-shot embeds a title, authored note, truthful stop order,
+       and lifecycle state while canonical diagram geometry stays untouched. */
+    .share-chapter-cue { display: none; }
+    html[data-embed="true"][data-share-playback="true"] .share-chapter-cue:not([hidden]),
+    html[data-embed="true"][data-share-moment="true"] .share-chapter-cue:not([hidden]) {
+      position: absolute;
+      z-index: 18;
+      top: 0.85rem;
+      left: 50%;
+      display: grid;
+      grid-template-columns: auto minmax(9rem, 13.5rem) minmax(0, 1fr);
+      align-items: center;
+      gap: 0.45rem 0.85rem;
+      width: min(52rem, calc(100% - 1.5rem));
+      min-height: 3.35rem;
+      padding: 0.55rem 0.75rem 0.65rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));
+      border-radius: 0.75rem;
+      background:
+        linear-gradient(115deg, color-mix(in srgb, var(--frontend-fill) 52%, transparent), transparent 45%),
+        color-mix(in srgb, var(--toolbar-menu-bg) 92%, transparent);
+      color: var(--toolbar-text);
+      box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
+      backdrop-filter: blur(16px);
+      pointer-events: none;
+      animation: archify-share-cue-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    html[data-preset="blueprint"] .share-chapter-cue {
+      border-radius: 0.2rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 46%, transparent), transparent 36%),
+        var(--toolbar-menu-bg);
+      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
+      backdrop-filter: none;
+    }
+    html[data-preset="editorial"] .share-chapter-cue {
+      border-color: var(--panel-border);
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 42%),
+        var(--toolbar-menu-bg);
+      box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);
+      backdrop-filter: none;
+    }
+    html[data-preset="editorial"] .share-chapter-state { color: var(--arrow-emphasis); }
+    html[data-preset="editorial"] .share-chapter-state::before {
+      border-radius: 0;
+      box-shadow: none;
+      transform: rotate(45deg) scale(0.8);
+    }
+    .share-chapter-index {
+      display: grid;
+      gap: 0.12rem;
+      min-width: 5rem;
+      padding-right: 0.75rem;
+      border-right: 1px solid var(--toolbar-border);
+    }
+    .share-chapter-state {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.36rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+    .share-chapter-state::before {
+      width: 0.38rem;
+      height: 0.38rem;
+      border-radius: 50%;
+      background: currentColor;
+      box-shadow: 0 0 10px currentColor;
+      content: '';
+    }
+    .share-chapter-cue[data-state="playing"] .share-chapter-state::before {
+      animation: archify-share-cue-pulse 1.15s ease-in-out infinite;
+    }
+    .share-chapter-count {
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .share-chapter-copy { min-width: 0; }
+    .share-chapter-copy strong,
+    .share-chapter-copy small,
+    .share-chapter-route {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .share-chapter-copy strong {
+      color: var(--toolbar-text);
+      font-size: 0.6875rem;
+      line-height: 1.35;
+    }
+    .share-chapter-copy small {
+      margin-top: 0.08rem;
+      color: var(--text-muted);
+      font-size: 0.5rem;
+      line-height: 1.35;
+    }
+    .share-chapter-route {
+      color: color-mix(in srgb, var(--frontend-stroke) 76%, var(--text-muted));
+      font-size: 0.5625rem;
+      font-weight: 650;
+      letter-spacing: 0.015em;
+      text-align: right;
+    }
+    .share-chapter-progress {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      overflow: hidden;
+      background: color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    .share-chapter-progress span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, var(--frontend-stroke), var(--database-stroke));
+      box-shadow: 0 0 12px var(--frontend-stroke);
+      transform: scaleX(0);
+      transform-origin: left center;
+    }
+
+    /* Presentation Stage is a viewer-only layer: it gives the live diagram
+       the viewport while keeping guided views, theme, focus, and exports real.
+       Embed mode wins when both query parameters are present. */
+    html[data-present="true"]:not([data-embed="true"]) body {
+      height: 100dvh;
+      min-height: 0;
+      padding: 1rem;
+      overflow: hidden;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      width: 100%;
+      max-width: none;
+      height: calc(100dvh - 2rem);
+    }
+    html[data-present="true"]:not([data-embed="true"]) .header {
+      flex: none;
+      min-width: 0;
+      margin: 0;
+      padding-right: 23rem;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .header-row { margin-bottom: 0.25rem; }
+    html[data-present="true"]:not([data-embed="true"]) .subtitle {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .guided-views {
+      flex: none;
+      margin-bottom: 0;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .diagram-container {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: center;
+      min-height: 0;
+      padding: 0.75rem;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .diagram-container > svg {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .cards { display: none; }
+    html[data-present="true"]:not([data-embed="true"]) #btn-present {
+      border-color: var(--frontend-stroke);
+      color: var(--frontend-stroke);
+    }
+
+    /* The reader owns only the outer scale. Wide diagrams keep one authored
+       SVG/viewBox while the runtime chooses a desktop width from the actual
+       vertical budget. This avoids device-specific files and breakpoint
+       jumps between a laptop and a tall monitor. */
+    .container {
+      width: 100%;
+      max-width: var(--archify-reader-width, 1440px);
+      margin: 0 auto;
+    }
+    @media (min-width: 768px) and (max-height: 920px) {
+      .header { margin-bottom: 1rem; }
+      .diagram-container { padding: 1rem; }
+      .cards { margin-top: 1rem; }
+      .card { padding: 1rem; }
+    }
+
+    .header { margin-bottom: 1.5rem; padding-right: 29.5rem; }
 
-    .header { margin-bottom: 2rem; }
+    html[data-preset="signal-flow"] .header,
+    html[data-preset="blueprint"] .header,
+    html[data-preset="editorial"] .header { padding-right: 29.5rem; }
 
     .header-row {
       display: flex;
@@ -148,9 +632,11 @@
       height: 12px;
       background: var(--frontend-stroke);
       border-radius: 50%;
-      animation: pulse 2s infinite;
+      animation: none;
     }
 
+    html[data-motion-capable="true"] .pulse-dot { animation: pulse 2s infinite; }
+
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
@@ -168,330 +654,4151 @@
       margin-left: 1.75rem;
     }
 
+    html[data-preset="signal-flow"] .header-row::after {
+      content: "SIGNAL FLOW";
+      margin-left: auto;
+      color: var(--frontend-stroke);
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 999px;
+      padding: 0.28rem 0.6rem;
+      font-size: 0.625rem;
+      letter-spacing: 0.12em;
+      opacity: 0.82;
+      box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
+      white-space: nowrap;
+    }
+
+    html[data-preset="blueprint"] .pulse-dot {
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 1px;
+      background: transparent;
+      box-shadow: inset 0 0 0 2px var(--bg);
+      transform: rotate(45deg);
+      animation: none;
+    }
+    html[data-preset="blueprint"] .header-row::after {
+      content: "BLUEPRINT / REV 01";
+      margin-left: auto;
+      padding: 0.28rem 0.55rem;
+      border-top: 1px solid var(--frontend-stroke);
+      border-bottom: 1px solid var(--frontend-stroke);
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 700;
+      letter-spacing: 0.14em;
+      white-space: nowrap;
+    }
+
+    html[data-preset="editorial"] h1,
+    html[data-preset="editorial"] .card h3 {
+      font-family: Georgia, 'Times New Roman', 'Songti SC', STSong, serif;
+      letter-spacing: -0.02em;
+    }
+    html[data-preset="editorial"] h1 { font-size: 1.72rem; font-weight: 600; }
+    html[data-preset="editorial"] .pulse-dot {
+      width: 9px;
+      height: 9px;
+      border: 1px solid var(--arrow-emphasis);
+      border-radius: 0;
+      background: var(--arrow-emphasis);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);
+      transform: rotate(45deg);
+      animation: none;
+    }
+    html[data-preset="editorial"] .header-row::after {
+      content: "EDITORIAL / FIELD NOTE";
+      margin-left: auto;
+      padding: 0.32rem 0 0.24rem;
+      border-bottom: 2px solid var(--arrow-emphasis);
+      color: var(--arrow-emphasis);
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 0.625rem;
+      font-style: italic;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      white-space: nowrap;
+    }
+
     .diagram-container {
       background: var(--panel);
       border-radius: 1rem;
       border: 1px solid var(--panel-border);
       padding: 1.5rem;
-      overflow-x: auto;
+      overflow: hidden;
+      position: relative;
     }
 
-    svg {
-      width: 100%;
-      min-width: min(900px, 100%);
-      display: block;
+    html[data-preset="signal-flow"] .diagram-container {
+      position: relative;
+      overflow: hidden;
+      background: linear-gradient(180deg, rgba(8, 20, 38, 0.82), rgba(3, 8, 18, 0.94));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.34);
     }
-
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
-      margin-top: 2rem;
+    html[data-preset="signal-flow"][data-theme="light"] .diagram-container {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(237, 246, 250, 0.94));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 60px rgba(45, 78, 99, 0.12);
     }
-
-    .card {
+    html[data-preset="blueprint"] .diagram-container {
+      border-color: var(--panel-border);
+      border-radius: 0.35rem;
       background: var(--panel);
-      border-radius: 0.75rem;
+      box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 34%, transparent),
+        0 18px 48px rgba(0, 0, 0, 0.16);
+    }
+    html[data-preset="blueprint"] .diagram-container::after {
+      content: "";
+      position: absolute;
+      z-index: 10;
+      inset: 0.7rem;
+      pointer-events: none;
+      background:
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1px 1.35rem no-repeat;
+      opacity: 0.58;
+    }
+    html[data-preset="editorial"] .diagram-container {
+      overflow: hidden;
+      border-color: var(--panel-border);
+      border-radius: 0.38rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 12%),
+        var(--panel);
+      box-shadow:
+        0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
+        0 18px 48px color-mix(in srgb, #000 19%, transparent);
+    }
+    html[data-preset="editorial"] .diagram-container::after {
+      position: absolute;
+      z-index: 10;
+      top: 0.72rem;
+      right: 1.25rem;
+      padding: 0.2rem 0.52rem;
       border: 1px solid var(--panel-border);
-      padding: 1.25rem;
+      background: var(--panel);
+      color: var(--arrow-emphasis);
+      content: "ARCHIFY / PLATE 04";
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 0.52rem;
+      font-style: italic;
+      font-weight: 600;
+      letter-spacing: 0.09em;
+      pointer-events: none;
     }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.75rem;
+    html[data-embed="true"][data-preset="editorial"] .diagram-container::after { display: none; }
+    html[data-motion-capable="true"][data-preset="signal-flow"][data-ambient-motion="running"] .diagram-container::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(115deg, transparent 28%, rgba(103, 232, 249, 0.035) 48%, transparent 68%);
+      transform: translateX(-70%);
+      animation: archify-signal-scan 4.8s ease-in-out 1 both;
     }
 
-    .card-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
+    /* Motion Governor gives the reader a real static state and gives the
+       strongest semantic action the only motion budget. Atmosphere resets to
+       its authored base instead of freezing mid-cycle. Static artifacts never
+       start a decorative pulse or scan. */
+    html:not([data-motion-capable="true"]) svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
     }
-
-    .card-dot.cyan     { background: var(--frontend-stroke); }
-    .card-dot.emerald  { background: var(--backend-stroke); }
-    .card-dot.violet   { background: var(--database-stroke); }
-    .card-dot.amber    { background: var(--cloud-stroke); }
-    .card-dot.rose     { background: var(--security-stroke); }
-    .card-dot.orange   { background: var(--messagebus-stroke); }
-    .card-dot.slate    { background: var(--external-stroke); }
-
-    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }
-
-    .card ul {
-      list-style: none;
-      color: var(--text-muted);
-      font-size: 0.75rem;
+    html[data-motion="still"] .pulse-dot,
+    html[data-motion="still"] .diagram-container::before,
+    html[data-motion="still"] svg[data-animation="trace"] [data-animate],
+    html[data-motion-owner] .pulse-dot,
+    html[data-motion-owner] .diagram-container::before,
+    html[data-motion-owner] svg[data-animation="trace"] [data-animate],
+    html[data-embed="true"] .pulse-dot,
+    html[data-embed="true"] .diagram-container::before,
+    html[data-share-playback="true"] .pulse-dot,
+    html[data-share-playback="true"] .diagram-container::before,
+    html[data-document-hidden="true"] .pulse-dot,
+    html[data-document-hidden="true"] .diagram-container::before,
+    html[data-document-hidden="true"] svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
+    }
+    html[data-motion="still"] .diagram-container::before,
+    html[data-motion-owner] .diagram-container::before,
+    html[data-embed="true"] .diagram-container::before,
+    html[data-share-playback="true"] .diagram-container::before {
+      opacity: 0;
+    }
+    html[data-motion="still"] .guided-view-progress span,
+    html[data-motion="still"] .guided-story-caption,
+    html[data-motion="still"] .story-trail-flow,
+    html[data-motion="still"] .intent-trace-flow,
+    html[data-motion="still"] .route-probe-flow,
+    html[data-motion="still"] .route-journey-flow,
+    html[data-motion="still"] .semantic-lens-flow,
+    html[data-motion="still"] .diagram-guide,
+    html[data-motion="still"] [data-story-step],
+    html[data-motion="still"] .overview-map-live,
+    html[data-motion="still"] .guided-view-stop,
+    html[data-motion="still"] .share-chapter-cue,
+    html[data-motion="still"] .share-chapter-state::before,
+    html[data-motion="still"] .share-chapter-progress span,
+    html[data-document-hidden="true"] .guided-view-progress span,
+    html[data-document-hidden="true"] .story-trail-flow,
+    html[data-document-hidden="true"] .intent-trace-flow,
+    html[data-document-hidden="true"] .route-probe-flow,
+    html[data-document-hidden="true"] .route-journey-flow,
+    html[data-document-hidden="true"] .semantic-lens-flow,
+    html[data-document-hidden="true"] .diagram-guide,
+    html[data-document-hidden="true"] [data-story-step],
+    html[data-document-hidden="true"] .overview-map-live,
+    html[data-document-hidden="true"] .guided-view-stop,
+    html[data-document-hidden="true"] .share-chapter-cue,
+    html[data-document-hidden="true"] .share-chapter-state::before,
+    html[data-document-hidden="true"] .share-chapter-progress span {
+      animation: none !important;
+    }
+    html[data-motion="still"] .guided-view-progress span {
+      transform: scaleX(1) !important;
+    }
+    html[data-motion="still"] svg[data-story-playing="true"] .story-trail-flow {
+      stroke-dasharray: none;
+      stroke-dashoffset: 0;
+      opacity: 0.55;
+    }
+    html[data-motion="still"] .intent-trace-flow,
+    html[data-motion="still"] .route-probe-flow {
+      stroke-dasharray: none;
+      stroke-dashoffset: 0;
+      opacity: 0.72;
+    }
+    html[data-motion="still"] .route-journey-overlay,
+    html[data-document-hidden="true"] .route-journey-overlay { display: none !important; }
+    html[data-motion="still"] .relationship-pulse-overlay,
+    html[data-motion="still"] .story-carrier-overlay,
+    html[data-document-hidden="true"] .story-carrier-overlay { display: none !important; }
+    html[data-motion="still"] .chapter-handoff-overlay { display: none !important; }
+    html[data-motion="still"] .chapter-handoff-anchor { animation: none !important; }
+    html[data-motion="still"] .guided-view-chapter,
+    html[data-motion="still"] svg [data-node-id],
+    html[data-motion="still"] svg [data-edge-from],
+    html[data-motion="still"] svg [data-detail],
+    html[data-motion="still"] svg [data-detail-anchor],
+    html[data-motion="still"] svg [data-legend-hit],
+    html[data-motion="still"] svg {
+      transition: none !important;
     }
 
-    .card li { margin-bottom: 0.375rem; }
-
-    /* ==========================================================
-       Print stylesheet — hide interactive controls, force light,
-       drop the grid so the diagram doesn't waste ink, use landscape
-       so wide diagrams fit, pack summary cards into 2 columns to
-       avoid an orphan card on a trailing page.
-       ========================================================== */
-    @page { size: landscape; margin: 1.5cm; }
+    svg {
+      width: 100%;
+      min-width: min(900px, 100%);
+      display: block;
+      transform-origin: 0 0;
+      transition: transform 0.18s ease;
+    }
 
-    @media print {
-      /* Force the FULL light palette — including component fills/strokes and
-         lane/arrow colors — so printing from dark theme doesn't put neon
-         strokes and translucent dark fills on white paper. */
-      :root, [data-theme="dark"], [data-theme="light"] {
-        --bg: #ffffff;
-        --grid: transparent;
-        --panel: #ffffff;
-        --panel-border: #e2e8f0;
-        --text: #0f172a;
-        --text-muted: #475569;
-        --text-dim: #94a3b8;
-        --text-faint: #64748b;
-        --mask: #ffffff;
-        --lane-fill: rgba(248, 250, 252, 0.65);
-        --lane-stroke: #cbd5e1;
-        --arrow: #94a3b8;
-        --arrow-emphasis: #059669;
-        --frontend-fill:    rgba(34, 211, 238, 0.15);
-        --frontend-stroke:  #0891b2;
-        --backend-fill:     rgba(52, 211, 153, 0.18);
-        --backend-stroke:   #059669;
-        --database-fill:    rgba(167, 139, 250, 0.2);
-        --database-stroke:  #7c3aed;
-        --cloud-fill:       rgba(251, 191, 36, 0.18);
-        --cloud-stroke:     #d97706;
-        --security-fill:    rgba(251, 113, 133, 0.15);
-        --security-stroke:  #e11d48;
-        --messagebus-fill:  rgba(251, 146, 60, 0.15);
-        --messagebus-stroke:#ea580c;
-        --external-fill:    rgba(148, 163, 184, 0.18);
-        --external-stroke:  #64748b;
-      }
-      body { background: #ffffff !important; padding: 0; }
-      .container { max-width: none; }
-      .toolbar, .archify-toast, .no-print { display: none !important; }
-      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }
-      .cards { grid-template-columns: 1fr 1fr; }
-      /* Ensure elements break sensibly across pages */
-      .card { break-inside: avoid; page-break-inside: avoid; }
-      .diagram-container { break-inside: avoid; page-break-inside: avoid; }
-      h1, .subtitle { color: #0f172a; }
+    .diagram-container.is-camera-moving svg {
+      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
     }
+    .diagram-container.is-camera-transaction svg { transition: none; }
+    .diagram-container.is-pannable { cursor: grab; }
+    .diagram-container.is-panning { cursor: grabbing; user-select: none; }
+    .diagram-container.is-panning svg { transition: none; }
 
-    /* ==========================================================
-       TOOLBAR (theme toggle + export menu)
-       ========================================================== */
-    .toolbar {
-      position: fixed;
-      top: 1rem;
+    .diagram-nav {
+      position: absolute;
       right: 1rem;
-      display: flex;
-      gap: 0.5rem;
-      z-index: 100;
+      bottom: 1rem;
+      z-index: 12;
+      display: inline-flex;
+      align-items: center;
+      max-width: calc(100% - 2rem);
+      padding: 0.15rem;
+      gap: 0;
+      overflow-x: auto;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 48%, transparent);
+      border-radius: 0.58rem;
+      background: color-mix(in srgb, var(--toolbar-bg) 82%, transparent);
+      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);
+      backdrop-filter: blur(10px);
+      scrollbar-width: none;
     }
-    .toolbar button {
-      background: var(--toolbar-bg);
+    .diagram-nav::-webkit-scrollbar { display: none; }
+    .diagram-nav button,
+    .focus-chip button,
+    .guided-views button {
+      border: 0;
+      background: transparent;
       color: var(--toolbar-text);
-      border: 1px solid var(--toolbar-border);
-      padding: 0.5rem 0.875rem;
-      border-radius: 0.5rem;
-      font-family: inherit;
-      font-size: 0.75rem;
-      font-weight: 500;
+      font: inherit;
       cursor: pointer;
-      backdrop-filter: blur(8px);
-      transition: background 0.15s, border-color 0.15s;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
     }
-    .toolbar button:hover {
-      background: var(--toolbar-hover);
-      border-color: var(--arrow);
+    .diagram-nav button {
+      min-width: 2rem;
+      height: 2rem;
+      padding: 0 0.35rem;
+      border-radius: 0.35rem;
+      color: color-mix(in srgb, var(--toolbar-text) 68%, transparent);
+      font-size: 0.56rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      transition: background 0.15s, color 0.15s;
     }
-    .toolbar button:focus-visible {
+    .diagram-nav button:hover,
+    .diagram-nav button:focus-visible,
+    .focus-chip button:hover,
+    .focus-chip button:focus-visible,
+    .guided-views button:hover,
+    .guided-views button:focus-visible { background: var(--toolbar-hover); }
+    .diagram-nav button:focus-visible,
+    .focus-chip button:focus-visible,
+    .guided-views button:focus-visible {
       outline: 2px solid var(--frontend-stroke);
-      outline-offset: 2px;
+      outline-offset: 1px;
     }
-    .toolbar .export-wrap { position: relative; }
-    .toolbar .export-menu {
+    .diagram-nav button:disabled { opacity: 0.38; cursor: default; }
+    .diagram-nav button:disabled:hover { background: transparent; }
+    .diagram-nav #btn-route-probe,
+    .diagram-nav #btn-overview-map,
+    .diagram-nav #btn-semantic-lens {
+      min-width: auto;
+      padding-inline: 0.5rem;
+      color: color-mix(in srgb, var(--toolbar-text) 86%, transparent);
+      font-weight: 650;
+    }
+    .diagram-nav #btn-node-finder,
+    .diagram-nav [data-view="out"] {
+      position: relative;
+      margin-left: 0.25rem;
+    }
+    .diagram-nav #btn-node-finder::before,
+    .diagram-nav [data-view="out"]::before {
       position: absolute;
-      top: calc(100% + 0.375rem);
-      right: 0;
-      background: var(--toolbar-menu-bg);
-      border: 1px solid var(--toolbar-border);
-      border-radius: 0.5rem;
-      padding: 0.375rem;
-      min-width: 160px;
-      display: none;
-      flex-direction: column;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+      top: 0.4rem;
+      bottom: 0.4rem;
+      left: -0.13rem;
+      width: 1px;
+      background: color-mix(in srgb, var(--toolbar-border) 62%, transparent);
+      content: "";
+      pointer-events: none;
     }
-    .toolbar .export-menu.open { display: flex; }
-    .toolbar .export-menu button {
-      background: transparent;
+    .diagram-nav-icon {
+      display: block;
+      width: 0.72rem;
+      height: 0.72rem;
+      margin: auto;
+      background: currentColor;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .diagram-nav-icon.find {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.guide {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.minus {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.plus {
+      -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");
+      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");
+    }
+    .diagram-nav [data-view="reset"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.2rem;
+      min-width: 3.1rem;
+      padding-inline: 0.35rem;
+    }
+    .diagram-nav [data-view="reset"][data-detail-visible] {
+      min-width: 3.8rem;
+    }
+    .diagram-nav-detail {
+      color: color-mix(in srgb, var(--toolbar-text) 52%, transparent);
+      font-size: 0.44rem;
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: 0.07em;
+    }
+    .diagram-nav-percent {
+      color: color-mix(in srgb, var(--toolbar-text) 84%, transparent);
+      font-size: 0.55rem;
+      font-weight: 650;
+      line-height: 1;
+    }
+    .diagram-container[data-camera-indicator="true"] .diagram-nav-detail,
+    .diagram-container[data-camera-indicator="true"] .diagram-nav-percent { color: var(--frontend-stroke); }
+    .diagram-nav #btn-diagram-guide[aria-expanded="true"] {
+      color: var(--cloud-stroke);
+      background: var(--toolbar-hover);
+    }
+
+    /* Semantic Radar is a deliberately simplified, viewer-only overview. It
+       uses authored node bounds and the live camera viewport rather than
+       cloning the canonical SVG, so IDs, filters, animation, and export state
+       stay singular and deterministic. */
+    .overview-map {
+      position: absolute;
+      right: 1rem;
+      bottom: 4.15rem;
+      z-index: 12;
+      width: 11.25rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));
+      border-radius: 0.78rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.625rem;
+    }
+    .overview-map[hidden] { display: none; }
+    .overview-map[data-docked="true"] {
+      position: fixed;
+      right: var(--archify-radar-right, 1rem);
+      top: var(--archify-radar-top, 1rem);
+      bottom: auto;
+    }
+    .overview-map[data-docked="true"][data-dock-side="left"] {
+      right: auto;
+      left: var(--archify-radar-left, 1rem);
+    }
+    html[data-preset="blueprint"] .overview-map { border-radius: 0.28rem; }
+    .overview-map-head {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.45rem;
+      min-height: 2.25rem;
+      padding: 0.42rem 0.48rem 0.38rem 0.55rem;
+      border-bottom: 1px solid var(--toolbar-border);
+      background: linear-gradient(110deg, color-mix(in srgb, var(--frontend-fill) 45%, transparent), transparent 68%);
+    }
+    .overview-map-live {
+      width: 0.42rem;
+      height: 0.42rem;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent);
+      animation: archify-radar-live 2.4s ease-out infinite;
+    }
+    .overview-map-copy { min-width: 0; line-height: 1.1; }
+    .overview-map-copy strong {
+      display: block;
+      overflow: hidden;
+      color: var(--frontend-stroke);
+      font-size: 0.59rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .overview-map-copy small {
+      display: block;
+      margin-top: 0.18rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.52rem;
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .overview-map-close {
+      width: 1.55rem;
+      height: 1.55rem;
+      padding: 0;
       border: 0;
-      justify-content: space-between;
+      border-radius: 0.34rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 0.9rem;
+      cursor: pointer;
+    }
+    .overview-map-close:hover,
+    .overview-map-close:focus-visible { background: var(--toolbar-hover); }
+    .overview-map-close:focus-visible,
+    .overview-map-surface:focus-visible,
+    .overview-map-node:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .overview-map-surface {
+      position: relative;
+      height: 7rem;
+      margin: 0.42rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
+      border-radius: 0.42rem;
+      background:
+        linear-gradient(color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),
+        linear-gradient(90deg, color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),
+        color-mix(in srgb, var(--bg) 86%, transparent);
+      background-size: 12px 12px;
+      cursor: crosshair;
+      touch-action: none;
+    }
+    html[data-preset="blueprint"] .overview-map-surface { border-radius: 0.1rem; }
+    .overview-map-surface > svg {
       width: 100%;
-      text-align: left;
-      padding: 0.5rem 0.75rem;
+      height: 100%;
+      min-width: 0;
+      transform: none !important;
+      transition: none !important;
+      display: block;
+      overflow: visible;
     }
-    .toolbar .export-menu button:hover {
-      background: var(--toolbar-hover);
+    .overview-map-node {
+      fill: var(--backend-stroke);
+      fill-opacity: 0.52;
+      stroke: var(--backend-stroke);
+      stroke-opacity: 0.86;
+      vector-effect: non-scaling-stroke;
+      cursor: pointer;
+      transition: fill-opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;
     }
-    .toolbar .export-menu .hint {
+    .overview-map-node[data-kind="frontend"],
+    .overview-map-node[data-kind="start"] { fill: var(--frontend-stroke); stroke: var(--frontend-stroke); }
+    .overview-map-node[data-kind="database"],
+    .overview-map-node[data-kind="success"] { fill: var(--database-stroke); stroke: var(--database-stroke); }
+    .overview-map-node[data-kind="cloud"],
+    .overview-map-node[data-kind="waiting"] { fill: var(--cloud-stroke); stroke: var(--cloud-stroke); }
+    .overview-map-node[data-kind="messagebus"] { fill: var(--messagebus-stroke); stroke: var(--messagebus-stroke); }
+    .overview-map-node[data-kind="security"],
+    .overview-map-node[data-kind="decision"],
+    .overview-map-node[data-kind="failure"] { fill: var(--security-stroke); stroke: var(--security-stroke); }
+    .overview-map-node[data-kind="external"],
+    .overview-map-node[data-kind="neutral"] { fill: var(--external-stroke); stroke: var(--external-stroke); }
+    .overview-map-node[data-radar-active="true"],
+    .overview-map-node:hover,
+    .overview-map-node:focus-visible {
+      fill-opacity: 0.92;
+      stroke-width: 2.2;
+      filter: drop-shadow(0 0 3px currentColor);
+    }
+    .overview-map-viewport {
+      fill: color-mix(in srgb, var(--frontend-fill) 56%, transparent);
+      stroke: var(--frontend-stroke);
+      stroke-width: 2;
+      vector-effect: non-scaling-stroke;
+      pointer-events: none;
+      filter: drop-shadow(0 0 3px color-mix(in srgb, var(--frontend-stroke) 54%, transparent));
+    }
+    .overview-map-hint {
+      display: flex;
+      justify-content: space-between;
+      gap: 0.5rem;
+      padding: 0 0.52rem 0.46rem;
       color: var(--text-faint);
-      font-size: 0.625rem;
+      font-size: 0.49rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .diagram-nav #btn-overview-map[aria-expanded="true"] {
+      color: var(--frontend-stroke);
+      background: var(--toolbar-hover);
+    }
+    .diagram-nav #btn-route-probe[aria-pressed="true"] {
+      color: var(--backend-stroke);
+      background: var(--toolbar-hover);
+    }
+    .diagram-nav #btn-semantic-lens[aria-expanded="true"],
+    .diagram-nav #btn-semantic-lens[aria-pressed="true"] {
+      color: var(--database-stroke);
+      background: var(--toolbar-hover);
+    }
+
+    /* Semantic Lens turns the compiled node-kind palette into an analytical
+       legend. One kind reveals its real traffic; two kinds compare only their
+       direct authored relationships. Geometry and the canonical SVG stay put. */
+    .semantic-lens {
+      position: absolute;
+      right: 1rem;
+      bottom: 4.15rem;
+      z-index: 24;
+      width: min(20rem, calc(100% - 2rem));
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--database-stroke) 58%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(135deg, color-mix(in srgb, var(--database-fill) 34%, transparent), transparent 48%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
+      backdrop-filter: blur(18px);
+      animation: archify-lens-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .semantic-lens[hidden] { display: none; }
+    .semantic-lens[data-dock-side="left"] { left: 1rem; right: auto; }
+    .semantic-lens[data-dock-side="right"] { left: auto; right: 1rem; }
+    html[data-preset="blueprint"] .semantic-lens { border-radius: 0.28rem; }
+    .semantic-lens-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.75rem;
+      padding: 0.72rem 0.78rem 0.62rem;
+      border-bottom: 1px solid var(--toolbar-border);
+    }
+    .semantic-lens-eyebrow {
+      display: block;
+      color: var(--database-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
     }
-    .toolbar .export-menu hr {
+    .semantic-lens-title {
+      display: block;
+      margin-top: 0.16rem;
+      color: var(--text);
+      font-size: 0.82rem;
+      letter-spacing: -0.02em;
+    }
+    .semantic-lens-close {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
       border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .semantic-lens-close:hover,
+    .semantic-lens-close:focus-visible { background: var(--toolbar-hover); }
+    .semantic-lens-instruction {
+      margin: 0;
+      padding: 0.52rem 0.78rem 0.48rem;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      line-height: 1.45;
+    }
+    .semantic-lens-kinds {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.3rem;
+      max-height: min(15rem, 40vh);
+      padding: 0 0.5rem 0.5rem;
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+    .semantic-lens-kind {
+      --lens-color: var(--external-stroke);
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.42rem;
+      min-width: 0;
+      min-height: 2.15rem;
+      padding: 0.35rem 0.42rem;
+      border: 1px solid color-mix(in srgb, var(--lens-color) 24%, var(--toolbar-border));
+      border-radius: 0.45rem;
+      background: color-mix(in srgb, var(--panel) 76%, transparent);
+      color: var(--toolbar-text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
+    }
+    html[data-preset="blueprint"] .semantic-lens-kind { border-radius: 0.12rem; }
+    .semantic-lens-kind[data-kind="frontend"],
+    .semantic-lens-kind[data-kind="start"] { --lens-color: var(--frontend-stroke); }
+    .semantic-lens-kind[data-kind="backend"],
+    .semantic-lens-kind[data-kind="active"] { --lens-color: var(--backend-stroke); }
+    .semantic-lens-kind[data-kind="database"],
+    .semantic-lens-kind[data-kind="success"] { --lens-color: var(--database-stroke); }
+    .semantic-lens-kind[data-kind="cloud"],
+    .semantic-lens-kind[data-kind="waiting"] { --lens-color: var(--cloud-stroke); }
+    .semantic-lens-kind[data-kind="messagebus"] { --lens-color: var(--messagebus-stroke); }
+    .semantic-lens-kind[data-kind="security"],
+    .semantic-lens-kind[data-kind="decision"],
+    .semantic-lens-kind[data-kind="failure"] { --lens-color: var(--security-stroke); }
+    .semantic-lens-kind:hover,
+    .semantic-lens-kind:focus-visible,
+    .semantic-lens-kind[aria-pressed="true"] {
+      border-color: color-mix(in srgb, var(--lens-color) 78%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--lens-color) 11%, var(--panel));
+    }
+    .semantic-lens-kind:focus-visible,
+    .semantic-lens-close:focus-visible,
+    .semantic-lens-actions button:focus-visible {
+      outline: 2px solid var(--database-stroke);
+      outline-offset: 1px;
+    }
+    .semantic-lens-kind:disabled { opacity: 0.34; cursor: default; }
+    .semantic-lens-swatch {
+      width: 0.48rem;
+      height: 0.48rem;
+      border-radius: 50%;
+      background: var(--lens-color);
+      box-shadow: 0 0 8px color-mix(in srgb, var(--lens-color) 58%, transparent);
+    }
+    .semantic-lens-kind strong {
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.61rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-lens-kind em {
+      color: var(--lens-color);
+      font-size: 0.54rem;
+      font-style: normal;
+      font-weight: 800;
+    }
+    .semantic-lens-status {
+      min-height: 2.5rem;
+      margin: 0;
+      padding: 0.55rem 0.78rem;
       border-top: 1px solid var(--toolbar-border);
-      margin: 0.25rem 0.375rem;
-      opacity: 0.5;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      line-height: 1.45;
+    }
+    .semantic-lens-status strong { color: var(--database-stroke); font-weight: 800; }
+    .semantic-lens-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.28rem;
+      padding: 0 0.62rem 0.62rem;
+    }
+    .semantic-lens-actions button {
+      min-height: 1.8rem;
+      padding: 0.28rem 0.48rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 0.56rem;
+      cursor: pointer;
+    }
+    .semantic-lens-actions button:hover { background: var(--toolbar-hover); }
+    .semantic-lens-actions #semantic-lens-copy { color: var(--database-stroke); }
+    @keyframes archify-lens-in {
+      from { opacity: 0; transform: translateY(5px) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
     }
 
-    /* Toast — brief feedback for actions like "copied" */
-    .archify-toast {
-      position: fixed;
+    /* Route Probe answers a reader question over the compiled semantic graph:
+       choose two stable nodes and reveal the shortest authored directed route.
+       The receipt and signal live entirely in the viewer layer. */
+    .route-probe {
+      position: absolute;
+      left: 1rem;
+      bottom: 1rem;
+      z-index: 12;
+      width: min(46rem, calc(100% - 25rem));
+      min-width: 18rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 62%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(115deg, color-mix(in srgb, var(--backend-fill) 50%, transparent), transparent 62%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.625rem;
+    }
+    .route-probe[hidden] { display: none; }
+    .route-probe[data-route-dock="top"] {
       top: 1rem;
-      left: 50%;
-      transform: translateX(-50%) translateY(-8px);
-      background: var(--toolbar-menu-bg);
+      bottom: auto;
+    }
+    html[data-preset="blueprint"] .route-probe { border-radius: 0.25rem; }
+    .route-probe-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.65rem;
+      padding: 0.52rem 0.58rem 0.44rem;
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 80%, transparent);
+    }
+    .route-probe-copy { min-width: 0; }
+    .route-probe-eyebrow {
+      display: block;
+      color: var(--backend-stroke);
+      font-size: 0.48rem;
+      font-weight: 800;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+    .route-probe-title {
+      display: block;
+      margin-top: 0.14rem;
+      overflow: hidden;
+      color: var(--toolbar-text);
+      font-size: 0.72rem;
+      line-height: 1.25;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .route-probe-actions { display: flex; gap: 0.2rem; }
+    .route-probe button {
+      min-height: 1.55rem;
+      padding: 0.25rem 0.42rem;
+      border: 0;
+      border-radius: 0.36rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      cursor: pointer;
+    }
+    .route-probe button:hover,
+    .route-probe button:focus-visible { background: var(--toolbar-hover); }
+    .route-probe button:focus-visible {
+      outline: 2px solid var(--backend-stroke);
+      outline-offset: 1px;
+    }
+    .route-probe-copy-link { color: var(--frontend-stroke) !important; }
+    .route-probe-find { color: var(--backend-stroke) !important; }
+    .route-probe-copy-link[hidden] { display: none; }
+    .route-probe-find[hidden] { display: none; }
+    .route-probe-path {
+      display: flex;
+      align-items: center;
+      min-height: 2.2rem;
+      padding: 0.42rem 0.58rem 0.24rem;
+      overflow-x: auto;
+      scrollbar-width: thin;
+      white-space: nowrap;
+    }
+    .route-probe-node,
+    .route-probe button.route-probe-node {
+      flex: none;
+      max-width: 9.5rem;
+      overflow: hidden;
+      min-height: 1.75rem !important;
+      padding: 0.22rem 0.38rem;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 46%, var(--toolbar-border));
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--backend-fill) 52%, transparent);
       color: var(--text);
-      border: 1px solid var(--toolbar-border);
-      padding: 0.5rem 1rem;
-      border-radius: 0.5rem;
-      font-family: inherit;
-      font-size: 0.75rem;
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      z-index: 200;
-      pointer-events: none;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+      font-size: 0.56rem;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .archify-toast.show {
+    .route-probe-node[data-endpoint="start"] {
+      border-color: var(--frontend-stroke);
+      color: var(--frontend-stroke);
+    }
+    .route-probe-node[data-endpoint="end"] {
+      border-color: var(--security-stroke);
+      color: var(--security-stroke);
+    }
+    .route-probe-node[data-route-journey-state="past"] { opacity: 0.66; }
+    .route-probe-node[data-route-journey-state="future"] { opacity: 0.48; }
+    .route-probe-node[aria-current="step"] {
+      border-color: var(--backend-stroke);
+      background: color-mix(in srgb, var(--backend-fill) 82%, var(--toolbar-menu-bg));
+      color: var(--text);
+      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);
       opacity: 1;
-      transform: translateX(-50%) translateY(0);
     }
-
-    @media (max-width: 720px) {
-      body { padding: 1rem; }
-      .toolbar {
-        position: static;
-        justify-content: flex-end;
-        margin-bottom: 1rem;
-      }
-      .header { margin-bottom: 1.25rem; }
-      .header-row {
-        gap: 0.75rem;
-        align-items: flex-start;
-      }
-      h1 {
-        font-size: 1.25rem;
-        line-height: 1.25;
-      }
-      .subtitle {
-        margin-left: 0;
-        font-size: 0.8125rem;
-        line-height: 1.55;
-      }
-      .diagram-container {
-        padding: 0.75rem;
-        border-radius: 0.75rem;
-      }
-      .cards {
-        grid-template-columns: 1fr;
-        margin-top: 1rem;
-      }
+    html[data-preset="blueprint"] .route-probe-node[aria-current="step"] {
+      border-style: double;
+      border-width: 3px;
+      border-radius: 0.2rem;
+      box-shadow: none;
     }
-
-    /* ==========================================================
-       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke
-       ========================================================== */
-    .c-grid       { stroke: var(--grid); fill: none; }
-    .c-mask       { fill: var(--mask); stroke: none; }
-
-    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }
-    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }
-    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }
-    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }
-    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }
-    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }
-    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }
-
-    /* Text helpers */
-    .t-primary { fill: var(--text); }
-    .t-muted   { fill: var(--text-muted); }
-    .t-dim     { fill: var(--text-dim); }
-    .t-frontend   { fill: var(--frontend-stroke); }
-    .t-backend    { fill: var(--backend-stroke); }
-    .t-database   { fill: var(--database-stroke); }
-    .t-cloud      { fill: var(--cloud-stroke); }
-    .t-security   { fill: var(--security-stroke); }
-    .t-messagebus { fill: var(--messagebus-stroke); }
-    .t-external   { fill: var(--external-stroke); }
-
-    /* Arrows */
-    .a-default   { stroke: var(--arrow); fill: none; }
-    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }
-    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }
-    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }
-
-    /* Arrowhead markers reference these */
-    .m-default   { fill: var(--arrow); }
-    .m-emphasis  { fill: var(--arrow-emphasis); }
-    .m-security  { fill: var(--security-stroke); }
-    .m-dashed    { fill: var(--database-stroke); }
-
-    /* Dashed boundary variants */
-    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }
-    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }
-    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }
-
-    /* Optional trace animation, enabled only by meta.animation = "trace".
-       Static diagrams do not carry data-animation and render exactly as before. */
-    svg[data-animation="trace"] [data-animate="edge"] {
-      stroke-dasharray: 10 8;
-      stroke-dashoffset: 54;
-      animation: archify-edge-flow 2.4s linear infinite;
-      animation-delay: calc(var(--step, 0) * 160ms);
+    .route-probe-arrow {
+      flex: none;
+      padding: 0 0.28rem;
+      color: var(--text-faint);
+      font-size: 0.65rem;
     }
-    svg[data-animation="trace"] [data-animate="node"] {
-      transform-box: fill-box;
-      transform-origin: center;
-      animation: archify-node-pulse 3.6s ease-in-out infinite;
-      animation-delay: calc(var(--step, 0) * 160ms);
+    .route-probe-placeholder {
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.03em;
     }
-    @keyframes archify-edge-flow {
-      to { stroke-dashoffset: 0; }
+    .route-probe-status {
+      display: block;
+      min-height: 1.45rem;
+      padding: 0.08rem 0.58rem 0.44rem;
+      color: var(--text-faint);
+      font-size: 0.52rem;
+      line-height: 1.35;
     }
-    @keyframes archify-node-pulse {
-      0%, 72%, 100% { filter: none; stroke-width: 1.5; }
-      18%, 36% {
-        filter: drop-shadow(0 0 8px var(--arrow-emphasis));
-        stroke-width: 2.4;
-      }
+    .route-journey-controls {
+      display: grid;
+      grid-template-columns: 2rem minmax(5.8rem, auto) 2rem minmax(4.8rem, auto);
+      justify-content: start;
+      gap: 0.22rem;
+      padding: 0.08rem 0.58rem 0.28rem;
     }
-    @media (prefers-reduced-motion: reduce) {
-      svg[data-animation="trace"] [data-animate] {
-        animation: none !important;
-        stroke-dashoffset: 0;
-      }
+    .route-journey-controls[hidden] { display: none; }
+    .route-journey-controls button {
+      min-height: 1.8rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
+      background: color-mix(in srgb, var(--toolbar-bg) 72%, transparent);
+      font-size: 0.54rem;
+      font-weight: 700;
     }
-  </style>
-</head>
-<body>
-  <!-- Toolbar: theme toggle + export menu (present on every generated diagram)
-       Keyboard: T toggles theme, E opens export menu (when no input focused) -->
-  <div class="toolbar" role="toolbar" aria-label="Diagram actions">
-    <button id="btn-theme" type="button"
-            title="Toggle theme (T)"
-            aria-label="Toggle color theme"
-            aria-pressed="false">
-      <span id="theme-icon" aria-hidden="true">&#9790;</span>
-      <span id="theme-label">Dark</span>
-    </button>
+    .route-journey-controls button:disabled {
+      cursor: default;
+      opacity: 0.34;
+    }
+    .route-journey-play { color: var(--backend-stroke) !important; }
+    .route-journey-overview { color: var(--frontend-stroke) !important; }
+    .route-journey-controls[data-playing="true"] .route-journey-play {
+      border-color: color-mix(in srgb, var(--backend-stroke) 64%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--backend-fill) 62%, transparent);
+    }
+    .route-probe[data-state="error"] {
+      border-color: color-mix(in srgb, var(--security-stroke) 72%, var(--toolbar-border));
+    }
+    .route-probe[data-state="error"] .route-probe-status { color: var(--security-stroke); }
+
+    .focus-chip {
+      position: absolute;
+      left: 1rem;
+      top: 1rem;
+      z-index: 12;
+      display: block;
+      width: min(22rem, calc(100% - 13rem));
+      max-width: calc(100% - 13rem);
+      overflow: hidden;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 0.85rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.6875rem;
+    }
+    .focus-chip[hidden] { display: none; }
+    html[data-preset="blueprint"] .focus-chip { border-radius: 0.3rem; }
+    .focus-chip button {
+      flex: none;
+      padding: 0.3rem 0.45rem;
+      border-radius: 0.35rem;
+      font-size: 0.625rem;
+    }
+    .relationship-lens-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.75rem;
+      padding: 0.7rem 0.75rem 0.65rem;
+      border-bottom: 1px solid var(--toolbar-border);
+      background: linear-gradient(120deg, color-mix(in srgb, var(--frontend-fill) 34%, transparent), transparent 72%);
+    }
+    .relationship-lens-copy { min-width: 0; }
+    .relationship-lens-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 0.18rem;
+    }
+    .relationship-lens-actions button { white-space: nowrap; }
+    .relationship-lens-actions #btn-focus-clear {
+      display: grid;
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      place-items: center;
+      color: var(--text-muted);
+      font-size: 1rem;
+      line-height: 1;
+    }
+    .relationship-lens-actions #btn-focus-clear:hover,
+    .relationship-lens-actions #btn-focus-clear:focus-visible {
+      background: var(--toolbar-hover);
+      color: var(--text);
+    }
+    .relationship-lens-actions #btn-focus-copy { color: var(--frontend-stroke); }
+    .relationship-lens-actions #btn-focus-relations { display: none; }
+    .relationship-lens-eyebrow {
+      display: block;
+      margin-bottom: 0.18rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+    .relationship-lens-title {
+      display: block;
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.8rem;
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-detail {
+      display: block;
+      margin-top: 0.12rem;
+      overflow: hidden;
+      color: var(--text-muted);
+      font-size: 0.625rem;
+      line-height: 1.4;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-detail[hidden] { display: none; }
+    .semantic-passport-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.24rem;
+      margin-top: 0.42rem;
+    }
+    .semantic-passport-meta span,
+    .semantic-passport-meta code {
+      max-width: 100%;
+      overflow: hidden;
+      padding: 0.14rem 0.34rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--panel) 68%, transparent);
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5rem;
+      letter-spacing: 0.04em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-meta [data-passport="kind"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 50%, var(--toolbar-border));
+      color: var(--frontend-stroke);
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+    .semantic-passport-meta [data-passport="tag"] { color: var(--cloud-stroke); }
+    .semantic-passport-meta [hidden] { display: none; }
+    html[data-preset="blueprint"] .semantic-passport-meta span,
+    html[data-preset="blueprint"] .semantic-passport-meta code { border-radius: 0.1rem; }
+    .semantic-passport-evidence {
+      margin-top: 0.52rem;
+      padding: 0.5rem;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 32%, var(--toolbar-border));
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--backend-fill) 18%, var(--panel));
+    }
+    .semantic-passport-evidence[hidden] { display: none; }
+    html[data-preset="blueprint"] .semantic-passport-evidence { border-radius: 0.18rem; }
+    .semantic-passport-evidence-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.55rem;
+      margin-bottom: 0.35rem;
+    }
+    .semantic-passport-evidence-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.28rem;
+      color: var(--backend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .semantic-passport-evidence-status::before {
+      content: '';
+      width: 0.38rem;
+      height: 0.38rem;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--backend-stroke) 14%, transparent);
+    }
+    .semantic-passport-repository {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-repository:hover,
+    .semantic-passport-repository:focus-visible { color: var(--backend-stroke); }
+    .semantic-passport-evidence-links { display: grid; gap: 0.22rem; }
+    .semantic-passport-source {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 0.15rem 0.45rem;
+      align-items: center;
+      padding: 0.34rem 0.4rem;
+      border: 1px solid transparent;
+      border-radius: 0.38rem;
+      color: var(--text-muted);
+      text-decoration: none;
+    }
+    .semantic-passport-source:hover,
+    .semantic-passport-source:focus-visible {
+      border-color: color-mix(in srgb, var(--backend-stroke) 42%, transparent);
+      background: color-mix(in srgb, var(--backend-fill) 32%, transparent);
+      color: var(--text);
+    }
+    .semantic-passport-source strong {
+      overflow: hidden;
+      font-size: 0.5625rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-source code {
+      color: var(--backend-stroke);
+      font: inherit;
+      font-size: 0.5rem;
+    }
+    .semantic-passport-source small {
+      grid-column: 1 / -1;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-summary {
+      display: block;
+      margin-top: 0.12rem;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+    }
+    .semantic-passport-reach {
+      display: grid;
+      gap: 0.28rem;
+      margin-top: 0.52rem;
+      padding-top: 0.48rem;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 76%, transparent);
+    }
+    .semantic-passport-reach[hidden] { display: none; }
+    .semantic-passport-reach-label {
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .semantic-passport-reach-actions {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.25rem;
+    }
+    .semantic-passport-reach-actions button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      min-width: 0;
+      min-height: 2rem;
+      padding: 0.32rem 0.42rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
+      background: color-mix(in srgb, var(--panel) 70%, transparent);
+      color: var(--text-muted);
+      text-align: left;
+    }
+    .semantic-passport-reach-actions button:hover:not(:disabled),
+    .semantic-passport-reach-actions button:focus-visible {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 62%, var(--toolbar-border));
+      color: var(--text);
+    }
+    .semantic-passport-reach-actions button:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .semantic-passport-reach-actions button:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    .semantic-passport-reach-actions button[aria-pressed="true"] {
+      border-color: color-mix(in srgb, var(--reach-color, var(--frontend-stroke)) 72%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--reach-fill, var(--frontend-fill)) 48%, transparent);
+      color: var(--text);
+    }
+    #btn-reach-upstream {
+      --reach-color: var(--database-stroke);
+      --reach-fill: var(--database-fill);
+    }
+    #btn-reach-downstream {
+      --reach-color: var(--backend-stroke);
+      --reach-fill: var(--backend-fill);
+    }
+    .semantic-passport-reach-actions strong {
+      color: var(--reach-color, var(--frontend-stroke));
+      font-size: 0.625rem;
+    }
+    .semantic-passport-reach-status {
+      color: var(--text-faint);
+      font-size: 0.525rem;
+      line-height: 1.4;
+    }
+    .semantic-passport-reach-status[hidden] { display: none; }
+    .relationship-lens-list {
+      max-height: min(18rem, 46vh);
+      overflow: auto;
+      padding: 0.4rem;
+      scrollbar-width: thin;
+      scrollbar-color: var(--frontend-stroke) transparent;
+    }
+    .relationship-lens-list::-webkit-scrollbar { width: 4px; }
+    .relationship-lens-list::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--frontend-stroke) 68%, transparent);
+    }
+    .relationship-lens-group + .relationship-lens-group { margin-top: 0.35rem; }
+    .relationship-lens-group-title {
+      display: block;
+      padding: 0.24rem 0.38rem 0.16rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .relationship-lens-row {
+      display: grid;
+      grid-template-columns: 2.1rem minmax(0, 1fr);
+      gap: 0.06rem 0.45rem;
+      width: 100%;
+      padding: 0.45rem 0.5rem !important;
+      text-align: left;
+    }
+    .relationship-lens-row:hover,
+    .relationship-lens-row:focus-visible,
+    .relationship-lens-row[data-preview-active="true"] {
+      background: var(--toolbar-hover);
+      box-shadow: inset 2px 0 0 var(--frontend-stroke);
+    }
+    .relationship-lens-row:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: -2px;
+    }
+    .relationship-lens-direction {
+      grid-row: 1 / 3;
+      align-self: center;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+    }
+    .relationship-lens-row[data-direction="in"] .relationship-lens-direction { color: var(--database-stroke); }
+    .relationship-lens-row[data-direction="loop"] .relationship-lens-direction { color: var(--security-stroke); }
+    .relationship-lens-row strong {
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.6875rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-row small {
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-empty {
+      margin: 0;
+      padding: 0.75rem;
+      color: var(--text-faint);
+      font-size: 0.625rem;
+      text-align: center;
+    }
+
+    /* Diagram Guide keeps the artifact's growing reader vocabulary
+       discoverable without widening the permanent control bar. It derives
+       honest counts at runtime and delegates every action to an existing
+       production interaction instead of creating a second command system. */
+    .diagram-guide {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      z-index: 26;
+      width: min(32rem, calc(100% - 2rem));
+      max-height: min(42rem, calc(100% - 2rem));
+      overflow: auto;
+      border: 1px solid color-mix(in srgb, var(--cloud-stroke) 58%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(135deg, color-mix(in srgb, var(--cloud-fill) 32%, transparent), transparent 42%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 22px 64px rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(18px);
+      animation: archify-guide-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .diagram-guide[hidden] { display: none; }
+    html[data-preset="blueprint"] .diagram-guide { border-radius: 0.28rem; }
+    .diagram-guide-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 1rem;
+      padding: 0.82rem 0.9rem 0.68rem;
+      border-bottom: 1px solid var(--toolbar-border);
+    }
+    .diagram-guide-eyebrow {
+      display: block;
+      color: var(--cloud-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+    .diagram-guide-title {
+      display: block;
+      margin-top: 0.16rem;
+      color: var(--text);
+      font-size: 0.86rem;
+      letter-spacing: -0.02em;
+    }
+    .diagram-guide-close {
+      width: 1.8rem;
+      height: 1.8rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .diagram-guide-close:hover,
+    .diagram-guide-close:focus-visible { background: var(--toolbar-hover); }
+    .diagram-guide-stats {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0.54rem 0.9rem;
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 74%, transparent);
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.025em;
+    }
+    .diagram-guide-stats::before {
+      content: '';
+      width: 0.42rem;
+      height: 0.42rem;
+      flex: none;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 10px color-mix(in srgb, var(--backend-stroke) 72%, transparent);
+    }
+    .diagram-guide-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.38rem;
+      padding: 0.62rem;
+    }
+    .diagram-guide-action {
+      --guide-accent: var(--frontend-stroke);
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.55rem;
+      min-height: 4.15rem;
+      padding: 0.55rem 0.58rem;
+      border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, var(--toolbar-border));
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 78%, transparent);
+      color: var(--toolbar-text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
+    }
+    .diagram-guide-action[data-guide-action="route"] { --guide-accent: var(--backend-stroke); }
+    .diagram-guide-action[data-guide-action="map"] { --guide-accent: var(--database-stroke); }
+    .diagram-guide-action[data-guide-action="lens"] { --guide-accent: var(--messagebus-stroke); }
+    .diagram-guide-action[data-guide-action="story"] { --guide-accent: var(--security-stroke); }
+    .diagram-guide-action[data-guide-action="present"] {
+      --guide-accent: var(--cloud-stroke);
+    }
+    .diagram-guide-action:hover,
+    .diagram-guide-action:focus-visible {
+      border-color: color-mix(in srgb, var(--guide-accent) 76%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--guide-accent) 9%, var(--panel));
+      transform: translateY(-1px);
+    }
+    .diagram-guide-action:focus-visible,
+    .diagram-guide-close:focus-visible {
+      outline: 2px solid var(--cloud-stroke);
+      outline-offset: 1px;
+    }
+    .diagram-guide-action:disabled {
+      opacity: 0.42;
+      cursor: default;
+      transform: none;
+    }
+    .diagram-guide-index {
+      display: grid;
+      place-items: center;
+      width: 1.65rem;
+      height: 1.65rem;
+      border: 1px solid color-mix(in srgb, var(--guide-accent) 64%, var(--toolbar-border));
+      border-radius: 0.35rem;
+      color: var(--guide-accent);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+    }
+    .diagram-guide-action-copy { min-width: 0; }
+    .diagram-guide-action strong {
+      display: block;
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.66rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .diagram-guide-action small {
+      display: -webkit-box;
+      margin-top: 0.18rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      line-height: 1.35;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    .diagram-guide kbd {
+      align-self: start;
+      min-width: 1.45rem;
+      padding: 0.12rem 0.3rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.25rem;
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5rem;
+      text-align: center;
+    }
+    .diagram-guide-shortcuts {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.34rem 0.62rem;
+      padding: 0.58rem 0.9rem 0.68rem;
+      border-top: 1px solid var(--toolbar-border);
+      color: var(--text-faint);
+      font-size: 0.5rem;
+    }
+    .diagram-guide-shortcuts span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.28rem;
+      white-space: nowrap;
+    }
+    .diagram-guide-feedback {
+      min-height: 1rem;
+      margin: -0.18rem 0.9rem 0.62rem;
+      color: var(--security-stroke);
+      font-size: 0.5rem;
+    }
+    .diagram-guide-feedback:empty { display: none; }
+    @keyframes archify-guide-in {
+      from { opacity: 0; transform: translateY(-5px) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .node-finder {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      z-index: 24;
+      display: flex;
+      flex-direction: column;
+      width: min(22rem, calc(100% - 2rem));
+      max-height: calc(100% - 2rem);
+      overflow: hidden;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.85rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.22);
+      backdrop-filter: blur(16px);
+    }
+    .node-finder[hidden] { display: none; }
+    .node-finder[data-context="route-source"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 68%, var(--toolbar-border));
+    }
+    .node-finder[data-context="route-target"] {
+      border-color: color-mix(in srgb, var(--security-stroke) 68%, var(--toolbar-border));
+    }
+    html[data-preset="blueprint"] .node-finder { border-radius: 0.3rem; }
+    .node-finder-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.7rem 0.8rem 0.45rem;
+    }
+    .node-finder-head strong {
+      color: var(--text);
+      font-size: 0.6875rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .node-finder[data-context="route-source"] .node-finder-head strong { color: var(--frontend-stroke); }
+    .node-finder[data-context="route-target"] .node-finder-head strong { color: var(--security-stroke); }
+    .node-finder-close {
+      width: 1.75rem;
+      height: 1.75rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .node-finder-close:hover,
+    .node-finder-close:focus-visible { background: var(--toolbar-hover); }
+    .node-finder-close:focus-visible,
+    .node-finder-result:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: -2px;
+    }
+    .node-finder-search {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.55rem;
+      margin: 0 0.55rem 0.55rem;
+      padding: 0 0.7rem;
+      min-height: 2.6rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 78%, transparent);
+      transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
+    }
+    html[data-preset="blueprint"] .node-finder-search { border-radius: 0.18rem; }
+    .node-finder-search > span { color: var(--frontend-stroke); font-size: 0.875rem; }
+    .node-finder-search:focus-within {
+      border-color: var(--frontend-stroke);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--frontend-stroke) 20%, transparent);
+    }
+    .node-finder-input {
+      appearance: none;
+      width: 100%;
+      min-width: 0;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      font-size: 0.75rem;
+    }
+    .node-finder-input:focus-visible { outline: none; }
+    .node-finder-input::placeholder { color: var(--text-faint); }
+    .node-finder kbd {
+      padding: 0.1rem 0.32rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.25rem;
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5625rem;
+    }
+    .node-finder-results {
+      display: grid;
+      flex: 1 1 auto;
+      gap: 0;
+      min-height: 0;
+      max-height: min(18rem, 48vh);
+      margin: 0 0.55rem 0.45rem;
+      padding: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 78%, transparent);
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 54%, transparent);
+      scroll-padding-block: 0.25rem;
+      scrollbar-width: thin;
+    }
+    html[data-preset="blueprint"] .node-finder-results { border-radius: 0.18rem; }
+    .node-finder-result {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 0.2rem 0.75rem;
+      width: 100%;
+      min-height: 3.25rem;
+      padding: 0.58rem 0.65rem;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: background-color 160ms ease-out;
+    }
+    .node-finder-result:not(:last-child) {
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 62%, transparent);
+    }
+    .node-finder-result:hover,
+    .node-finder-result:focus-visible {
+      position: relative;
+      z-index: 1;
+      background: color-mix(in srgb, var(--frontend-fill) 48%, var(--toolbar-hover));
+    }
+    .node-finder-result strong {
+      overflow: hidden;
+      font-size: 0.75rem;
+      line-height: 1.25;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .node-finder-result small {
+      grid-column: 1 / -1;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+      letter-spacing: 0.015em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .node-finder-result em {
+      align-self: center;
+      color: var(--frontend-stroke);
+      font-size: 0.625rem;
+      font-style: normal;
+    }
+    .node-finder[data-context^="route-"] .node-finder-result em {
+      padding: 0.1rem 0.3rem;
+      border: 1px solid color-mix(in srgb, currentColor 52%, transparent);
+      border-radius: 999px;
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+    .node-finder[data-context="route-target"] .node-finder-result em { color: var(--security-stroke); }
+    .node-finder-empty {
+      padding: 1.1rem 0.75rem 1.25rem;
+      color: var(--text-faint);
+      font-size: 0.6875rem;
+      text-align: center;
+    }
+    .node-finder-status {
+      margin: 0;
+      padding: 0.1rem 0.8rem 0.65rem;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+    }
+
+    .guided-views {
+      display: grid;
+      grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem auto;
+      align-items: stretch;
+      gap: 0.35rem;
+      min-width: 0;
+      margin: 0 0 0.75rem;
+      padding: 0.35rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.85rem;
+      background: var(--toolbar-bg);
+      background: linear-gradient(120deg, var(--toolbar-bg), color-mix(in srgb, var(--toolbar-bg) 82%, var(--frontend-fill)));
+      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
+      backdrop-filter: blur(12px);
+    }
+    .guided-views[hidden] { display: none; }
+
+    html[data-preset="blueprint"] .guided-views {
+      border-color: var(--panel-border);
+      border-radius: 0.35rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 36%, transparent), transparent 24%),
+        var(--toolbar-bg);
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+    }
+    html[data-preset="blueprint"] .guided-views button { border-radius: 0.2rem; }
+    html[data-preset="blueprint"] .guided-view-progress { border-radius: 0; }
+    html[data-preset="blueprint"] .guided-view-progress span { border-radius: 0; }
+    .guided-views button {
+      min-width: 0;
+      padding: 0.45rem 0.6rem;
+      border-radius: 0.55rem;
+      font-size: 0.75rem;
+    }
+    .guided-views > #guided-view-prev,
+    .guided-views > #guided-view-next { min-width: 2.75rem; min-height: 2.75rem; }
+    .guided-views button:disabled { opacity: 0.3; cursor: default; }
+    .guided-view-copy {
+      min-width: 0;
+      padding: 0.2rem 0.5rem;
+      border-left: 1px solid var(--toolbar-border);
+      overflow: hidden;
+    }
+    .guided-view-meta {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-height: 1rem;
+      margin-bottom: 0.12rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .guided-view-handoff {
+      box-sizing: border-box;
+      height: 1rem;
+      min-width: 0;
+      max-width: 15rem;
+      overflow: hidden;
+      padding: 0 0.38rem;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 46%, transparent);
+      border-radius: 999px;
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-fill) 44%, transparent);
+      font-size: 0.5rem;
+      line-height: calc(1rem - 2px);
+      letter-spacing: 0.06em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-view-handoff[hidden] { display: none; }
+    html[data-preset="blueprint"] .guided-view-handoff { border-radius: 0.15rem; }
+    .chapter-handoff-overlay { pointer-events: none; }
+    .chapter-handoff-anchor {
+      fill: color-mix(in srgb, var(--frontend-fill) 10%, transparent);
+      stroke: var(--frontend-stroke);
+      stroke-width: 2;
+      stroke-dasharray: 4 4;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+      animation: archify-chapter-anchor 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="stay"] { opacity: 1; }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="enter"] { opacity: 0.78; }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="leave"] { opacity: 0.26; }
+    @keyframes archify-chapter-anchor {
+      0% { opacity: 0.35; stroke-dashoffset: 8; }
+      45% { opacity: 1; }
+      100% { opacity: 0.72; stroke-dashoffset: 0; }
+    }
+    .guided-view-progress {
+      width: 3.5rem;
+      height: 2px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: var(--toolbar-border);
+    }
+    .guided-view-progress span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--frontend-stroke);
+      transform: scaleX(0);
+      transform-origin: left center;
+    }
+    .guided-view-copy strong,
+    .guided-view-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .guided-view-copy strong { color: var(--toolbar-text); font-size: 0.75rem; line-height: 1.35; }
+    .guided-view-copy small { margin-top: 0; color: var(--text-muted); font-size: 0.625rem; line-height: 1.35; }
+    .guided-story-caption {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      gap: 0.12rem 0.55rem;
+      align-items: center;
+      min-width: 0;
+      margin-top: 0.18rem;
+      padding: 0.3rem 0.5rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 32%, var(--toolbar-border));
+      border-radius: 0.58rem;
+      background: color-mix(in srgb, var(--frontend-fill) 26%, transparent);
+      animation: archify-story-caption-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .guided-story-caption[hidden] { display: none; }
+    .guided-story-caption-index {
+      grid-row: 1 / span 2;
+      align-self: stretch;
+      display: inline-grid;
+      min-width: 3.3rem;
+      place-items: center;
+      padding-right: 0.52rem;
+      border-right: 1px solid color-mix(in srgb, var(--frontend-stroke) 28%, var(--toolbar-border));
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .guided-story-caption strong,
+    .guided-story-caption small {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-story-caption strong { color: var(--toolbar-text); font-size: 0.6875rem; line-height: 1.3; }
+    .guided-story-caption small { color: var(--text-muted); font-size: 0.5625rem; line-height: 1.35; }
+    .guided-story-caption-next {
+      grid-column: 3;
+      grid-row: 1 / span 2;
+      display: grid;
+      min-width: 6.4rem;
+      max-width: 9.5rem;
+      align-self: stretch;
+      align-content: center;
+      padding-left: 0.58rem;
+      border-left: 1px solid color-mix(in srgb, var(--frontend-stroke) 22%, var(--toolbar-border));
+    }
+    .guided-story-caption-next[hidden] { display: none; }
+    .guided-story-caption-next small {
+      color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--text-muted));
+      font-weight: 800;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+    }
+    .guided-story-caption-next strong { color: var(--text-muted); font-weight: 700; }
+    html[data-preset="blueprint"] .guided-story-caption { border-radius: 0.2rem; }
+    .guided-views[data-story-beat] .guided-view-copy > #guided-view-label,
+    .guided-views[data-story-beat] .guided-view-copy > #guided-view-note { display: none; }
+    @keyframes archify-story-caption-in {
+      from { opacity: 0; transform: translateY(3px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .guided-view-trail {
+      display: flex;
+      align-items: center;
+      gap: 0.28rem;
+      min-width: 0;
+      min-height: 1.7rem;
+      margin-top: 0;
+      padding: 0;
+      overflow-x: auto;
+      color: var(--text-faint);
+      overscroll-behavior-x: contain;
+      touch-action: pan-x;
+      scrollbar-width: none;
+      white-space: nowrap;
+    }
+    .guided-view-trail[hidden] { display: none; }
+    .guided-view-trail::-webkit-scrollbar { display: none; }
+    .guided-view-trail .guided-view-stop {
+      appearance: none;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 0.28rem;
+      min-height: 1.5rem;
+      padding: 0.1rem 0.3rem 0.1rem 0.18rem;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.5625rem;
+      font-weight: 650;
+      letter-spacing: 0.02em;
+      line-height: 1;
+      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
+    }
+    .guided-view-stop:hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);
+      background: color-mix(in srgb, var(--frontend-fill) 34%, transparent);
+    }
+    .guided-view-stop:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .guided-view-stop:disabled { cursor: wait; }
+    .guided-view-stop::before {
+      display: inline-grid;
+      width: 1rem;
+      height: 1rem;
+      place-items: center;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--frontend-fill) 58%, var(--toolbar-bg));
+      color: var(--frontend-stroke);
+      content: attr(data-story-number);
+      font-size: 0.5rem;
+      line-height: 1;
+    }
+    .guided-view-stop + .guided-view-stop::after {
+      order: -1;
+      color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--text-faint));
+      content: '\00b7';
+      font-size: 0.65rem;
+    }
+    .guided-view-stop[data-story-link="forward"]::after { content: '\2192'; }
+    .guided-view-stop[data-story-link="reverse"]::after { content: '\2190'; }
+    .guided-view-stop[data-story-link="multiple"]::after { content: '\21c4'; }
+    .guided-view-stop[data-story-beat-state="pending"] { opacity: 0.38; }
+    .guided-view-stop[data-story-beat-state="next"] {
+      border-style: dashed;
+      border-color: color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));
+      color: color-mix(in srgb, var(--toolbar-text) 68%, var(--text-muted));
+      opacity: 0.58;
+    }
+    .guided-view-stop[data-story-beat-state="past"] { color: var(--text-muted); opacity: 0.76; }
+    .guided-view-stop[data-story-beat-state="active"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--frontend-fill) 42%, transparent);
+      color: var(--toolbar-text);
+      font-weight: 800;
+      opacity: 1;
+    }
+    .guided-view-stop[data-story-beat-state="active"]::before {
+      border-color: var(--frontend-stroke);
+      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 54%, transparent);
+    }
+    html[data-preset="blueprint"] .guided-view-stop,
+    html[data-preset="blueprint"] .guided-view-stop::before { border-radius: 0.1rem; }
+    html[data-preset="blueprint"] .guided-view-stop[data-story-beat-state="active"]::before { box-shadow: none; }
+    .guided-view-actions { display: flex; align-items: stretch; gap: 0.2rem; }
+    .guided-view-actions button { white-space: nowrap; }
+    .guided-view-play {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.38rem;
+      min-width: 6.25rem !important;
+      color: var(--frontend-stroke) !important;
+      font-size: 0.625rem !important;
+    }
+    .guided-view-play[aria-pressed="true"] { background: var(--toolbar-hover); }
+    .guided-view-all { min-width: 3.25rem !important; color: var(--text-muted) !important; font-size: 0.625rem !important; }
+    .guided-view-beat-link {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.3rem;
+      min-width: 5.4rem !important;
+      min-height: 1.5rem;
+      color: var(--text-muted) !important;
+      font-size: 0.5625rem !important;
+      letter-spacing: 0.025em;
+      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+    }
+    .guided-view-beat-link:not(:disabled):hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));
+      color: var(--frontend-stroke) !important;
+    }
+    .guided-view-beat-link[data-copy-state="copied"] {
+      border-color: color-mix(in srgb, var(--backend-stroke) 58%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--backend-fill) 46%, transparent);
+      color: var(--backend-stroke) !important;
+    }
+    .guided-view-index {
+      grid-column: 1 / -1;
+      min-width: 0;
+      padding: 0.28rem 0.12rem 0.08rem;
+      overflow: hidden;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    @media (min-width: 721px) {
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-index,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-beat-link,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-all,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-trail,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-copy > #guided-view-label,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-copy > #guided-view-note { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-story-caption { margin-top: 0.08rem; }
+    }
+    .guided-view-chapters {
+      display: flex;
+      gap: 0.28rem;
+      min-width: 0;
+      margin: 0;
+      padding: 0.08rem 0.05rem 0.2rem;
+      overflow-x: auto;
+      list-style: none;
+      scroll-padding-inline: 0.05rem;
+      scroll-snap-type: x proximity;
+      scrollbar-width: none;
+    }
+    .guided-view-chapters::-webkit-scrollbar { display: none; }
+    .guided-view-chapters li {
+      display: flex;
+      flex: 1 1 0;
+      min-width: 9.5rem;
+      scroll-snap-align: center;
+    }
+    .guided-view-chapter {
+      position: relative;
+      display: grid !important;
+      grid-template-columns: 1.55rem minmax(0, 1fr) auto;
+      align-items: center;
+      width: 100%;
+      min-height: 2.75rem;
+      padding: 0.36rem 0.48rem !important;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent) !important;
+      border-radius: 0.48rem !important;
+      background: color-mix(in srgb, var(--toolbar-bg) 88%, transparent) !important;
+      color: var(--text-muted) !important;
+      text-align: left;
+      transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
+    }
+    .guided-view-chapter:hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--toolbar-border)) !important;
+      background: color-mix(in srgb, var(--frontend-fill) 42%, var(--toolbar-bg)) !important;
+    }
+    .guided-view-chapter:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .guided-view-chapter-index {
+      display: inline-grid;
+      width: 1.32rem;
+      height: 1.32rem;
+      place-items: center;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));
+      border-radius: 50%;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.03em;
+    }
+    .guided-view-chapter-title {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--toolbar-text);
+      font-size: 0.625rem;
+      font-weight: 700;
+      line-height: 1.3;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-count {
+      grid-column: 3;
+      grid-row: 1;
+      margin-left: 0.38rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-style: normal;
+      font-weight: 650;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-delta {
+      display: inline-flex;
+      grid-column: 3;
+      grid-row: 1;
+      align-items: center;
+      gap: 0.22rem;
+      margin-left: 0.38rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 750;
+      letter-spacing: 0.01em;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-delta[hidden] { display: none; }
+    .guided-view-chapter-delta [data-delta-kind="stay"] { color: var(--text-muted); }
+    .guided-view-chapter-delta [data-delta-kind="enter"] { color: var(--frontend-stroke); }
+    .guided-view-chapter-delta [data-delta-kind="leave"] { color: var(--security-stroke); }
+    .guided-view-chapter[data-preview-active="true"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border)) !important;
+      background: color-mix(in srgb, var(--frontend-fill) 54%, var(--toolbar-bg)) !important;
+    }
+    .guided-view-chapter[data-chapter-position="current"] {
+      border: 2px solid var(--frontend-stroke) !important;
+      padding: calc(0.36rem - 1px) calc(0.48rem - 1px) !important;
+      box-shadow: inset 3px 0 0 var(--frontend-stroke);
+      color: var(--toolbar-text) !important;
+    }
+    .guided-view-chapter[data-chapter-position="current"] .guided-view-chapter-index {
+      background: var(--frontend-stroke);
+      color: var(--bg);
+    }
+    .guided-view-chapter[data-chapter-position="before"] {
+      border-style: solid !important;
+      opacity: 0.72;
+    }
+    .guided-view-chapter[data-chapter-position="after"] { border-style: dashed !important; }
+    html[data-preset="signal-flow"] .guided-view-chapter[data-chapter-position="current"] {
+      box-shadow: inset 3px 0 0 var(--frontend-stroke), 0 0 18px color-mix(in srgb, var(--frontend-stroke) 18%, transparent);
+    }
+    html[data-preset="blueprint"] .guided-view-chapter,
+    html[data-preset="blueprint"] .guided-view-chapter-index { border-radius: 0.12rem !important; }
+
+    /* Story Shelf — keep every authored chapter and the Play action visible,
+       but do not spend a second row on unavailable director controls before
+       the reader enters a chapter. Existing data-active-view state expands
+       the full guided surface without a new toggle or stored preference. */
+    .guided-views[data-active-view="all"] {
+      grid-template-columns: minmax(11rem, .72fr) auto minmax(0, 2fr);
+      align-items: center;
+      padding: 0.28rem 0.35rem;
+    }
+    .guided-views[data-active-view="all"] > #guided-view-prev,
+    .guided-views[data-active-view="all"] > #guided-view-next,
+    .guided-views[data-active-view="all"] .guided-view-beat-link,
+    .guided-views[data-active-view="all"] .guided-view-all { display: none; }
+    .guided-views[data-active-view="all"] .guided-view-copy {
+      grid-column: 1;
+      grid-row: 1;
+      padding: 0.1rem 0.55rem;
+    }
+    .guided-views[data-active-view="all"] .guided-view-copy > #guided-view-note { display: none; }
+    .guided-views[data-active-view="all"] .guided-view-actions {
+      display: block;
+      grid-column: 2;
+      grid-row: 1;
+    }
+    .guided-views[data-active-view="all"] .guided-view-play { min-height: 2.75rem; }
+    .guided-views[data-active-view="all"] .guided-view-index {
+      grid-column: 3;
+      grid-row: 1;
+      padding: 0 0.08rem 0 0.42rem;
+      border-top: 0;
+      border-left: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    .guided-views[data-active-view="all"] .guided-view-chapters {
+      gap: 0.3rem;
+      padding: 0;
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+
+    .card {
+      background: var(--panel);
+      border-radius: 0.75rem;
+      border: 1px solid var(--panel-border);
+      padding: 1.25rem;
+    }
+
+    html[data-preset="signal-flow"] .card {
+      background: linear-gradient(145deg, rgba(10, 24, 43, 0.86), rgba(5, 12, 24, 0.92));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+    }
+    html[data-preset="signal-flow"][data-theme="light"] .card {
+      background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 246, 250, 0.9));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 32px rgba(45, 78, 99, 0.08);
+    }
+
+    /* Preserve the one-screen guarantee on ordinary laptop displays. The
+       high-screen expansion above must not trade a fuller canvas for page
+       scrolling at 900–1080px heights. */
+    @media (min-width: 768px) and (max-height: 1100px) {
+      .header { margin-bottom: 1rem; }
+      .diagram-container { padding: 0.875rem; }
+      .cards { margin-top: 1rem; }
+      .card { padding: 1rem; }
+    }
+    @media (min-width: 768px) and (max-height: 920px) {
+      .header { margin-bottom: 0.875rem; }
+      .cards { margin-top: 0.75rem; }
+    }
+
+    html[data-preset="blueprint"] .card {
+      position: relative;
+      border-color: var(--panel-border);
+      border-radius: 0.3rem;
+      background: var(--panel);
+      box-shadow: none;
+    }
+    html[data-preset="blueprint"] .card::before {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: 1rem;
+      width: 2.5rem;
+      border-top: 2px solid var(--frontend-stroke);
+    }
+
+    html[data-preset="editorial"] .card {
+      position: relative;
+      border-radius: 0.28rem;
+      background: var(--panel);
+      box-shadow: 0 10px 28px color-mix(in srgb, #000 10%, transparent);
+    }
+    html[data-preset="editorial"] .card::before {
+      position: absolute;
+      top: -1px;
+      left: 1.25rem;
+      width: 3.25rem;
+      border-top: 3px solid var(--arrow-emphasis);
+      content: "";
+    }
+    html[data-preset="editorial"] .card-dot { border-radius: 0; transform: rotate(45deg) scale(0.78); }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .card-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    .card-dot.cyan     { background: var(--frontend-stroke); }
+    .card-dot.emerald  { background: var(--backend-stroke); }
+    .card-dot.violet   { background: var(--database-stroke); }
+    .card-dot.amber    { background: var(--cloud-stroke); }
+    .card-dot.rose     { background: var(--security-stroke); }
+    .card-dot.orange   { background: var(--messagebus-stroke); }
+    .card-dot.slate    { background: var(--external-stroke); }
+
+    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }
+
+    .card ul {
+      list-style: none;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+
+    .card li { margin-bottom: 0.375rem; }
+
+    /* ==========================================================
+       Print stylesheet — hide interactive controls, force light,
+       drop the grid so the diagram doesn't waste ink, use landscape
+       so wide diagrams fit, pack summary cards into 2 columns to
+       avoid an orphan card on a trailing page.
+       ========================================================== */
+    @page { size: landscape; margin: 1.5cm; }
+
+    @media print {
+      /* Force the FULL light palette — including component fills/strokes and
+         lane/arrow colors — so printing from dark theme doesn't put neon
+         strokes and translucent dark fills on white paper. */
+      :root, [data-theme="dark"], [data-theme="light"] {
+        --bg: #ffffff;
+        --grid: transparent;
+        --panel: #ffffff;
+        --panel-border: #e2e8f0;
+        --text: #0f172a;
+        --text-muted: #475569;
+        --text-dim: #94a3b8;
+        --text-faint: #64748b;
+        --mask: #ffffff;
+        --lane-fill: rgba(248, 250, 252, 0.65);
+        --lane-stroke: #cbd5e1;
+        --arrow: #94a3b8;
+        --arrow-emphasis: #059669;
+        --frontend-fill:    rgba(34, 211, 238, 0.15);
+        --frontend-stroke:  #0891b2;
+        --backend-fill:     rgba(52, 211, 153, 0.18);
+        --backend-stroke:   #059669;
+        --database-fill:    rgba(167, 139, 250, 0.2);
+        --database-stroke:  #7c3aed;
+        --cloud-fill:       rgba(251, 191, 36, 0.18);
+        --cloud-stroke:     #d97706;
+        --security-fill:    rgba(251, 113, 133, 0.15);
+        --security-stroke:  #e11d48;
+        --messagebus-fill:  rgba(251, 146, 60, 0.15);
+        --messagebus-stroke:#ea580c;
+        --external-fill:    rgba(148, 163, 184, 0.18);
+        --external-stroke:  #64748b;
+      }
+      body { background: #ffffff !important; padding: 0; }
+      .container { max-width: none; }
+      .toolbar, .diagram-nav, .focus-chip, .guided-views, .archify-toast, .no-print { display: none !important; }
+      .chapter-handoff-overlay { display: none !important; }
+      svg [data-node-id][data-chapter-role] { opacity: 1 !important; }
+      svg[data-chapter-preview] [data-node-id],
+      svg[data-chapter-preview] [data-edge-from] { opacity: 1 !important; filter: none !important; }
+      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }
+      html[data-preset="signal-flow"] .diagram-container,
+      html[data-preset="signal-flow"] .card { background: #ffffff; }
+      .cards { grid-template-columns: 1fr 1fr; }
+      /* Ensure elements break sensibly across pages */
+      .card { break-inside: avoid; page-break-inside: avoid; }
+      .diagram-container { break-inside: avoid; page-break-inside: avoid; }
+      .diagram-container svg [data-detail] {
+        opacity: 1 !important;
+        pointer-events: auto !important;
+      }
+      .diagram-container svg [data-detail-anchor] { transform: none !important; }
+      .diagram-container svg[data-lens-active] [data-node-id],
+      .diagram-container svg[data-lens-active] [data-edge-from],
+      .diagram-container svg[data-legend-preview-active] [data-node-id],
+      .diagram-container svg[data-legend-preview-active] [data-edge-from] {
+        opacity: 1 !important;
+        filter: none !important;
+      }
+      [data-legend-bridge-runtime] { display: none !important; }
+      .semantic-lens-overlay { display: none !important; }
+      .relationship-hit-overlay { display: none !important; }
+      .relationship-pulse-overlay { display: none !important; }
+      .route-probe-overlay, .route-journey-overlay { display: none !important; }
+      .story-trail-overlay,
+      .story-carrier-overlay { display: none !important; }
+      .diagram-container svg[data-focus-active] [data-node-id],
+      .diagram-container svg[data-focus-active] [data-edge-from],
+      .diagram-container svg[data-reach-active] [data-node-id],
+      .diagram-container svg[data-reach-active] [data-edge-from],
+      .diagram-container svg[data-story-beat] [data-story-step],
+      .diagram-container svg[data-story-beat] [data-edge-from][data-story-beat-step],
+      .diagram-container svg[data-route-active] [data-node-id],
+      .diagram-container svg[data-route-active] [data-edge-from] {
+        opacity: 1 !important;
+        filter: none !important;
+        animation: none !important;
+      }
+      h1, .subtitle { color: #0f172a; }
+    }
+
+    /* ==========================================================
+       TOOLBAR (theme toggle + export menu)
+       ========================================================== */
+    .toolbar {
+      position: fixed;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+      z-index: 100;
+    }
+    .toolbar button {
+      background: var(--toolbar-bg);
+      color: var(--toolbar-text);
+      border: 1px solid var(--toolbar-border);
+      padding: 0.5rem 0.875rem;
+      border-radius: 0.625rem;
+      font-family: inherit;
+      font-size: 0.75rem;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+      backdrop-filter: blur(10px);
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+      transition: background 0.15s, border-color 0.15s, color 0.15s;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      min-height: 2.75rem;
+    }
+    .toolbar button:hover {
+      background: var(--toolbar-hover);
+      border-color: color-mix(in srgb, var(--arrow) 62%, var(--toolbar-border));
+    }
+    .toolbar button[aria-expanded="true"],
+    .toolbar button[aria-pressed="true"]:not(#btn-theme) {
+      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));
+      border-color: color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));
+    }
+    .toolbar #btn-export {
+      padding-right: 0.82rem;
+      padding-left: 0.82rem;
+    }
+    .toolbar #btn-export:hover,
+    .toolbar #btn-export[aria-expanded="true"] {
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));
+      border-color: color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));
+    }
+    .toolbar button:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 2px;
+    }
+    .toolbar #btn-motion[hidden] { display: none !important; }
+    .toolbar #btn-motion { min-width: 4.4rem; }
+    .toolbar #btn-motion:disabled { cursor: default; opacity: 0.58; }
+    .toolbar .preset-wrap,
+    .toolbar .export-wrap {
+      position: relative;
+    }
+    .toolbar-icon {
+      display: inline-block;
+      width: 0.95rem;
+      height: 0.95rem;
+      flex: 0 0 auto;
+      background: currentColor;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .toolbar-chevron {
+      width: 0.65rem;
+      height: 0.65rem;
+      transition: transform 0.15s ease;
+    }
+    [aria-expanded="true"] > .toolbar-chevron { transform: rotate(180deg); }
+    [data-theme="light"] #theme-icon {
+      -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");
+      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");
+    }
+    [data-theme="dark"] #theme-icon {
+      -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");
+      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");
+    }
+    #btn-present[aria-pressed="false"] #present-icon {
+      -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");
+      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");
+    }
+    #btn-present[aria-pressed="true"] #present-icon {
+      -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");
+      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");
+    }
+    .toolbar-chevron {
+      -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");
+      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");
+    }
+    .toolbar #btn-preset { min-width: 5.4rem; }
+    .preset-control-mark {
+      width: 0.58rem;
+      height: 0.58rem;
+      flex: 0 0 auto;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 0.2rem;
+      background: color-mix(in srgb, var(--frontend-stroke) 28%, transparent);
+      transition: border-radius 0.15s, box-shadow 0.15s, transform 0.15s;
+    }
+    #btn-preset[data-preset-option="signal-flow"] .preset-control-mark {
+      border-radius: 50%;
+      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 78%, transparent);
+    }
+    #btn-preset[data-preset-option="blueprint"] .preset-control-mark {
+      border-radius: 0.06rem;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frontend-stroke) 32%, transparent);
+      transform: rotate(45deg) scale(0.84);
+    }
+    #btn-preset[data-preset-option="editorial"] .preset-control-mark {
+      border-color: var(--arrow-emphasis);
+      border-radius: 0;
+      background: var(--arrow-emphasis);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);
+      transform: rotate(45deg) scale(0.72);
+    }
+    .toolbar .preset-menu {
+      position: absolute;
+      top: calc(100% + 0.375rem);
+      right: 0;
+      display: none;
+      width: 18.5rem;
+      max-width: calc(100vw - 2rem);
+      padding: 0.45rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.875rem;
+      background: var(--toolbar-menu-bg);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
+    }
+    .toolbar .preset-menu.open { display: block; }
+    .toolbar .preset-menu.open,
+    .toolbar .export-menu.open {
+      animation: toolbar-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
+      transform-origin: top right;
+    }
+    @keyframes toolbar-menu-in {
+      from { opacity: 0; transform: translateY(-0.25rem) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .preset-menu-heading {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.42rem 0.6rem 0.55rem;
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.13em;
+      text-transform: uppercase;
+    }
+    .preset-menu-heading span:last-child {
+      font-size: 0.52rem;
+      letter-spacing: 0.04em;
+      text-transform: none;
+    }
+    .toolbar .preset-option {
+      display: grid;
+      grid-template-columns: 2rem minmax(0, 1fr) 1rem;
+      align-items: center;
+      gap: 0.68rem;
+      width: 100%;
+      min-height: 3.35rem;
+      padding: 0.5rem 0.62rem;
+      border: 0;
+      border-radius: 0.5rem;
+      background: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+      text-align: left;
+    }
+    .toolbar .preset-option:hover,
+    .toolbar .preset-option:focus-visible { background: var(--toolbar-hover); }
+    .toolbar .preset-option[aria-checked="true"] {
+      background: color-mix(in srgb, var(--frontend-stroke) 9%, transparent);
+      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);
+    }
+    .preset-option-swatch {
+      position: relative;
+      width: 2rem;
+      height: 1.55rem;
+      overflow: hidden;
+      border: 1px solid #64748b;
+      border-radius: 0.24rem;
+      background: #0f172a;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
+    }
+    .preset-option-swatch::before,
+    .preset-option-swatch::after { position: absolute; content: ""; }
+    .preset-option-swatch.classic::before {
+      top: 0.42rem;
+      right: 0.35rem;
+      bottom: 0.42rem;
+      left: 0.35rem;
+      border: 1px solid #22d3ee;
+      border-radius: 0.16rem;
+      background: rgba(34, 211, 238, 0.14);
+    }
+    .preset-option-swatch.signal-flow {
+      border-color: #29415f;
+      background: linear-gradient(135deg, #07101e 10%, #10243c 100%);
+    }
+    .preset-option-swatch.signal-flow::before {
+      top: 50%;
+      right: 0.2rem;
+      left: 0.2rem;
+      height: 1px;
+      background: linear-gradient(90deg, #67e8f9, #c4b5fd);
+      box-shadow: 0 0 8px #67e8f9;
+    }
+    .preset-option-swatch.signal-flow::after {
+      top: calc(50% - 0.13rem);
+      right: 0.28rem;
+      width: 0.26rem;
+      height: 0.26rem;
+      border-radius: 50%;
+      background: #67e8f9;
+      box-shadow: 0 0 7px #67e8f9;
+    }
+    .preset-option-swatch.blueprint {
+      border-color: #34799a;
+      border-radius: 0.08rem;
+      background-color: #0a2031;
+      background-image:
+        linear-gradient(rgba(102, 217, 239, 0.18) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(102, 217, 239, 0.18) 1px, transparent 1px);
+      background-size: 0.42rem 0.42rem;
+    }
+    .preset-option-swatch.blueprint::before {
+      top: 0.34rem;
+      right: 0.38rem;
+      bottom: 0.34rem;
+      left: 0.38rem;
+      border: 1px solid #66d9ef;
+    }
+    .preset-option-swatch.editorial {
+      border-color: #b8aa94;
+      border-radius: 0.08rem;
+      background: repeating-linear-gradient(0deg, #f2eee5 0 0.34rem, #d8d0c2 0.36rem, #f2eee5 0.38rem);
+    }
+    .preset-option-swatch.editorial::before {
+      top: 0;
+      bottom: 0;
+      left: 0.42rem;
+      width: 1px;
+      background: #c9502d;
+      opacity: 0.72;
+    }
+    .preset-option-swatch.editorial::after {
+      top: 0.52rem;
+      right: 0.45rem;
+      width: 0.38rem;
+      height: 0.38rem;
+      background: #c9502d;
+      transform: rotate(45deg);
+    }
+    .preset-option-copy { min-width: 0; }
+    .preset-option-copy strong,
+    .preset-option-copy small { display: block; }
+    .preset-option-copy strong {
+      color: var(--toolbar-text);
+      font-size: 0.72rem;
+      font-weight: 600;
+    }
+    .preset-option-copy small {
+      margin-top: 0.16rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.57rem;
+      font-weight: 400;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .preset-option-check {
+      display: inline-block;
+      width: 0.9rem;
+      height: 0.9rem;
+      color: var(--frontend-stroke);
+      background: currentColor;
+      -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");
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      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");
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      opacity: 0;
+    }
+    .preset-option[aria-checked="true"] .preset-option-check { opacity: 1; }
+    html[data-preset="editorial"] .toolbar button,
+    html[data-preset="editorial"] .preset-menu,
+    html[data-preset="editorial"] .export-menu,
+    html[data-preset="editorial"] .overview-map,
+    html[data-preset="editorial"] .semantic-lens,
+    html[data-preset="editorial"] .route-probe,
+    html[data-preset="editorial"] .focus-chip,
+    html[data-preset="editorial"] .diagram-guide,
+    html[data-preset="editorial"] .node-finder,
+    html[data-preset="editorial"] .guided-views,
+    html[data-preset="editorial"] .share-chapter-cue {
+      border-radius: 0.3rem;
+    }
+    .motion-control-dot {
+      width: 0.46rem;
+      height: 0.46rem;
+      flex: 0 0 auto;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 50%;
+      background: var(--frontend-stroke);
+      box-shadow: 0 0 9px color-mix(in srgb, var(--frontend-stroke) 72%, transparent);
+    }
+    #btn-motion[aria-pressed="false"] .motion-control-dot {
+      background: transparent;
+      box-shadow: none;
+    }
+    .toolbar .export-menu {
+      position: absolute;
+      top: calc(100% + 0.375rem);
+      right: 0;
+      background: var(--toolbar-menu-bg);
+      border: 1px solid var(--toolbar-border);
+      width: 19rem;
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100vh - 5.5rem);
+      overflow-y: auto;
+      border-radius: 0.875rem;
+      padding: 0.55rem;
+      display: none;
+      flex-direction: column;
+      box-shadow: 0 18px 48px rgba(0,0,0,0.24);
+    }
+    .toolbar .export-menu.open { display: flex; }
+    .export-menu-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.5rem 0.55rem 0.72rem;
+    }
+    .export-menu-header strong,
+    .export-menu-header span { display: block; }
+    .export-menu-header strong {
+      color: var(--toolbar-text);
+      font-size: 0.78rem;
+      font-weight: 650;
+      letter-spacing: -0.015em;
+    }
+    .export-menu-header span {
+      margin-top: 0.16rem;
+      color: var(--text-faint);
+      font-size: 0.56rem;
+    }
+    .export-menu-header kbd {
+      padding: 0.16rem 0.36rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.3rem;
+      color: var(--text-faint);
+      background: color-mix(in srgb, var(--toolbar-border) 16%, transparent);
+      font-family: inherit;
+      font-size: 0.54rem;
+      font-weight: 600;
+    }
+    .export-menu-section {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.18rem;
+    }
+    .export-menu-section + .export-menu-section {
+      margin-top: 0.42rem;
+      padding-top: 0.42rem;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 68%, transparent);
+    }
+    .export-menu-heading {
+      grid-column: 1 / -1;
+      display: block;
+      padding: 0.24rem 0.55rem 0.2rem;
+      color: var(--text-faint);
+      font-size: 0.54rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .toolbar .export-menu button {
+      display: grid;
+      grid-template-columns: 1.15rem minmax(0, 1fr);
+      align-items: center;
+      column-gap: 0.52rem;
+      background: transparent;
+      border: 1px solid transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+      width: 100%;
+      min-height: 3rem;
+      text-align: left;
+      padding: 0.48rem 0.55rem;
+      border-radius: 0.5rem;
+      white-space: nowrap;
+    }
+    .export-item-copy {
+      display: block;
+      min-width: 0;
+    }
+    .export-item-copy strong,
+    .export-item-copy small { display: block; }
+    .export-item-copy strong {
+      overflow: hidden;
+      color: inherit;
+      font-size: 0.7rem;
+      font-weight: 550;
+      text-overflow: ellipsis;
+    }
+    .export-item-copy small {
+      margin-top: 0.12rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      font-weight: 450;
+      text-overflow: ellipsis;
+    }
+    .toolbar .export-menu button::before {
+      width: 1rem;
+      height: 1rem;
+      background: currentColor;
+      content: "";
+      opacity: 0.72;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .toolbar .export-menu button[data-format="share-card"]::before,
+    .toolbar .export-menu button[data-action="route-share-card"]::before,
+    .toolbar .export-menu button[data-action="reach-share-card"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-action^="copy"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="png"]::before,
+    .toolbar .export-menu button[data-format="jpeg"]::before,
+    .toolbar .export-menu button[data-format="webp"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="svg"]::before,
+    .toolbar .export-menu button[data-format="webm"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
+    .toolbar .export-menu button[data-format="share-card"],
+    .toolbar .export-menu button[data-action="route-share-card"],
+    .toolbar .export-menu button[data-action="reach-share-card"] {
+      min-height: 3.35rem;
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-stroke) 8%, transparent);
+      border-color: color-mix(in srgb, var(--frontend-stroke) 24%, var(--toolbar-border));
+    }
+    .toolbar .export-menu button[hidden] { display: none; }
+    .toolbar .export-menu button:hover {
+      background: var(--toolbar-hover);
+    }
+    .toolbar .export-menu button:focus-visible {
+      background: var(--toolbar-hover);
+      outline-offset: -2px;
+    }
+    .toolbar .export-menu button:disabled {
+      color: var(--text-faint);
+      background: color-mix(in srgb, var(--toolbar-border) 18%, transparent);
+      cursor: not-allowed;
+    }
+    .toolbar .export-menu button:disabled:hover {
+      border-color: transparent;
+    }
+    .toolbar .export-menu .hint {
+      color: var(--text-faint);
+      font-size: 0.55rem;
+    }
+
+    /* Toast — brief feedback for actions like "copied" */
+    .archify-toast {
+      position: fixed;
+      top: 1rem;
+      left: 50%;
+      transform: translateX(-50%) translateY(-8px);
+      background: var(--toolbar-menu-bg);
+      color: var(--text);
+      border: 1px solid var(--toolbar-border);
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      font-family: inherit;
+      font-size: 0.75rem;
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      z-index: 200;
+      pointer-events: none;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+    }
+    .archify-toast.show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    @media (max-width: 720px) {
+      body { padding: 1rem; }
+      .toolbar .preset-menu,
+      .toolbar .export-menu {
+        position: fixed;
+        top: 4.5rem;
+        right: 1rem;
+        left: 1rem;
+        width: auto;
+        max-width: none;
+      }
+      .toolbar {
+        position: relative;
+        justify-content: flex-end;
+        width: max-content;
+        max-width: 100%;
+        margin-left: auto;
+        margin-bottom: 1rem;
+      }
+      .header { margin-bottom: 1.25rem; padding-right: 0; }
+      html[data-preset="signal-flow"] .header,
+      html[data-preset="blueprint"] .header,
+      html[data-preset="editorial"] .header { padding-right: 0; }
+      .header-row {
+        gap: 0.75rem;
+        align-items: flex-start;
+      }
+      html[data-preset="signal-flow"] .header-row,
+      html[data-preset="blueprint"] .header-row,
+      html[data-preset="editorial"] .header-row { flex-wrap: wrap; }
+      html[data-preset="signal-flow"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      html[data-preset="blueprint"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      html[data-preset="editorial"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      h1 {
+        font-size: 1.25rem;
+        line-height: 1.25;
+      }
+      .subtitle {
+        margin-left: 0;
+        font-size: 0.8125rem;
+        line-height: 1.55;
+      }
+      .diagram-container {
+        padding: 0.75rem;
+        border-radius: 0.75rem;
+      }
+      html:not([data-embed="true"]) .diagram-container {
+        padding: 0.75rem 0.75rem 4.25rem;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] {
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior-x: contain;
+        scrollbar-width: thin;
+        scroll-behavior: smooth;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] > svg {
+        min-width: 720px;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .diagram-nav,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .overview-map,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .focus-chip,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .route-probe,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .semantic-lens,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .diagram-guide,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .node-finder {
+        transform: translateX(var(--archify-scroll-x, 0px));
+      }
+      .diagram-nav { right: 0.5rem; bottom: 0.5rem; }
+      .diagram-nav button {
+        min-width: 2.75rem;
+        height: 2.75rem;
+      }
+      .diagram-nav [data-view="reset"] { min-width: 3.75rem; }
+      .diagram-nav [data-view="reset"][data-detail-visible] { min-width: 4.35rem; }
+      .overview-map {
+        right: 0.5rem;
+        bottom: 3.7rem;
+        width: min(10.25rem, calc(100% - 1rem));
+      }
+      .overview-map[data-docked="true"] {
+        right: 0.5rem;
+        top: var(--archify-radar-top, 0.5rem);
+        bottom: auto;
+        transform: none !important;
+      }
+      .overview-map[data-docked="true"][data-dock-side="left"] {
+        right: auto;
+        left: 0.5rem;
+      }
+      .overview-map-surface { height: 4rem; }
+      .semantic-lens {
+        right: 0.5rem;
+        bottom: 3.7rem;
+        width: calc(100% - 1rem);
+        max-height: calc(100% - 4.2rem);
+      }
+      .semantic-lens[data-dock-side] { left: auto; right: 0.5rem; }
+      .semantic-lens-kinds { max-height: min(12rem, 34vh); }
+      .focus-chip {
+        left: 0.5rem;
+        top: 0.5rem;
+        width: calc(100% - 1rem);
+        max-width: none;
+      }
+      .relationship-lens-list { max-height: min(12rem, 38vh); }
+      .relationship-lens-actions #btn-focus-relations { display: block; color: var(--database-stroke); }
+      .focus-chip:not([data-relations-expanded="true"]) .relationship-lens-head { border-bottom-color: transparent; }
+      .focus-chip:not([data-relations-expanded="true"]) .relationship-lens-list { display: none; }
+      /* While a mobile reader previews one relationship, turn the full Lens
+         into a compact peek card. This keeps the exact source and target on
+         canvas instead of covering them with a long, scrollable list. */
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-list {
+        max-height: none;
+        padding: 0.35rem;
+        overflow: hidden;
+      }
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-group { margin: 0; }
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-group-title,
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-row:not([data-preview-active="true"]) {
+        display: none;
+      }
+      .node-finder {
+        top: 0.5rem;
+        left: 0.5rem;
+        width: min(22rem, calc(100% - 1rem));
+        max-height: calc(100% - 1rem);
+      }
+      .diagram-guide {
+        top: 0.5rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        width: auto;
+        max-height: calc(100% - 1rem);
+      }
+      .diagram-guide-head { padding: 0.62rem 0.7rem 0.52rem; }
+      .diagram-guide-stats { padding: 0.42rem 0.7rem; }
+      .diagram-guide-actions {
+        grid-template-columns: 1fr;
+        gap: 0.28rem;
+        padding: 0.42rem;
+      }
+      .diagram-guide-action {
+        min-height: 3.1rem;
+        padding: 0.42rem 0.48rem;
+      }
+      .diagram-guide-action small {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .diagram-guide-index {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+      .diagram-guide-shortcuts { padding: 0.46rem 0.7rem 0.52rem; }
+      .diagram-guide-action[data-guide-action="present"] { grid-column: auto; }
+      .route-probe[data-guide-open="true"] {
+        visibility: hidden;
+        pointer-events: none;
+      }
+      .node-finder-results { max-height: min(16rem, 38vh); }
+      .route-probe {
+        left: 0.5rem;
+        bottom: 3.7rem;
+        width: calc(100% - 1rem);
+        min-width: 0;
+      }
+      .route-probe[data-route-dock="top"] {
+        top: 0.5rem;
+        bottom: auto;
+      }
+      .route-probe[data-finder-open="true"] {
+        visibility: hidden;
+        pointer-events: none;
+      }
+      .route-probe-head { padding: 0.45rem 0.48rem 0.38rem; }
+      .route-probe-path { padding: 0.35rem 0.48rem 0.2rem; }
+      .route-probe-node { min-height: 2.75rem !important; }
+      .route-journey-controls {
+        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem minmax(0, 1fr);
+        padding: 0.08rem 0.48rem 0.32rem;
+      }
+      .route-journey-controls button { min-height: 2.75rem; }
+      .route-probe-status { padding: 0.05rem 0.48rem 0.38rem; }
+      .route-probe-node { max-width: 7.5rem; }
+      .guided-views {
+        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+        gap: 0.2rem;
+        padding: 0.25rem;
+      }
+      .guided-view-actions {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .guided-views > #guided-view-prev,
+      .guided-views > #guided-view-next {
+        align-self: center;
+        height: 2.75rem;
+      }
+      .guided-view-play,
+      .guided-view-all,
+      .guided-view-beat-link { min-height: 2.75rem; }
+      .guided-view-copy small { white-space: normal; }
+      .guided-story-caption { padding: 0.32rem 0.45rem; }
+      .guided-story-caption-index { min-width: 2.9rem; padding-right: 0.42rem; }
+      .guided-story-caption strong,
+      .guided-story-caption small { white-space: normal; }
+      .guided-story-caption-next { display: none; }
+      .guided-view-trail { min-height: 2rem; }
+      .guided-view-trail .guided-view-stop {
+        min-height: 2rem;
+        padding: 0.22rem 0.42rem 0.22rem 0.28rem;
+      }
+      .guided-view-handoff { max-width: min(9rem, 32vw); }
+      .guided-view-index { padding-top: 0.35rem; }
+      .guided-view-chapters {
+        gap: 0.35rem;
+        scroll-padding-inline: 0.2rem;
+      }
+      .guided-view-chapters li {
+        flex: 0 0 min(14rem, 78vw);
+        min-width: 0;
+      }
+      .guided-view-chapter { min-height: 2.75rem; }
+      .guided-views[data-active-view="all"] {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 0.2rem;
+        padding: 0.25rem;
+      }
+      .guided-views[data-active-view="all"] .guided-view-copy {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .guided-views[data-active-view="all"] .guided-view-actions {
+        grid-column: 2;
+        grid-row: 1;
+      }
+      .guided-views[data-active-view="all"] .guided-view-play {
+        min-width: 6rem !important;
+        min-height: 2.75rem;
+      }
+      .guided-views[data-active-view="all"] .guided-view-index {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        padding: 0.3rem 0.08rem 0;
+        border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+        border-left: 0;
+      }
+      html[data-embed="true"][data-share-playback="true"] .share-chapter-cue:not([hidden]),
+      html[data-embed="true"][data-share-moment="true"] .share-chapter-cue:not([hidden]) {
+        top: 0.5rem;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 0.28rem 0.55rem;
+        width: calc(100% - 1rem);
+        min-height: 0;
+        padding: 0.45rem 0.55rem 0.55rem;
+      }
+      html[data-embed="true"][data-share-playback="true"] .diagram-container {
+        padding-top: 4.25rem;
+      }
+      html[data-embed="true"][data-share-moment="true"] .diagram-container {
+        padding-top: 4.25rem;
+      }
+      .share-chapter-index {
+        min-width: 4.4rem;
+        padding-right: 0.5rem;
+      }
+      .share-chapter-copy small { font-size: 0.46rem; }
+      .share-chapter-route {
+        grid-column: 1 / -1;
+        font-size: 0.5rem;
+        text-align: left;
+      }
+      .cards {
+        grid-template-columns: 1fr;
+        margin-top: 1rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) body { padding: 0.5rem; }
+      html[data-present="true"]:not([data-embed="true"]) .container {
+        gap: 0.5rem;
+        height: calc(100dvh - 1rem);
+      }
+      html[data-present="true"]:not([data-embed="true"]) .toolbar {
+        position: fixed;
+        top: 0.5rem;
+        right: 0.5rem;
+        margin: 0;
+        gap: 0.25rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .toolbar button {
+        min-height: 2.75rem;
+        padding: 0.42rem 0.58rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header {
+        min-height: 2.25rem;
+        padding: 3.5rem 0 0;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header-row {
+        min-height: 2.25rem;
+        margin: 0;
+        align-items: center;
+        flex-wrap: nowrap;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header-row::after,
+      html[data-present="true"]:not([data-embed="true"]) .pulse-dot,
+      html[data-present="true"]:not([data-embed="true"]) .subtitle { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) h1 {
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        font-size: 0.875rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .guided-views {
+        padding: 0.2rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .guided-view-copy small { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) .guided-story-caption small { display: block; }
+      html[data-present="true"]:not([data-embed="true"]) .diagram-container { padding: 0.5rem 0.5rem 3.75rem; }
+      html[data-present="true"]:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] > svg {
+        width: 720px;
+        height: auto;
+        min-width: 720px;
+      }
+    }
+
+    @media (max-width: 420px) {
+      .export-menu-section { grid-template-columns: 1fr; }
+      .export-menu-heading,
+      .toolbar .export-menu button[data-format="share-card"],
+      .toolbar .export-menu button[data-action="route-share-card"],
+      .toolbar .export-menu button[data-action="reach-share-card"] { grid-column: 1; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .guided-story-caption { animation: none !important; }
+      .toolbar .preset-menu.open,
+      .toolbar .export-menu.open { animation: none; }
+      .toolbar-chevron { transition: none; }
+    }
+
+    @media (max-width: 360px) {
+      .toolbar { gap: 0.25rem; }
+      .toolbar button { padding-right: 0.58rem; padding-left: 0.58rem; }
+      .toolbar #btn-motion { min-width: 4.4rem; padding-right: 0.58rem; padding-left: 0.58rem; }
+      #theme-label, #preset-label, #present-label { display: none; }
+      .guided-view-handoff { max-width: 6.5rem; }
+    }
+
+    /* ==========================================================
+       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke
+       ========================================================== */
+    .c-grid       { stroke: var(--grid); fill: none; }
+    .c-mask       { fill: var(--mask); stroke: none; }
+
+    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }
+    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }
+    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }
+    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }
+    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }
+    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }
+    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }
+
+    /* Text helpers */
+    .t-primary { fill: var(--text); }
+    .t-muted   { fill: var(--text-muted); }
+    .t-dim     { fill: var(--text-dim); }
+    .t-frontend   { fill: var(--frontend-stroke); }
+    .t-backend    { fill: var(--backend-stroke); }
+    .t-database   { fill: var(--database-stroke); }
+    .t-cloud      { fill: var(--cloud-stroke); }
+    .t-security   { fill: var(--security-stroke); }
+    .t-messagebus { fill: var(--messagebus-stroke); }
+    .t-external   { fill: var(--external-stroke); }
+
+    /* Semantic Sigils are small authored role stamps, not icons from a brand
+       pack and not viewer controls. Prefix selectors with svg so the canonical
+       export's SVG-only stylesheet collector keeps them automatically. */
+    svg .semantic-sigil {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.35;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      opacity: 0.76;
+      pointer-events: none;
+    }
+    svg .semantic-sigil > * { vector-effect: non-scaling-stroke; }
+    svg .semantic-sigil .sigil-fill { fill: currentColor; stroke: none; }
+    svg .s-frontend   { color: var(--frontend-stroke); }
+    svg .s-backend    { color: var(--backend-stroke); }
+    svg .s-database   { color: var(--database-stroke); }
+    svg .s-cloud      { color: var(--cloud-stroke); }
+    svg .s-security   { color: var(--security-stroke); }
+    svg .s-messagebus { color: var(--messagebus-stroke); }
+    svg .s-external   { color: var(--external-stroke); }
+
+    /* Reading Depth is a viewer-only level-of-detail layer. MAP preserves the
+       authored structure and primary labels, READ restores relationship labels
+       and node context, and FULL restores tags and fine annotations. Semantic
+       intent can reveal the relevant detail without moving any geometry. */
+    svg [data-detail] { transition: opacity 160ms ease; }
+    svg [data-detail-anchor] {
+      transform-box: fill-box;
+      transform-origin: center;
+      transition: transform 160ms ease;
+    }
+    .diagram-container[data-detail-level="map"] svg [data-detail="context"],
+    .diagram-container[data-detail-level="map"] svg [data-detail="fine"],
+    .diagram-container[data-detail-level="read"] svg [data-detail="fine"] {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .diagram-container[data-detail-level="map"] svg [data-detail-anchor] {
+      transform: translateY(8px);
+    }
+
+    /* Focus, lens, preview, route, and story states are stronger reader intent than
+       the global zoom level. Reveal only their exact semantic matches. */
+    svg[data-focus-active] [data-focus-match][data-detail],
+    svg[data-focus-active] [data-focus-match] [data-detail],
+    svg[data-reach-active] [data-reach-match][data-detail],
+    svg[data-reach-active] [data-reach-match] [data-detail],
+    svg[data-lens-active] [data-lens-match][data-detail],
+    svg[data-lens-active] [data-lens-match] [data-detail],
+    svg[data-legend-preview-active] [data-legend-preview-match][data-detail],
+    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail],
+    svg[data-intent-trace-active] [data-intent-trace-match][data-detail],
+    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail],
+    svg[data-route-active] [data-route-match][data-detail],
+    svg[data-route-active] [data-route-match] [data-detail],
+    svg[data-story-active] [data-story-step][data-detail],
+    svg[data-story-active] [data-story-step] [data-detail],
+    svg[data-relationship-preview-active] [data-relationship-preview][data-detail],
+    svg[data-relationship-preview-active] [data-relationship-preview] [data-detail],
+    svg [data-node-id]:hover [data-detail],
+    svg [data-node-id]:focus-visible [data-detail] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    svg[data-focus-active] [data-focus-match] [data-detail-anchor],
+    svg[data-reach-active] [data-reach-match] [data-detail-anchor],
+    svg[data-lens-active] [data-lens-match] [data-detail-anchor],
+    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail-anchor],
+    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail-anchor],
+    svg[data-route-active] [data-route-match] [data-detail-anchor],
+    svg[data-story-active] [data-story-step] [data-detail-anchor],
+    svg [data-node-id]:hover [data-detail-anchor],
+    svg [data-node-id]:focus-visible [data-detail-anchor] { transform: none; }
+
+    /* Arrows */
+    .a-default   { stroke: var(--arrow); fill: none; }
+    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }
+    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }
+    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }
+
+    /* Arrowhead markers reference these */
+    .m-default   { fill: var(--arrow); }
+    .m-emphasis  { fill: var(--arrow-emphasis); }
+    .m-security  { fill: var(--security-stroke); }
+    .m-dashed    { fill: var(--database-stroke); }
+
+    /* Stable semantic exploration hooks emitted by every renderer. */
+    svg [data-node-id] {
+      cursor: pointer;
+      transition: opacity 0.18s ease, filter 0.18s ease;
+    }
+    svg [data-edge-from] { transition: opacity 0.18s ease, filter 0.18s ease; }
+    svg [data-node-id]:hover,
+    svg [data-node-id]:focus-visible {
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+      outline: none;
+    }
+    /* Verified Source Beacons are installed at runtime only for nodes whose
+       repository evidence passed the local revision/blob/line checks. They
+       live inside the owning node so every focus, route, story, and guided
+       view keeps one coherent opacity state. Export serialization removes
+       them before producing the canonical SVG or any derived visual. */
+    .source-evidence-beacon {
+      pointer-events: none;
+      opacity: 0.76;
+      transition: opacity 160ms ease, filter 160ms ease;
+    }
+    .source-evidence-beacon rect {
+      fill: color-mix(in srgb, var(--mask) 92%, var(--backend-stroke));
+      stroke: color-mix(in srgb, var(--backend-stroke) 82%, var(--panel-border));
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    .source-evidence-beacon text {
+      fill: var(--backend-stroke);
+      font-size: 5.5px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-anchor: middle;
+      text-transform: uppercase;
+    }
+    svg [data-node-id]:hover .source-evidence-beacon,
+    svg [data-node-id]:focus-visible .source-evidence-beacon,
+    svg [data-node-id][data-focus-selected] .source-evidence-beacon {
+      opacity: 1;
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));
+    }
+    svg[data-preset="signal-flow"] .source-evidence-beacon { opacity: 0.9; }
+    svg[data-preset="blueprint"] .source-evidence-beacon rect {
+      rx: 0.8px;
+      filter: none;
+    }
+    svg [data-legend-kind][role="button"] { cursor: pointer; }
+    svg [data-legend-kind]:focus { outline: none; }
+    svg [data-legend-hit] {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 1.4;
+      pointer-events: all;
+      vector-effect: non-scaling-stroke;
+      transition: stroke 150ms ease, stroke-width 150ms ease, filter 150ms ease;
+    }
+    svg [data-legend-count-badge] { pointer-events: none; }
+    svg [data-legend-count-badge] rect {
+      fill: var(--mask);
+      stroke: var(--panel-border);
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    svg [data-legend-count-badge] text {
+      fill: var(--text-muted);
+      font-size: 8px;
+      font-weight: 700;
+      text-anchor: middle;
+    }
+    svg [data-legend-kind][role="button"]:hover [data-legend-hit] {
+      stroke: color-mix(in srgb, var(--database-stroke) 58%, transparent);
+    }
+    svg [data-legend-kind][role="button"]:focus-visible [data-legend-hit] {
+      stroke: var(--frontend-stroke);
+      stroke-width: 1.8;
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg [data-legend-kind][data-legend-selected] [data-legend-hit] {
+      stroke: var(--database-stroke);
+      stroke-width: 2.2;
+      stroke-dasharray: 3 2;
+    }
+    svg [data-legend-kind][data-legend-selected] [data-legend-count-badge] rect {
+      stroke: var(--database-stroke);
+      stroke-width: 1.8;
+    }
+    svg [data-legend-kind][data-legend-zero] { opacity: 0.44; }
+    svg[data-preset="signal-flow"] [data-legend-kind][data-legend-selected] [data-legend-hit] {
+      filter: drop-shadow(0 0 4px var(--database-stroke));
+    }
+    svg[data-preset="blueprint"] [data-legend-hit],
+    svg[data-preset="blueprint"] [data-legend-count-badge] rect { rx: 0; filter: none; }
+    svg[data-legend-preview-active] [data-node-id],
+    svg[data-legend-preview-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-legend-preview-active] [data-legend-preview-match] { opacity: 1; }
+    svg[data-legend-preview-active] [data-legend-preview-peer] { opacity: 0.62; }
+    svg[data-legend-preview-active] [data-legend-preview-selected] {
+      filter: drop-shadow(0 0 8px var(--database-stroke));
+    }
+    svg[data-lens-active] [data-node-id],
+    svg[data-lens-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-lens-active] [data-lens-match] { opacity: 1; }
+    svg[data-lens-active] [data-lens-peer] { opacity: 0.62; }
+    svg[data-lens-active] [data-lens-selected] {
+      filter: drop-shadow(0 0 10px var(--database-stroke));
+    }
+    .semantic-lens-overlay { pointer-events: none; }
+    .semantic-lens-flow {
+      fill: none;
+      stroke-width: 3.05;
+      stroke-linecap: round;
+      stroke-dasharray: 0.075 0.925;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.9;
+      animation: archify-semantic-lens-flow 1.35s linear 1 both;
+      animation-delay: var(--lens-flow-delay, 0s);
+    }
+    .semantic-lens-flow[data-direction="out"],
+    .semantic-lens-flow[data-direction="forward"] {
+      stroke: var(--frontend-stroke);
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    .semantic-lens-flow[data-direction="in"],
+    .semantic-lens-flow[data-direction="reverse"] {
+      stroke: var(--database-stroke);
+      filter: drop-shadow(0 0 3px var(--database-stroke));
+    }
+    .semantic-lens-flow[data-direction="within"] {
+      stroke: var(--messagebus-stroke);
+      filter: drop-shadow(0 0 3px var(--messagebus-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow {
+      stroke-width: 3.7;
+      opacity: 1;
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="out"],
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="forward"] {
+      filter: drop-shadow(0 0 6px var(--frontend-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="in"],
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="reverse"] {
+      filter: drop-shadow(0 0 6px var(--database-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="within"] {
+      filter: drop-shadow(0 0 6px var(--messagebus-stroke));
+    }
+    svg[data-preset="blueprint"] .semantic-lens-flow {
+      stroke-width: 2.45;
+      stroke-linecap: square;
+      filter: none;
+      opacity: 0.78;
+    }
+    html[data-embed="true"] .semantic-lens-overlay { display: none; }
+    svg[data-focus-active] [data-node-id],
+    svg[data-focus-active] [data-edge-from] { opacity: 0.13; }
+    svg[data-focus-active] [data-focus-match] { opacity: 1; }
+    svg[data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+
+    /* Authored Reachability is a bounded graph query over the relationships
+       already present in the artifact. Upstream walks incoming edges;
+       downstream walks outgoing edges. It never claims runtime causality and
+       changes only viewer emphasis, not canonical geometry or export bytes. */
+    svg[data-reach-active] [data-node-id],
+    svg[data-reach-active] [data-edge-from] { opacity: 0.09; }
+    svg[data-reach-active] [data-reach-match] { opacity: 1; }
+    svg[data-reach-active="upstream"] [data-reach-origin] {
+      filter: drop-shadow(0 0 11px var(--database-stroke));
+    }
+    svg[data-reach-active="downstream"] [data-reach-origin] {
+      filter: drop-shadow(0 0 11px var(--backend-stroke));
+    }
+    svg[data-reach-active="upstream"] [data-edge-from][data-reach-match] {
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--database-stroke) 72%, transparent));
+    }
+    svg[data-reach-active="downstream"] [data-edge-from][data-reach-match] {
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));
+    }
+    svg[data-preset="blueprint"][data-reach-active] [data-reach-origin],
+    svg[data-preset="blueprint"][data-reach-active] [data-edge-from][data-reach-match] {
+      filter: none;
+    }
+
+    /* Direct Relationship Explorer makes authored paths a real input surface
+       without changing their visible stroke or canonical SVG. A transparent
+       runtime rail supplies forgiving pointer geometry; the exact authored
+       path and endpoints continue to carry every visible state. */
+    .relationship-hit-overlay { pointer-events: none; }
+    .relationship-hit-target { outline: none; }
+    .relationship-hit-rail {
+      fill: none;
+      stroke: transparent;
+      stroke-width: 24;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+      pointer-events: stroke;
+      cursor: pointer;
+    }
+    .relationship-focus-rail {
+      fill: none;
+      stroke: color-mix(in srgb, var(--frontend-stroke) 34%, transparent);
+      stroke-width: 6;
+      stroke-dasharray: 2 4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+      pointer-events: none;
+      opacity: 0;
+    }
+    .relationship-hit-target:focus-visible .relationship-focus-rail {
+      opacity: 1;
+    }
+    svg[data-preset="blueprint"] .relationship-hit-target:focus-visible .relationship-focus-rail {
+      stroke-linecap: square;
+      filter: none;
+    }
+    svg[data-relationship-direct-active] [data-node-id],
+    svg[data-relationship-direct-active] [data-edge-from] { opacity: 0.16; }
+    svg[data-relationship-direct-active] [data-relationship-preview],
+    svg[data-relationship-direct-active] [data-relationship-preview-node] { opacity: 1; }
+    svg[data-focus-active]:not([data-relationship-pin-active]) .relationship-hit-rail,
+    svg[data-story-active] .relationship-hit-rail,
+    svg[data-route-picking] .relationship-hit-rail,
+    svg[data-route-active] .relationship-hit-rail,
+    svg[data-lens-active] .relationship-hit-rail,
+    svg[data-chapter-preview] .relationship-hit-rail { pointer-events: none; }
+    html[data-embed="true"] .relationship-hit-overlay { display: none; }
+    @media (hover: none), (pointer: coarse) {
+      .relationship-hit-rail { stroke-width: 24; }
+    }
+
+    /* Relationship Preview is temporary exploration state layered on top of
+       neighborhood focus. It changes emphasis only; exported geometry and the
+       relationship's original solid/dashed visual language stay untouched. */
+    svg[data-relationship-preview-active] [data-focus-match] { opacity: 0.18; }
+    svg[data-relationship-preview-active] [data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview-node] { opacity: 1; }
+    svg[data-relationship-preview-active] [data-relationship-preview] {
+      filter: drop-shadow(0 0 5px var(--arrow-emphasis));
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview] path,
+    svg[data-relationship-preview-active] path[data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview] line,
+    svg[data-relationship-preview-active] line[data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview] polyline,
+    svg[data-relationship-preview-active] polyline[data-relationship-preview] {
+      stroke-width: 2.75;
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview-source] {
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview-target] {
+      filter: drop-shadow(0 0 7px var(--database-stroke));
+    }
+    .relationship-pulse-overlay { pointer-events: none; }
+    .relationship-flow-pulse {
+      fill: none;
+      stroke: var(--arrow-emphasis);
+      stroke-width: 3.35;
+      stroke-linecap: round;
+      stroke-dasharray: 0.085 0.915;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0;
+      filter: drop-shadow(0 0 4px var(--arrow-emphasis));
+      animation: archify-relationship-pulse 1.2s linear 1 both;
+    }
+    svg[data-preset="signal-flow"] .relationship-flow-pulse {
+      stroke: var(--frontend-stroke);
+      stroke-width: 3.85;
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"] .relationship-flow-pulse {
+      stroke-width: 2.5;
+      stroke-linecap: square;
+      filter: none;
+    }
+    svg[data-preset="editorial"] .relationship-flow-pulse {
+      stroke: var(--arrow-emphasis);
+      stroke-width: 2.75;
+      filter: none;
+    }
+    .semantic-flow-token {
+      color: var(--frontend-stroke);
+      opacity: 0;
+      pointer-events: none;
+    }
+    .relationship-flow-token {
+      animation: archify-relationship-token-life 1.2s linear 1 both;
+    }
+    .story-flow-token {
+      animation: archify-relationship-token-life 0.78s linear 1 both;
+    }
+    .semantic-flow-token-halo {
+      fill: var(--mask);
+      stroke: currentColor;
+      stroke-width: 1.1;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+    }
+    .relationship-flow-token-shape {
+      fill: var(--mask);
+      stroke: currentColor;
+      stroke-width: 1.35;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .relationship-flow-token-ink {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.05;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .relationship-flow-token-dot { fill: currentColor; stroke: none; }
+    .semantic-flow-token[data-token-kind="data"] { color: var(--database-stroke); }
+    .semantic-flow-token[data-token-kind="event"] { color: var(--messagebus-stroke); }
+    .semantic-flow-token[data-token-kind="security"] { color: var(--security-stroke); }
+    .semantic-flow-token[data-token-kind="state"] { color: var(--cloud-stroke); }
+    svg[data-preset="signal-flow"] .semantic-flow-token {
+      filter: drop-shadow(0 0 5px currentColor);
+    }
+    svg[data-preset="blueprint"] .semantic-flow-token { filter: none; }
+    svg[data-preset="editorial"] .semantic-flow-token { filter: none; }
+    html[data-embed="true"] .relationship-pulse-overlay { display: none; }
+
+    /* Intent Trace is a temporary, pre-click exploration layer. Related
+       topology stays readable while a short viewer-only signal runs over
+       cloned edge geometry; the authored edge remains untouched underneath. */
+    svg[data-intent-trace-active] [data-node-id],
+    svg[data-intent-trace-active] [data-edge-from] { opacity: 0.2; }
+    svg[data-intent-trace-active] [data-intent-trace-match] { opacity: 1; }
+    svg[data-intent-trace-active] [data-intent-trace-selected] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+    .intent-trace-overlay { pointer-events: none; }
+    .intent-trace-flow {
+      fill: none;
+      stroke-width: 3.1;
+      stroke-linecap: round;
+      stroke-dasharray: 0.1 0.9;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.94;
+      animation: archify-intent-trace-flow 1.15s linear 1 both;
+    }
+    .intent-trace-flow[data-direction="out"] {
+      stroke: var(--frontend-stroke);
+      filter: drop-shadow(0 0 4px var(--frontend-stroke));
+    }
+    .intent-trace-flow[data-direction="in"] {
+      stroke: var(--database-stroke);
+      filter: drop-shadow(0 0 4px var(--database-stroke));
+      animation-direction: reverse;
+    }
+    .intent-trace-flow[data-direction="loop"] {
+      stroke: var(--security-stroke);
+      filter: drop-shadow(0 0 4px var(--security-stroke));
+    }
+    svg[data-preset="blueprint"] [data-intent-trace-selected],
+    svg[data-preset="blueprint"] .intent-trace-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="editorial"] [data-intent-trace-selected],
+    svg[data-preset="editorial"] .intent-trace-flow { filter: none; }
+    .intent-trace-status {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Route Probe separates a durable two-point query from selection and
+       one-hop hover. Only the chosen shortest directed path stays prominent;
+       the traveling signal is cloned viewer geometry and never authored SVG. */
+    svg[data-route-picking="target"] [data-node-id] { opacity: 0.24; }
+    svg[data-route-picking="target"] [data-route-candidate],
+    svg[data-route-picking="target"] [data-route-start] { opacity: 1; }
+    svg[data-route-picking] [data-node-id] { cursor: crosshair; }
+    svg[data-route-picking] [data-route-start] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+    svg[data-route-active] [data-node-id],
+    svg[data-route-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-route-active] [data-route-match] { opacity: 1; }
+    svg[data-route-active] [data-route-start] {
+      filter: drop-shadow(0 0 11px var(--frontend-stroke));
+    }
+    svg[data-route-active] [data-route-end] {
+      filter: drop-shadow(0 0 11px var(--security-stroke));
+    }
+    svg[data-route-active] [data-route-step]:not([data-route-start]):not([data-route-end]) {
+      filter: drop-shadow(0 0 7px var(--backend-stroke));
+    }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="past"] { opacity: 0.62; }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="future"] { opacity: 0.34; }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="current"] { opacity: 1; }
+    svg[data-route-journey] [data-node-id][data-route-journey-current] {
+      filter: drop-shadow(0 0 10px var(--backend-stroke));
+    }
+    svg[data-route-journey] [data-edge-from][data-route-journey-current] {
+      opacity: 1;
+      filter: drop-shadow(0 0 6px var(--backend-stroke));
+    }
+    .route-probe-overlay { pointer-events: none; }
+    .route-journey-overlay { pointer-events: none; }
+    .route-probe-flow {
+      fill: none;
+      stroke: var(--backend-stroke);
+      stroke-width: 3.25;
+      stroke-linecap: round;
+      stroke-dasharray: 0.085 0.915;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+      filter: drop-shadow(0 0 5px var(--backend-stroke));
+      animation: archify-route-probe-flow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
+      animation-delay: calc(var(--route-step, 0) * 0.16s);
+    }
+    .route-journey-flow {
+      fill: none;
+      stroke: var(--backend-stroke);
+      stroke-width: 3.5;
+      stroke-linecap: round;
+      stroke-dasharray: 0.1 0.9;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0;
+      filter: drop-shadow(0 0 6px var(--backend-stroke));
+      animation: archify-route-journey-flow 780ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;
+    }
+    svg[data-preset="blueprint"] [data-route-start],
+    svg[data-preset="blueprint"] [data-route-end],
+    svg[data-preset="blueprint"] [data-route-step],
+    svg[data-preset="blueprint"] .route-probe-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="blueprint"] .route-journey-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="editorial"] [data-route-start],
+    svg[data-preset="editorial"] [data-route-end],
+    svg[data-preset="editorial"] [data-route-step],
+    svg[data-preset="editorial"] .route-probe-flow,
+    svg[data-preset="editorial"] .route-journey-flow { filter: none; }
+
+    svg[data-preset="editorial"] .c-grid {
+      stroke-dasharray: 1 4;
+      opacity: 0.48;
+    }
+    svg[data-preset="editorial"] .c-region {
+      fill: color-mix(in srgb, var(--cloud-fill) 48%, transparent);
+      stroke-dasharray: 9 4;
+    }
+    svg[data-preset="editorial"] [data-node-id]:hover,
+    svg[data-preset="editorial"] [data-node-id]:focus-visible,
+    svg[data-preset="editorial"][data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent));
+    }
+
+    svg[data-preset="blueprint"] .c-grid {
+      stroke-dasharray: 1 3;
+      opacity: 0.78;
+    }
+    svg[data-preset="blueprint"] .c-region {
+      fill: color-mix(in srgb, var(--cloud-fill) 58%, transparent);
+      stroke-dasharray: 12 4 2 4;
+    }
+    svg[data-preset="blueprint"] .c-security-group,
+    svg[data-preset="blueprint"] .c-lane { stroke-dasharray: 7 3; }
+    svg[data-preset="blueprint"] [data-node-id]:hover,
+    svg[data-preset="blueprint"] [data-node-id]:focus-visible {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"][data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"][data-focus-active][data-reach-active] [data-focus-selected][data-reach-origin] {
+      filter: none;
+    }
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview],
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview-source],
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview-target] {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+
+    /* Story Trail is a viewer-only overlay derived from the ordered focus IDs
+       of the active guided view. The authored edge stays underneath with its
+       original color, dash pattern, marker, and geometry intact. */
+    .story-trail-overlay { pointer-events: none; }
+    .story-carrier-overlay { pointer-events: none; }
+    .story-trail-flow {
+      fill: none;
+      stroke: var(--frontend-stroke);
+      stroke-width: 2.8;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.34;
+      filter: drop-shadow(0 0 2px var(--frontend-stroke));
+    }
+    svg[data-story-beat] [data-story-step] {
+      opacity: 0.22;
+      filter: saturate(0.42);
+      transition: opacity 180ms ease, filter 180ms ease;
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="past"] {
+      opacity: 0.72;
+      filter: saturate(0.82);
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="next"] {
+      opacity: 0.5;
+      filter: saturate(0.66);
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      opacity: 1;
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+      animation: archify-story-beat-node 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step] {
+      opacity: 0.16;
+      transition: opacity 160ms ease;
+    }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="past"] { opacity: 0.58; }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="next"] { opacity: 0.34; }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="active"] { opacity: 1; }
+    svg[data-story-beat] .story-trail-flow { opacity: 0; transition: opacity 160ms ease; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="past"] { opacity: 0.34; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="next"] { opacity: 0.2; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="active"] { opacity: 0.92; }
+    svg[data-story-beat] .story-trail-flow[data-story-pulse="true"] {
+      stroke-dasharray: 2 13;
+      stroke-dashoffset: 30;
+      opacity: 0.92;
+      animation: archify-story-flow 0.78s linear 1 both;
+    }
+    svg[data-preset="blueprint"] .story-trail-flow {
+      stroke-linecap: square;
+      filter: none;
+      opacity: 0.5;
+    }
+    svg[data-preset="blueprint"][data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      filter: none;
+      animation: none;
+    }
+    svg[data-preset="editorial"] .story-trail-flow { filter: none; }
+    svg[data-preset="editorial"][data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 16%, transparent));
+    }
+
+    /* Chapter Delta Preview is a static, pre-commit comparison between two
+       chapter focus sets. Symbols in the rail carry the meaning without color;
+       these SVG rules only make exact stable-ID membership easier to scan. */
+    svg[data-chapter-preview] [data-node-id],
+    svg[data-chapter-preview] [data-edge-from] {
+      opacity: 0.1 !important;
+      filter: none !important;
+      transition: none !important;
+    }
+    svg[data-chapter-preview] .story-trail-overlay { opacity: 0.08 !important; }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="stay"] {
+      opacity: 0.76 !important;
+      filter: saturate(0.7) !important;
+    }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="enter"] {
+      opacity: 1 !important;
+      filter: saturate(1.2) !important;
+    }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="leave"] {
+      opacity: 0.28 !important;
+      filter: grayscale(0.72) !important;
+    }
+    svg[data-preset="blueprint"][data-chapter-preview] [data-node-id] { filter: none !important; }
+
+    /* Dashed boundary variants */
+    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }
+    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }
+    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }
+
+    /* Optional trace animation, enabled only by meta.animation = "trace".
+       The ordinary viewer performs one ambient pass and then restores the
+       authored solid/security/async line language. WebM samples the same
+       authored geometry into an explicit canvas timeline. */
+    html[data-ambient-motion="running"] svg[data-animation="trace"] [data-animate="edge"] {
+      animation: archify-edge-flow 2.4s linear 1;
+      animation-delay: calc(var(--step, 0) * 160ms);
+    }
+    html[data-ambient-motion="running"] svg[data-animation="trace"] [data-animate="node"] {
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: archify-node-pulse 3.6s ease-in-out 1;
+      animation-delay: calc(var(--step, 0) * 160ms);
+    }
+    svg[data-preset="signal-flow"][data-animation="trace"] [data-animate="edge"] {
+      stroke-linecap: round;
+      filter: drop-shadow(0 0 3px var(--arrow-emphasis));
+      animation-duration: 1.75s;
+    }
+    svg[data-preset="signal-flow"][data-animation="trace"] [data-animate="node"] {
+      animation-duration: 3.1s;
+    }
+    svg[data-preset="blueprint"][data-animation="trace"] [data-animate="edge"] {
+      stroke-linecap: square;
+      filter: none;
+      animation-duration: 2.15s;
+    }
+    svg[data-preset="blueprint"][data-animation="trace"] [data-animate="node"] {
+      animation-name: archify-blueprint-node-pulse;
+      animation-duration: 3.8s;
+    }
+    svg[data-preset="editorial"][data-animation="trace"] [data-animate="edge"] {
+      filter: none;
+      animation-duration: 2.2s;
+    }
+    svg[data-preset="editorial"][data-animation="trace"] [data-animate="node"] {
+      animation-name: archify-editorial-node-pulse;
+      animation-duration: 3.5s;
+    }
+    /* Embedded proofs are static until a named Story Trail chapter is played.
+       This keeps proof grids calm and ensures ?play=1 stops all viewer motion
+       after one 3.2 second chapter instead of leaving ambient trace loops on. */
+    html[data-embed="true"] svg[data-animation="trace"] [data-animate],
+    html[data-share-playback="true"] svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
+      stroke-dashoffset: 0;
+    }
+    @keyframes archify-edge-flow {
+      0% { stroke-dasharray: 10 8; stroke-dashoffset: 54; opacity: 0.42; }
+      88% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }
+      99.9% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }
+      100% { stroke-dashoffset: 0; opacity: 1; }
+    }
+    @keyframes archify-node-pulse {
+      0%, 72%, 100% { filter: none; stroke-width: 1.5; }
+      18%, 36% {
+        filter: drop-shadow(0 0 8px var(--arrow-emphasis));
+        stroke-width: 2.4;
+      }
+    }
+    @keyframes archify-blueprint-node-pulse {
+      0%, 72%, 100% { opacity: 1; filter: none; }
+      18%, 36% { opacity: 0.72; filter: drop-shadow(0 0 2px var(--frontend-stroke)); }
+    }
+    @keyframes archify-editorial-node-pulse {
+      0%, 72%, 100% { opacity: 1; filter: none; }
+      18%, 36% { opacity: 0.78; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent)); }
+    }
+    @keyframes archify-signal-scan {
+      0%, 18% { opacity: 1; transform: translateX(-70%); }
+      70% { opacity: 1; transform: translateX(70%); }
+      100% { opacity: 0; transform: translateX(70%); }
+    }
+    @keyframes archify-radar-live {
+      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent); }
+      55%, 100% { box-shadow: 0 0 0 0.32rem transparent; }
+    }
+    @keyframes archify-guided-progress {
+      from { transform: scaleX(var(--guided-progress-start, 0)); }
+      to { transform: scaleX(1); }
+    }
+    @keyframes archify-story-flow {
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes archify-intent-trace-flow {
+      0% { opacity: 0.28; stroke-dashoffset: 0; }
+      12%, 78% { opacity: 0.94; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-route-probe-flow {
+      0% { stroke-dashoffset: 0; opacity: 0.96; }
+      78% { stroke-dashoffset: -1; opacity: 0.96; }
+      100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.58; }
+    }
+    @keyframes archify-route-journey-flow {
+      0% { opacity: 0.16; stroke-dashoffset: 0; }
+      14%, 76% { opacity: 1; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-semantic-lens-flow {
+      0% { opacity: 0.2; stroke-dashoffset: 0; }
+      12%, 78% { opacity: 0.9; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-relationship-pulse {
+      0% { opacity: 0.18; stroke-dashoffset: 0; }
+      10%, 76% { opacity: 0.98; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-relationship-token-life {
+      0%, 7% { opacity: 0; }
+      13%, 82% { opacity: 1; }
+      100% { opacity: 0; }
+    }
+    @keyframes archify-story-beat-node {
+      from { opacity: 0.48; filter: saturate(0.6); }
+      58% { opacity: 1; filter: drop-shadow(0 0 10px var(--frontend-stroke)); }
+      to { opacity: 1; filter: drop-shadow(0 0 7px var(--frontend-stroke)); }
+    }
+    @keyframes archify-share-cue-enter {
+      from { opacity: 0; transform: translate(-50%, -0.45rem); }
+      to { opacity: 1; transform: translate(-50%, 0); }
+    }
+    @keyframes archify-share-cue-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.48; transform: scale(0.78); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      html[data-preset="signal-flow"] .diagram-container::before {
+        animation: none !important;
+      }
+      .pulse-dot { animation: none !important; }
+      svg[data-animation="trace"] [data-animate] {
+        animation: none !important;
+        stroke-dashoffset: 0;
+      }
+      .guided-view-progress span {
+        animation: none !important;
+        transform: scaleX(1) !important;
+      }
+      .story-trail-flow,
+      .intent-trace-flow,
+      .route-probe-flow,
+      .semantic-lens,
+      .diagram-guide,
+      [data-story-step],
+      .overview-map-live,
+      .guided-view-stop,
+      .share-chapter-cue,
+      .chapter-handoff-anchor,
+      .share-chapter-state::before,
+      .share-chapter-progress span { animation: none !important; }
+      .guided-view-chapter,
+      svg[data-chapter-preview] [data-node-id],
+      svg[data-chapter-preview] [data-edge-from] { transition: none !important; }
+      svg[data-story-playing="true"] .story-trail-flow {
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.55;
+      }
+      .intent-trace-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.72;
+      }
+      .route-probe-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.78;
+      }
+      .route-journey-overlay,
+      .story-carrier-overlay { display: none !important; }
+      .semantic-lens-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-width: 2.2;
+        opacity: 0.34;
+        filter: none;
+      }
+      .relationship-pulse-overlay { display: none !important; }
+      .guided-view-chapter { transition: none !important; }
+      .source-evidence-beacon,
+      svg [data-node-id], svg [data-edge-from], svg [data-detail], svg [data-detail-anchor], svg [data-legend-hit], svg { transition: none !important; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Toolbar: theme, live visual style, trace motion, presentation stage, and export.
+       Motion appears only for trace-enabled artifacts and has no shortcut;
+       Keyboard: T toggles theme, S cycles style, F toggles the stage, E opens export. -->
+  <div class="toolbar" role="toolbar" aria-label="Diagram actions">
+    <button id="btn-theme" type="button"
+            title="Toggle theme (T)"
+            aria-label="Toggle color theme"
+            aria-pressed="false">
+      <span id="theme-icon" class="toolbar-icon" aria-hidden="true"></span>
+      <span id="theme-label">Dark</span>
+    </button>
+    <div class="preset-wrap">
+      <button id="btn-preset" type="button"
+              title="Choose visual style (S cycles)"
+              aria-label="Choose visual style"
+              aria-haspopup="menu"
+              aria-expanded="false"
+              aria-controls="preset-menu"
+              aria-keyshortcuts="S">
+        <span class="preset-control-mark" aria-hidden="true"></span>
+        <span id="preset-label">Style</span>
+        <span class="toolbar-icon toolbar-chevron" aria-hidden="true"></span>
+      </button>
+      <div class="preset-menu" id="preset-menu" role="menu" aria-label="Visual style">
+        <div class="preset-menu-heading" role="presentation"><span>Visual identity</span><span>S cycles</span></div>
+        <button class="preset-option" data-preset-value="classic" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch classic" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Classic</strong><small>Stable technical default</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="signal-flow" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch signal-flow" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Signal Flow</strong><small>Motion-forward presentation</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="blueprint" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch blueprint" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Blueprint</strong><small>Engineering review</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="editorial" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch editorial" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Editorial</strong><small>Publication and launch notes</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+      </div>
+    </div>
+    <button id="btn-motion" type="button" hidden
+            title="Pause motion"
+            aria-label="Pause motion"
+            aria-pressed="true">
+      <span class="motion-control-dot" aria-hidden="true"></span>
+      <span id="motion-label">Live</span>
+    </button>
+    <button id="btn-present" type="button"
+            title="Presentation stage (F)"
+            aria-label="Enter presentation stage"
+            aria-pressed="false">
+      <span id="present-icon" class="toolbar-icon" aria-hidden="true"></span>
+      <span id="present-label">Present</span>
+    </button>
     <div class="export-wrap">
       <button id="btn-export" type="button"
               title="Export diagram (E)"
@@ -499,750 +4806,9680 @@
               aria-haspopup="menu"
               aria-expanded="false"
               aria-controls="export-menu">
-        Export <span aria-hidden="true">&#9662;</span>
+        Export <span class="toolbar-icon toolbar-chevron" aria-hidden="true"></span>
       </button>
       <div class="export-menu" id="export-menu" role="menu" aria-label="Export">
-        <button data-action="copy"  type="button" role="menuitem" tabindex="-1">Copy to clipboard <span class="hint">PNG</span></button>
-        <hr role="separator">
-        <button data-format="png"   type="button" role="menuitem" tabindex="-1">Download PNG</button>
-        <button data-format="jpeg"  type="button" role="menuitem" tabindex="-1">Download JPEG</button>
-        <button data-format="webp"  type="button" role="menuitem" tabindex="-1">Download WebP</button>
-        <hr role="separator">
-        <button data-format="svg"   type="button" role="menuitem" tabindex="-1">Download SVG <span class="hint">vector</span></button>
+        <div class="export-menu-header" role="presentation">
+          <div><strong>Export diagram</strong><span>Portable, clean outputs</span></div>
+          <kbd>E</kbd>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Share">
+          <span class="export-menu-heading" aria-hidden="true">Share</span>
+          <button data-format="share-card" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="route-share-card" type="button" role="menuitem" tabindex="-1" hidden disabled><span class="export-item-copy"><strong>Route Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="reach-share-card" type="button" role="menuitem" tabindex="-1" hidden disabled><span class="export-item-copy"><strong>Reach Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="copy-share-card" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Copy Share Card</strong><small class="hint">PNG to clipboard</small></span></button>
+          <button data-action="copy" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Copy diagram</strong><small class="hint">PNG to clipboard</small></span></button>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Raster images">
+          <span class="export-menu-heading" aria-hidden="true">Image</span>
+          <button data-format="png" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>PNG</strong><small class="hint">Lossless image</small></span></button>
+          <button data-format="jpeg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>JPEG</strong><small class="hint">Compact image</small></span></button>
+          <button data-format="webp" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebP</strong><small class="hint">Modern image</small></span></button>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Vector and motion">
+          <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
+          <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
+          <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <div class="header">
+      <div class="header-row">
+        <div class="pulse-dot"></div>
+        <h1>Cache Miss Request Sequence</h1>
+      </div>
+    </div>
+
+    <script id="archify-guided-views-data" type="application/json">[{"id":"request-and-auth","label":"Request and identity","focus":["user","web","api","auth"],"note":"Follow the user request through the authentication check."},{"id":"cache-fallback","label":"Cache fallback","focus":["api","redis","db"],"note":"See the cache miss and the source-of-truth query it triggers."},{"id":"return-and-trace","label":"Return and trace","focus":["db","api","redis","trace","web","user"],"note":"Separate response latency from the non-blocking observability write."}]</script>
+
+    <div class="guided-views no-print" id="guided-views" hidden aria-label="Guided diagram views">
+      <button id="guided-view-prev" type="button" aria-label="Previous guided view" title="Previous guided view ([)">&#8592;</button>
+      <div class="guided-view-copy">
+        <div class="guided-view-meta">
+          <span>Guided views</span>
+          <span id="guided-view-count"></span>
+          <span class="guided-view-progress" aria-hidden="true"><span id="guided-view-progress-bar"></span></span>
+          <span class="guided-view-handoff" id="guided-view-handoff" hidden aria-hidden="true"></span>
+        </div>
+        <strong id="guided-view-label">Explore this system</strong>
+        <small id="guided-view-note" aria-live="polite" aria-atomic="true">Step through curated paths without changing the source diagram.</small>
+        <div class="guided-view-trail" id="guided-view-trail" hidden role="group" aria-label="Story trail"></div>
+        <div class="guided-story-caption" id="guided-story-caption" hidden aria-live="polite" aria-atomic="true">
+          <span class="guided-story-caption-index" id="guided-story-caption-index">Beat</span>
+          <strong id="guided-story-caption-route"></strong>
+          <small id="guided-story-caption-detail"></small>
+          <span class="guided-story-caption-next" id="guided-story-caption-next" hidden aria-hidden="true">
+            <small>Next</small>
+            <strong id="guided-story-caption-next-label"></strong>
+          </span>
+        </div>
+      </div>
+      <button id="guided-view-next" type="button" aria-label="Next guided view" title="Next guided view (])">&#8594;</button>
+      <div class="guided-view-actions">
+        <button class="guided-view-play" id="guided-view-play" type="button" aria-label="Play guided story" aria-pressed="false" title="Play guided story (P)">
+          <span id="guided-view-play-icon" aria-hidden="true">&#9654;</span>
+          <span id="guided-view-play-label">Play story</span>
+        </button>
+        <button class="guided-view-beat-link" id="guided-view-beat-link" type="button" aria-label="Select a Story Beat to copy its exact link" title="Select a Story Beat to copy its exact link" disabled>
+          <span aria-hidden="true">&#35;</span>
+          <span id="guided-view-beat-link-label">Copy moment</span>
+        </button>
+        <button class="guided-view-all" id="guided-view-all" type="button" aria-label="Show entire diagram">Show all</button>
+      </div>
+      <nav class="guided-view-index" id="guided-view-index" aria-label="Story chapters">
+        <ol class="guided-view-chapters" id="guided-view-chapters"></ol>
+      </nav>
+    </div>
+
+    <!-- Main Diagram -->
+    <div class="diagram-container" data-detail-level="read">
+      <svg viewBox="0 0 820 760" role="img" aria-labelledby="archify-diagram-title archify-diagram-description" data-animation="trace" data-preset="classic" data-quality-profile="showcase">
+        <title id="archify-diagram-title">Cache Miss Request Sequence</title>
+        <desc id="archify-diagram-description">A sequence diagram generated by Archify.</desc>
+        <!-- Definitions -->
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-default" />
+          </marker>
+          <marker id="arrowhead-emphasis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-emphasis" />
+          </marker>
+          <marker id="arrowhead-security" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-security" />
+          </marker>
+          <marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-dashed" />
+          </marker>
+          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" class="c-grid" stroke-width="0.5"/>
+          </pattern>
+        </defs>
+
+        <!-- Background Grid -->
+        <rect width="100%" height="100%" fill="url(#grid)" />
+
+        <!-- Time Segments -->
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="segment" data-composition-frame-id="0" x="48" y="150" width="724" height="145" rx="10" class="c-lane" stroke-width="1"/>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="segment" data-composition-frame-id="1" x="48" y="315" width="724" height="190" rx="10" class="c-lane" stroke-width="1"/>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="segment" data-composition-frame-id="2" x="48" y="525" width="724" height="140" rx="10" class="c-lane" stroke-width="1"/>
+
+        <!-- Lifelines -->
+        <path d="M 62 142 L 62 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 170 142 L 170 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 278 142 L 278 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 386 142 L 386 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 494 142 L 494 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 602 142 L 602 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+        <path d="M 710 142 L 710 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+
+        <!-- Activations -->
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="web" x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="api" x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="auth" x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="redis" x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="db" x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
+        <rect data-graph-role="activation" data-activation-participant="trace" x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
+
+        <!-- Messages -->
+        <g data-edge-from="user" data-edge-to="web" data-edge-label="open page" data-edge-key="0" data-edge-id="open-page">
+          <path data-composition-edge-from="user" data-composition-edge-to="web" data-composition-edge-id="open-page" data-composition-points="69,185;163,185" d="M 69 185 L 163 185" class="a-default" data-animate="edge" style="--step:0" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="86.6" y="165" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
+          <text x="116" y="175" class="t-backend" font-size="9" text-anchor="middle">open page</text>
+        </g>
+        </g>
+
+        <g data-edge-from="web" data-edge-to="api" data-edge-label="GET /dashboard" data-edge-key="1" data-edge-id="dashboard-request">
+          <path data-composition-edge-from="web" data-composition-edge-to="api" data-composition-edge-id="dashboard-request" data-composition-points="177,228;271,228" d="M 177 228 L 271 228" class="a-emphasis" data-animate="edge" style="--step:1" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
+        <g data-detail="context">
+          <rect x="181.6" y="208" width="84.8" height="16" rx="3" class="c-mask"/>
+          <text x="224" y="218" class="t-backend" font-size="9" text-anchor="middle">GET /dashboard</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="auth" data-edge-label="verify JWT" data-edge-key="2" data-edge-id="verify-jwt">
+          <path data-composition-edge-from="api" data-composition-edge-to="auth" data-composition-edge-id="verify-jwt" data-composition-points="285,270;379,270" d="M 285 270 L 379 270" class="a-security" data-animate="edge" style="--step:2" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
+        <g data-detail="context">
+          <rect x="300" y="250" width="64" height="16" rx="3" class="c-mask"/>
+          <text x="332" y="260" class="t-security" font-size="9" text-anchor="middle">verify JWT</text>
+        </g>
+        </g>
+
+        <g data-edge-from="auth" data-edge-to="api" data-edge-label="claims ok" data-edge-key="3" data-edge-id="auth-claims">
+          <path data-composition-edge-from="auth" data-composition-edge-to="api" data-composition-edge-id="auth-claims" data-composition-points="379,305;285,305" d="M 379 305 L 285 305" class="a-default" data-animate="edge" style="--step:3" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="302.6" y="285" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
+          <text x="332" y="295" class="t-muted" font-size="9" text-anchor="middle">claims ok</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="redis" data-edge-label="read cache" data-edge-key="4" data-edge-id="cache-read">
+          <path data-composition-edge-from="api" data-composition-edge-to="redis" data-composition-edge-id="cache-read" data-composition-points="285,354;487,354" d="M 285 354 L 487 354" class="a-default" data-animate="edge" style="--step:4" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="354" y="334" width="64" height="16" rx="3" class="c-mask"/>
+          <text x="386" y="344" class="t-backend" font-size="9" text-anchor="middle">read cache</text>
+        </g>
+        </g>
+
+        <g data-edge-from="redis" data-edge-to="api" data-edge-label="miss" data-edge-key="5" data-edge-id="cache-miss">
+          <path data-composition-edge-from="redis" data-composition-edge-to="api" data-composition-edge-id="cache-miss" data-composition-points="487,391;285,391" d="M 487 391 L 285 391" class="a-default" data-animate="edge" style="--step:5" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="369" y="371" width="34" height="16" rx="3" class="c-mask"/>
+          <text x="386" y="381" class="t-muted" font-size="9" text-anchor="middle">miss</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="db" data-edge-label="query profile + metrics" data-edge-key="6" data-edge-id="profile-query">
+          <path data-composition-edge-from="api" data-composition-edge-to="db" data-composition-edge-id="profile-query" data-composition-points="285,443;595,443" d="M 285 443 L 595 443" class="a-emphasis" data-animate="edge" style="--step:6" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
+        <g data-detail="context">
+          <rect x="374.2" y="423" width="131.60000000000002" height="16" rx="3" class="c-mask"/>
+          <text x="440" y="433" class="t-backend" font-size="9" text-anchor="middle">query profile + metrics</text>
+        </g>
+        </g>
+
+        <g data-edge-from="db" data-edge-to="api" data-edge-label="rows" data-edge-key="7" data-edge-id="profile-rows">
+          <path data-composition-edge-from="db" data-composition-edge-to="api" data-composition-edge-id="profile-rows" data-composition-points="595,489;285,489" d="M 595 489 L 285 489" class="a-default" data-animate="edge" style="--step:7" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="423" y="469" width="34" height="16" rx="3" class="c-mask"/>
+          <text x="440" y="479" class="t-muted" font-size="9" text-anchor="middle">rows</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="redis" data-edge-label="set cache" data-edge-key="8" data-edge-id="cache-write">
+          <path data-composition-edge-from="api" data-composition-edge-to="redis" data-composition-edge-id="cache-write" data-composition-points="285,536;487,536" d="M 285 536 L 487 536" class="a-dashed" data-animate="edge" style="--step:8" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+        <g data-detail="context">
+          <rect x="356.6" y="516" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
+          <text x="386" y="526" class="t-messagebus" font-size="9" text-anchor="middle">set cache</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="trace" data-edge-label="emit trace" data-edge-key="9" data-edge-id="trace-emit">
+          <path data-composition-edge-from="api" data-composition-edge-to="trace" data-composition-edge-id="trace-emit" data-composition-points="285,580;703,580" d="M 285 580 L 703 580" class="a-dashed" data-animate="edge" style="--step:9" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+        <g data-detail="context">
+          <rect x="462" y="560" width="64" height="16" rx="3" class="c-mask"/>
+          <text x="494" y="570" class="t-messagebus" font-size="9" text-anchor="middle">emit trace</text>
+        </g>
+        </g>
+
+        <g data-edge-from="api" data-edge-to="web" data-edge-label="200 JSON" data-edge-key="10" data-edge-id="dashboard-response">
+          <path data-composition-edge-from="api" data-composition-edge-to="web" data-composition-edge-id="dashboard-response" data-composition-points="271,625;177,625" d="M 271 625 L 177 625" class="a-default" data-animate="edge" style="--step:10" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="197.2" y="605" width="53.6" height="16" rx="3" class="c-mask"/>
+          <text x="224" y="615" class="t-muted" font-size="9" text-anchor="middle">200 JSON</text>
+        </g>
+        </g>
+
+        <g data-edge-from="web" data-edge-to="user" data-edge-label="render" data-edge-key="11" data-edge-id="page-render">
+          <path data-composition-edge-from="web" data-composition-edge-to="user" data-composition-edge-id="page-render" data-composition-points="163,662;69,662" d="M 163 662 L 69 662" class="a-default" data-animate="edge" style="--step:11" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+        <g data-detail="context">
+          <rect x="94.4" y="642" width="43.2" height="16" rx="3" class="c-mask"/>
+          <text x="116" y="652" class="t-muted" font-size="9" text-anchor="middle">render</text>
+        </g>
+        </g>
+
+        <!-- Segment Labels -->
+        <g data-graph-role="segment-label" data-segment-id="0">
+          <rect x="56" y="128" width="50.4" height="18" rx="3" class="c-mask"/>
+          <text x="62" y="141" class="t-dim" font-size="9" font-weight="600">Request</text>
+        </g>
+        <g data-graph-role="segment-label" data-segment-id="1">
+          <rect x="56" y="293" width="55.6" height="18" rx="3" class="c-mask"/>
+          <text x="62" y="306" class="t-dim" font-size="9" font-weight="600">Fallback</text>
+        </g>
+        <g data-graph-role="segment-label" data-segment-id="2">
+          <rect x="56" y="503" width="97.2" height="18" rx="3" class="c-mask"/>
+          <text x="62" y="516" class="t-dim" font-size="9" font-weight="600">Response + trace</text>
+        </g>
+
+        <!-- Participants -->
+        <g id="node-user" data-node-id="user" data-node-label="User" tabindex="0" role="button" aria-label="Focus User, browser session, Sequence participant" aria-pressed="false" data-node-kind="external" data-node-sublabel="browser session" data-node-context="Sequence participant">
+          <title>User · browser session · Sequence participant</title>
+          <rect x="19" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="19" y="72" width="86" height="54" rx="6" class="c-external" data-animate="node" style="--step:0" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="external" class="semantic-sigil s-external" transform="translate(25 78) scale(0.6875)">
+            <rect x="2.5" y="5" width="8.5" height="8" rx="1.5"/>
+            <path d="M8 2.5h5.5V8M13.5 2.5 7.5 8.5"/>
+          </g>
+          <text data-detail-anchor x="62" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">User</text>
+          <text data-detail="context" x="62" y="111" class="t-muted" font-size="7" text-anchor="middle">browser session</text>
+        </g>
+
+        <g id="node-web" data-node-id="web" data-node-label="Web App" tabindex="0" role="button" aria-label="Focus Web App, React UI, Sequence participant" aria-pressed="false" data-node-kind="frontend" data-node-sublabel="React UI" data-node-context="Sequence participant">
+          <title>Web App · React UI · Sequence participant</title>
+          <rect x="127" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="127" y="72" width="86" height="54" rx="6" class="c-frontend" data-animate="node" style="--step:1" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="frontend" class="semantic-sigil s-frontend" transform="translate(133 78) scale(0.6875)">
+            <rect x="2" y="3" width="12" height="10" rx="2"/>
+            <path d="M2 6.5h12"/>
+            <circle cx="4.1" cy="4.8" r=".7" class="sigil-fill"/>
+            <circle cx="6.3" cy="4.8" r=".7" class="sigil-fill"/>
+          </g>
+          <text data-detail-anchor x="170" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Web App</text>
+          <text data-detail="context" x="170" y="111" class="t-muted" font-size="7" text-anchor="middle">React UI</text>
+        </g>
+
+        <g id="node-api" data-node-id="api" data-node-label="API" tabindex="0" role="button" aria-label="Focus API, request handler, Sequence participant" aria-pressed="false" data-node-kind="backend" data-node-sublabel="request handler" data-node-context="Sequence participant">
+          <title>API · request handler · Sequence participant</title>
+          <rect x="235" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="235" y="72" width="86" height="54" rx="6" class="c-backend" data-animate="node" style="--step:2" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="backend" class="semantic-sigil s-backend" transform="translate(241 78) scale(0.6875)">
+            <path d="M6 3 3 8l3 5M10 3l3 5-3 5"/>
+          </g>
+          <text data-detail-anchor x="278" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">API</text>
+          <text data-detail="context" x="278" y="111" class="t-muted" font-size="7" text-anchor="middle">request handler</text>
+        </g>
+
+        <g id="node-auth" data-node-id="auth" data-node-label="Auth" tabindex="0" role="button" aria-label="Focus Auth, JWT verify, Sequence participant" aria-pressed="false" data-node-kind="security" data-node-sublabel="JWT verify" data-node-context="Sequence participant">
+          <title>Auth · JWT verify · Sequence participant</title>
+          <rect x="343" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="343" y="72" width="86" height="54" rx="6" class="c-security" data-animate="node" style="--step:3" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="security" class="semantic-sigil s-security" transform="translate(349 78) scale(0.6875)">
+            <path d="M8 2.2 13 4v3.5c0 3.1-1.8 5.4-5 6.5-3.2-1.1-5-3.4-5-6.5V4Z"/>
+            <path d="m5.8 8 1.5 1.5 3-3"/>
+          </g>
+          <text data-detail-anchor x="386" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Auth</text>
+          <text data-detail="context" x="386" y="111" class="t-muted" font-size="7" text-anchor="middle">JWT verify</text>
+        </g>
+
+        <g id="node-redis" data-node-id="redis" data-node-label="Redis" tabindex="0" role="button" aria-label="Focus Redis, cache, Sequence participant" aria-pressed="false" data-node-kind="database" data-node-sublabel="cache" data-node-context="Sequence participant">
+          <title>Redis · cache · Sequence participant</title>
+          <rect x="451" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="451" y="72" width="86" height="54" rx="6" class="c-database" data-animate="node" style="--step:4" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="database" class="semantic-sigil s-database" transform="translate(457 78) scale(0.6875)">
+            <ellipse cx="8" cy="4" rx="5" ry="2"/>
+            <path d="M3 4v8c0 1.1 2.2 2 5 2s5-.9 5-2V4M3 8c0 1.1 2.2 2 5 2s5-.9 5-2"/>
+          </g>
+          <text data-detail-anchor x="494" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Redis</text>
+          <text data-detail="context" x="494" y="111" class="t-muted" font-size="7" text-anchor="middle">cache</text>
+        </g>
+
+        <g id="node-db" data-node-id="db" data-node-label="Postgres" tabindex="0" role="button" aria-label="Focus Postgres, source of truth, Sequence participant" aria-pressed="false" data-node-kind="database" data-node-sublabel="source of truth" data-node-context="Sequence participant">
+          <title>Postgres · source of truth · Sequence participant</title>
+          <rect x="559" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="559" y="72" width="86" height="54" rx="6" class="c-database" data-animate="node" style="--step:5" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="database" class="semantic-sigil s-database" transform="translate(565 78) scale(0.6875)">
+            <ellipse cx="8" cy="4" rx="5" ry="2"/>
+            <path d="M3 4v8c0 1.1 2.2 2 5 2s5-.9 5-2V4M3 8c0 1.1 2.2 2 5 2s5-.9 5-2"/>
+          </g>
+          <text data-detail-anchor x="602" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Postgres</text>
+          <text data-detail="context" x="602" y="111" class="t-muted" font-size="7" text-anchor="middle">source of truth</text>
+        </g>
+
+        <g id="node-trace" data-node-id="trace" data-node-label="Trace" tabindex="0" role="button" aria-label="Focus Trace, async event, Sequence participant" aria-pressed="false" data-node-kind="messagebus" data-node-sublabel="async event" data-node-context="Sequence participant">
+          <title>Trace · async event · Sequence participant</title>
+          <rect x="667" y="72" width="86" height="54" rx="6" class="c-mask"/>
+          <rect x="667" y="72" width="86" height="54" rx="6" class="c-messagebus" data-animate="node" style="--step:6" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="messagebus" class="semantic-sigil s-messagebus" transform="translate(673 78) scale(0.6875)">
+            <path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>
+            <circle cx="5" cy="4.5" r="1" class="sigil-fill"/>
+            <circle cx="10.5" cy="8" r="1" class="sigil-fill"/>
+            <circle cx="7" cy="11.5" r="1" class="sigil-fill"/>
+          </g>
+          <text data-detail-anchor x="710" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Trace</text>
+          <text data-detail="context" x="710" y="111" class="t-muted" font-size="7" text-anchor="middle">async event</text>
+        </g>
+
+        <!-- Legend -->
+        <g data-legend>
+          <text x="40" y="686" class="t-primary" font-size="12" font-weight="650">Legend</text>
+          <g data-legend-semantic-kind="emphasis" data-legend-x="40" data-legend-baseline="706" data-legend-width="78">
+            <path d="M 40 703 L 74 703" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
+            <text x="83" y="706" class="t-muted" font-size="10" font-weight="500">request</text>
+          </g>
+          <g data-legend-semantic-kind="return" data-legend-x="140" data-legend-baseline="706" data-legend-width="73">
+            <path d="M 140 703 L 174 703" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
+            <text x="183" y="706" class="t-muted" font-size="10" font-weight="500">return</text>
+          </g>
+          <g data-legend-semantic-kind="security" data-legend-x="235" data-legend-baseline="706" data-legend-width="83">
+            <path d="M 235 703 L 269 703" class="a-security" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
+            <text x="278" y="706" class="t-muted" font-size="10" font-weight="500">security</text>
+          </g>
+          <g data-legend-semantic-kind="dashed" data-legend-x="340" data-legend-baseline="706" data-legend-width="98">
+            <path d="M 340 703 L 374 703" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+            <text x="383" y="706" class="t-muted" font-size="10" font-weight="500">async trace</text>
+          </g>
+          <g data-legend-semantic-kind="default" data-legend-x="460" data-legend-baseline="706" data-legend-width="118">
+            <path d="M 460 703 L 494 703" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+            <text x="503" y="706" class="t-muted" font-size="10" font-weight="500">default message</text>
+          </g>
+        </g>
+      </svg>
+      <p class="intent-trace-status no-print" id="intent-trace-status" role="status" aria-live="polite" aria-atomic="true"></p>
+      <div class="share-chapter-cue no-print" id="share-chapter-cue" hidden role="status" aria-live="polite">
+        <div class="share-chapter-index">
+          <span class="share-chapter-state" id="share-chapter-state">Ready</span>
+          <span class="share-chapter-count" id="share-chapter-count">Chapter 01 / 01</span>
+        </div>
+        <div class="share-chapter-copy">
+          <strong id="share-chapter-label">Guided chapter</strong>
+          <small id="share-chapter-note"></small>
+        </div>
+        <span class="share-chapter-route" id="share-chapter-route"></span>
+        <span class="share-chapter-progress" aria-hidden="true"><span id="share-chapter-progress-bar"></span></span>
+      </div>
+      <div class="diagram-guide no-print" id="diagram-guide" hidden role="dialog" aria-modal="false" aria-labelledby="diagram-guide-title">
+        <div class="diagram-guide-head">
+          <span>
+            <span class="diagram-guide-eyebrow">Diagram guide</span>
+            <strong class="diagram-guide-title" id="diagram-guide-title">Explore this system</strong>
+          </span>
+          <button class="diagram-guide-close" id="diagram-guide-close" type="button" aria-label="Close diagram guide">&#215;</button>
+        </div>
+        <p class="diagram-guide-stats" id="diagram-guide-stats">Inspecting compiled semantics</p>
+        <div class="diagram-guide-actions" id="diagram-guide-actions" role="group" aria-label="Diagram exploration actions">
+          <button class="diagram-guide-action" type="button" data-guide-action="find" aria-label="Find any node">
+            <span class="diagram-guide-index" aria-hidden="true">01</span>
+            <span class="diagram-guide-action-copy"><strong>Find any node</strong><small>Search labels, responsibilities, kinds, and stable IDs.</small></span>
+            <kbd aria-hidden="true">/</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="route" aria-label="Trace a directed route">
+            <span class="diagram-guide-index" aria-hidden="true">02</span>
+            <span class="diagram-guide-action-copy"><strong>Trace a route</strong><small>Ask how two semantic nodes connect in authored direction.</small></span>
+            <kbd aria-hidden="true">R</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="map" aria-label="See the whole system">
+            <span class="diagram-guide-index" aria-hidden="true">03</span>
+            <span class="diagram-guide-action-copy"><strong>See the whole system</strong><small>Open Semantic Radar with a live viewport and stable nodes.</small></span>
+            <kbd aria-hidden="true">M</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="lens" aria-label="Compare semantic kinds">
+            <span class="diagram-guide-index" aria-hidden="true">04</span>
+            <span class="diagram-guide-action-copy"><strong>Compare semantic kinds</strong><small>Count roles, reveal their traffic, and compare direct authored links.</small></span>
+            <kbd aria-hidden="true">L</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="story" aria-label="Play the guided story">
+            <span class="diagram-guide-index" aria-hidden="true">05</span>
+            <span class="diagram-guide-action-copy"><strong>Play the guided story</strong><small id="diagram-guide-story-copy">Walk the authored chapters and real relationships.</small></span>
+            <kbd aria-hidden="true">P</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="present" aria-label="Enter presentation stage">
+            <span class="diagram-guide-index" aria-hidden="true">06</span>
+            <span class="diagram-guide-action-copy"><strong>Enter Presentation Stage</strong><small>Give the live diagram the viewport without changing export.</small></span>
+            <kbd aria-hidden="true">F</kbd>
+          </button>
+        </div>
+        <div class="diagram-guide-shortcuts" aria-label="Additional keyboard shortcuts">
+          <span><kbd>E</kbd> Export</span><span><kbd>T</kbd> Theme</span><span><kbd>S</kbd> Style</span><span><kbd>0</kbd> Reset</span><span><kbd>+</kbd> Zoom in</span><span><kbd>-</kbd> Zoom out</span><span><kbd>Esc</kbd> Close</span>
+        </div>
+        <p class="diagram-guide-feedback" id="diagram-guide-feedback" aria-live="polite"></p>
+      </div>
+      <div class="node-finder no-print" id="node-finder" hidden role="dialog" aria-modal="false" aria-labelledby="node-finder-title">
+        <div class="node-finder-head">
+          <strong id="node-finder-title">Find a node</strong>
+          <button class="node-finder-close" id="node-finder-close" type="button" aria-label="Close node finder">&#215;</button>
+        </div>
+        <div class="node-finder-search">
+          <span aria-hidden="true">&#8981;</span>
+          <input class="node-finder-input" id="node-finder-input" type="search" autocomplete="off" spellcheck="false" placeholder="Search labels or IDs" aria-label="Search diagram nodes" aria-describedby="node-finder-status">
+          <kbd aria-hidden="true">/</kbd>
+        </div>
+        <div class="node-finder-results" id="node-finder-results" role="group" aria-label="Diagram nodes"></div>
+        <p class="node-finder-empty" id="node-finder-empty" hidden>No matching nodes</p>
+        <p class="node-finder-status" id="node-finder-status" aria-live="polite"></p>
+      </div>
+      <div class="focus-chip relationship-lens no-print" id="focus-chip" hidden role="region" aria-labelledby="relationship-lens-title">
+        <div class="relationship-lens-head">
+          <div class="relationship-lens-copy">
+            <span class="relationship-lens-eyebrow">Semantic passport</span>
+            <strong class="relationship-lens-title" id="relationship-lens-title"><span id="focus-label"></span></strong>
+            <span class="semantic-passport-detail" id="focus-detail" hidden></span>
+            <div class="semantic-passport-meta" id="focus-passport-meta" aria-label="Node metadata">
+              <span id="focus-kind" data-passport="kind"></span>
+              <span id="focus-context" data-passport="context" hidden></span>
+              <span id="focus-tag" data-passport="tag" hidden></span>
+              <code id="focus-id" data-passport="id"></code>
+            </div>
+            <div class="semantic-passport-evidence" id="focus-evidence" hidden aria-label="Verified source evidence">
+              <div class="semantic-passport-evidence-head">
+                <span class="semantic-passport-evidence-status">Verified source</span>
+                <a class="semantic-passport-repository" id="focus-repository" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"></a>
+              </div>
+              <div class="semantic-passport-evidence-links" id="focus-evidence-links"></div>
+            </div>
+            <span class="relationship-lens-summary" id="focus-summary" aria-live="polite"></span>
+            <div class="semantic-passport-reach" id="focus-reach" hidden>
+              <span class="semantic-passport-reach-label">Authored reach</span>
+              <div class="semantic-passport-reach-actions" role="group" aria-label="Trace authored reachability">
+                <button id="btn-reach-upstream" type="button" aria-label="Trace upstream authored reachability" aria-pressed="false">
+                  <span>Upstream</span><strong id="focus-reach-upstream-count">0</strong>
+                </button>
+                <button id="btn-reach-downstream" type="button" aria-label="Trace downstream authored reachability" aria-pressed="false">
+                  <span>Downstream</span><strong id="focus-reach-downstream-count">0</strong>
+                </button>
+              </div>
+              <small class="semantic-passport-reach-status" id="focus-reach-status" hidden aria-live="polite"></small>
+            </div>
+          </div>
+          <div class="relationship-lens-actions">
+            <button id="btn-focus-clear" type="button" aria-label="Close semantic passport" title="Close">&#215;</button>
+            <button id="btn-focus-copy" type="button" aria-label="Copy link to focused node">Copy link</button>
+            <button id="btn-focus-relations" type="button" aria-label="Show connected relationships" aria-expanded="false" aria-controls="relationship-lens-list">Relations</button>
+          </div>
+        </div>
+        <div class="relationship-lens-list" id="relationship-lens-list" aria-label="Connected relationships"></div>
+      </div>
+      <div class="route-probe no-print" id="route-probe" hidden role="region" aria-labelledby="route-probe-title" data-state="idle">
+        <div class="route-probe-head">
+          <span class="route-probe-copy">
+            <span class="route-probe-eyebrow">Route probe</span>
+            <strong class="route-probe-title" id="route-probe-title">Choose a start node</strong>
+          </span>
+          <span class="route-probe-actions">
+            <button class="route-probe-find" id="route-probe-find" type="button" aria-label="Find a route start" data-node-finder-trigger>Find start</button>
+            <button class="route-probe-copy-link" id="route-probe-copy" type="button" aria-label="Copy link to traced route" hidden>Copy link</button>
+            <button id="route-probe-clear" type="button" aria-label="Clear route probe">Clear</button>
+          </span>
+        </div>
+        <div class="route-probe-path" id="route-probe-path" aria-label="Traced route">
+          <span class="route-probe-placeholder">Pick two semantic nodes on the diagram</span>
+        </div>
+        <div class="route-journey-controls" id="route-journey-controls" hidden role="group" aria-label="Route journey controls" data-playing="false">
+          <button id="route-journey-prev" type="button" aria-label="Previous route position" title="Previous route position">&#8592;</button>
+          <button class="route-journey-play" id="route-journey-play" type="button" aria-label="Play route journey" aria-pressed="false" title="Play route journey">
+            <span id="route-journey-play-icon" aria-hidden="true">&#9654;</span>
+            <span id="route-journey-play-label">Journey</span>
+          </button>
+          <button id="route-journey-next" type="button" aria-label="Next route position" title="Next route position">&#8594;</button>
+          <button class="route-journey-overview" id="route-journey-overview" type="button" aria-label="Show complete route overview" title="Show complete route overview">Overview</button>
+        </div>
+        <small class="route-probe-status" id="route-probe-status" aria-live="polite">Choose the source, then the destination. Direction matters.</small>
+      </div>
+      <div class="semantic-lens no-print" id="semantic-lens" hidden role="dialog" aria-modal="false" aria-labelledby="semantic-lens-title">
+        <div class="semantic-lens-head">
+          <span>
+            <span class="semantic-lens-eyebrow">Semantic lens</span>
+            <strong class="semantic-lens-title" id="semantic-lens-title">Compare system roles</strong>
+          </span>
+          <button class="semantic-lens-close" id="semantic-lens-close" type="button" aria-label="Close semantic lens">&#215;</button>
+        </div>
+        <p class="semantic-lens-instruction">Choose up to two semantic kinds. One reveals its real traffic; two compare only direct authored relationships.</p>
+        <div class="semantic-lens-kinds" id="semantic-lens-kinds" role="group" aria-label="Semantic kinds"></div>
+        <p class="semantic-lens-status" id="semantic-lens-status" aria-live="polite">Choose a kind to inspect its nodes and touching relationships.</p>
+        <div class="semantic-lens-actions">
+          <button id="semantic-lens-copy" type="button" aria-label="Copy link to semantic lens" hidden>Copy link</button>
+          <button id="semantic-lens-clear" type="button" aria-label="Clear semantic lens">Clear</button>
+        </div>
+      </div>
+      <div class="overview-map no-print" id="overview-map" hidden role="region" aria-labelledby="overview-map-title">
+        <div class="overview-map-head">
+          <span class="overview-map-live" aria-hidden="true"></span>
+          <span class="overview-map-copy">
+            <strong id="overview-map-title">Semantic radar</strong>
+            <small id="overview-map-status" aria-live="polite">Building overview</small>
+          </span>
+          <button class="overview-map-close" id="overview-map-close" type="button" aria-label="Close semantic radar">&#215;</button>
+        </div>
+        <div class="overview-map-surface" id="overview-map-surface" tabindex="0" role="group" aria-label="Diagram overview. Click a node to focus it, or use arrow keys to pan."></div>
+        <div class="overview-map-hint" aria-hidden="true"><span>Click node</span><span>Drag to pan</span></div>
+      </div>
+      <div class="diagram-nav no-print" role="toolbar" aria-label="Diagram view controls">
+        <button id="btn-route-probe" type="button" aria-label="Trace a directed route" aria-pressed="false" aria-controls="route-probe" title="Trace route (R)">PATH</button>
+        <button id="btn-overview-map" type="button" aria-label="Open semantic radar" aria-expanded="false" aria-controls="overview-map" title="Semantic radar (M)">MAP</button>
+        <button id="btn-semantic-lens" type="button" aria-label="Open semantic lens" aria-haspopup="dialog" aria-expanded="false" aria-pressed="false" aria-controls="semantic-lens" title="Semantic lens (L)">LENS</button>
+        <button id="btn-node-finder" type="button" aria-label="Find a node" aria-haspopup="dialog" aria-expanded="false" aria-controls="node-finder" title="Find a node (/)" data-node-finder-trigger><span class="diagram-nav-icon find" aria-hidden="true"></span></button>
+        <button id="btn-diagram-guide" type="button" aria-label="Open diagram guide" aria-haspopup="dialog" aria-expanded="false" aria-controls="diagram-guide" title="Diagram guide (?)"><span class="diagram-nav-icon guide" aria-hidden="true"></span></button>
+        <button data-view="out" type="button" aria-label="Zoom out" title="Zoom out (-)"><span class="diagram-nav-icon minus" aria-hidden="true"></span></button>
+        <button data-view="reset" type="button" aria-label="Reset diagram view" title="Reset view (0)"><span class="diagram-nav-detail" data-view-detail hidden>READ</span><span class="diagram-nav-percent" data-view-percent>100%</span></button>
+        <button data-view="in" type="button" aria-label="Zoom in" title="Zoom in (+)"><span class="diagram-nav-icon plus" aria-hidden="true"></span></button>
+      </div>
+    </div>
+
+    <!-- Info Cards -->
+    <div class="cards">
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot emerald"></div>
+          <h3>Happy Path</h3>
+        </div>
+        <ul>
+          <li>&bull; The main request is Web App -&gt; API -&gt; data source -&gt; response</li>
+          <li>&bull; Return messages are quieter than forward calls</li>
+          <li>&bull; Activation bars make ownership duration visible</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot rose"></div>
+          <h3>Policy + Fallback</h3>
+        </div>
+        <ul>
+          <li>&bull; JWT verification is colored as a security interaction</li>
+          <li>&bull; Cache miss is visible without overpowering the main path</li>
+          <li>&bull; Database access only appears after cache fallback</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot orange"></div>
+          <h3>Async Trace</h3>
+        </div>
+        <ul>
+          <li>&bull; Trace emission is dashed and secondary</li>
+          <li>&bull; It does not block the response path</li>
+          <li>&bull; The diagram separates user-facing latency from observability</li>
+        </ul>
       </div>
     </div>
+
   </div>
 
-  <div class="container">
-    <!-- Header -->
-    <div class="header">
-      <div class="header-row">
-        <div class="pulse-dot"></div>
-        <h1>Cache Miss Request Sequence</h1>
-      </div>
-      <p class="subtitle">Frontend request path with auth, cache fallback, persistence, and async trace</p>
-    </div>
+  <script>
+    var Archify = {};
+
+    function hasDrawableGeometry(element) {
+      if (!element) return false;
+      var geometries = /^(path|line|polyline)$/i.test(element.tagName)
+        ? [element]
+        : Array.prototype.slice.call(element.querySelectorAll('path, line, polyline'));
+      return geometries.some(function (geometry) {
+        var source = geometry.tagName.toLowerCase() === 'path'
+          ? geometry.getAttribute('d')
+          : geometry.tagName.toLowerCase() === 'polyline'
+            ? geometry.getAttribute('points')
+            : [geometry.getAttribute('x1'), geometry.getAttribute('y1'), geometry.getAttribute('x2'), geometry.getAttribute('y2')].join(' ');
+        if (!source || /(?:^|[^a-z])(?:nan|infinity)(?:[^a-z]|$)/i.test(source) || typeof geometry.getTotalLength !== 'function') return false;
+        try {
+          var length = Number(geometry.getTotalLength());
+          return Number.isFinite(length) && length > 0;
+        } catch (_) {
+          return false;
+        }
+      });
+    }
+
+    /* ============================================================
+       Visual style try-on — one topology, four bundled presets.
+       The reader's choice is intentionally session-only: it updates the
+       live page and canonical SVG together, but never rewrites the source,
+       URL, or a later diagram's authored default.
+       ============================================================ */
+    Archify.preset = (function () {
+      var PRESETS = ['classic', 'signal-flow', 'blueprint', 'editorial'];
+      var LABELS = { classic: 'Classic', 'signal-flow': 'Flow', blueprint: 'Blueprint', editorial: 'Editorial' };
+      var html = document.documentElement;
+      var svg = document.querySelector('.diagram-container svg');
+      var btn = document.getElementById('btn-preset');
+      var label = document.getElementById('preset-label');
+      var menu = document.getElementById('preset-menu');
+      var options = function () {
+        return Array.prototype.slice.call(menu.querySelectorAll('[data-preset-value]'));
+      };
+      var authored = PRESETS.indexOf(html.getAttribute('data-preset')) >= 0
+        ? html.getAttribute('data-preset')
+        : 'classic';
+
+      function current() {
+        var value = html.getAttribute('data-preset');
+        return PRESETS.indexOf(value) >= 0 ? value : authored;
+      }
+      function nextAfter(preset) {
+        return PRESETS[(PRESETS.indexOf(preset) + 1) % PRESETS.length];
+      }
+      function apply(preset) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (PRESETS.indexOf(preset) < 0) return false;
+        html.setAttribute('data-preset', preset);
+        svg.setAttribute('data-preset', preset);
+        btn.setAttribute('data-preset-option', preset);
+        label.textContent = LABELS[preset];
+        btn.setAttribute('aria-label', 'Visual style: ' + LABELS[preset] + '. Choose visual style');
+        btn.title = 'Choose visual style (S cycles)';
+        options().forEach(function (option) {
+          var selected = option.getAttribute('data-preset-value') === preset;
+          option.setAttribute('aria-checked', String(selected));
+        });
+        return true;
+      }
+      function cycle() { return apply(nextAfter(current())); }
+
+      function isOpen() { return menu.classList.contains('open'); }
+      function open(focusLast) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        menu.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        var available = options();
+        var selected = available.find(function (option) { return option.getAttribute('aria-checked') === 'true'; });
+        var target = focusLast ? available[available.length - 1] : (selected || available[0]);
+        if (target) target.focus();
+        return true;
+      }
+      function close(focusTrigger) {
+        menu.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+        if (focusTrigger) btn.focus();
+        return false;
+      }
+
+      apply(authored);
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        if (isOpen()) close(false);
+        else open(false);
+      });
+      btn.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!isOpen()) open(e.key === 'ArrowUp');
+        }
+      });
+      document.addEventListener('click', function (e) {
+        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      });
+      menu.addEventListener('click', function (e) {
+        var option = e.target.closest('[data-preset-value]');
+        if (!option || !menu.contains(option)) return;
+        if (apply(option.getAttribute('data-preset-value'))) close(true);
+      });
+      menu.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+        if (e.key === 'Tab') { close(false); return; }
+        var available = options();
+        var active = available.indexOf(document.activeElement);
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (available.length) available[(active + 1 + available.length) % available.length].focus();
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (available.length) available[(active - 1 + available.length) % available.length].focus();
+            break;
+          case 'Home':
+            e.preventDefault();
+            if (available[0]) available[0].focus();
+            break;
+          case 'End':
+            e.preventDefault();
+            if (available.length) available[available.length - 1].focus();
+            break;
+        }
+      });
+      return { cycle: cycle, apply: apply, current: current, authored: authored, open: open, close: close, isOpen: isOpen };
+    })();
+
+    /* ============================================================
+       Theme toggle — persists to localStorage, respects system pref
+       ============================================================ */
+
+    Archify.theme = (function () {
+      var STORAGE_KEY = 'archify-theme';
+      var html = document.documentElement;
+      var btn = document.getElementById('btn-theme');
+      var label = document.getElementById('theme-label');
+
+      // localStorage can throw (blocked cookies, sandboxed iframes); the whole
+      // script element dies on an uncaught error, so guard every access.
+      function readStored() {
+        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+      }
+      function writeStored(value) {
+        try { localStorage.setItem(STORAGE_KEY, value); } catch (_) {}
+      }
+      function urlOverride() {
+        // URL param wins (useful for deterministic screenshots / share links)
+        try {
+          var param = new URLSearchParams(window.location.search).get('theme');
+          if (param === 'light' || param === 'dark') return param;
+        } catch (_) {}
+        return null;
+      }
+
+      function resolveInitial() {
+        var fromUrl = urlOverride();
+        if (fromUrl) return fromUrl;
+        var saved = readStored();
+        if (saved === 'light' || saved === 'dark') return saved;
+        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      }
+
+      function apply(theme) {
+        html.setAttribute('data-theme', theme);
+        label.textContent = theme === 'dark' ? 'Dark' : 'Light';
+        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+      }
+
+      function toggle() {
+        var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        apply(next);
+        writeStored(next);
+      }
+
+      apply(resolveInitial());
+      btn.addEventListener('click', toggle);
+
+      // Follow live OS theme changes while the user has no explicit preference.
+      try {
+        var media = window.matchMedia('(prefers-color-scheme: light)');
+        var onChange = function (e) {
+          var saved = readStored();
+          if (urlOverride() || saved === 'light' || saved === 'dark') return;
+          apply(e.matches ? 'light' : 'dark');
+        };
+        if (media.addEventListener) media.addEventListener('change', onChange);
+        else if (media.addListener) media.addListener(onChange);
+      } catch (_) {}
+
+      return { toggle: toggle };
+    })();
+
+    /* ============================================================
+       Export — Share Card / PNG / JPEG / WebP / SVG / WebM and clipboard
+
+       Raster exports are always rendered at 4x source resolution for
+       maximum sharpness. The trick: we set the serialized SVG's
+       `width`/`height` to viewBox * 4 so the browser rasterizes the
+       vectors at that resolution natively. drawImage then draws at
+       the image's natural size (no upscaling = no blur).
+
+       JPEG/WebP paint the current theme's background explicitly since
+       those formats have no alpha channel.
+       ============================================================ */
+    (function () {
+      var RASTER_SCALE = 4;
+      var MOTION_DURATION = 6000;
+      var MOTION_FPS = 30;
+      var SHARE_CARD_WIDTH = 1200;
+      var SHARE_CARD_HEIGHT = 630;
+      var SHARE_CARD_PADDING = 36;
+      var SHARE_CARD_HEADER = 112;
+
+      function diagramFilename() {
+        var title = (document.title || 'diagram')
+          .replace(/\s+Architecture(\s+Diagram)?$/i, '')
+          .replace(/\s+Diagram$/i, '')
+          .trim();
+        return title.replace(/[^a-z0-9_\-]+/gi, '-')
+                    .toLowerCase()
+                    .replace(/^-+|-+$/g, '') || 'diagram';
+      }
+
+      function currentBg() {
+        return getComputedStyle(document.body).backgroundColor || '#ffffff';
+      }
+
+      /**
+       * Serialize the main SVG into a standalone document.
+       *
+       * Two modes:
+       * - Default (opts.autoTheme=false) — locks the serialized SVG to the
+       *   viewer's current theme. Used by the raster pipeline
+       *   (PNG/JPEG/WebP/clipboard) because canvas rasterization needs
+       *   deterministic colors; a raster cannot react to
+       *   prefers-color-scheme after encoding.
+       * - autoTheme=true — emits BOTH dark and light variable sets plus a
+       *   `@media (prefers-color-scheme)` rule so the resulting SVG
+       *   self-themes when embedded in GitHub READMEs or other hosts that
+       *   expose a color scheme. Used for "Download SVG".
+       */
+      function applyRouteSnapshot(clone, snapshot) {
+        if (!snapshot || !Array.isArray(snapshot.nodeIds) || !Array.isArray(snapshot.edges) ||
+            snapshot.nodeIds.length < 2 || snapshot.edges.length !== snapshot.nodeIds.length - 1 ||
+            snapshot.hops !== snapshot.edges.length ||
+            !snapshot.source || !snapshot.target ||
+            snapshot.source.id !== snapshot.nodeIds[0] ||
+            snapshot.target.id !== snapshot.nodeIds[snapshot.nodeIds.length - 1]) return false;
+
+        clone.removeAttribute('data-animation');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-animate]'), function (element) {
+          element.removeAttribute('data-animate');
+          element.style.removeProperty('--step');
+        });
+
+        var cloneNodes = Array.prototype.slice.call(clone.querySelectorAll('[data-node-id]'));
+        var cloneEdges = Array.prototype.slice.call(clone.querySelectorAll('[data-edge-key]'));
+        var nodeIds = Object.create(null);
+        var edgeKeys = Object.create(null);
+        var nodeMatches = [];
+        var edgeMatches = [];
+
+        for (var nodeIndex = 0; nodeIndex < snapshot.nodeIds.length; nodeIndex++) {
+          var nodeId = snapshot.nodeIds[nodeIndex];
+          if (typeof nodeId !== 'string' || !nodeId || nodeIds[nodeId]) return false;
+          var matchedNodes = cloneNodes.filter(function (candidate) {
+            return candidate.getAttribute('data-node-id') === nodeId;
+          });
+          if (matchedNodes.length !== 1) return false;
+          nodeIds[nodeId] = true;
+          nodeMatches.push(matchedNodes);
+        }
+
+        for (var edgeIndex = 0; edgeIndex < snapshot.edges.length; edgeIndex++) {
+          var edge = snapshot.edges[edgeIndex];
+          var fromId = snapshot.nodeIds[edgeIndex];
+          var toId = snapshot.nodeIds[edgeIndex + 1];
+          if (!edge || typeof edge.key !== 'string' || !edge.key || edgeKeys[edge.key] ||
+              edge.from !== fromId || edge.to !== toId) return false;
+          var matchedEdges = cloneEdges.filter(function (candidate) {
+            return candidate.getAttribute('data-edge-key') === edge.key;
+          });
+          var drawableMatches = matchedEdges.filter(hasDrawableGeometry);
+          if (!matchedEdges.length || drawableMatches.length !== 1 || !matchedEdges.every(function (candidate) {
+            return candidate.getAttribute('data-edge-from') === edge.from &&
+              candidate.getAttribute('data-edge-to') === edge.to &&
+              (candidate.getAttribute('data-edge-id') || '') === (edge.id || '');
+          })) return false;
+          edgeKeys[edge.key] = true;
+          edgeMatches.push(matchedEdges);
+        }
+
+        clone.setAttribute('data-share-route', '');
+        nodeMatches.forEach(function (matches, step) {
+          matches.forEach(function (element) {
+            element.setAttribute('data-share-route-match', '');
+            element.setAttribute('data-share-route-step', String(step));
+            if (step === 0) element.setAttribute('data-share-route-start', '');
+            else if (step === snapshot.nodeIds.length - 1) element.setAttribute('data-share-route-end', '');
+            else element.setAttribute('data-share-route-middle', '');
+          });
+        });
+        edgeMatches.forEach(function (matches, step) {
+          matches.forEach(function (element) {
+            element.setAttribute('data-share-route-match', '');
+            element.setAttribute('data-share-route-step', String(step));
+          });
+        });
+
+        return clone.hasAttribute('data-share-route') &&
+          !clone.hasAttribute('data-animation') &&
+          !clone.hasAttribute('data-route-active') &&
+          !clone.hasAttribute('data-route-journey') &&
+          clone.querySelectorAll('[data-animate], [data-route-match], [data-route-step], [data-route-start], [data-route-end], [data-route-journey-state], [data-route-journey-current], [data-route-journey-overlay]').length === 0 &&
+          clone.querySelectorAll('[data-share-route-match]').length ===
+            nodeMatches.reduce(function (count, matches) { return count + matches.length; }, 0) +
+            edgeMatches.reduce(function (count, matches) { return count + matches.length; }, 0);
+      }
+
+      function applyReachSnapshot(clone, snapshot) {
+        if (!snapshot || (snapshot.direction !== 'upstream' && snapshot.direction !== 'downstream') ||
+            !snapshot.origin || typeof snapshot.origin.id !== 'string' || !snapshot.origin.id ||
+            typeof snapshot.origin.label !== 'string' || !snapshot.origin.label.trim() ||
+            !Array.isArray(snapshot.nodeIds) || snapshot.nodeIds.length < 2 ||
+            !Array.isArray(snapshot.edges) || !snapshot.edges.length ||
+            !snapshot.depths || typeof snapshot.depths !== 'object' ||
+            !Number.isInteger(snapshot.maxDepth) || snapshot.maxDepth < 1 ||
+            snapshot.nodeIds[0] !== snapshot.origin.id) return false;
+
+        clone.removeAttribute('data-animation');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-animate]'), function (element) {
+          element.removeAttribute('data-animate');
+          element.style.removeProperty('--step');
+        });
+
+        var cloneNodes = Array.prototype.slice.call(clone.querySelectorAll('[data-node-id]'));
+        var cloneEdges = Array.prototype.slice.call(clone.querySelectorAll('[data-edge-key]'));
+        var nodeIds = Object.create(null);
+        var edgeKeys = Object.create(null);
+        var nodeMatches = [];
+        var edgeMatches = [];
+        var measuredMaxDepth = 0;
+
+        for (var nodeIndex = 0; nodeIndex < snapshot.nodeIds.length; nodeIndex++) {
+          var nodeId = snapshot.nodeIds[nodeIndex];
+          var depth = snapshot.depths[nodeId];
+          if (typeof nodeId !== 'string' || !nodeId || nodeIds[nodeId] ||
+              !Number.isInteger(depth) || depth < 0 || depth > snapshot.maxDepth ||
+              (nodeId === snapshot.origin.id ? depth !== 0 : depth < 1)) return false;
+          var matchedNodes = cloneNodes.filter(function (candidate) {
+            return candidate.getAttribute('data-node-id') === nodeId;
+          });
+          if (matchedNodes.length !== 1) return false;
+          nodeIds[nodeId] = true;
+          measuredMaxDepth = Math.max(measuredMaxDepth, depth);
+          nodeMatches.push({ elements: matchedNodes, id: nodeId, depth: depth });
+        }
+        if (measuredMaxDepth !== snapshot.maxDepth) return false;
+
+        for (var edgeIndex = 0; edgeIndex < snapshot.edges.length; edgeIndex++) {
+          var edge = snapshot.edges[edgeIndex];
+          if (!edge || typeof edge.key !== 'string' || !edge.key || edgeKeys[edge.key] ||
+              !nodeIds[edge.from] || !nodeIds[edge.to] ||
+              !Number.isInteger(edge.depth) || edge.depth < 1 || edge.depth > snapshot.maxDepth ||
+              edge.depth !== Math.max(snapshot.depths[edge.from], snapshot.depths[edge.to])) return false;
+          var matchedEdges = cloneEdges.filter(function (candidate) {
+            return candidate.getAttribute('data-edge-key') === edge.key;
+          });
+          var drawableMatches = matchedEdges.filter(hasDrawableGeometry);
+          if (!matchedEdges.length || drawableMatches.length !== 1 || !matchedEdges.every(function (candidate) {
+            return candidate.getAttribute('data-edge-from') === edge.from &&
+              candidate.getAttribute('data-edge-to') === edge.to &&
+              (candidate.getAttribute('data-edge-id') || '') === (edge.id || '');
+          })) return false;
+          edgeKeys[edge.key] = true;
+          edgeMatches.push({ elements: matchedEdges, depth: edge.depth });
+        }
+
+        clone.setAttribute('data-share-reach', snapshot.direction);
+        nodeMatches.forEach(function (match) {
+          match.elements.forEach(function (element) {
+            element.setAttribute('data-share-reach-match', '');
+            element.setAttribute('data-share-reach-depth', String(match.depth));
+            if (match.id === snapshot.origin.id) element.setAttribute('data-share-reach-origin', '');
+          });
+        });
+        edgeMatches.forEach(function (match) {
+          match.elements.forEach(function (element) {
+            element.setAttribute('data-share-reach-match', '');
+            element.setAttribute('data-share-reach-depth', String(match.depth));
+          });
+        });
+
+        return clone.getAttribute('data-share-reach') === snapshot.direction &&
+          !clone.hasAttribute('data-animation') &&
+          !clone.hasAttribute('data-reach-active') &&
+          clone.querySelectorAll('[data-animate], [data-reach-match], [data-reach-origin], [data-reach-depth]').length === 0 &&
+          clone.querySelectorAll('[data-share-reach-origin]').length === 1 &&
+          clone.querySelectorAll('[data-share-reach-match]').length ===
+            nodeMatches.reduce(function (count, match) { return count + match.elements.length; }, 0) +
+            edgeMatches.reduce(function (count, match) { return count + match.elements.length; }, 0);
+      }
+
+      function serializeSvg(scale, opts) {
+        // scale: integer multiplier for intrinsic SVG pixel dimensions used by
+        // the raster path. Defaults to 1 (natural size) for SVG download.
+        scale = scale || 1;
+        opts = opts || {};
+        var autoTheme = opts.autoTheme === true;
+        var svg = document.querySelector('.diagram-container svg');
+        var clone = svg.cloneNode(true);
+
+        // View transforms and neighborhood focus are HTML exploration state,
+        // never part of a downloaded full-diagram artifact.
+        clone.style.removeProperty('transform');
+        clone.removeAttribute('data-view-scale');
+        clone.removeAttribute('data-focus-active');
+        clone.removeAttribute('data-reach-active');
+        clone.removeAttribute('data-lens-active');
+        clone.removeAttribute('data-lens-flow-count');
+        clone.removeAttribute('data-lens-flow-density');
+        clone.removeAttribute('data-legend-preview-active');
+        clone.removeAttribute('data-relationship-preview-active');
+        clone.removeAttribute('data-relationship-direct-active');
+        clone.removeAttribute('data-relationship-pin-active');
+        clone.removeAttribute('data-intent-trace-active');
+        clone.removeAttribute('data-route-picking');
+        clone.removeAttribute('data-route-active');
+        clone.removeAttribute('data-route-journey');
+        clone.removeAttribute('data-share-route');
+        clone.removeAttribute('data-share-reach');
+        clone.removeAttribute('data-story-active');
+        clone.removeAttribute('data-story-playing');
+        clone.removeAttribute('data-story-beat');
+        clone.removeAttribute('data-story-next');
+        clone.removeAttribute('data-story-follow');
+        clone.removeAttribute('data-chapter-handoff');
+        clone.removeAttribute('data-chapter-anchor');
+        clone.removeAttribute('data-chapter-preview');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-handoff-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-role]'), function (el) {
+          el.removeAttribute('data-chapter-role');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-preview-role]'), function (el) {
+          el.removeAttribute('data-chapter-preview-role');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-story-overlay], [data-story-carrier-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-intent-trace-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-probe-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-journey-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-semantic-lens-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-bridge-runtime]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-kind]'), function (el) {
+          el.removeAttribute('data-legend-kind');
+          el.removeAttribute('data-legend-label');
+          el.removeAttribute('data-legend-count');
+          el.removeAttribute('data-legend-zero');
+          el.removeAttribute('data-legend-selected');
+          el.removeAttribute('role');
+          el.removeAttribute('tabindex');
+          el.removeAttribute('aria-label');
+          el.removeAttribute('aria-pressed');
+          el.removeAttribute('aria-haspopup');
+          el.removeAttribute('aria-controls');
+          el.removeAttribute('aria-expanded');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-bridge]'), function (el) {
+          el.removeAttribute('data-legend-bridge');
+          el.removeAttribute('role');
+          el.removeAttribute('aria-label');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-pulse-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-hit-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-source-evidence-beacon]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-source-evidence-count]'), function (el) {
+          var originalLabel = el.getAttribute('data-source-evidence-original-label');
+          if (originalLabel == null || originalLabel === '') el.removeAttribute('aria-label');
+          else el.setAttribute('aria-label', originalLabel);
+          el.removeAttribute('data-source-evidence-count');
+          el.removeAttribute('data-source-evidence-original-label');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-story-step], [data-story-beat-state], [data-story-beat-step]'), function (el) {
+          el.removeAttribute('data-story-step');
+          el.removeAttribute('data-story-beat-state');
+          el.removeAttribute('data-story-beat-step');
+          el.style.removeProperty('--story-step');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-focus-match], [data-focus-selected]'), function (el) {
+          el.removeAttribute('data-focus-match');
+          el.removeAttribute('data-focus-selected');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-reach-match], [data-reach-origin], [data-reach-depth]'), function (el) {
+          el.removeAttribute('data-reach-match');
+          el.removeAttribute('data-reach-origin');
+          el.removeAttribute('data-reach-depth');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-lens-match], [data-lens-selected], [data-lens-peer]'), function (el) {
+          el.removeAttribute('data-lens-match');
+          el.removeAttribute('data-lens-selected');
+          el.removeAttribute('data-lens-peer');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer]'), function (el) {
+          el.removeAttribute('data-legend-preview-match');
+          el.removeAttribute('data-legend-preview-selected');
+          el.removeAttribute('data-legend-preview-peer');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-preview], [data-relationship-preview-node], [data-relationship-preview-source], [data-relationship-preview-target]'), function (el) {
+          el.removeAttribute('data-relationship-preview');
+          el.removeAttribute('data-relationship-preview-node');
+          el.removeAttribute('data-relationship-preview-source');
+          el.removeAttribute('data-relationship-preview-target');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-intent-trace-match], [data-intent-trace-selected]'), function (el) {
+          el.removeAttribute('data-intent-trace-match');
+          el.removeAttribute('data-intent-trace-selected');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-match], [data-route-start], [data-route-end], [data-route-step], [data-route-candidate], [data-route-journey-state], [data-route-journey-current]'), function (el) {
+          el.removeAttribute('data-route-match');
+          el.removeAttribute('data-route-start');
+          el.removeAttribute('data-route-end');
+          el.removeAttribute('data-route-step');
+          el.removeAttribute('data-route-candidate');
+          el.removeAttribute('data-route-journey-state');
+          el.removeAttribute('data-route-journey-current');
+          el.style.removeProperty('--route-step');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-share-route-match], [data-share-route-step], [data-share-route-start], [data-share-route-end], [data-share-route-middle]'), function (el) {
+          el.removeAttribute('data-share-route-match');
+          el.removeAttribute('data-share-route-step');
+          el.removeAttribute('data-share-route-start');
+          el.removeAttribute('data-share-route-end');
+          el.removeAttribute('data-share-route-middle');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-share-reach-match], [data-share-reach-origin], [data-share-reach-depth]'), function (el) {
+          el.removeAttribute('data-share-reach-match');
+          el.removeAttribute('data-share-reach-origin');
+          el.removeAttribute('data-share-reach-depth');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-detail], [data-detail-anchor]'), function (el) {
+          el.removeAttribute('data-detail');
+          el.removeAttribute('data-detail-anchor');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-node-id][aria-pressed]'), function (el) {
+          el.setAttribute('aria-pressed', 'false');
+        });
+        var canonicalStateClean = !clone.hasAttribute('data-view-scale') &&
+          !clone.hasAttribute('data-focus-active') &&
+          !clone.hasAttribute('data-reach-active') &&
+          !clone.hasAttribute('data-lens-active') &&
+          !clone.hasAttribute('data-lens-flow-count') &&
+          !clone.hasAttribute('data-lens-flow-density') &&
+          !clone.hasAttribute('data-legend-preview-active') &&
+          !clone.hasAttribute('data-relationship-preview-active') &&
+          !clone.hasAttribute('data-relationship-direct-active') &&
+          !clone.hasAttribute('data-intent-trace-active') &&
+          !clone.hasAttribute('data-route-picking') &&
+          !clone.hasAttribute('data-route-active') &&
+          !clone.hasAttribute('data-route-journey') &&
+          !clone.hasAttribute('data-share-route') &&
+          !clone.hasAttribute('data-share-reach') &&
+          !clone.hasAttribute('data-story-active') &&
+          !clone.hasAttribute('data-story-playing') &&
+          !clone.hasAttribute('data-story-beat') &&
+          !clone.hasAttribute('data-story-next') &&
+          !clone.hasAttribute('data-story-follow') &&
+          !clone.hasAttribute('data-chapter-handoff') &&
+          !clone.hasAttribute('data-chapter-anchor') &&
+          !clone.hasAttribute('data-chapter-preview') &&
+          !clone.style.getPropertyValue('transform') &&
+          clone.querySelectorAll('[data-story-overlay], [data-story-carrier-overlay], [data-story-carrier-token], [data-story-step], [data-story-beat-state], [data-story-beat-step], [data-chapter-handoff-overlay], [data-chapter-role], [data-chapter-preview-role], [data-focus-match], [data-focus-selected], [data-reach-match], [data-reach-origin], [data-reach-depth], [data-semantic-lens-overlay], [data-lens-match], [data-lens-selected], [data-lens-peer], [data-legend-bridge], [data-legend-kind], [data-legend-bridge-runtime], [data-legend-count], [data-legend-zero], [data-legend-selected], [data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer], [data-relationship-hit-overlay], [data-relationship-pulse-overlay], [data-relationship-preview], [data-relationship-preview-node], [data-relationship-preview-source], [data-relationship-preview-target], [data-intent-trace-overlay], [data-intent-trace-match], [data-intent-trace-selected], [data-route-probe-overlay], [data-route-journey-overlay], [data-route-match], [data-route-start], [data-route-end], [data-route-step], [data-route-candidate], [data-route-journey-state], [data-route-journey-current], [data-share-route-match], [data-share-route-step], [data-share-route-start], [data-share-route-end], [data-share-route-middle], [data-share-reach-match], [data-share-reach-origin], [data-share-reach-depth], [data-source-evidence-beacon], [data-source-evidence-count], [data-source-evidence-original-label], [data-detail], [data-detail-anchor]').length === 0;
+
+        var vb = svg.viewBox.baseVal;
+        var finiteSvgDimensions = Number.isFinite(vb.x) && Number.isFinite(vb.y) &&
+          Number.isFinite(vb.width) && Number.isFinite(vb.height) && vb.width > 0 && vb.height > 0;
+        var routeStateClean = opts.routeSnapshot
+          ? canonicalStateClean && finiteSvgDimensions && applyRouteSnapshot(clone, opts.routeSnapshot)
+          : null;
+        var reachStateClean = opts.reachSnapshot
+          ? canonicalStateClean && finiteSvgDimensions && !opts.routeSnapshot && applyReachSnapshot(clone, opts.reachSnapshot)
+          : null;
+        // Scale width/height so the browser rasterizes the vectors at target
+        // resolution directly. viewBox stays unchanged so coordinates don't
+        // shift. This is the key to sharp rasters — do NOT scale later via
+        // canvas upscaling.
+        clone.setAttribute('width', vb.width * scale);
+        clone.setAttribute('height', vb.height * scale);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        // Only the SVG-relevant rules: semantic classes, markers, and the
+        // theme variable blocks. Toolbar/cards/print CSS can never apply
+        // inside a standalone SVG and would only bloat the export.
+        var hostStyle = (function () {
+          var out = [];
+          Array.prototype.forEach.call(document.styleSheets, function (sheet) {
+            var rules;
+            try { rules = sheet.cssRules; } catch (_) { return; } // cross-origin
+            if (!rules) return;
+            Array.prototype.forEach.call(rules, function (rule) {
+              if (rule.type === 7 && /^archify-/.test(rule.name || '')) {
+                out.push(rule.cssText);
+                return;
+              }
+              if (rule.type !== 1) return; // plain style rules only
+              var sel = rule.selectorText || '';
+              if (/(^|,)\s*(svg|:root|\[data-theme|\[data-preset|\.c-|\.t-|\.a-|\.m-)/.test(sel)) {
+                out.push(rule.cssText);
+              }
+            });
+          });
+          return out.join('\n');
+        })();
+
+        // Derive the variable list from the stylesheet so newly added theme
+        // variables can never be missed by the export pipeline again
+        // (--lane-fill/--lane-stroke once were).
+        var varNames = (function () {
+          var seen = {};
+          var names = [];
+          (hostStyle.match(/--[a-zA-Z0-9-]+(?=\s*:)/g) || []).forEach(function (n) {
+            if (!seen[n]) { seen[n] = true; names.push(n); }
+          });
+          return names;
+        })();
+
+        // Resolve the full variable set for a given data-theme via an
+        // off-DOM probe, independent of what the viewer is currently set to.
+        function resolveVars(themeAttr) {
+          var probe = document.createElement('div');
+          probe.setAttribute('data-theme', themeAttr);
+          probe.setAttribute('data-preset', document.documentElement.getAttribute('data-preset') || 'classic');
+          probe.style.cssText = 'position:absolute;width:0;height:0;visibility:hidden;';
+          document.body.appendChild(probe);
+          try {
+            var c = getComputedStyle(probe);
+            return varNames.map(function (n) {
+              return n + ': ' + c.getPropertyValue(n).trim() + ';';
+            }).join(' ');
+          } finally {
+            document.body.removeChild(probe);
+          }
+        }
+
+        // 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.
+        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'); }";
+        }).join('\n');
+
+        var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+        var bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+
+        if (autoTheme) {
+          // Dual-theme SVG. Dark is the default (so hosts without
+          // prefers-color-scheme still render), light swaps in via media
+          // query, and svg[data-theme="..."] still lets downstream
+          // consumers force a specific theme.
+          var darkVars = resolveVars('dark');
+          var lightVars = resolveVars('light');
+
+          style.textContent =
+            fontFallback + "\n" +
+            "svg { 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" +
+            hostStyle + "\n" +
+            ":root, svg { " + darkVars + " }\n" +
+            "@media (prefers-color-scheme: light) { :root, svg { " + lightVars + " } }\n" +
+            "svg[data-theme=\"light\"] { " + lightVars + " }\n" +
+            "svg[data-theme=\"dark\"] { " + darkVars + " }\n" +
+            "rect.c-bg-rect { fill: var(--bg); }\n";
+
+          // Don't lock the serialized SVG to the viewer's current theme.
+          clone.removeAttribute('data-theme');
+          // Background follows the CSS variable, not a fixed color, so it
+          // swaps with the media query.
+          bgRect.setAttribute('class', 'c-bg-rect');
+        } else {
+          // Raster path: lock to the viewer's current theme.
+          var theme = document.documentElement.getAttribute('data-theme') || 'dark';
+          var themeHost = document.querySelector('[data-theme="' + theme + '"]') || document.documentElement;
+          var computed = getComputedStyle(themeHost);
+          var vars = varNames.map(function (n) {
+            return n + ': ' + computed.getPropertyValue(n).trim() + ';';
+          }).join(' ');
+
+          // IMPORTANT: inject the resolved variables AFTER hostStyle,
+          // otherwise hostStyle's ":root, [data-theme=\"dark\"] { ... }" rule
+          // overrides our chosen theme via later-in-cascade equal-specificity.
+          // Keep this order.
+          style.textContent =
+            fontFallback + "\n" +
+            "svg { 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" +
+            hostStyle + "\n" +
+            ":root, svg { " + vars + " }\n";
+
+          bgRect.setAttribute('fill', computed.getPropertyValue('--bg').trim() || '#ffffff');
+        }
+
+        if (opts.routeSnapshot) {
+          style.textContent += "\nsvg[data-share-route] [data-node-id], svg[data-share-route] [data-edge-from] { opacity: 0.18; }\n" +
+            "svg[data-share-route] [data-share-route-match] { opacity: 1; }\n" +
+            "svg[data-share-route] [data-share-route-start] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 3; stroke-dasharray: 5 3; }\n" +
+            "svg[data-share-route] [data-share-route-middle] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 2.2; }\n" +
+            "svg[data-share-route] [data-share-route-end] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 3.4; stroke-dasharray: 1 0; }\n";
+        }
+        if (opts.reachSnapshot) {
+          style.textContent += "\nsvg[data-share-reach] [data-node-id], svg[data-share-reach] [data-edge-from] { opacity: 0.14; }\n" +
+            "svg[data-share-reach] [data-share-reach-match] { opacity: 1; }\n" +
+            "svg[data-share-reach] [data-edge-from][data-share-reach-match] { stroke-width: 1.55; }\n" +
+            "svg[data-share-reach=\"upstream\"] [data-share-reach-origin] > :is(rect, circle, polygon):not(.c-mask) { stroke: var(--database-stroke); stroke-width: 3.4; stroke-dasharray: 5 3; }\n" +
+            "svg[data-share-reach=\"downstream\"] [data-share-reach-origin] > :is(rect, circle, polygon):not(.c-mask) { stroke: var(--backend-stroke); stroke-width: 3.4; stroke-dasharray: 1 0; }\n" +
+            "svg[data-preset=\"blueprint\"][data-share-reach] [data-share-reach-origin], svg[data-preset=\"blueprint\"][data-share-reach] [data-edge-from][data-share-reach-match] { filter: none; }\n";
+        }
+
+        clone.insertBefore(style, clone.firstChild);
+        clone.insertBefore(bgRect, style.nextSibling);
+
+        return {
+          svgString: new XMLSerializer().serializeToString(clone),
+          width: vb.width * scale,
+          height: vb.height * scale,
+          canonicalStateClean: canonicalStateClean,
+          routeStateClean: routeStateClean,
+          reachStateClean: reachStateClean
+        };
+      }
+
+      function download(blob, filename) {
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
+      }
+
+      // Conservative upper bound on total canvas pixels. Older Safari on iOS
+      // silently produces a blank canvas above ~16 Mpx; Chrome / Firefox /
+      // desktop Safari are far higher but start failing on memory-constrained
+      // devices. We pick the largest integer scale in {4,3,2,1} whose target
+      // pixel count fits under this cap.
+      var MAX_CANVAS_PIXELS = 16 * 1024 * 1024;
+
+      function pickSafeScale(vbW, vbH) {
+        for (var s = RASTER_SCALE; s >= 1; s--) {
+          if (vbW * s * vbH * s <= MAX_CANVAS_PIXELS) return s;
+        }
+        return 1;
+      }
+
+      function rasterize(format) {
+        // Serialize at a safe scale (RASTER_SCALE=4 by default, reduced if the
+        // resulting canvas would exceed MAX_CANVAS_PIXELS). The SVG itself is
+        // rasterized at target resolution natively; drawImage draws at natural
+        // size — no upsampling blur.
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var scale = pickSafeScale(vb.width, vb.height);
+        var data = serializeSvg(scale);
+        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
+        var svgUrl = URL.createObjectURL(svgBlob);
+
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            try {
+              var canvas = document.createElement('canvas');
+              canvas.width = data.width;
+              canvas.height = data.height;
+              var ctx = canvas2dOrThrow(canvas, format);
+              if (format === 'jpeg') {
+                ctx.fillStyle = currentBg();
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+              }
+              // Draw at natural size — SVG was already rasterized at target res.
+              ctx.drawImage(img, 0, 0);
+              URL.revokeObjectURL(svgUrl);
+              var mime = format === 'jpeg' ? 'image/jpeg' :
+                         format === 'webp' ? 'image/webp' : 'image/png';
+              var quality = format === 'png' ? undefined : 0.95;
+              canvas.toBlob(function (blob) {
+                if (!blob) reject(new Error('toBlob returned null for ' + format));
+                else resolve(blob);
+              }, mime, quality);
+            } catch (error) {
+              URL.revokeObjectURL(svgUrl);
+              reject(error);
+            }
+          };
+          img.onerror = function (e) {
+            URL.revokeObjectURL(svgUrl);
+            reject(e);
+          };
+          img.src = svgUrl;
+        });
+      }
+
+      function fitCanvasText(ctx, text, maxWidth, startSize, minSize, weight) {
+        var value = String(text || '').trim();
+        var size = startSize;
+        var family = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+        while (size > minSize) {
+          ctx.font = (weight || '600') + ' ' + size + 'px ' + family;
+          if (ctx.measureText(value).width <= maxWidth) return value;
+          size -= 1;
+        }
+        ctx.font = (weight || '600') + ' ' + minSize + 'px ' + family;
+        if (ctx.measureText(value).width <= maxWidth) return value;
+        var suffix = '\u2026';
+        while (value.length > 1 && ctx.measureText(value + suffix).width > maxWidth) {
+          value = value.slice(0, -1);
+        }
+        return value + suffix;
+      }
+
+      function canvas2dOrThrow(canvas, label) {
+        if (!canvas || typeof canvas.getContext !== 'function') {
+          throw new Error('Canvas unavailable for ' + label);
+        }
+        var ctx = canvas.getContext('2d');
+        if (!ctx) throw new Error('2D canvas context unavailable for ' + label);
+        if (typeof canvas.toBlob !== 'function') throw new Error('canvas.toBlob unavailable for ' + label);
+        return ctx;
+      }
+
+      function renderShareCard(options) {
+        options = options || {};
+        var routeSnapshot = options.routeSnapshot || null;
+        var reachSnapshot = options.reachSnapshot || null;
+        if (routeSnapshot && reachSnapshot) return Promise.reject(new Error('Share Card variants cannot be combined'));
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var sourceScale = Math.min(2, pickSafeScale(vb.width, vb.height));
+        var data = serializeSvg(sourceScale, { routeSnapshot: routeSnapshot, reachSnapshot: reachSnapshot });
+        if (!data.canonicalStateClean) return Promise.reject(new Error('Share Card export could not remove temporary viewer state'));
+        if (routeSnapshot && !data.routeStateClean) return Promise.reject(new Error('Route Card export could not preserve the resolved route safely'));
+        if (reachSnapshot && !data.reachStateClean) return Promise.reject(new Error('Reach Card export could not preserve authored reach safely'));
+        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
+        var svgUrl = URL.createObjectURL(svgBlob);
+
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            try {
+              var canvas = document.createElement('canvas');
+              canvas.width = SHARE_CARD_WIDTH;
+              canvas.height = SHARE_CARD_HEIGHT;
+              var ctx = canvas2dOrThrow(canvas, 'Share Card');
+              var computed = getComputedStyle(document.documentElement);
+              var bg = computed.getPropertyValue('--bg').trim() || currentBg();
+              var text = computed.getPropertyValue('--text').trim() || '#ffffff';
+              var muted = computed.getPropertyValue('--text-muted').trim() || '#94a3b8';
+              var border = computed.getPropertyValue('--panel-border').trim() || '#334155';
+              var accentProperty = reachSnapshot
+                ? (reachSnapshot.direction === 'upstream' ? '--database-stroke' : '--backend-stroke')
+                : '--frontend-stroke';
+              var accent = computed.getPropertyValue(accentProperty).trim() || '#22d3ee';
+              var titleNode = document.querySelector('.header h1');
+              var subtitleNode = document.querySelector('.header .subtitle');
+              var title = titleNode ? titleNode.textContent : document.title;
+              var subtitle = routeSnapshot
+                ? 'Route: ' + routeSnapshot.source.label + ' → ' + routeSnapshot.target.label + ' · ' + routeSnapshot.hops + ' directed hops'
+                : reachSnapshot
+                  ? 'Authored ' + reachSnapshot.direction + ' from ' + reachSnapshot.origin.label + ' · ' +
+                    (reachSnapshot.nodeIds.length - 1) + ' nodes · ' + reachSnapshot.edges.length +
+                    ' links · max ' + reachSnapshot.maxDepth + ' hops'
+                  : subtitleNode ? subtitleNode.textContent : '';
+              var preset = document.documentElement.getAttribute('data-preset') || 'classic';
+              var theme = document.documentElement.getAttribute('data-theme') || 'dark';
+              var presetLabel = preset === 'signal-flow' ? 'FLOW' : preset.toUpperCase();
+              var cardLabel = routeSnapshot
+                ? 'ARCHIFY · ROUTE · ' + routeSnapshot.hops + ' HOPS'
+                : reachSnapshot
+                  ? 'ARCHIFY · ' + reachSnapshot.direction.toUpperCase() + ' REACH'
+                  : 'ARCHIFY · ' + presetLabel + ' · ' + theme.toUpperCase();
+
+              ctx.fillStyle = bg;
+              ctx.fillRect(0, 0, SHARE_CARD_WIDTH, SHARE_CARD_HEIGHT);
+
+              ctx.fillStyle = accent;
+              ctx.fillRect(SHARE_CARD_PADDING, 27, 42, 3);
+
+              ctx.textBaseline = 'alphabetic';
+              ctx.fillStyle = text;
+              var fittedTitle = fitCanvasText(ctx, title, SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2 - 330, 29, 18, '700');
+              ctx.fillText(fittedTitle, SHARE_CARD_PADDING, 62);
+
+              ctx.fillStyle = muted;
+              var fittedSubtitle = fitCanvasText(ctx, subtitle, SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2 - 280, 13, 11, '500');
+              ctx.fillText(fittedSubtitle, SHARE_CARD_PADDING, 87);
+
+              ctx.font = "600 12px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+              ctx.textAlign = 'right';
+              ctx.fillStyle = accent;
+              ctx.fillText(cardLabel, SHARE_CARD_WIDTH - SHARE_CARD_PADDING, 50);
+              ctx.textAlign = 'left';
+
+              var availableWidth = SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2;
+              var availableHeight = SHARE_CARD_HEIGHT - SHARE_CARD_HEADER - SHARE_CARD_PADDING;
+              var fit = Math.min(availableWidth / data.width, availableHeight / data.height);
+              var drawWidth = data.width * fit;
+              var drawHeight = data.height * fit;
+              var drawX = SHARE_CARD_PADDING + (availableWidth - drawWidth) / 2;
+              var drawY = SHARE_CARD_HEADER + (availableHeight - drawHeight) / 2;
+
+              ctx.strokeStyle = border;
+              ctx.lineWidth = 1;
+              ctx.strokeRect(drawX - 0.5, drawY - 0.5, drawWidth + 1, drawHeight + 1);
+              ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+              URL.revokeObjectURL(svgUrl);
+
+              canvas.toBlob(function (blob) {
+                if (!blob) reject(new Error('toBlob returned null for Share Card'));
+                else resolve(blob);
+              }, 'image/png');
+            } catch (error) {
+              URL.revokeObjectURL(svgUrl);
+              reject(error);
+            }
+          };
+          img.onerror = function (e) {
+            URL.revokeObjectURL(svgUrl);
+            reject(e);
+          };
+          img.src = svgUrl;
+        });
+      }
+
+      function rasterizeShareCard(options) {
+        options = options || {};
+        if (!options.variant) return renderShareCard();
+        if (options.variant !== 'route' && options.variant !== 'reach') {
+          return Promise.reject(new Error('Unknown Share Card variant: ' + options.variant));
+        }
+        if (options.variant === 'route') {
+          var routeSnapshot = Archify.routeProbe && Archify.routeProbe.exportSnapshot();
+          if (!routeSnapshot) return Promise.reject(new Error('Trace a route before exporting a Route Share Card'));
+          return renderShareCard({ routeSnapshot: routeSnapshot });
+        }
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        if (!snapshot) return Promise.reject(new Error('Trace authored reach before exporting a Reach Share Card'));
+        return renderShareCard({ reachSnapshot: snapshot });
+      }
+
+      function motionMimeType() {
+        if (typeof MediaRecorder === 'undefined') return '';
+        var candidates = [
+          'video/webm;codecs=vp9',
+          'video/webm;codecs=vp8',
+          'video/webm'
+        ];
+        for (var i = 0; i < candidates.length; i++) {
+          if (!MediaRecorder.isTypeSupported || MediaRecorder.isTypeSupported(candidates[i])) return candidates[i];
+        }
+        return '';
+      }
+
+      function canRecordMotion() {
+        var svg = document.querySelector('.diagram-container svg');
+        return !!(svg && svg.getAttribute('data-animation') === 'trace' &&
+          typeof MediaRecorder !== 'undefined' && motionMimeType() &&
+          typeof HTMLCanvasElement !== 'undefined' &&
+          typeof HTMLCanvasElement.prototype.captureStream === 'function');
+      }
+
+      // Record the live CSS animation without Puppeteer, ffmpeg, or a network
+      // dependency. SVG files loaded through Image are commonly rasterized as
+      // one cached bitmap, so repeatedly drawing that Image does not reliably
+      // advance its CSS animation. Keep one crisp static SVG background, then
+      // render an explicit time-varying signal scene over the real authored
+      // relationship geometry on every captured canvas frame.
+      function recordWebm(options) {
+        options = options || {};
+        if (!canRecordMotion()) {
+          return Promise.reject(new Error('WebM motion export requires a trace animation and browser MediaRecorder support'));
+        }
+        var duration = Math.max(250, Number(options.duration) || MOTION_DURATION);
+        var fps = Math.max(1, Number(options.fps) || MOTION_FPS);
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var scale = Math.min(1, 1280 / vb.width);
+        var data = serializeSvg(scale);
+        var sourceUrl = URL.createObjectURL(new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' }));
+
+        function createMotionScene(root) {
+          var rootMatrix = root.getCTM ? root.getCTM() : null;
+
+          function pointInRoot(element, point) {
+            if (!rootMatrix || !element.getCTM || !point.matrixTransform) return { x: point.x, y: point.y };
+            try {
+              var elementMatrix = element.getCTM();
+              if (!elementMatrix) return { x: point.x, y: point.y };
+              var mapped = point.matrixTransform(rootMatrix.inverse().multiply(elementMatrix));
+              return { x: mapped.x, y: mapped.y };
+            } catch (_) {
+              return { x: point.x, y: point.y };
+            }
+          }
+
+          function samplesFor(element) {
+            if (typeof element.getTotalLength !== 'function' || typeof element.getPointAtLength !== 'function') return [];
+            var length;
+            try { length = element.getTotalLength(); } catch (_) { return []; }
+            if (!Number.isFinite(length) || length <= 0) return [];
+            var count = Math.max(12, Math.min(72, Math.ceil(length / 12)));
+            var points = [];
+            for (var i = 0; i <= count; i++) {
+              points.push(pointInRoot(element, element.getPointAtLength(length * i / count)));
+            }
+            return points;
+          }
+
+          function authoredStep(element, fallback) {
+            var raw = element.style.getPropertyValue('--step') || getComputedStyle(element).getPropertyValue('--step');
+            var value = Number(raw);
+            return Number.isFinite(value) ? value : fallback;
+          }
+
+          var edges = Array.prototype.slice.call(root.querySelectorAll('[data-animate="edge"]')).map(function (element, index) {
+            var computed = getComputedStyle(element);
+            return {
+              points: samplesFor(element),
+              color: computed.stroke && computed.stroke !== 'none' ? computed.stroke : '#22d3ee',
+              width: Math.max(1.5, parseFloat(computed.strokeWidth) || 1.5),
+              delay: Math.min(12, authoredStep(element, index)) * 0.16
+            };
+          }).filter(function (edge) { return edge.points.length > 1; });
+
+          var nodes = Array.prototype.slice.call(root.querySelectorAll('[data-node-id][data-animate="node"]')).map(function (element, index) {
+            var box;
+            try { box = element.getBBox(); } catch (_) { return null; }
+            var painted = element.querySelector('[class*="c-"]') || element;
+            var computed = getComputedStyle(painted);
+            return {
+              x: box.x,
+              y: box.y,
+              width: box.width,
+              height: box.height,
+              color: computed.stroke && computed.stroke !== 'none' ? computed.stroke : '#22d3ee',
+              delay: Math.min(12, authoredStep(element, index)) * 0.16
+            };
+          }).filter(Boolean);
+
+          return { edges: edges, nodes: nodes, x: vb.x, y: vb.y, width: vb.width, height: vb.height };
+        }
+
+        function pointAlong(points, progress) {
+          var scaled = Math.max(0, Math.min(1, progress)) * (points.length - 1);
+          var index = Math.min(points.length - 2, Math.floor(scaled));
+          var mix = scaled - index;
+          return {
+            x: points[index].x + (points[index + 1].x - points[index].x) * mix,
+            y: points[index].y + (points[index + 1].y - points[index].y) * mix
+          };
+        }
+
+        function roundedRectPath(ctx, x, y, width, height, radius) {
+          var r = Math.max(0, Math.min(radius, width / 2, height / 2));
+          ctx.beginPath();
+          ctx.moveTo(x + r, y);
+          ctx.lineTo(x + width - r, y);
+          ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+          ctx.lineTo(x + width, y + height - r);
+          ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+          ctx.lineTo(x + r, y + height);
+          ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+          ctx.lineTo(x, y + r);
+          ctx.quadraticCurveTo(x, y, x + r, y);
+          ctx.closePath();
+        }
+
+        function drawMotionFrame(ctx, backgroundImage, motionScene, elapsed) {
+          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+          ctx.drawImage(backgroundImage, 0, 0, ctx.canvas.width, ctx.canvas.height);
+          ctx.save();
+          ctx.scale(ctx.canvas.width / motionScene.width, ctx.canvas.height / motionScene.height);
+          ctx.translate(-motionScene.x, -motionScene.y);
+
+          motionScene.edges.forEach(function (edge) {
+            var duration = 1.75;
+            var progress = (elapsed - edge.delay) / duration;
+            if (progress < 0 || progress > 1) return;
+            var head = Math.max(0, Math.min(1, progress));
+            var tail = Math.max(0, head - 0.24);
+            var opacity = Math.sin(Math.PI * Math.min(1, progress));
+
+            ctx.save();
+            ctx.strokeStyle = edge.color;
+            ctx.fillStyle = edge.color;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.lineWidth = Math.max(3.2, edge.width * 2.2);
+            ctx.globalAlpha = 0.42 + opacity * 0.5;
+            ctx.shadowColor = edge.color;
+            ctx.shadowBlur = 10;
+            ctx.beginPath();
+            for (var i = 0; i <= 14; i++) {
+              var trailPoint = pointAlong(edge.points, tail + (head - tail) * i / 14);
+              if (i === 0) ctx.moveTo(trailPoint.x, trailPoint.y);
+              else ctx.lineTo(trailPoint.x, trailPoint.y);
+            }
+            ctx.stroke();
+
+            var point = pointAlong(edge.points, head);
+            ctx.globalAlpha = 0.95;
+            ctx.beginPath();
+            ctx.arc(point.x, point.y, 4.8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+          });
+
+          motionScene.nodes.forEach(function (node) {
+            var progress = (elapsed - node.delay) / 2.6;
+            if (progress < 0 || progress > 1) return;
+            var pulse = Math.sin(Math.PI * progress);
+            if (pulse <= 0.02) return;
+            ctx.save();
+            ctx.strokeStyle = node.color;
+            ctx.lineWidth = 1.4 + pulse * 1.8;
+            ctx.globalAlpha = pulse * 0.5;
+            ctx.shadowColor = node.color;
+            ctx.shadowBlur = 12 * pulse;
+            var inset = 2 + pulse * 3;
+            roundedRectPath(ctx, node.x - inset, node.y - inset, node.width + inset * 2, node.height + inset * 2, 8);
+            ctx.stroke();
+            ctx.restore();
+          });
+
+          ctx.restore();
+        }
+
+        var motionScene = createMotionScene(svg);
+
+        return new Promise(function (resolve, reject) {
+          var backgroundImage = new Image();
+          backgroundImage.onload = function () {
+            var canvas = document.createElement('canvas');
+            canvas.width = Math.max(2, Math.round(data.width / 2) * 2);
+            canvas.height = Math.max(2, Math.round(data.height / 2) * 2);
+            var ctx = canvas.getContext('2d');
+            var stream = canvas.captureStream(fps);
+            var mime = motionMimeType();
+            var recorder;
+            try {
+              recorder = new MediaRecorder(stream, { mimeType: mime, videoBitsPerSecond: 6000000 });
+            } catch (err) {
+              URL.revokeObjectURL(sourceUrl);
+              stream.getTracks().forEach(function (track) { track.stop(); });
+              reject(err);
+              return;
+            }
+            var chunks = [];
+            var raf = 0;
+            var stopped = false;
+            var startedAt = performance.now();
+            function cleanup() {
+              if (stopped) return;
+              stopped = true;
+              cancelAnimationFrame(raf);
+              URL.revokeObjectURL(sourceUrl);
+              stream.getTracks().forEach(function (track) { track.stop(); });
+            }
+            function draw(now) {
+              var elapsed = Math.max(0, ((Number(now) || performance.now()) - startedAt) / 1000);
+              drawMotionFrame(ctx, backgroundImage, motionScene, elapsed);
+              raf = requestAnimationFrame(draw);
+            }
+            recorder.ondataavailable = function (event) {
+              if (event.data && event.data.size) chunks.push(event.data);
+            };
+            recorder.onerror = function (event) {
+              cleanup();
+              reject(event.error || new Error('MediaRecorder failed'));
+            };
+            recorder.onstop = function () {
+              cleanup();
+              var blob = new Blob(chunks, { type: recorder.mimeType || mime });
+              if (!blob.size) reject(new Error('MediaRecorder produced an empty WebM'));
+              else resolve(blob);
+            };
+            drawMotionFrame(ctx, backgroundImage, motionScene, 0);
+            recorder.start(250);
+            startedAt = performance.now();
+            raf = requestAnimationFrame(draw);
+            setTimeout(function () {
+              if (recorder.state === 'inactive') return;
+              // Chromium normally emits the final chunk during stop(), but
+              // some embedded browser shells need an explicit encoder flush
+              // first. Keep the short grace window bounded and harmless for
+              // browsers that already delivered timeslice chunks.
+              try { recorder.requestData(); } catch (_) {}
+              setTimeout(function () {
+                if (recorder.state !== 'inactive') recorder.stop();
+              }, 120);
+            }, duration);
+          };
+          backgroundImage.onerror = function () {
+            URL.revokeObjectURL(sourceUrl);
+            reject(new Error('SVG background could not be loaded for WebM export'));
+          };
+          backgroundImage.src = sourceUrl;
+        });
+      }
+
+      var menu = document.getElementById('export-menu');
+      var btn = document.getElementById('btn-export');
+      var routeShareItem = menu.querySelector('button[data-action="route-share-card"]');
+      var reachShareItem = menu.querySelector('button[data-action="reach-share-card"]');
+      var items = function () {
+        return Array.prototype.slice.call(menu.querySelectorAll('button[role="menuitem"]'));
+      };
+
+      function syncRouteShareItem() {
+        var snapshot = Archify.routeProbe && typeof Archify.routeProbe.exportSnapshot === 'function'
+          ? Archify.routeProbe.exportSnapshot()
+          : null;
+        routeShareItem.hidden = !snapshot;
+        routeShareItem.disabled = !snapshot;
+        return snapshot;
+      }
+
+      function syncReachShareItem() {
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        reachShareItem.hidden = !snapshot;
+        reachShareItem.disabled = !snapshot;
+        return snapshot;
+      }
+
+      // ---- Clipboard support ----------------------------------------------
+      function canCopyImage() {
+        return typeof ClipboardItem !== 'undefined' &&
+               navigator.clipboard &&
+               typeof navigator.clipboard.write === 'function';
+      }
+
+      // ---- Raster format detection ----------------------------------------
+      // canvas.toBlob('image/webp') silently returns a PNG on browsers without
+      // WebP encoding (older Safari), so detect explicitly.
+      function supports(format) {
+        if (format === 'share-card') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
+        if (format === 'webm') return canRecordMotion();
+        var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+        try {
+          var c = document.createElement('canvas');
+          c.width = c.height = 2;
+          return c.toDataURL(mime).indexOf('data:' + mime) === 0;
+        } catch (_) { return false; }
+      }
+
+      // Gray out unsupported items.
+      items().forEach(function (it) {
+        if (it.dataset.format && !supports(it.dataset.format)) {
+          it.disabled = true;
+          it.title = 'Not supported by this browser';
+        }
+        if ((it.dataset.action === 'copy' || it.dataset.action === 'copy-share-card') && !canCopyImage()) {
+          it.disabled = true;
+          it.title = 'Clipboard image write not supported by this browser';
+        }
+      });
+
+      // ---- Toast ----------------------------------------------------------
+      // A live region only announces CHANGES to an existing node, so the toast
+      // element is created once up front and updated in place.
+      var toastEl = document.createElement('div');
+      toastEl.className = 'archify-toast';
+      toastEl.setAttribute('role', 'status');
+      document.body.appendChild(toastEl);
+      var toastTimer = null;
+
+      function toast(msg) {
+        toastEl.textContent = '';
+        requestAnimationFrame(function () {
+          toastEl.textContent = msg;
+          toastEl.classList.add('show');
+        });
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, 1500);
+      }
+
+      function open(focusLast) {
+        if (Archify.preset && Archify.preset.isOpen()) Archify.preset.close(false);
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        syncRouteShareItem();
+        syncReachShareItem();
+        menu.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        var available = items().filter(function (i) { return !i.hidden && !i.disabled; });
+        var target = focusLast ? available[available.length - 1] : available[0];
+        if (target) target.focus();
+      }
+      function close(focusTrigger) {
+        menu.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+        if (focusTrigger) btn.focus();
+      }
+      function isOpen() { return menu.classList.contains('open'); }
+
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        if (isOpen()) close(false);
+        else open();
+      });
+      // APG menu-button pattern: ArrowDown/ArrowUp on the trigger opens the menu.
+      btn.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!isOpen()) open(e.key === 'ArrowUp');
+        }
+      });
+      document.addEventListener('click', function (e) {
+        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      });
+
+      // Keyboard navigation inside the menu.
+      //   Menu items: Up/Down, Home/End.
+      //   Esc closes + returns focus to trigger; Tab closes.
+      menu.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+        if (e.key === 'Tab')    { close(false); return; }
+
+        var available = items().filter(function (i) { return !i.hidden && !i.disabled; });
+        var current = available.indexOf(document.activeElement);
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (available.length) available[(current + 1 + available.length) % available.length].focus();
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (available.length) available[(current - 1 + available.length) % available.length].focus();
+            break;
+          case 'Home':
+            e.preventDefault();
+            if (available[0]) available[0].focus();
+            break;
+          case 'End':
+            e.preventDefault();
+            if (available.length) available[available.length - 1].focus();
+            break;
+        }
+      });
+
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
+      function runExport(format) {
+        var base = diagramFilename();
+        close(true);
+        clearExportReceipt();
+        if (format === 'webm') toast('Recording 6 seconds of motion…');
+        return (format === 'share-card'
+          ? rasterizeShareCard().then(function (blob) {
+              recordExportReceipt('share-card', blob, true, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT });
+              download(blob, base + '-share-card.png');
+              toast('Downloaded Share Card');
+            })
+          : format === 'svg'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              var blob = new Blob([d.svgString], { type: 'image/svg+xml;charset=utf-8' });
+              recordExportReceipt('svg', blob, d.canonicalStateClean);
+              download(blob, base + '.svg');
+            })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
+          : format === 'webm'
+            ? recordWebm().then(function (blob) {
+                document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
+                recordExportReceipt('webm', blob, true);
+                download(blob, base + '.webm');
+                toast('Downloaded WebM');
+              })
+          : rasterize(format).then(function (blob) {
+              recordExportReceipt(format, blob, true);
+              download(blob, base + '.' + format);
+            })
+        ).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : format;
+          document.documentElement.setAttribute('data-last-export-error-format', format);
+          document.documentElement.setAttribute('data-last-export-error', message);
+          if (format === 'webm' && /MediaRecorder|WebM motion export|empty WebM/i.test(message)) {
+            var motionItem = menu.querySelector('button[data-format="webm"]');
+            if (motionItem) {
+              motionItem.disabled = true;
+              motionItem.title = 'Motion capture unavailable in this browser';
+              motionItem.style.opacity = '0.5';
+            }
+            toast('WebM unavailable in this browser');
+            return;
+          }
+          alert('Export failed: ' + message);
+        });
+      }
+
+      function runRouteShareCard() {
+        close(false);
+        clearExportReceipt();
+        var snapshot = Archify.routeProbe && Archify.routeProbe.exportSnapshot();
+        var blobPromise = snapshot
+          ? renderShareCard({ routeSnapshot: snapshot })
+          : Promise.reject(new Error('Trace a route before exporting a Route Share Card'));
+        return blobPromise.then(function (blob) {
+          recordExportReceipt('share-card', blob, false, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT }, 'route', true);
+          download(blob, diagramFilename() + '-route-share-card.png');
+          toast('Downloaded Route Share Card');
+          return blob;
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'share-card';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Route Share Card export failed: ' + message);
+        });
+      }
+
+      function runReachShareCard() {
+        close(false);
+        clearExportReceipt();
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        var blobPromise = snapshot
+          ? renderShareCard({ reachSnapshot: snapshot })
+          : Promise.reject(new Error('Trace authored reach before exporting a Reach Share Card'));
+        return blobPromise.then(function (blob) {
+          recordExportReceipt('share-card', blob, false, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT }, 'reach', false, true);
+          download(blob, diagramFilename() + '-' + snapshot.direction + '-reach-share-card.png');
+          toast('Downloaded Reach Share Card');
+          return blob;
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'share-card';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Reach Share Card export failed: ' + message);
+        });
+      }
+
+      // A compact, machine-readable receipt for local QA and generated proof
+      // galleries. It exposes no diagram contents, only the completed format,
+      // byte count, and whether temporary viewer state was excluded.
+      function recordExportReceipt(format, blob, canonical, dimensions, variant, routeStateClean, reachStateClean) {
+        document.documentElement.setAttribute('data-last-export-format', format);
+        document.documentElement.setAttribute('data-last-export-bytes', String(blob.size));
+        document.documentElement.setAttribute('data-last-export-canonical', canonical ? 'true' : 'false');
+        if (variant) {
+          document.documentElement.setAttribute('data-last-export-variant', variant);
+        } else {
+          document.documentElement.removeAttribute('data-last-export-variant');
+        }
+        if (routeStateClean === true) {
+          document.documentElement.setAttribute('data-last-export-route-state-clean', 'true');
+        } else {
+          document.documentElement.removeAttribute('data-last-export-route-state-clean');
+        }
+        if (reachStateClean === true) {
+          document.documentElement.setAttribute('data-last-export-reach-state-clean', 'true');
+        } else {
+          document.documentElement.removeAttribute('data-last-export-reach-state-clean');
+        }
+        if (dimensions) {
+          document.documentElement.setAttribute('data-last-export-width', String(dimensions.width));
+          document.documentElement.setAttribute('data-last-export-height', String(dimensions.height));
+        } else {
+          document.documentElement.removeAttribute('data-last-export-width');
+          document.documentElement.removeAttribute('data-last-export-height');
+        }
+      }
+
+      function clearExportReceipt() {
+        document.documentElement.removeAttribute('data-last-export-format');
+        document.documentElement.removeAttribute('data-last-export-bytes');
+        document.documentElement.removeAttribute('data-last-export-canonical');
+        document.documentElement.removeAttribute('data-last-export-width');
+        document.documentElement.removeAttribute('data-last-export-height');
+        document.documentElement.removeAttribute('data-last-export-variant');
+        document.documentElement.removeAttribute('data-last-export-route-state-clean');
+        document.documentElement.removeAttribute('data-last-export-reach-state-clean');
+        document.documentElement.removeAttribute('data-last-export-error-format');
+        document.documentElement.removeAttribute('data-last-export-error');
+      }
+
+      function writePngToClipboard(blobPromise) {
+        // WebKit requires ClipboardItem to be constructed synchronously inside
+        // the user gesture. Chromium accepts the same pending Promise<Blob>;
+        // engines that reject promise values fall back to an awaited Blob.
+        try {
+          return navigator.clipboard.write([new ClipboardItem({ 'image/png': blobPromise })]);
+        } catch (_) {
+          return blobPromise.then(function (blob) {
+            return navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+          });
+        }
+      }
+
+      function runCopyShareCard() {
+        close(true);
+        clearExportReceipt();
+        if (!canCopyImage()) {
+          alert('Clipboard image write not supported by this browser.');
+          return;
+        }
+        var blobPromise = rasterizeShareCard();
+        return writePngToClipboard(blobPromise).then(function () {
+          return blobPromise.then(function (blob) {
+            recordExportReceipt('share-card', blob, true, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT });
+            toast('Copied Share Card');
+          });
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'unknown';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Copy failed: ' + message);
+        });
+      }
+
+      function runCopy() {
+        close(true);
+        clearExportReceipt();
+        if (!canCopyImage()) {
+          alert('Clipboard image write not supported in this browser.');
+          return;
+        }
+        var blobPromise = rasterize('png');
+        return writePngToClipboard(blobPromise).then(function () {
+          toast('Copied PNG to clipboard');
+        }).catch(function (err) {
+          console.error(err);
+          alert('Copy failed: ' + (err && err.message ? err.message : 'unknown'));
+        });
+      }
+
+      menu.addEventListener('click', function (e) {
+        var routeShareCardBtn = e.target.closest('button[data-action="route-share-card"]');
+        if (routeShareCardBtn && !routeShareCardBtn.disabled && !routeShareCardBtn.hidden) { runRouteShareCard(); return; }
+
+        var reachShareCardBtn = e.target.closest('button[data-action="reach-share-card"]');
+        if (reachShareCardBtn && !reachShareCardBtn.disabled && !reachShareCardBtn.hidden) { runReachShareCard(); return; }
+
+        var copyShareCardBtn = e.target.closest('button[data-action="copy-share-card"]');
+        if (copyShareCardBtn && !copyShareCardBtn.disabled) { runCopyShareCard(); return; }
+
+        var copyBtn = e.target.closest('button[data-action="copy"]');
+        if (copyBtn && !copyBtn.disabled) { runCopy(); return; }
+
+        var formatBtn = e.target.closest('button[data-format]');
+        if (formatBtn && !formatBtn.disabled) { runExport(formatBtn.dataset.format); }
+      });
+
+      Archify.motion = { canRecord: canRecordMotion, recordWebm: recordWebm };
+      Archify.exportMenu = {
+        open: open,
+        close: close,
+        isOpen: isOpen,
+        run: runExport,
+        shareCard: rasterizeShareCard,
+        downloadRouteShareCard: runRouteShareCard,
+        downloadReachShareCard: runReachShareCard,
+        syncRouteShare: syncRouteShareItem,
+        syncReachShare: syncReachShareItem,
+        copyShareCard: runCopyShareCard
+      };
+
+      // Auto-open on page load for demo/screenshot purposes: ?openExport=1
+      // Wait for fonts (so the menu doesn't flash before typography lands)
+      // and paint before opening. Fallback timeout for browsers without the
+      // Font Loading API.
+      try {
+        if (new URLSearchParams(window.location.search).get('openExport') === '1') {
+          var openWhenReady = function () {
+            requestAnimationFrame(function () { requestAnimationFrame(open); });
+          };
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(openWhenReady);
+          } else {
+            setTimeout(openWhenReady, 200);
+          }
+        }
+      } catch (_) {}
+    })();
+
+    /* ============================================================
+       Motion Governor — one reader switch and one motion budget. Ambient
+       trace yields to the strongest semantic owner; Still also parks bounded
+       viewer signals without discarding their static meaning.
+       ============================================================ */
+    Archify.motionGovernor = (function () {
+      var STORAGE_KEY = 'archify-motion';
+      var html = document.documentElement;
+      var svg = document.querySelector('.diagram-container svg');
+      var btn = document.getElementById('btn-motion');
+      var label = document.getElementById('motion-label');
+      var motionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+      var capable = !!(svg && svg.getAttribute('data-animation') === 'trace');
+      var readerPaused = false;
+      var suspensions = Object.create(null);
+      var explicitOwner = '';
+      var owner = '';
+      var ownerToken = 0;
+      var ownerCleanup = null;
+      var lastEffectivePaused = null;
+      var ambientStarted = false;
+      var ambientPending = new Set();
+
+      function detachAmbientBoundary() {
+        if (!svg) return;
+        svg.removeEventListener('animationend', onAmbientBoundary, true);
+        svg.removeEventListener('animationcancel', onAmbientBoundary, true);
+      }
+      function settleAmbient(reason) {
+        if (!capable) return false;
+        ambientStarted = true;
+        ambientPending.clear();
+        detachAmbientBoundary();
+        html.setAttribute('data-ambient-motion', 'settled');
+        html.setAttribute('data-ambient-settle-reason', reason || 'complete');
+        return true;
+      }
+      function onAmbientBoundary(event) {
+        if (!ambientPending.has(event.target)) return;
+        ambientPending.delete(event.target);
+        if (!ambientPending.size) settleAmbient('complete');
+      }
+      function startAmbient() {
+        if (ambientStarted || !capable) return false;
+        ambientStarted = true;
+        ambientPending = new Set(Array.prototype.slice.call(svg.querySelectorAll('[data-animate="edge"], [data-animate="node"]')));
+        if (!ambientPending.size) return settleAmbient('empty');
+        svg.addEventListener('animationend', onAmbientBoundary, true);
+        svg.addEventListener('animationcancel', onAmbientBoundary, true);
+        html.setAttribute('data-ambient-motion', 'running');
+        html.removeAttribute('data-ambient-settle-reason');
+        return true;
+      }
+
+      function readStored() {
+        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+      }
+      function writeStored() {
+        try {
+          if (readerPaused) localStorage.setItem(STORAGE_KEY, 'still');
+          else localStorage.removeItem(STORAGE_KEY);
+        } catch (_) {}
+      }
+      function reducedMotion() {
+        return !!(motionQuery && motionQuery.matches);
+      }
+      function hasSuspension() {
+        return Object.keys(suspensions).length > 0;
+      }
+      function effectivePaused() {
+        return readerPaused || reducedMotion() || hasSuspension();
+      }
+      function ownerLabel(value) {
+        if (value === 'story') return 'the guided story';
+        if (value === 'chapter') return 'the active chapter';
+        if (value === 'chapter-preview') return 'the chapter delta preview';
+        if (value === 'handoff') return 'the chapter handoff';
+        if (value === 'route') return 'Route Probe';
+        if (value === 'lens') return 'Semantic Lens';
+        if (value === 'relationship') return 'Relationship Preview';
+        if (value === 'intent') return 'Intent Trace';
+        if (value === 'focus') return 'semantic focus';
+        if (value === 'legend') return 'legend preview';
+        return 'reader interaction';
+      }
+      function render() {
+        if (!capable) return;
+        var systemPaused = reducedMotion();
+        var paused = effectivePaused();
+        html.setAttribute('data-motion', paused ? 'still' : 'live');
+        if (paused || owner || html.hasAttribute('data-embed') || html.hasAttribute('data-share-playback') || html.hasAttribute('data-document-hidden')) {
+          settleAmbient('suppressed');
+        } else if (!ambientStarted) {
+          startAmbient();
+        }
+        btn.setAttribute('aria-pressed', paused ? 'false' : 'true');
+        btn.disabled = systemPaused;
+        label.textContent = paused ? 'Still' : 'Live';
+        if (paused && lastEffectivePaused !== true && Archify.guidedViews && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
+        }
+        if (paused && lastEffectivePaused !== true && Archify.guidedViews && Archify.guidedViews.settleHandoff) {
+          Archify.guidedViews.settleHandoff(systemPaused ? 'reduced-motion' : (hasSuspension() ? 'hidden' : 'still'));
+        }
+        if (paused && lastEffectivePaused !== true && Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: systemPaused ? 'reduced-motion' : (hasSuspension() ? 'hidden' : 'still') });
+        }
+        lastEffectivePaused = paused;
+        if (Archify.routeProbe && typeof Archify.routeProbe.syncMotion === 'function') Archify.routeProbe.syncMotion();
+        if (systemPaused) {
+          btn.setAttribute('aria-label', 'Motion paused by reduced-motion preference');
+          btn.title = 'Motion paused by reduced-motion preference';
+        } else if (hasSuspension()) {
+          btn.setAttribute('aria-label', 'Motion paused while this page is hidden');
+          btn.title = 'Motion paused while this page is hidden';
+        } else if (paused) {
+          btn.setAttribute('aria-label', 'Resume motion');
+          btn.title = 'Resume motion';
+        } else if (owner) {
+          btn.setAttribute('aria-label', 'Pause motion; currently yielding to ' + ownerLabel(owner));
+          btn.title = 'Live preview enabled · yielding to ' + ownerLabel(owner);
+        } else {
+          btn.setAttribute('aria-label', 'Pause motion');
+          btn.title = 'Pause motion';
+        }
+      }
+      function setPaused(next, options) {
+        options = options || {};
+        readerPaused = !!next;
+        if (options.persist !== false) writeStored();
+        render();
+        return readerPaused;
+      }
+      function publishOwner() {
+        owner = explicitOwner || deriveOwner();
+        if (owner) html.setAttribute('data-motion-owner', owner);
+        else html.removeAttribute('data-motion-owner');
+        render();
+        return owner;
+      }
+      function deriveOwner() {
+        if (!svg) return '';
+        if (svg.hasAttribute('data-story-playing') || svg.hasAttribute('data-story-follow')) return 'story';
+        if (svg.hasAttribute('data-story-active')) return 'chapter';
+        if (svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active')) return 'route';
+        if (svg.hasAttribute('data-lens-active')) return 'lens';
+        if (svg.hasAttribute('data-relationship-preview-active')) return 'relationship';
+        if (svg.hasAttribute('data-intent-trace-active')) return 'intent';
+        if (svg.hasAttribute('data-focus-active')) return 'focus';
+        if (svg.hasAttribute('data-legend-preview-active')) return 'legend';
+        return '';
+      }
+      function clearClaim(preempted) {
+        var cleanup = ownerCleanup;
+        ownerCleanup = null;
+        explicitOwner = '';
+        if (preempted && cleanup) {
+          try { cleanup(); } catch (_) {}
+        }
+      }
+      function claim(next, cleanup) {
+        if (!capable || !next) return 0;
+        clearClaim(true);
+        ownerToken += 1;
+        explicitOwner = next;
+        ownerCleanup = typeof cleanup === 'function' ? cleanup : null;
+        publishOwner();
+        return ownerToken;
+      }
+      function release(token) {
+        if (!capable || token !== ownerToken || !explicitOwner) return false;
+        clearClaim(false);
+        ownerToken += 1;
+        publishOwner();
+        return true;
+      }
+      function suspend(reason) {
+        var key = String(reason || 'runtime');
+        var active = true;
+        suspensions[key] = (suspensions[key] || 0) + 1;
+        render();
+        return function () {
+          if (!active) return false;
+          active = false;
+          if (suspensions[key] > 1) suspensions[key] -= 1;
+          else delete suspensions[key];
+          render();
+          return true;
+        };
+      }
+      function syncVisibility() {
+        if (document.hidden) {
+          suspensions.visibility = true;
+          html.setAttribute('data-document-hidden', 'true');
+        } else {
+          delete suspensions.visibility;
+          html.removeAttribute('data-document-hidden');
+        }
+        render();
+      }
+
+      if (!capable) {
+        btn.hidden = true;
+        html.removeAttribute('data-motion-capable');
+        html.removeAttribute('data-motion');
+        html.removeAttribute('data-motion-owner');
+        html.removeAttribute('data-ambient-motion');
+        html.removeAttribute('data-ambient-settle-reason');
+        return {
+          capable: false,
+          pause: function () { return false; },
+          resume: function () { return false; },
+          toggle: function () { return false; },
+          setMode: function () { return 'still'; },
+          mode: function () { return 'still'; },
+          claim: function () { return 0; },
+          release: function () { return false; },
+          suspend: function () { return function () { return false; }; },
+          isPaused: function () { return true; },
+          owner: function () { return ''; }
+        };
+      }
+
+      html.setAttribute('data-motion-capable', 'true');
+      btn.hidden = false;
+      readerPaused = readStored() === 'still';
+      btn.addEventListener('click', function () { setPaused(!readerPaused); });
+      if (motionQuery) {
+        if (typeof motionQuery.addEventListener === 'function') motionQuery.addEventListener('change', render);
+        else if (typeof motionQuery.addListener === 'function') motionQuery.addListener(render);
+      }
+      document.addEventListener('visibilitychange', syncVisibility);
+      if (document.documentElement.getAttribute('data-embed') !== 'true' && typeof MutationObserver !== 'undefined' && typeof Node !== 'undefined' && svg instanceof Node) {
+        var ownerObserver = new MutationObserver(function () { publishOwner(); });
+        ownerObserver.observe(svg, {
+          attributes: true,
+          attributeFilter: [
+            'data-story-playing', 'data-story-follow', 'data-story-active', 'data-route-picking', 'data-route-active',
+            'data-lens-active', 'data-relationship-preview-active', 'data-intent-trace-active',
+            'data-focus-active', 'data-legend-preview-active'
+          ]
+        });
+      }
+      syncVisibility();
+      publishOwner();
+      render();
+
+      return {
+        capable: true,
+        pause: function () { return setPaused(true); },
+        resume: function () { return setPaused(false); },
+        toggle: function () { return setPaused(!readerPaused); },
+        setMode: function (next, options) {
+          setPaused(next === 'still', options);
+          return effectivePaused() ? 'still' : 'live';
+        },
+        mode: function () { return effectivePaused() ? 'still' : 'live'; },
+        claim: claim,
+        release: release,
+        suspend: suspend,
+        isPaused: effectivePaused,
+        owner: function () { return owner; }
+      };
+    })();
+
+    /* Verified repository evidence is emitted only after the renderer checks
+       the authored GitHub revision, source blobs, and optional line ranges
+       against the explicit --repo-root. It remains outside the SVG so every
+       canonical visual export stays free of repository paths. */
+    Archify.sourceEvidence = (function () {
+      var element = document.getElementById('archify-source-evidence-data');
+      var payload = null;
+      var svgNamespace = 'http://www.w3.org/2000/svg';
+      if (element) {
+        try {
+          var parsed = JSON.parse(element.textContent || 'null');
+          if (parsed && parsed.verified === true && parsed.repository && parsed.nodes) payload = parsed;
+        } catch (_) {}
+      }
+      function installBeacons() {
+        if (!payload) return 0;
+        var svg = document.querySelector('.diagram-container svg');
+        if (!svg) return 0;
+        var installed = 0;
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          var sources = payload.nodes[id];
+          if (!Array.isArray(sources) || !sources.length || node.querySelector('[data-source-evidence-beacon]')) return;
+          var shape = node.querySelector('[data-animate="node"]') || node.querySelector('[class*="c-"]');
+          var box;
+          try { box = (shape || node).getBBox(); } catch (_) { return; }
+          if (!box || !Number.isFinite(box.x) || !Number.isFinite(box.y) || !Number.isFinite(box.width) || box.width < 36) return;
+
+          var count = sources.length;
+          var label = count + ' verified source' + (count === 1 ? '' : 's') + '; focus this node to inspect';
+          var beacon = document.createElementNS(svgNamespace, 'g');
+          beacon.classList.add('source-evidence-beacon');
+          beacon.setAttribute('data-source-evidence-beacon', '');
+          beacon.setAttribute('aria-hidden', 'true');
+          beacon.setAttribute('transform', 'translate(' + (box.x + box.width - 35) + ' ' + (box.y + 5) + ')');
+          var title = document.createElementNS(svgNamespace, 'title');
+          title.textContent = label;
+          var plate = document.createElementNS(svgNamespace, 'rect');
+          plate.setAttribute('width', '30');
+          plate.setAttribute('height', '12');
+          plate.setAttribute('rx', '6');
+          var text = document.createElementNS(svgNamespace, 'text');
+          text.setAttribute('x', '15');
+          text.setAttribute('y', '8.25');
+          text.textContent = 'SRC ' + count;
+          beacon.appendChild(title);
+          beacon.appendChild(plate);
+          beacon.appendChild(text);
+          node.appendChild(beacon);
+
+          var originalLabel = node.getAttribute('aria-label') || '';
+          node.setAttribute('data-source-evidence-count', String(count));
+          node.setAttribute('data-source-evidence-original-label', originalLabel);
+          node.setAttribute('aria-label', (originalLabel ? originalLabel + ', ' : '') + count + ' verified source reference' + (count === 1 ? '' : 's'));
+          installed += 1;
+        });
+        return installed;
+      }
+      return {
+        available: function () { return Boolean(payload); },
+        repository: function () { return payload ? payload.repository : null; },
+        node: function (id) {
+          var sources = payload && payload.nodes ? payload.nodes[id] : null;
+          return Array.isArray(sources) ? sources.slice() : [];
+        },
+        installBeacons: installBeacons
+      };
+    })();
+    Archify.sourceEvidence.installBeacons();
+
+    /* ============================================================
+       Explore — stable-ID neighborhood focus + dependency-free pan/zoom.
+       Renderer IDs become deep-linkable semantic hooks without turning the
+       standalone artifact into a canvas editor.
+       ============================================================ */
+    Archify.focus = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var chip = document.getElementById('focus-chip');
+      var label = document.getElementById('focus-label');
+      var detail = document.getElementById('focus-detail');
+      var kind = document.getElementById('focus-kind');
+      var context = document.getElementById('focus-context');
+      var tag = document.getElementById('focus-tag');
+      var semanticId = document.getElementById('focus-id');
+      var evidence = document.getElementById('focus-evidence');
+      var repositoryLink = document.getElementById('focus-repository');
+      var evidenceLinks = document.getElementById('focus-evidence-links');
+      var summary = document.getElementById('focus-summary');
+      var reachSection = document.getElementById('focus-reach');
+      var reachStatus = document.getElementById('focus-reach-status');
+      var upstreamBtn = document.getElementById('btn-reach-upstream');
+      var downstreamBtn = document.getElementById('btn-reach-downstream');
+      var upstreamCount = document.getElementById('focus-reach-upstream-count');
+      var downstreamCount = document.getElementById('focus-reach-downstream-count');
+      var relationshipList = document.getElementById('relationship-lens-list');
+      var copyBtn = document.getElementById('btn-focus-copy');
+      var relationsBtn = document.getElementById('btn-focus-relations');
+      var clearBtn = document.getElementById('btn-focus-clear');
+      var activeIds = [];
+      var hoveredRelationship = null;
+      var focusedRelationship = null;
+      var pinnedRelationship = null;
+      var pinnedRelationshipKey = null;
+      var activeRelationshipPreview = null;
+      var relationshipHitOverlay = null;
+      var relationshipHitTargets = [];
+      var directPreviewTimer = null;
+      var reachabilityMode = null;
+      var activeReachability = null;
+      var svgNamespace = 'http://www.w3.org/2000/svg';
+      var reducedMotionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+      var finePointerQuery = window.matchMedia ? window.matchMedia('(hover: hover) and (pointer: fine)') : null;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') || (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '');
+      }
+      function reachabilityRelationships() {
+        var seen = Object.create(null);
+        var relationships = [];
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!from || !to || seen[key]) return;
+          seen[key] = true;
+          relationships.push({ key: key, from: from, to: to });
+        });
+        return relationships;
+      }
+      function computeReachability(originId, direction, relationships) {
+        if (typeof originId !== 'string' || !originId ||
+            (direction !== 'upstream' && direction !== 'downstream') ||
+            !Array.isArray(relationships)) return null;
+        var records = [];
+        var seenKeys = Object.create(null);
+        relationships.forEach(function (relationship, index) {
+          if (!relationship || typeof relationship.from !== 'string' || !relationship.from ||
+              typeof relationship.to !== 'string' || !relationship.to) return;
+          var key = typeof relationship.key === 'string' && relationship.key
+            ? relationship.key : String(index);
+          if (seenKeys[key]) return;
+          seenKeys[key] = true;
+          records.push({ key: key, from: relationship.from, to: relationship.to });
+        });
+
+        var depths = Object.create(null);
+        var order = [];
+        var queue = [originId];
+        depths[originId] = 0;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var current = queue[cursor];
+          records.forEach(function (relationship) {
+            var next = null;
+            if (direction === 'downstream' && relationship.from === current) next = relationship.to;
+            else if (direction === 'upstream' && relationship.to === current) next = relationship.from;
+            if (next == null || Object.prototype.hasOwnProperty.call(depths, next)) return;
+            depths[next] = depths[current] + 1;
+            queue.push(next);
+          });
+        }
+        queue.forEach(function (id) { order.push(id); });
+
+        var edgeKeys = [];
+        records.forEach(function (relationship) {
+          if (Object.prototype.hasOwnProperty.call(depths, relationship.from) &&
+              Object.prototype.hasOwnProperty.call(depths, relationship.to)) edgeKeys.push(relationship.key);
+        });
+        var maxDepth = order.reduce(function (maximum, id) {
+          return Math.max(maximum, depths[id]);
+        }, 0);
+        return {
+          direction: direction,
+          originId: originId,
+          nodeIds: order,
+          edgeKeys: edgeKeys,
+          depths: depths,
+          maxDepth: maxDepth
+        };
+      }
+      function reachabilityFor(id, direction) {
+        return computeReachability(id, direction, reachabilityRelationships());
+      }
+      function resetReachabilityButtons() {
+        upstreamBtn.setAttribute('aria-pressed', 'false');
+        downstreamBtn.setAttribute('aria-pressed', 'false');
+      }
+      function clearReachability(options) {
+        options = options || {};
+        reachabilityMode = null;
+        activeReachability = null;
+        svg.removeAttribute('data-reach-active');
+        chip.removeAttribute('data-reach-mode');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-reach-match');
+          node.removeAttribute('data-reach-origin');
+          node.removeAttribute('data-reach-depth');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-reach-match');
+          edge.removeAttribute('data-reach-depth');
+        });
+        resetReachabilityButtons();
+        reachStatus.textContent = '';
+        reachStatus.hidden = true;
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncReachShare === 'function') {
+          Archify.exportMenu.syncReachShare();
+        }
+        if (options.updateUrl === true && activeIds.length === 1) {
+          try {
+            history.replaceState(null, '', location.pathname + location.search + '#focus=' + encodeURIComponent(activeIds[0]));
+          } catch (_) {}
+        }
+      }
+      function renderReachabilityControls(id) {
+        var upstream = reachabilityFor(id, 'upstream');
+        var downstream = reachabilityFor(id, 'downstream');
+        var upstreamReach = upstream ? Math.max(0, upstream.nodeIds.length - 1) : 0;
+        var downstreamReach = downstream ? Math.max(0, downstream.nodeIds.length - 1) : 0;
+        upstreamCount.textContent = String(upstreamReach);
+        downstreamCount.textContent = String(downstreamReach);
+        upstreamBtn.disabled = upstreamReach === 0;
+        downstreamBtn.disabled = downstreamReach === 0;
+        upstreamBtn.setAttribute('aria-label', upstreamReach
+          ? 'Trace ' + upstreamReach + ' upstream authored node' + (upstreamReach === 1 ? '' : 's')
+          : 'No upstream authored nodes');
+        downstreamBtn.setAttribute('aria-label', downstreamReach
+          ? 'Trace ' + downstreamReach + ' downstream authored node' + (downstreamReach === 1 ? '' : 's')
+          : 'No downstream authored nodes');
+        reachSection.hidden = false;
+      }
+      function applyReachability(direction, options) {
+        options = options || {};
+        if (activeIds.length !== 1 || (direction !== 'upstream' && direction !== 'downstream')) return false;
+        if (reachabilityMode === direction && options.toggle !== false) {
+          clearReachability({ updateUrl: options.updateUrl !== false });
+          return true;
+        }
+        var result = reachabilityFor(activeIds[0], direction);
+        if (!result || result.nodeIds.length <= 1) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false, resetView: false });
+        }
+        clearRelationshipPreview({ clearPin: true });
+        clearReachability({ updateUrl: false });
+        reachabilityMode = direction;
+        activeReachability = result;
+        var edgeKeySet = Object.create(null);
+        result.edgeKeys.forEach(function (key) { edgeKeySet[key] = true; });
+        svg.setAttribute('data-reach-active', direction);
+        chip.setAttribute('data-reach-mode', direction);
+        nodes().forEach(function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (!Object.prototype.hasOwnProperty.call(result.depths, id)) return;
+          node.setAttribute('data-reach-match', '');
+          node.setAttribute('data-reach-depth', String(result.depths[id]));
+          if (id === result.originId) node.setAttribute('data-reach-origin', '');
+        });
+        edges().forEach(function (edge) {
+          var key = edge.getAttribute('data-edge-key') || (
+            edge.getAttribute('data-edge-from') + '\u0000' +
+            edge.getAttribute('data-edge-to') + '\u0000' +
+            (edge.getAttribute('data-edge-label') || '')
+          );
+          if (!edgeKeySet[key]) return;
+          edge.setAttribute('data-reach-match', '');
+          var fromDepth = result.depths[edge.getAttribute('data-edge-from')];
+          var toDepth = result.depths[edge.getAttribute('data-edge-to')];
+          edge.setAttribute('data-reach-depth', String(Math.max(fromDepth || 0, toDepth || 0)));
+        });
+        resetReachabilityButtons();
+        var activeButton = direction === 'upstream' ? upstreamBtn : downstreamBtn;
+        activeButton.setAttribute('aria-pressed', 'true');
+        var reachableCount = result.nodeIds.length - 1;
+        var directionLabel = direction === 'upstream' ? 'Upstream' : 'Downstream';
+        reachStatus.textContent = directionLabel + ' · ' + reachableCount + ' node' +
+          (reachableCount === 1 ? '' : 's') + ' · ' + result.edgeKeys.length + ' link' +
+          (result.edgeKeys.length === 1 ? '' : 's') + ' · max ' + result.maxDepth + ' hop' +
+          (result.maxDepth === 1 ? '' : 's');
+        reachStatus.hidden = false;
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncReachShare === 'function') {
+          Archify.exportMenu.syncReachShare();
+        }
+        if (options.updateUrl !== false) {
+          try {
+            history.replaceState(null, '', location.pathname + location.search + '#focus=' +
+              encodeURIComponent(activeIds[0]) + '&reach=' + direction);
+          } catch (_) {}
+        }
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(result.nodeIds, { includeNeighbors: false, reason: 'reachability' });
+        }
+        requestLensPlacement();
+        return true;
+      }
+      function reachabilitySnapshot() {
+        if (!activeReachability || activeIds.length !== 1 ||
+            (reachabilityMode !== 'upstream' && reachabilityMode !== 'downstream') ||
+            activeReachability.direction !== reachabilityMode ||
+            activeReachability.originId !== activeIds[0] ||
+            svg.getAttribute('data-reach-active') !== reachabilityMode) return null;
+
+        var originId = activeReachability.originId;
+        var nodeIds = activeReachability.nodeIds.slice();
+        var edgeKeys = activeReachability.edgeKeys.slice();
+        if (nodeIds.length < 2 || nodeIds[0] !== originId || !edgeKeys.length ||
+            !activeReachability.depths || !Number.isInteger(activeReachability.maxDepth) ||
+            activeReachability.maxDepth < 1) return null;
+
+        var allNodes = nodes();
+        var allEdges = edges();
+        var seenNodeIds = Object.create(null);
+        var seenEdgeKeys = Object.create(null);
+        var nodeIdSet = Object.create(null);
+        var depths = Object.create(null);
+        var originNode = null;
+        var measuredMaxDepth = 0;
+
+        if (nodeIds.some(function (id) {
+          var depth = activeReachability.depths[id];
+          var matches = allNodes.filter(function (node) {
+            return node.getAttribute('data-node-id') === id;
+          });
+          if (typeof id !== 'string' || !id || seenNodeIds[id] || matches.length !== 1 ||
+              !matches[0].hasAttribute('data-reach-match') ||
+              !Number.isInteger(depth) || depth < 0 || depth > activeReachability.maxDepth ||
+              (id === originId
+                ? (!matches[0].hasAttribute('data-reach-origin') || depth !== 0)
+                : depth < 1)) return true;
+          seenNodeIds[id] = true;
+          nodeIdSet[id] = true;
+          depths[id] = depth;
+          measuredMaxDepth = Math.max(measuredMaxDepth, depth);
+          if (id === originId) originNode = matches[0];
+          return false;
+        }) || !originNode || measuredMaxDepth !== activeReachability.maxDepth ||
+            allNodes.filter(function (node) { return node.hasAttribute('data-reach-match'); }).length !== nodeIds.length) return null;
+
+        var edgeRecords = [];
+        if (edgeKeys.some(function (key) {
+          if (typeof key !== 'string' || !key || seenEdgeKeys[key]) return true;
+          var fragments = allEdges.filter(function (edge) {
+            return edge.getAttribute('data-edge-key') === key;
+          });
+          var drawableFragments = fragments.filter(hasDrawableGeometry);
+          if (!fragments.length || drawableFragments.length !== 1 ||
+              !fragments.every(function (fragment) { return fragment.hasAttribute('data-reach-match'); })) return true;
+          var first = fragments[0];
+          var from = first.getAttribute('data-edge-from');
+          var to = first.getAttribute('data-edge-to');
+          var id = first.getAttribute('data-edge-id') || '';
+          var labelValue = first.getAttribute('data-edge-label') || '';
+          if (!nodeIdSet[from] || !nodeIdSet[to] || !fragments.every(function (fragment) {
+            return fragment.getAttribute('data-edge-from') === from &&
+              fragment.getAttribute('data-edge-to') === to &&
+              (fragment.getAttribute('data-edge-id') || '') === id;
+          })) return true;
+          seenEdgeKeys[key] = true;
+          edgeRecords.push({
+            key: key,
+            id: id,
+            from: from,
+            to: to,
+            label: labelValue,
+            depth: Math.max(depths[from], depths[to])
+          });
+          return false;
+        })) return null;
+
+        var liveEdgeKeys = Object.create(null);
+        if (allEdges.some(function (edge) {
+          if (!edge.hasAttribute('data-reach-match')) return false;
+          var key = edge.getAttribute('data-edge-key');
+          if (!key || !seenEdgeKeys[key]) return true;
+          liveEdgeKeys[key] = true;
+          return false;
+        }) || Object.keys(liveEdgeKeys).length !== edgeKeys.length) return null;
+
+        return {
+          direction: reachabilityMode,
+          origin: { id: originId, label: nodeLabel(originNode, originId) },
+          nodeIds: nodeIds,
+          depths: depths,
+          maxDepth: activeReachability.maxDepth,
+          edges: edgeRecords
+        };
+      }
+      function setPassportValue(element, value) {
+        var normalized = value == null ? '' : String(value).trim();
+        element.textContent = normalized;
+        element.hidden = !normalized;
+      }
+      function renderSourceEvidence(id) {
+        evidenceLinks.textContent = '';
+        repositoryLink.removeAttribute('href');
+        repositoryLink.textContent = '';
+        var sources = Archify.sourceEvidence.node(id);
+        var repository = Archify.sourceEvidence.repository();
+        if (!repository || !sources.length) {
+          evidence.hidden = true;
+          return;
+        }
+        var slug = repository.url.replace(/^https:\/\/github\.com\//, '').replace(/\/$/, '');
+        repositoryLink.href = repository.url + '/tree/' + repository.revision;
+        repositoryLink.textContent = slug + ' @ ' + repository.shortRevision;
+        repositoryLink.setAttribute('aria-label', 'Open verified repository revision ' + repository.revision);
+        sources.forEach(function (source) {
+          var link = document.createElement('a');
+          link.className = 'semantic-passport-source';
+          link.href = source.href;
+          link.target = '_blank';
+          link.rel = 'noopener noreferrer';
+          link.referrerPolicy = 'no-referrer';
+          link.setAttribute('aria-label', 'Open verified source ' + source.path + ' at revision ' + repository.shortRevision);
+          var name = document.createElement('strong');
+          name.textContent = source.label || source.path.split('/').pop() || source.path;
+          var location = document.createElement('code');
+          location.textContent = source.line
+            ? 'L' + source.line + (source.endLine && source.endLine !== source.line ? '–' + source.endLine : '') + ' ↗'
+            : 'Open ↗';
+          var sourcePath = document.createElement('small');
+          sourcePath.textContent = source.path;
+          link.appendChild(name);
+          link.appendChild(location);
+          link.appendChild(sourcePath);
+          evidenceLinks.appendChild(link);
+        });
+        evidence.hidden = false;
+      }
+      function renderPassport(id, node) {
+        setPassportValue(detail, node.getAttribute('data-node-sublabel'));
+        setPassportValue(kind, node.getAttribute('data-node-kind') || 'node');
+        setPassportValue(context, node.getAttribute('data-node-context'));
+        setPassportValue(tag, node.getAttribute('data-node-tag'));
+        semanticId.textContent = id;
+        semanticId.hidden = false;
+        renderSourceEvidence(id);
+      }
+      function relationshipsFor(id, byId) {
+        var seen = {};
+        var relationships = [];
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (from !== id && to !== id) return;
+          var edgeLabel = edge.getAttribute('data-edge-label') || '';
+          var edgeKey = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + edgeLabel);
+          var edgeId = edge.getAttribute('data-edge-id') || '';
+          if (seen[edgeKey]) return;
+          seen[edgeKey] = true;
+          var direction = from === id && to === id ? 'loop' : (from === id ? 'out' : 'in');
+          var neighborId = direction === 'in' ? from : to;
+          var neighbor = byId[neighborId];
+          relationships.push({
+            key: edgeKey,
+            id: edgeId,
+            from: from,
+            to: to,
+            direction: direction,
+            neighborId: neighborId,
+            neighborLabel: neighbor ? nodeLabel(neighbor, neighborId) : neighborId,
+            label: edgeLabel || (direction === 'loop' ? 'loops back' : direction === 'out' ? 'connects to' : 'connects from')
+          });
+        });
+        return relationships;
+      }
+      function relationshipEdgeShapes(edge) {
+        if (!edge) return [];
+        if (/^(path|line|polyline)$/i.test(edge.tagName || '')) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function relationshipHitRecords() {
+        var recordsByKey = {};
+        var recordsById = {};
+        var byId = {};
+        nodes().forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var records = [];
+        edges().forEach(function (edge) {
+          var shapes = relationshipEdgeShapes(edge);
+          if (!shapes.length) return;
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var labelValue = edge.getAttribute('data-edge-label') || '';
+          var edgeId = edge.getAttribute('data-edge-id') || '';
+          var key = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + labelValue);
+          var existing = recordsByKey[key];
+          if (existing) {
+            if (existing.from !== from || existing.to !== to || existing.labelValue !== labelValue || existing.id !== edgeId) {
+              existing.invalid = true;
+              return;
+            }
+            shapes.forEach(function (shape) {
+              if (existing.shapes.indexOf(shape) === -1) existing.shapes.push(shape);
+            });
+            return;
+          }
+          var record = {
+            key: key,
+            id: edgeId,
+            from: from,
+            to: to,
+            fromLabel: byId[from] ? nodeLabel(byId[from], from) : from,
+            toLabel: byId[to] ? nodeLabel(byId[to], to) : to,
+            labelValue: labelValue,
+            label: labelValue || (from === to ? 'loops back' : 'connects to'),
+            edge: edge,
+            shapes: shapes,
+            invalid: false
+          };
+          recordsByKey[key] = record;
+          if (edgeId) {
+            if (recordsById[edgeId]) {
+              recordsById[edgeId].invalid = true;
+              record.invalid = true;
+            } else {
+              recordsById[edgeId] = record;
+            }
+          }
+          records.push(record);
+        });
+        return records.filter(function (record) { return !record.invalid && record.from && record.to; });
+      }
+      function relationshipRecordForKey(key) {
+        return relationshipHitRecords().find(function (record) { return record.key === key; }) || null;
+      }
+      function pinnedRelationshipRecord() {
+        return pinnedRelationshipKey ? relationshipRecordForKey(pinnedRelationshipKey) : null;
+      }
+      function renderRelationshipCopyAction() {
+        var record = pinnedRelationshipRecord();
+        if (record && record.id) {
+          copyBtn.textContent = 'Copy relation';
+          copyBtn.setAttribute('aria-label', 'Copy link to pinned relationship');
+        } else if (pinnedRelationshipKey) {
+          copyBtn.textContent = 'Copy node';
+          copyBtn.setAttribute('aria-label', 'Copy link to source node');
+        } else {
+          copyBtn.textContent = 'Copy link';
+          copyBtn.setAttribute('aria-label', 'Copy link to focused node');
+        }
+      }
+      function relationshipHitGeometry(shape, className) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('filter');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('tabindex');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.setAttribute('class', className || 'relationship-hit-rail');
+        return clone;
+      }
+      function removeRelationshipPulse() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-relationship-pulse-overlay]'), function (element) {
+          element.remove();
+        });
+      }
+      function relationshipPulseGeometry(shape) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('transform');
+        clone.removeAttribute('filter');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('tabindex');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-focus-match');
+        clone.removeAttribute('data-relationship-preview');
+        clone.setAttribute('class', 'relationship-flow-pulse');
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function relationshipTokenKind(edge) {
+        var shapes = relationshipEdgeShapes(edge);
+        var classEvidence = [edge.getAttribute('class') || ''].concat(shapes.map(function (shape) {
+          return shape.getAttribute('class') || '';
+        })).join(' ');
+        var from = edge.getAttribute('data-edge-from') || '';
+        var to = edge.getAttribute('data-edge-to') || '';
+        var source = nodes().find(function (node) { return node.getAttribute('data-node-id') === from; });
+        var target = nodes().find(function (node) { return node.getAttribute('data-node-id') === to; });
+        var sourceKind = source ? source.getAttribute('data-node-kind') || 'neutral' : 'neutral';
+        var targetKind = target ? target.getAttribute('data-node-kind') || 'neutral' : 'neutral';
+        if (/\ba-security\b/.test(classEvidence) || sourceKind === 'security' || targetKind === 'security' || targetKind === 'failure') return 'security';
+        if (/\ba-dashed\b/.test(classEvidence) || sourceKind === 'messagebus' || targetKind === 'messagebus') return 'event';
+        if (sourceKind === 'database' || targetKind === 'database') return 'data';
+        if (targetKind === 'waiting' || targetKind === 'success') return 'state';
+        return 'call';
+      }
+      function relationshipTokenPath(shape) {
+        if (!shape) return '';
+        var tagName = String(shape.tagName || '').toLowerCase();
+        if (tagName === 'path') return shape.getAttribute('d') || '';
+        if (tagName === 'line') {
+          return 'M ' + shape.getAttribute('x1') + ' ' + shape.getAttribute('y1') +
+            ' L ' + shape.getAttribute('x2') + ' ' + shape.getAttribute('y2');
+        }
+        if (tagName === 'polyline' && shape.points && shape.points.numberOfItems > 1) {
+          var commands = [];
+          for (var i = 0; i < shape.points.numberOfItems; i += 1) {
+            var point = shape.points.getItem(i);
+            commands.push((i === 0 ? 'M ' : 'L ') + point.x + ' ' + point.y);
+          }
+          return commands.join(' ');
+        }
+        return '';
+      }
+      function relationshipTokenPart(tagName, className, attrs) {
+        var part = document.createElementNS(svgNamespace, tagName);
+        part.setAttribute('class', className);
+        Object.keys(attrs || {}).forEach(function (name) { part.setAttribute(name, attrs[name]); });
+        return part;
+      }
+      function relationshipTokenGeometry(shape, kind, key, options) {
+        options = options || {};
+        var pathData = relationshipTokenPath(shape);
+        if (!pathData) return null;
+        var token = document.createElementNS(svgNamespace, 'g');
+        token.setAttribute('class', 'semantic-flow-token ' + (options.className || 'relationship-flow-token'));
+        token.setAttribute('data-token-kind', kind);
+        token.setAttribute('data-token-edge-key', key);
+        token.setAttribute('aria-hidden', 'true');
+        token.appendChild(relationshipTokenPart('circle', 'semantic-flow-token-halo', { cx: '0', cy: '0', r: '7' }));
+        if (kind === 'data') {
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-5', y: '-4', width: '10', height: '8', rx: '2' }));
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'M -2.8 -1.2 h 5.6 M -2.8 1.4 h 3.8' }));
+        } else if (kind === 'event') {
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-7', y: '-3', width: '4', height: '6', rx: '1' }));
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-2', y: '-3', width: '4', height: '6', rx: '1' }));
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '3', y: '-3', width: '4', height: '6', rx: '1' }));
+        } else if (kind === 'security') {
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-shape', { d: 'M 0 -5 L 4 -3.4 V 0 c 0 3 -1.6 4.5 -4 5.5 C -2.4 4.5 -4 3 -4 0 v -3.4 Z' }));
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'm -2 .2 1.4 1.4 L 2 -1.4' }));
+        } else if (kind === 'state') {
+          token.appendChild(relationshipTokenPart('circle', 'relationship-flow-token-shape', { cx: '0', cy: '0', r: '5' }));
+          token.appendChild(relationshipTokenPart('circle', 'relationship-flow-token-dot', { cx: '0', cy: '0', r: '1.35' }));
+        } else {
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'M -5 -3 L -1 0 L -5 3 M 0 -3 L 4 0 L 0 3' }));
+        }
+        var motion = document.createElementNS(svgNamespace, 'animateMotion');
+        motion.setAttribute('path', pathData);
+        motion.setAttribute('dur', options.duration || '1.2s');
+        motion.setAttribute('begin', '0s');
+        motion.setAttribute('fill', 'freeze');
+        motion.setAttribute('rotate', 'auto');
+        motion.setAttribute('calcMode', 'spline');
+        motion.setAttribute('keyTimes', '0;1');
+        motion.setAttribute('keySplines', '.2 0 .2 1');
+        token.appendChild(motion);
+        return token;
+      }
+      function createSemanticFlowToken(edge, shape, options) {
+        if (!edge || !shape) return null;
+        var key = edge.getAttribute('data-edge-key') || (
+          edge.getAttribute('data-edge-from') + '\u0000' +
+          edge.getAttribute('data-edge-to') + '\u0000' +
+          (edge.getAttribute('data-edge-label') || '')
+        );
+        return relationshipTokenGeometry(shape, relationshipTokenKind(edge), key, options);
+      }
+      Archify.flowTokens = {
+        create: createSemanticFlowToken,
+        kind: function (edge) { return relationshipTokenKind(edge); },
+        path: relationshipTokenPath
+      };
+      function renderRelationshipPulse(key) {
+        removeRelationshipPulse();
+        if (!key || document.documentElement.getAttribute('data-embed') === 'true') return false;
+        if (document.hidden || (Archify.motionGovernor && Archify.motionGovernor.isPaused())) return false;
+        if (reducedMotionQuery && reducedMotionQuery.matches) return false;
+        var matchingEdges = edges().filter(function (edge) {
+          return edge.getAttribute('data-edge-key') === key;
+        });
+        if (!matchingEdges.length) return false;
+        var overlay = document.createElementNS(svgNamespace, 'g');
+        overlay.setAttribute('class', 'relationship-pulse-overlay');
+        overlay.setAttribute('data-relationship-pulse-overlay', '');
+        overlay.setAttribute('data-relationship-pulse-key', key);
+        overlay.setAttribute('aria-hidden', 'true');
+        var tokenAdded = false;
+        matchingEdges.forEach(function (edge) {
+          var wrapper = document.createElementNS(svgNamespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          var shapes = relationshipEdgeShapes(edge);
+          shapes.forEach(function (shape) {
+            wrapper.appendChild(relationshipPulseGeometry(shape));
+          });
+          if (!tokenAdded && shapes.length) {
+            var tokenKind = relationshipTokenKind(edge);
+            var token = relationshipTokenGeometry(shapes[0], tokenKind, key);
+            if (token) {
+              wrapper.appendChild(token);
+              overlay.setAttribute('data-relationship-token-kind', tokenKind);
+              tokenAdded = true;
+            }
+          }
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        if (!overlay.childNodes.length) return false;
+        var finishPulse = function () {
+          if (overlay.parentNode) overlay.remove();
+        };
+        overlay.addEventListener('animationend', finishPulse, { once: true });
+        overlay.addEventListener('animationcancel', finishPulse, { once: true });
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        return true;
+      }
+      function clearRelationshipPreview(options) {
+        options = options || {};
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        directPreviewTimer = null;
+        removeRelationshipPulse();
+        activeRelationshipPreview = null;
+        svg.removeAttribute('data-relationship-preview-active');
+        svg.removeAttribute('data-relationship-direct-active');
+        if (options.clearPin === true) {
+          pinnedRelationship = null;
+          pinnedRelationshipKey = null;
+          svg.removeAttribute('data-relationship-pin-active');
+        }
+        chip.removeAttribute('data-relationship-previewing');
+        edges().forEach(function (edge) { edge.removeAttribute('data-relationship-preview'); });
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-relationship-preview-node');
+          node.removeAttribute('data-relationship-preview-source');
+          node.removeAttribute('data-relationship-preview-target');
+        });
+        Array.prototype.forEach.call(relationshipList.querySelectorAll('[data-preview-active]'), function (button) {
+          button.removeAttribute('data-preview-active');
+        });
+        relationshipHitTargets.forEach(function (target) {
+          target.setAttribute('aria-pressed', pinnedRelationshipKey && target.getAttribute('data-relationship-key') === pinnedRelationshipKey ? 'true' : 'false');
+          target.removeAttribute('data-preview-active');
+        });
+        renderRelationshipCopyAction();
+        requestLensPlacement();
+      }
+      function previewRelationship(button, options) {
+        options = options || {};
+        if (pinnedRelationshipKey && pinnedRelationship && button !== pinnedRelationship) return;
+        clearRelationshipPreview();
+        if (!button) return;
+        var key = button.getAttribute('data-relationship-key');
+        var from = button.getAttribute('data-relationship-from');
+        var to = button.getAttribute('data-relationship-to');
+        if (!key || !from || !to) return;
+        svg.setAttribute('data-relationship-preview-active', key);
+        if (options.direct === true) svg.setAttribute('data-relationship-direct-active', key);
+        edges().forEach(function (edge) {
+          if (edge.getAttribute('data-edge-key') === key) edge.setAttribute('data-relationship-preview', '');
+        });
+        nodes().forEach(function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (id !== from && id !== to) return;
+          node.setAttribute('data-relationship-preview-node', '');
+          if (id === from) node.setAttribute('data-relationship-preview-source', '');
+          if (id === to) node.setAttribute('data-relationship-preview-target', '');
+        });
+        button.setAttribute('data-preview-active', 'true');
+        if (!chip.hidden && options.direct !== true) chip.setAttribute('data-relationship-previewing', 'true');
+        activeRelationshipPreview = button;
+        renderRelationshipPulse(key);
+        requestLensPlacement();
+      }
+      function syncRelationshipPreview() {
+        var next = pinnedRelationship || focusedRelationship || hoveredRelationship;
+        if (next === activeRelationshipPreview) return;
+        previewRelationship(next, { direct: !!(next && next.hasAttribute('data-relationship-hit-key')) });
+      }
+      function directRelationshipBlocked() {
+        return html.getAttribute('data-embed') === 'true' ||
+          html.getAttribute('data-guide-open') === 'true' ||
+          container.classList.contains('is-panning') ||
+          (activeIds.length > 0 && !pinnedRelationshipKey) ||
+          svg.hasAttribute('data-story-active') ||
+          svg.hasAttribute('data-route-picking') ||
+          svg.hasAttribute('data-route-active') ||
+          svg.hasAttribute('data-lens-active') ||
+          svg.hasAttribute('data-chapter-preview');
+      }
+      function scheduleDirectRelationshipPreview(target) {
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        if (pinnedRelationshipKey) return;
+        directPreviewTimer = window.setTimeout(function () {
+          directPreviewTimer = null;
+          if (pinnedRelationshipKey || hoveredRelationship !== target || directRelationshipBlocked()) return;
+          previewRelationship(target, { direct: true });
+        }, reducedMotionQuery && reducedMotionQuery.matches ? 0 : 90);
+      }
+      function relationshipHitTarget(key) {
+        return relationshipHitTargets.find(function (target) {
+          return target.getAttribute('data-relationship-key') === key;
+        }) || null;
+      }
+      function revealPinnedRelationship(record) {
+        function reveal() {
+          if (!record || pinnedRelationshipKey !== record.key) return true;
+          if (!Archify.view || typeof Archify.view.reveal !== 'function') return false;
+          Archify.view.reveal([record.from, record.to], { reason: 'relationship-direct' });
+          return true;
+        }
+        if (!reveal()) requestAnimationFrame(reveal);
+      }
+      function inspectRelationship(key, options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        directPreviewTimer = null;
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        if (pinnedRelationshipKey === key) {
+          if (options.toggle === false) return true;
+          clear({ updateUrl: options.updateUrl !== false });
+          return true;
+        }
+        var record = relationshipRecordForKey(key);
+        if (!record) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        set(record.from, { toggle: false, updateUrl: false });
+        var row = Array.prototype.slice.call(relationshipList.querySelectorAll('[data-relationship-key]')).find(function (candidate) {
+          return candidate.getAttribute('data-relationship-key') === key;
+        });
+        if (!row) return false;
+        previewRelationship(row);
+        pinnedRelationship = row;
+        pinnedRelationshipKey = key;
+        svg.setAttribute('data-relationship-pin-active', key);
+        var target = relationshipHitTarget(key);
+        if (target) target.setAttribute('aria-pressed', 'true');
+        renderRelationshipCopyAction();
+        summary.textContent = 'Pinned relationship · ' + record.fromLabel + ' → ' + record.toLabel + ' · ' + record.label;
+        revealPinnedRelationship(record);
+        if (options.updateUrl !== false && record.id) {
+          try { history.replaceState(null, '', location.pathname + location.search + '#relation=' + encodeURIComponent(record.id)); } catch (_) {}
+        }
+        return true;
+      }
+      function inspectRelationshipById(id, options) {
+        var record = relationshipHitRecords().find(function (item) { return item.id === id; });
+        return record ? inspectRelationship(record.key, options) : false;
+      }
+      function installRelationshipHitTargets() {
+        if (html.getAttribute('data-embed') === 'true') return 0;
+        var records = relationshipHitRecords();
+        if (!records.length) return 0;
+        relationshipHitOverlay = document.createElementNS(svgNamespace, 'g');
+        relationshipHitOverlay.setAttribute('class', 'relationship-hit-overlay');
+        relationshipHitOverlay.setAttribute('data-relationship-hit-overlay', '');
+        relationshipHitOverlay.setAttribute('role', 'group');
+        relationshipHitOverlay.setAttribute('aria-label', 'Direct relationship explorer');
+        var relationshipHelp = document.createElementNS(svgNamespace, 'desc');
+        relationshipHelp.id = 'archify-relationship-help';
+        relationshipHelp.textContent = 'Use arrow keys to explore relationships. Press Enter or Space to pin details; Escape clears.';
+        relationshipHitOverlay.appendChild(relationshipHelp);
+        records.forEach(function (record, index) {
+          var target = document.createElementNS(svgNamespace, 'g');
+          target.setAttribute('class', 'relationship-hit-target');
+          target.setAttribute('data-relationship-hit-key', record.key);
+          target.setAttribute('data-relationship-key', record.key);
+          target.setAttribute('data-relationship-from', record.from);
+          target.setAttribute('data-relationship-to', record.to);
+          if (record.id) target.setAttribute('data-relationship-id', record.id);
+          target.setAttribute('role', 'button');
+          target.setAttribute('tabindex', index === 0 ? '0' : '-1');
+          target.setAttribute('aria-pressed', 'false');
+          target.setAttribute('aria-describedby', relationshipHelp.id);
+          var description = 'Inspect relationship ' + (index + 1) + ' of ' + records.length + ': ' + record.fromLabel + ' to ' + record.toLabel + ', ' + record.label + '. Press Enter for details.';
+          target.setAttribute('aria-label', description);
+          var title = document.createElementNS(svgNamespace, 'title');
+          title.textContent = record.fromLabel + ' \u2192 ' + record.toLabel + ' \u00b7 ' + record.label;
+          target.appendChild(title);
+          record.shapes.forEach(function (shape) {
+            target.appendChild(relationshipHitGeometry(shape));
+            target.appendChild(relationshipHitGeometry(shape, 'relationship-focus-rail'));
+          });
+          if (target.childNodes.length > 1) {
+            relationshipHitTargets.push(target);
+            relationshipHitOverlay.appendChild(target);
+          }
+        });
+        if (!relationshipHitTargets.length) return 0;
+        var firstNode = svg.querySelector('[data-node-id]');
+        var nodeLayer = firstNode;
+        while (nodeLayer && nodeLayer.parentNode && nodeLayer.parentNode !== svg) nodeLayer = nodeLayer.parentNode;
+        if (nodeLayer && nodeLayer.parentNode === svg) svg.insertBefore(relationshipHitOverlay, nodeLayer);
+        else svg.appendChild(relationshipHitOverlay);
+
+        relationshipHitOverlay.addEventListener('pointerdown', function (event) {
+          if (event.target.closest('[data-relationship-hit-key]')) event.stopPropagation();
+        });
+        relationshipHitOverlay.addEventListener('pointerover', function (event) {
+          if (event.pointerType === 'touch') return;
+          if (finePointerQuery && !finePointerQuery.matches) return;
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked() || pinnedRelationshipKey) return;
+          if (event.relatedTarget && target.contains(event.relatedTarget)) return;
+          hoveredRelationship = target;
+          scheduleDirectRelationshipPreview(target);
+        });
+        relationshipHitOverlay.addEventListener('pointerout', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || (event.relatedTarget && target.contains(event.relatedTarget))) return;
+          if (hoveredRelationship === target) hoveredRelationship = null;
+          syncRelationshipPreview();
+        });
+        relationshipHitOverlay.addEventListener('focusin', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked()) return;
+          focusedRelationship = target;
+          if (!pinnedRelationshipKey) previewRelationship(target, { direct: true });
+        });
+        relationshipHitOverlay.addEventListener('focusout', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || (event.relatedTarget && target.contains(event.relatedTarget))) return;
+          if (focusedRelationship === target) focusedRelationship = null;
+          syncRelationshipPreview();
+        });
+        relationshipHitOverlay.addEventListener('click', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked()) return;
+          event.preventDefault();
+          event.stopPropagation();
+          focusedRelationship = null;
+          hoveredRelationship = null;
+          inspectRelationship(target.getAttribute('data-relationship-key'));
+        });
+        relationshipHitOverlay.addEventListener('keydown', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target) return;
+          if (event.key === 'Escape' && pinnedRelationshipKey) {
+            event.preventDefault();
+            clear({ updateUrl: false });
+            return;
+          }
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            focusedRelationship = null;
+            hoveredRelationship = null;
+            inspectRelationship(target.getAttribute('data-relationship-key'));
+            return;
+          }
+          if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return;
+          var index = relationshipHitTargets.indexOf(target);
+          if (event.key === 'Home') index = 0;
+          else if (event.key === 'End') index = relationshipHitTargets.length - 1;
+          else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') index = (index + 1) % relationshipHitTargets.length;
+          else index = (index - 1 + relationshipHitTargets.length) % relationshipHitTargets.length;
+          event.preventDefault();
+          relationshipHitTargets.forEach(function (item, itemIndex) { item.setAttribute('tabindex', itemIndex === index ? '0' : '-1'); });
+          try { relationshipHitTargets[index].focus({ preventScroll: true }); }
+          catch (_) { try { relationshipHitTargets[index].focus(); } catch (_) {} }
+        });
+        return relationshipHitTargets.length;
+      }
+      function renderRelationshipLens(id, byId) {
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        clearRelationshipPreview({ clearPin: true });
+        renderPassport(id, byId[id]);
+        var relationships = relationshipsFor(id, byId);
+        chip.removeAttribute('data-relations-expanded');
+        relationsBtn.setAttribute('aria-expanded', 'false');
+        relationsBtn.textContent = relationships.length + ' relation' + (relationships.length === 1 ? '' : 's');
+        relationsBtn.setAttribute('aria-label', 'Show ' + relationships.length + ' connected relationship' + (relationships.length === 1 ? '' : 's'));
+        var counts = { out: 0, in: 0, loop: 0 };
+        relationships.forEach(function (relationship) { counts[relationship.direction] += 1; });
+        summary.textContent = counts.out + ' outgoing · ' + counts.in + ' incoming' + (counts.loop ? ' · ' + counts.loop + ' loop' : '');
+        renderReachabilityControls(id);
+        relationshipList.textContent = '';
+        if (!relationships.length) {
+          var empty = document.createElement('p');
+          empty.className = 'relationship-lens-empty';
+          empty.textContent = 'No connected relationships';
+          relationshipList.appendChild(empty);
+          return;
+        }
+
+        [
+          { id: 'out', label: 'Outgoing' },
+          { id: 'in', label: 'Incoming' },
+          { id: 'loop', label: 'Self loops' }
+        ].forEach(function (group) {
+          var items = relationships.filter(function (relationship) { return relationship.direction === group.id; });
+          if (!items.length) return;
+          var section = document.createElement('div');
+          section.className = 'relationship-lens-group';
+          var heading = document.createElement('span');
+          heading.className = 'relationship-lens-group-title';
+          heading.textContent = group.label + ' · ' + items.length;
+          section.appendChild(heading);
+          items.forEach(function (relationship) {
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'relationship-lens-row';
+            button.setAttribute('data-direction', relationship.direction);
+            button.setAttribute('data-relationship-target', relationship.neighborId);
+            button.setAttribute('data-relationship-key', relationship.key);
+            button.setAttribute('data-relationship-from', relationship.from);
+            button.setAttribute('data-relationship-to', relationship.to);
+            if (relationship.id) button.setAttribute('data-relationship-id', relationship.id);
+            button.setAttribute('aria-label', group.label + ': ' + relationship.label + ', ' + relationship.neighborLabel);
+            var direction = document.createElement('span');
+            direction.className = 'relationship-lens-direction';
+            direction.setAttribute('aria-hidden', 'true');
+            direction.textContent = relationship.direction === 'out' ? 'OUT →' : relationship.direction === 'in' ? '← IN' : 'LOOP';
+            var target = document.createElement('strong');
+            target.textContent = relationship.neighborLabel;
+            var relation = document.createElement('small');
+            relation.textContent = relationship.label;
+            button.appendChild(direction);
+            button.appendChild(target);
+            button.appendChild(relation);
+            section.appendChild(button);
+          });
+          relationshipList.appendChild(section);
+        });
+      }
+      var lensFrame = 0;
+      function placeRelationshipLens() {
+        lensFrame = 0;
+        if (chip.hidden || activeIds.length !== 1) return;
+        var node = svg.querySelector('[data-node-id="' + activeIds[0] + '"]');
+        if (!node) return;
+        var containerRect = container.getBoundingClientRect();
+        var nodeRect = node.getBoundingClientRect();
+        if (containerRect.bottom <= 0 || containerRect.top >= window.innerHeight) return;
+        var padding = window.innerWidth <= 720 ? 8 : 16;
+        var visibleTop = Math.max(padding, -containerRect.top + padding);
+        var visibleBottom = Math.min(containerRect.height - padding, window.innerHeight - containerRect.top - padding);
+        var maxTop = Math.max(padding, visibleBottom - chip.offsetHeight);
+        var minTop = Math.min(visibleTop, maxTop);
+        var nodeCenter = nodeRect.top - containerRect.top + nodeRect.height / 2;
+        var mobile = window.innerWidth <= 720;
+        var previewingOnMobile = mobile && chip.getAttribute('data-relationship-previewing') === 'true';
+        var compactOnMobile = mobile && chip.getAttribute('data-relations-expanded') !== 'true';
+        var preferred;
+        if (compactOnMobile) {
+          var nodeTop = nodeRect.top - containerRect.top;
+          var nodeBottom = nodeRect.bottom - containerRect.top;
+          var gap = 10;
+          var above = nodeTop - chip.offsetHeight - gap;
+          var below = nodeBottom + gap;
+          if (above >= visibleTop) preferred = above;
+          else if (below + chip.offsetHeight <= visibleBottom - 56) preferred = below;
+          else preferred = nodeCenter < (visibleTop + visibleBottom) / 2
+            ? Math.max(minTop, visibleBottom - chip.offsetHeight - 56)
+            : visibleTop;
+        } else if (previewingOnMobile) {
+          var pinnedTop = visibleTop;
+          var pinnedBottom = Math.max(minTop, visibleBottom - chip.offsetHeight - 56);
+          preferred = nodeCenter < (visibleTop + visibleBottom) / 2 ? pinnedBottom : pinnedTop;
+        } else {
+          preferred = nodeCenter - chip.offsetHeight / 2;
+        }
+        var top = Math.max(minTop, Math.min(maxTop, preferred));
+        chip.style.top = Math.round(top) + 'px';
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+      }
+      function requestLensPlacement() {
+        if (lensFrame) return;
+        lensFrame = requestAnimationFrame(placeRelationshipLens);
+      }
+      function clear(options) {
+        options = options || {};
+        var restoreNode = options.restoreFocus === true && activeIds.length === 1
+          ? svg.querySelector('[data-node-id="' + activeIds[0] + '"]')
+          : null;
+        clearReachability({ updateUrl: false });
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') {
+          Archify.intentTrace.clear({ announce: false });
+        }
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        clearRelationshipPreview({ clearPin: true });
+        activeIds = [];
+        svg.removeAttribute('data-focus-active');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-focus-match');
+          node.removeAttribute('data-focus-selected');
+          node.setAttribute('aria-pressed', 'false');
+        });
+        edges().forEach(function (edge) { edge.removeAttribute('data-focus-match'); });
+        chip.hidden = true;
+        label.textContent = '';
+        detail.textContent = '';
+        detail.hidden = true;
+        kind.textContent = '';
+        kind.hidden = true;
+        context.textContent = '';
+        context.hidden = true;
+        tag.textContent = '';
+        tag.hidden = true;
+        semanticId.textContent = '';
+        semanticId.hidden = true;
+        evidence.hidden = true;
+        evidenceLinks.textContent = '';
+        repositoryLink.removeAttribute('href');
+        repositoryLink.textContent = '';
+        summary.textContent = '';
+        reachSection.hidden = true;
+        upstreamCount.textContent = '0';
+        downstreamCount.textContent = '0';
+        upstreamBtn.disabled = true;
+        downstreamBtn.disabled = true;
+        relationshipList.textContent = '';
+        copyBtn.textContent = 'Copy link';
+        copyBtn.setAttribute('aria-label', 'Copy link to focused node');
+        relationsBtn.textContent = 'Relations';
+        relationsBtn.setAttribute('aria-label', 'Show connected relationships');
+        relationsBtn.setAttribute('aria-expanded', 'false');
+        chip.removeAttribute('data-relations-expanded');
+        chip.style.removeProperty('top');
+        if (options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.updateUrl !== false) {
+          try { history.replaceState(null, '', location.pathname + location.search); } catch (_) {}
+        }
+        if (restoreNode) {
+          try { restoreNode.focus({ preventScroll: true }); }
+          catch (_) { try { restoreNode.focus(); } catch (_) {} }
+        }
+      }
+
+      function setMany(ids, options) {
+        options = options || {};
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.active()) {
+          Archify.semanticLens.clear({ updateUrl: false, preserveView: true, closePanel: true });
+        }
+        if (options.preserveRoute !== true && Archify.routeProbe && typeof Archify.routeProbe.clear === 'function') {
+          Archify.routeProbe.clear({ updateUrl: false, restoreFocus: false });
+        }
+        var nodeList = nodes();
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var normalized = [];
+        (ids || []).forEach(function (id) {
+          if (byId[id] && normalized.indexOf(id) === -1) normalized.push(id);
+        });
+        if (!normalized.length) return false;
+        if (normalized.length === activeIds.length && normalized.every(function (id, index) { return activeIds[index] === id; }) && options.toggle !== false) {
+          clear();
+          return true;
+        }
+
+        clear({ updateUrl: false, preserveView: true });
+        activeIds = normalized;
+        var selected = {};
+        var related = {};
+        var seenEdges = {};
+        var matchedEdges = 0;
+        normalized.forEach(function (id) { selected[id] = true; related[id] = true; });
+        var selectionMode = options.mode === 'selection' || normalized.length > 1;
+
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var match = selectionMode ? selected[from] && selected[to] : selected[from] || selected[to];
+          if (!match) return;
+          edge.setAttribute('data-focus-match', '');
+          if (!selectionMode) { related[from] = true; related[to] = true; }
+          var edgeKey = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!seenEdges[edgeKey]) { seenEdges[edgeKey] = true; matchedEdges += 1; }
+        });
+        nodeList.forEach(function (node) {
+          var nodeId = node.getAttribute('data-node-id');
+          if (related[nodeId]) node.setAttribute('data-focus-match', '');
+          if (selected[nodeId]) {
+            node.setAttribute('data-focus-selected', '');
+            node.setAttribute('aria-pressed', 'true');
+          }
+        });
+        svg.setAttribute('data-focus-active', normalized.join(' '));
+        var defaultLabel = normalized.length === 1
+          ? nodeLabel(byId[normalized[0]], normalized[0])
+          : normalized.length + ' selected nodes';
+        label.textContent = options.label || defaultLabel;
+        chip.hidden = options.hideChip === true || normalized.length !== 1 || selectionMode;
+        if (!chip.hidden) {
+          renderRelationshipLens(normalized[0], byId);
+          requestLensPlacement();
+        }
+        if (options.updateUrl !== false) {
+          var key = options.urlKey || 'focus';
+          var value = options.urlValue || normalized[0];
+          try { history.replaceState(null, '', location.pathname + location.search + '#' + key + '=' + encodeURIComponent(value)); } catch (_) {}
+        }
+        return true;
+      }
+
+      function set(id, options) {
+        options = options || {};
+        options.mode = 'neighborhood';
+        return setMany([id], options);
+      }
+
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+
+      function copyFocusLink() {
+        if (activeIds.length !== 1) return Promise.resolve(false);
+        var record = pinnedRelationshipRecord();
+        var relationId = record && record.id;
+        var value = location.href.replace(/#.*$/, '') + (relationId
+          ? '#relation=' + encodeURIComponent(relationId)
+          : '#focus=' + encodeURIComponent(activeIds[0]) + (reachabilityMode ? '&reach=' + reachabilityMode : ''));
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          copyBtn.setAttribute('aria-label', copied
+            ? (relationId ? 'Pinned relationship link copied' : 'Focused node link copied')
+            : (relationId ? 'Could not copy pinned relationship link' : 'Could not copy focused node link'));
+          window.setTimeout(function () {
+            renderRelationshipCopyAction();
+          }, 1600);
+          return copied;
+        });
+      }
+
+      svg.addEventListener('click', function (event) {
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        var node = event.target.closest('[data-node-id]');
+        if (node) {
+          var id = node.getAttribute('data-node-id');
+          set(id);
+          if (activeIds.indexOf(id) !== -1 && Archify.view && typeof Archify.view.reveal === 'function') {
+            Archify.view.reveal([id], { includeNeighbors: true, reason: 'focus' });
+          }
+        }
+        else if (activeIds.length) clear();
+      });
+      svg.addEventListener('keydown', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.key !== 'Enter' && event.key !== ' ')) return;
+        event.preventDefault();
+        var id = node.getAttribute('data-node-id');
+        set(id);
+        if (activeIds.indexOf(id) !== -1 && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'focus' });
+        }
+      });
+      clearBtn.addEventListener('click', function () { clear({ restoreFocus: true }); });
+      copyBtn.addEventListener('click', copyFocusLink);
+      upstreamBtn.addEventListener('click', function () { applyReachability('upstream'); });
+      downstreamBtn.addEventListener('click', function () { applyReachability('downstream'); });
+      relationsBtn.addEventListener('click', function () {
+        var expanded = chip.getAttribute('data-relations-expanded') === 'true';
+        if (expanded) chip.removeAttribute('data-relations-expanded');
+        else chip.setAttribute('data-relations-expanded', 'true');
+        relationsBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        relationsBtn.setAttribute('aria-label', expanded ? 'Show connected relationships' : 'Hide connected relationships');
+        requestLensPlacement();
+      });
+      relationshipList.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-relationship-target]');
+        if (!button) return;
+        var id = button.getAttribute('data-relationship-target');
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        set(id, { toggle: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'relationship' });
+        }
+        var node = svg.querySelector('[data-node-id="' + id + '"]');
+        if (node) {
+          try { node.focus({ preventScroll: true }); } catch (_) { try { node.focus(); } catch (_) {} }
+        }
+      });
+      relationshipList.addEventListener('pointerover', function (event) {
+        if (event.pointerType === 'touch') return;
+        if (finePointerQuery && !finePointerQuery.matches) return;
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || !relationshipList.contains(button)) return;
+        if (event.relatedTarget && button.contains(event.relatedTarget)) return;
+        hoveredRelationship = button;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('pointerout', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        if (hoveredRelationship === button) hoveredRelationship = null;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('focusin', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button) return;
+        focusedRelationship = button;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('focusout', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        if (focusedRelationship === button) focusedRelationship = null;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('keydown', function (event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return;
+        var buttons = Array.prototype.slice.call(relationshipList.querySelectorAll('[data-relationship-target]'));
+        if (!buttons.length) return;
+        var index = buttons.indexOf(document.activeElement);
+        if (event.key === 'Home') index = 0;
+        else if (event.key === 'End') index = buttons.length - 1;
+        else if (event.key === 'ArrowDown') index = Math.min(buttons.length - 1, Math.max(0, index + 1));
+        else index = Math.max(0, index < 0 ? 0 : index - 1);
+        event.preventDefault();
+        buttons[index].focus();
+      });
+      document.addEventListener('click', function (event) {
+        var target = event.target;
+        if (chip.hidden || !target || typeof target.closest !== 'function' || chip.contains(target)) return;
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        if (target.closest('[data-node-id], [data-relationship-hit-key]')) return;
+        clear();
+      }, true);
+      window.addEventListener('scroll', requestLensPlacement, { passive: true });
+      window.addEventListener('resize', requestLensPlacement);
+      container.addEventListener('scroll', requestLensPlacement, { passive: true });
+      document.addEventListener('visibilitychange', function () {
+        if (document.hidden) removeRelationshipPulse();
+      });
+      function syncRelationshipMotionPreference(event) {
+        if (event.matches) removeRelationshipPulse();
+      }
+      if (reducedMotionQuery) {
+        if (typeof reducedMotionQuery.addEventListener === 'function') {
+          reducedMotionQuery.addEventListener('change', syncRelationshipMotionPreference);
+        } else if (typeof reducedMotionQuery.addListener === 'function') {
+          reducedMotionQuery.addListener(syncRelationshipMotionPreference);
+        }
+      }
+
+      installRelationshipHitTargets();
+
+      function syncFocusFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var relation = params.get('relation');
+          var initial = params.get('focus');
+          var reach = params.get('reach');
+          if (relation) {
+            if (html.getAttribute('data-embed') === 'true' ||
+                !inspectRelationshipById(relation, { updateUrl: false, toggle: false })) clear({ updateUrl: false });
+          }
+          else if (initial) {
+            if (set(initial, { updateUrl: false, toggle: false }) &&
+                (reach === 'upstream' || reach === 'downstream')) {
+              applyReachability(reach, { updateUrl: false, toggle: false, reveal: false });
+            }
+          }
+          else if (!params.get('view')) clear({ updateUrl: false });
+        } catch (_) {}
+      }
+
+      window.addEventListener('hashchange', syncFocusFromHash);
+      syncFocusFromHash();
+
+      return {
+        set: set,
+        setMany: setMany,
+        clear: clear,
+        copyLink: copyFocusLink,
+        reach: applyReachability,
+        clearReach: clearReachability,
+        reachabilitySnapshot: reachabilitySnapshot,
+        inspectRelationship: inspectRelationship,
+        inspectRelationshipById: inspectRelationshipById,
+        reposition: requestLensPlacement,
+        relationship: function () {
+          var record = pinnedRelationshipRecord();
+          return record ? { id: record.id || null, key: record.key, from: record.from, to: record.to, label: record.label } : null;
+        },
+        reachability: function () {
+          return activeReachability ? {
+            direction: activeReachability.direction,
+            originId: activeReachability.originId,
+            nodeIds: activeReachability.nodeIds.slice(),
+            edgeKeys: activeReachability.edgeKeys.slice(),
+            maxDepth: activeReachability.maxDepth
+          } : null;
+        },
+        active: function () { return activeIds.length === 0 ? null : (activeIds.length === 1 ? activeIds[0] : activeIds.slice()); }
+      };
+    })();
+
+    /* ============================================================
+       Intent Trace — temporary one-hop topology before durable focus.
+       Fine-pointer hover and keyboard focus share the same stable-ID preview;
+       touch continues directly to the existing click-to-focus contract.
+       ============================================================ */
+    Archify.intentTrace = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var status = document.getElementById('intent-trace-status');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var activeId = null;
+      var hoveredNode = null;
+      var focusedNode = null;
+      var enterTimer = null;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
+      }
+      function finePointer() {
+        return !window.matchMedia || window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+      }
+      function reducedMotion() {
+        return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+      }
+      function blocked() {
+        return html.getAttribute('data-embed') === 'true' ||
+          html.getAttribute('data-guide-open') === 'true' ||
+          container.classList.contains('is-panning') ||
+          svg.hasAttribute('data-lens-active') ||
+          svg.hasAttribute('data-story-active') ||
+          svg.hasAttribute('data-relationship-preview-active') ||
+          !!(Archify.routeProbe && typeof Archify.routeProbe.active === 'function' && Archify.routeProbe.active()) ||
+          !!(Archify.focus && typeof Archify.focus.active === 'function' && Archify.focus.active());
+      }
+      function edgeShapes(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function removeOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-intent-trace-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+      }
+      function clear(options) {
+        options = options || {};
+        if (enterTimer) window.clearTimeout(enterTimer);
+        enterTimer = null;
+        activeId = null;
+        svg.removeAttribute('data-intent-trace-active');
+        removeOverlay();
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-intent-trace-match');
+          node.removeAttribute('data-intent-trace-selected');
+        });
+        edges().forEach(function (edge) { edge.removeAttribute('data-intent-trace-match'); });
+        if (options.announce !== false) status.textContent = '';
+      }
+      function traceGeometry(shape, direction) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-intent-trace-match');
+        clone.removeAttribute('data-intent-trace-selected');
+        clone.setAttribute('class', 'intent-trace-flow');
+        clone.setAttribute('data-direction', direction);
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function show(id, options) {
+        options = options || {};
+        if (!id || blocked()) {
+          clear({ announce: false });
+          return false;
+        }
+        if (activeId === id) return true;
+        clear({ announce: false });
+        var nodeList = nodes();
+        var edgeList = edges();
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var selected = byId[id];
+        if (!selected) return false;
+
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'intent-trace-overlay');
+        overlay.setAttribute('data-intent-trace-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var related = {};
+        var seen = {};
+        var counts = { out: 0, in: 0, loop: 0 };
+        related[id] = true;
+
+        edgeList.forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (from !== id && to !== id) return;
+          var direction = from === id && to === id ? 'loop' : (from === id ? 'out' : 'in');
+          var key = edge.getAttribute('data-edge-key') ||
+            (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!seen[key]) {
+            seen[key] = true;
+            counts[direction] += 1;
+          }
+          related[from] = true;
+          related[to] = true;
+          edge.setAttribute('data-intent-trace-match', '');
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          edgeShapes(edge).forEach(function (shape) {
+            wrapper.appendChild(traceGeometry(shape, direction));
+          });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+
+        nodeList.forEach(function (node) {
+          var nodeId = node.getAttribute('data-node-id');
+          if (related[nodeId]) node.setAttribute('data-intent-trace-match', '');
+          if (nodeId === id) node.setAttribute('data-intent-trace-selected', '');
+        });
+        if (overlay.childNodes.length) {
+          var firstEdge = edgeList[0];
+          var firstNode = svg.querySelector('[data-node-id]');
+          if (firstEdge && firstEdge.parentNode) firstEdge.parentNode.insertBefore(overlay, firstEdge);
+          else if (firstNode) svg.insertBefore(overlay, firstNode);
+          else svg.appendChild(overlay);
+        }
+        activeId = id;
+        svg.setAttribute('data-intent-trace-active', id);
+        if (options.announce === true) {
+          var total = counts.out + counts.in + counts.loop;
+          status.textContent = nodeLabel(selected, id) + '. ' + counts.out + ' outgoing, ' +
+            counts.in + ' incoming' + (counts.loop ? ', ' + counts.loop + ' self loop' : '') +
+            '. ' + total + ' connection' + (total === 1 ? '' : 's') + '. Press Enter for details.';
+        }
+        return true;
+      }
+      function schedule(node) {
+        if (enterTimer) window.clearTimeout(enterTimer);
+        enterTimer = window.setTimeout(function () {
+          enterTimer = null;
+          if (hoveredNode === node) show(node.getAttribute('data-node-id'), { announce: false });
+        }, reducedMotion() ? 0 : 90);
+      }
+      function sync() {
+        var candidate = focusedNode || hoveredNode;
+        if (!candidate) {
+          clear();
+          return;
+        }
+        show(candidate.getAttribute('data-node-id'), { announce: candidate === focusedNode });
+      }
+
+      svg.addEventListener('pointerover', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || !finePointer() || event.pointerType === 'touch') return;
+        if (event.relatedTarget && node.contains(event.relatedTarget)) return;
+        hoveredNode = node;
+        schedule(node);
+      });
+      svg.addEventListener('pointerout', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.relatedTarget && node.contains(event.relatedTarget))) return;
+        if (hoveredNode === node) hoveredNode = null;
+        sync();
+      });
+      svg.addEventListener('focusin', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node) return;
+        focusedNode = node;
+        show(node.getAttribute('data-node-id'), { announce: true });
+      });
+      svg.addEventListener('focusout', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.relatedTarget && node.contains(event.relatedTarget))) return;
+        if (focusedNode === node) focusedNode = null;
+        sync();
+      });
+      container.addEventListener('pointerdown', function (event) {
+        if (!event.target.closest('[data-node-id]')) clear({ announce: false });
+      });
+      window.addEventListener('blur', function () { clear({ announce: false }); });
+
+      return {
+        show: show,
+        clear: clear,
+        active: function () { return activeId; }
+      };
+    })();
+
+    Archify.guidedViews = (function () {
+      var data = document.getElementById('archify-guided-views-data');
+      var panel = document.getElementById('guided-views');
+      var prev = document.getElementById('guided-view-prev');
+      var next = document.getElementById('guided-view-next');
+      var all = document.getElementById('guided-view-all');
+      var play = document.getElementById('guided-view-play');
+      var playIcon = document.getElementById('guided-view-play-icon');
+      var playLabel = document.getElementById('guided-view-play-label');
+      var beatLink = document.getElementById('guided-view-beat-link');
+      var beatLinkLabel = document.getElementById('guided-view-beat-link-label');
+      var progressBar = document.getElementById('guided-view-progress-bar');
+      var count = document.getElementById('guided-view-count');
+      var handoffReceipt = document.getElementById('guided-view-handoff');
+      var label = document.getElementById('guided-view-label');
+      var note = document.getElementById('guided-view-note');
+      var trail = document.getElementById('guided-view-trail');
+      var storyCaption = document.getElementById('guided-story-caption');
+      var storyCaptionIndex = document.getElementById('guided-story-caption-index');
+      var storyCaptionRoute = document.getElementById('guided-story-caption-route');
+      var storyCaptionDetail = document.getElementById('guided-story-caption-detail');
+      var storyCaptionNext = document.getElementById('guided-story-caption-next');
+      var storyCaptionNextLabel = document.getElementById('guided-story-caption-next-label');
+      var chapterIndex = document.getElementById('guided-view-index');
+      var chapterList = document.getElementById('guided-view-chapters');
+      var shareCue = document.getElementById('share-chapter-cue');
+      var shareCueState = document.getElementById('share-chapter-state');
+      var shareCueCount = document.getElementById('share-chapter-count');
+      var shareCueLabel = document.getElementById('share-chapter-label');
+      var shareCueNote = document.getElementById('share-chapter-note');
+      var shareCueRoute = document.getElementById('share-chapter-route');
+      var shareCueProgress = document.getElementById('share-chapter-progress-bar');
+      var svg = document.querySelector('.diagram-container svg');
+      var views = [];
+      var activeIndex = -1;
+      var playing = false;
+      var storyBeatTimer = null;
+      var storyBeatIndex = -1;
+      var storyBeatStartedAt = 0;
+      var storyBeatElapsedMs = 0;
+      var storyBeatDwellMs = 0;
+      var storyPlaybackGeneration = 0;
+      var storyFollowGeneration = 0;
+      var storyPlaybackScope = 'story';
+      var storyPlaybackComplete = false;
+      var beatLinkFeedbackTimer = null;
+      var momentRestoreGeneration = 0;
+      var storySteps = [];
+      var storyPulseOwnerToken = 0;
+      var storyPulseGeneration = 0;
+      var autoplayPending = false;
+      var VIEW_INTERVAL_MS = 3200;
+      var STORY_FOLLOW_MIN_DWELL_MS = 1100;
+      var STORY_FOLLOW_DURATION_MS = 320;
+      var chapterButtons = [];
+      var handoffGeneration = 0;
+      var currentHandoff = null;
+      var previewGeneration = 0;
+      var pointerPreviewIntent = null;
+      var focusPreviewIntent = null;
+      var activePreviewIndex = -1;
+      var previewOwnerToken = 0;
+
+      try { views = JSON.parse(data.textContent || '[]'); } catch (_) { views = []; }
+      if (!views.length) return { count: 0, active: function () { return null; } };
+      var canonicalNodeIds = {};
+      Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+        canonicalNodeIds[node.getAttribute('data-node-id')] = true;
+      });
+      views.forEach(function (view) {
+        var seen = {};
+        view.focus = (view.focus || []).filter(function (id) {
+          if (!canonicalNodeIds[id] || seen[id]) return false;
+          seen[id] = true;
+          return true;
+        });
+      });
+      // Establish the compact cold state before exposing the panel so the
+      // full Director cannot flash during first paint. Hash restoration runs
+      // in the same task and replaces this state before paint when valid.
+      panel.setAttribute('data-active-view', 'all');
+      panel.hidden = false;
+      panel.setAttribute('data-view-interval-ms', String(VIEW_INTERVAL_MS));
+      panel.setAttribute('data-story-follow-min-dwell-ms', String(STORY_FOLLOW_MIN_DWELL_MS));
+      buildChapterIndex();
+
+      function reducedMotion() {
+        return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+      }
+
+      function findNode(id) {
+        return Array.prototype.find.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          return node.getAttribute('data-node-id') === id;
+        }) || null;
+      }
+
+      function chapterDelta(previous, destination) {
+        var previousFocus = previous ? previous.focus : [];
+        var destinationFocus = destination ? destination.focus : [];
+        var previousIds = {};
+        var destinationIds = {};
+        previousFocus.forEach(function (id) { previousIds[id] = true; });
+        destinationFocus.forEach(function (id) { destinationIds[id] = true; });
+        return {
+          stay: previousFocus.filter(function (id) { return destinationIds[id]; }),
+          enter: destinationFocus.filter(function (id) { return !previousIds[id]; }),
+          leave: previousFocus.filter(function (id) { return !destinationIds[id]; })
+        };
+      }
+
+      function chapterAnchor(previous, destination, outgoingBeatIndex, delta) {
+        if (!previous || !destination) return '';
+        var stayIds = {};
+        delta.stay.forEach(function (id) { stayIds[id] = true; });
+        var activeBeat = outgoingBeatIndex >= 0 ? previous.focus[outgoingBeatIndex] : '';
+        if (activeBeat && stayIds[activeBeat]) return activeBeat;
+        for (var index = previous.focus.length - 1; index >= 0; index -= 1) {
+          if (stayIds[previous.focus[index]]) return previous.focus[index];
+        }
+        return '';
+      }
+
+      function handoffMotionAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (document.documentElement.getAttribute('data-embed') === 'true') return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        return !(Archify.motionGovernor && Archify.motionGovernor.capable && Archify.motionGovernor.isPaused());
+      }
+
+      function classifyHandoff(delta, anchor) {
+        var roles = {};
+        delta.stay.forEach(function (id) { roles[id] = 'stay'; });
+        delta.enter.forEach(function (id) { roles[id] = 'enter'; });
+        delta.leave.forEach(function (id) { roles[id] = 'leave'; });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          var role = roles[id] || '';
+          if (role) node.setAttribute('data-chapter-role', role);
+          else node.removeAttribute('data-chapter-role');
+        });
+        svg.setAttribute('data-chapter-handoff', anchor ? 'anchor' : 'no-anchor');
+        if (anchor) svg.setAttribute('data-chapter-anchor', anchor);
+        else svg.removeAttribute('data-chapter-anchor');
+      }
+
+      function drawHandoffAnchor(id) {
+        var node = findNode(id);
+        if (!node) return null;
+        var box;
+        try { box = node.getBBox(); } catch (_) { return null; }
+        var overlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        var ring = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        overlay.setAttribute('class', 'chapter-handoff-overlay');
+        overlay.setAttribute('data-chapter-handoff-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        ring.setAttribute('class', 'chapter-handoff-anchor');
+        ring.setAttribute('x', String(box.x - 8));
+        ring.setAttribute('y', String(box.y - 8));
+        ring.setAttribute('width', String(box.width + 16));
+        ring.setAttribute('height', String(box.height + 16));
+        ring.setAttribute('rx', '10');
+        overlay.appendChild(ring);
+        svg.appendChild(overlay);
+        return overlay;
+      }
+
+      function clearHandoffPresentation() {
+        svg.removeAttribute('data-chapter-handoff');
+        svg.removeAttribute('data-chapter-anchor');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-handoff-overlay]'), function (overlay) { overlay.remove(); });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-role]'), function (node) { node.removeAttribute('data-chapter-role'); });
+        if (handoffReceipt) {
+          handoffReceipt.hidden = true;
+          handoffReceipt.textContent = '';
+        }
+      }
+
+      function completeHandoff(handoff, outcome) {
+        if (!handoff || currentHandoff !== handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        currentHandoff = null;
+        clearHandoffPresentation();
+        if (handoff.ownerToken && Archify.motionGovernor) Archify.motionGovernor.release(handoff.ownerToken);
+        handoff.resolve({ id: handoff.id, state: outcome || 'complete', anchor: handoff.anchor || null });
+        syncStoryControlsDisabled();
+        syncChapterPreview();
+        return true;
+      }
+
+      function settleHandoff(reason) {
+        var handoff = currentHandoff;
+        if (!handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        if (handoff.camera && handoff.camera.cancel) handoff.camera.cancel(reason || 'settled', true);
+        else if (Archify.view && Archify.view.reveal) Archify.view.reveal(handoff.focus, { instant: true, reason: reason || 'settled' });
+        completeHandoff(handoff, reason || 'settled');
+        return true;
+      }
+
+      function cancelHandoff(reason) {
+        var handoff = currentHandoff;
+        if (!handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        if (handoff.camera && handoff.camera.cancel) handoff.camera.cancel(reason || 'manual', false);
+        completeHandoff(handoff, reason || 'manual');
+        return true;
+      }
+
+      function afterHandoff(callback) {
+        if (!currentHandoff) { callback(); return; }
+        currentHandoff.finished.then(callback);
+      }
+
+      function beginHandoff(previousIndex, nextIndex, previous, destination, outgoingBeatIndex, reason) {
+        if (!Archify.view || !Archify.view.reveal) return null;
+        if (!previous || previousIndex === nextIndex) {
+          Archify.view.reveal(destination.focus, { reason: reason });
+          return null;
+        }
+        var delta = chapterDelta(previous, destination);
+        var anchor = chapterAnchor(previous, destination, outgoingBeatIndex, delta);
+        if (!handoffMotionAllowed()) {
+          Archify.view.reveal(destination.focus, { instant: true, reason: reason });
+          return null;
+        }
+        var resolver;
+        var handoff = {
+          id: ++handoffGeneration,
+          mode: anchor ? 'holding' : 'no-anchor',
+          anchor: anchor,
+          focus: destination.focus.slice(),
+          holdTimer: null,
+          camera: null,
+          ownerToken: 0,
+          finished: new Promise(function (resolve) { resolver = resolve; }),
+          resolve: resolver
+        };
+        currentHandoff = handoff;
+        classifyHandoff(delta, anchor);
+        if (anchor) {
+          drawHandoffAnchor(anchor);
+          var node = findNode(anchor);
+          var nodeLabel = node ? (node.getAttribute('data-node-label') || anchor) : anchor;
+          handoffReceipt.textContent = (previousIndex + 1 < 10 ? '0' : '') + (previousIndex + 1) +
+            ' \u2192 ' + (nextIndex + 1 < 10 ? '0' : '') + (nextIndex + 1) + ' \u00b7 via ' + nodeLabel;
+          handoffReceipt.hidden = false;
+        }
+        if (Archify.motionGovernor) {
+          handoff.ownerToken = Archify.motionGovernor.claim('handoff', function () {
+            if (currentHandoff === handoff) settleHandoff('preempted');
+          });
+        }
+        var startCamera = function () {
+          if (currentHandoff !== handoff) return;
+          handoff.holdTimer = null;
+          handoff.mode = 'settling';
+          svg.setAttribute('data-chapter-handoff', anchor ? 'settling' : 'no-anchor');
+          handoff.camera = Archify.view.reveal(destination.focus, { reason: reason, duration: 420 });
+          if (handoff.camera && handoff.camera.finished) {
+            handoff.camera.finished.then(function (outcome) {
+              if (currentHandoff === handoff) completeHandoff(handoff, outcome && outcome.state || 'complete');
+            });
+          } else {
+            completeHandoff(handoff, 'complete');
+          }
+        };
+        if (anchor) handoff.holdTimer = setTimeout(startCamera, 110);
+        else startCamera();
+        return handoff;
+      }
+
+      function centerChapterButton(button) {
+        if (!button || !chapterList) return false;
+        var target = Math.max(0, button.offsetLeft - (chapterList.clientWidth - button.offsetWidth) / 2);
+        if (typeof chapterList.scrollTo === 'function') chapterList.scrollTo({ left: target, behavior: 'auto' });
+        else chapterList.scrollLeft = target;
+        return true;
+      }
+
+      function focusChapterButton(index) {
+        if (!chapterButtons.length) return false;
+        index = Math.max(0, Math.min(chapterButtons.length - 1, index));
+        chapterButtons.forEach(function (button, buttonIndex) {
+          button.setAttribute('tabindex', buttonIndex === index ? '0' : '-1');
+        });
+        chapterButtons[index].focus();
+        centerChapterButton(chapterButtons[index]);
+        return true;
+      }
+
+      function buildChapterIndex() {
+        chapterButtons = [];
+        chapterList.textContent = '';
+        views.forEach(function (view, index) {
+          var item = document.createElement('li');
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'guided-view-chapter';
+          button.setAttribute('data-guided-view-id', view.id);
+          button.setAttribute('aria-pressed', 'false');
+          button.setAttribute('tabindex', index === 0 ? '0' : '-1');
+          button.setAttribute('aria-label', 'Open chapter ' + (index + 1) + ' of ' + views.length + ': ' + view.label + ', ' + view.focus.length + ' stops');
+          button.title = view.label + ' — ' + (view.note || view.focus.length + ' selected nodes');
+          var position = document.createElement('span');
+          position.className = 'guided-view-chapter-index';
+          position.setAttribute('aria-hidden', 'true');
+          position.textContent = (index + 1 < 10 ? '0' : '') + (index + 1);
+          var title = document.createElement('span');
+          title.className = 'guided-view-chapter-title';
+          title.textContent = view.label;
+          var stops = document.createElement('em');
+          stops.className = 'guided-view-chapter-count';
+          stops.textContent = view.focus.length + ' stop' + (view.focus.length === 1 ? '' : 's');
+          var delta = document.createElement('span');
+          delta.className = 'guided-view-chapter-delta';
+          delta.hidden = true;
+          delta.setAttribute('aria-hidden', 'true');
+          ['stay', 'enter', 'leave'].forEach(function (kind) {
+            var value = document.createElement('span');
+            value.setAttribute('data-delta-kind', kind);
+            delta.appendChild(value);
+          });
+          button.appendChild(position);
+          button.appendChild(title);
+          button.appendChild(stops);
+          button.appendChild(delta);
+          item.appendChild(button);
+          chapterList.appendChild(item);
+          chapterButtons.push(button);
+        });
+      }
+
+      function syncChapterIndex() {
+        chapterButtons.forEach(function (button, index) {
+          var current = index === activeIndex;
+          var stops = button.querySelector('.guided-view-chapter-count');
+          var deltaLabel = button.querySelector('.guided-view-chapter-delta');
+          var position = activeIndex < 0 ? 'available' : (current ? 'current' : (index < activeIndex ? 'before' : 'after'));
+          button.setAttribute('data-chapter-position', position);
+          button.setAttribute('aria-pressed', current ? 'true' : 'false');
+          button.setAttribute('tabindex', current || (activeIndex < 0 && index === 0) ? '0' : '-1');
+          if (current) {
+            stops.hidden = false;
+            deltaLabel.hidden = true;
+            button.removeAttribute('data-chapter-delta');
+            button.setAttribute('aria-label', 'Current chapter ' + (index + 1) + ' of ' + views.length + ': ' + views[index].label + ', ' + views[index].focus.length + ' stops');
+            button.title = views[index].label + ' — current chapter, ' + views[index].focus.length + ' stops';
+          } else {
+            var delta = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+            var compact = '=' + delta.stay.length + ' +' + delta.enter.length + ' \u2212' + delta.leave.length;
+            var expanded = delta.stay.length + ' stay, ' + delta.enter.length + ' enter, ' + delta.leave.length + ' leave';
+            stops.hidden = true;
+            deltaLabel.hidden = false;
+            deltaLabel.querySelector('[data-delta-kind="stay"]').textContent = '=' + delta.stay.length;
+            deltaLabel.querySelector('[data-delta-kind="enter"]').textContent = '+' + delta.enter.length;
+            deltaLabel.querySelector('[data-delta-kind="leave"]').textContent = '\u2212' + delta.leave.length;
+            button.setAttribute('data-chapter-delta', compact);
+            button.setAttribute('aria-label', 'Open chapter ' + (index + 1) + ' of ' + views.length + ': ' + views[index].label + '. Chapter focus delta: ' + expanded);
+            button.title = views[index].label + ' — ' + compact + ' chapter focus';
+          }
+          if (current) button.setAttribute('aria-current', 'step');
+          else button.removeAttribute('aria-current');
+          if (button.parentElement) button.parentElement.setAttribute('data-chapter-position', position);
+        });
+        if (activeIndex >= 0) centerChapterButton(chapterButtons[activeIndex]);
+      }
+
+      function chapterPreviewBlocked() {
+        if (document.hidden || playing || currentHandoff) return true;
+        if (document.documentElement.getAttribute('data-embed') === 'true') return true;
+        if (window.matchMedia && window.matchMedia('print').matches) return true;
+        if (svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active')) return true;
+        if (svg.hasAttribute('data-lens-active') || svg.hasAttribute('data-legend-preview-active')) return true;
+        if (svg.hasAttribute('data-relationship-preview-active') || svg.hasAttribute('data-intent-trace-active')) return true;
+        return activeIndex < 0 && svg.hasAttribute('data-focus-active');
+      }
+
+      function clearChapterPreviewPresentation() {
+        svg.removeAttribute('data-chapter-preview');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-preview-role]'), function (node) {
+          node.removeAttribute('data-chapter-preview-role');
+        });
+        chapterButtons.forEach(function (button) { button.removeAttribute('data-preview-active'); });
+        activePreviewIndex = -1;
+        if (previewOwnerToken && Archify.motionGovernor) {
+          var token = previewOwnerToken;
+          previewOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        }
+      }
+
+      function clearChapterPreview(options) {
+        options = options || {};
+        previewGeneration += 1;
+        if (options.clearIntents !== false) {
+          pointerPreviewIntent = null;
+          focusPreviewIntent = null;
+        }
+        clearChapterPreviewPresentation();
+        return true;
+      }
+
+      function winningChapterPreviewIntent() {
+        return [pointerPreviewIntent, focusPreviewIntent].filter(function (intent) {
+          return intent && intent.index >= 0 && intent.index < views.length && intent.index !== activeIndex;
+        }).sort(function (left, right) { return right.generation - left.generation; })[0] || null;
+      }
+
+      function showChapterPreview(index) {
+        if (index < 0 || index >= views.length || index === activeIndex || chapterPreviewBlocked()) {
+          clearChapterPreviewPresentation();
+          return false;
+        }
+        if (activePreviewIndex === index && svg.getAttribute('data-chapter-preview') === views[index].id) return true;
+        clearChapterPreviewPresentation();
+        var delta = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+        var roles = {};
+        delta.stay.forEach(function (id) { roles[id] = 'stay'; });
+        delta.enter.forEach(function (id) { roles[id] = 'enter'; });
+        delta.leave.forEach(function (id) { roles[id] = 'leave'; });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var role = roles[node.getAttribute('data-node-id')];
+          if (role) node.setAttribute('data-chapter-preview-role', role);
+        });
+        svg.setAttribute('data-chapter-preview', views[index].id);
+        chapterButtons[index].setAttribute('data-preview-active', 'true');
+        activePreviewIndex = index;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          previewOwnerToken = Archify.motionGovernor.claim('chapter-preview', function () {
+            previewOwnerToken = 0;
+            clearChapterPreviewPresentation();
+          });
+        }
+        return true;
+      }
+
+      function syncChapterPreview() {
+        var intent = winningChapterPreviewIntent();
+        if (!intent || chapterPreviewBlocked()) {
+          clearChapterPreviewPresentation();
+          return false;
+        }
+        return showChapterPreview(intent.index);
+      }
+
+      function setChapterPreviewIntent(source, index) {
+        var intent = { index: index, generation: ++previewGeneration };
+        if (source === 'pointer') pointerPreviewIntent = intent;
+        else focusPreviewIntent = intent;
+        if (playing) pausePlayback();
+        return syncChapterPreview();
+      }
+
+      function clearChapterPreviewIntent(source, index) {
+        var intent = source === 'pointer' ? pointerPreviewIntent : focusPreviewIntent;
+        if (intent && (typeof index !== 'number' || intent.index === index)) {
+          if (source === 'pointer') pointerPreviewIntent = null;
+          else focusPreviewIntent = null;
+          previewGeneration += 1;
+        }
+        return syncChapterPreview();
+      }
+
+      function hoverCapable() {
+        return !!(window.matchMedia && window.matchMedia('(hover: hover)').matches);
+      }
+
+      function sharePlaybackRequested() {
+        try { return new URLSearchParams(location.search).get('play') === '1'; }
+        catch (_) { return false; }
+      }
+
+      autoplayPending = sharePlaybackRequested();
+      if (autoplayPending) {
+        document.documentElement.setAttribute('data-share-playback', 'true');
+        setAutoplayState('pending');
+      }
+
+      function setAutoplayState(state) {
+        if (state) panel.setAttribute('data-autoplay', state);
+        else panel.removeAttribute('data-autoplay');
+        renderShareCue();
+      }
+
+      function shareCueStatus(state) {
+        return {
+          pending: 'Ready',
+          playing: 'Playing',
+          complete: 'Settled',
+          interrupted: 'Paused',
+          pinned: 'Pinned',
+          'reduced-motion': 'Still'
+        }[state] || 'Ready';
+      }
+
+      function shareCueBeatCopy(state, view, stops) {
+        var total = stops.length;
+        var activeStop = storyBeatIndex >= 0 ? stops[storyBeatIndex] : null;
+        if ((state === 'playing' || state === 'interrupted') && activeStop) {
+          return 'Step ' + (storyBeatIndex + 1 < 10 ? '0' : '') + (storyBeatIndex + 1) + ' / ' +
+            (total < 10 ? '0' : '') + total + ' · ' + activeStop.textContent;
+        }
+        if (state === 'pinned' && activeStop) {
+          return storyBeatCopy(storySteps[storyBeatIndex], total);
+        }
+        if (state === 'reduced-motion' && activeStop && hashBeatMatchesCurrent()) {
+          return 'Step ' + (storyBeatIndex + 1 < 10 ? '0' : '') + (storyBeatIndex + 1) + ' / ' +
+            (total < 10 ? '0' : '') + total + ' · ' + activeStop.textContent + ' · Static moment';
+        }
+        if (state === 'complete') return total + ' steps complete · ' + (view.note || 'Path settled for reading.');
+        if (state === 'reduced-motion') return total + ' steps · Static path';
+        if (state === 'pending') return total + ' steps · Ready';
+        return view.note || view.focus.length + ' selected nodes';
+      }
+
+      function renderShareCue() {
+        if (!shareCue) return;
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var shareMode = document.documentElement.getAttribute('data-share-playback') === 'true';
+        var embedMode = document.documentElement.getAttribute('data-embed') === 'true';
+        var pinnedMode = !shareMode && embedMode && hashBeatMatchesCurrent();
+        if (pinnedMode) document.documentElement.setAttribute('data-share-moment', 'true');
+        else document.documentElement.removeAttribute('data-share-moment');
+        shareCue.hidden = !(embedMode && view && (shareMode || pinnedMode));
+        if (shareCue.hidden) return;
+        var state = pinnedMode ? 'pinned' : (panel.getAttribute('data-autoplay') || 'pending');
+        var stops = Array.prototype.slice.call(trail.querySelectorAll('[data-story-node]'));
+        var route = stops.map(function (stop, index) {
+          if (index === 0) return stop.textContent;
+          var kind = stop.getAttribute('data-story-link');
+          var separator = kind === 'forward' ? '\u2192' : (kind === 'reverse' ? '\u2190' : (kind === 'multiple' ? '\u21c4' : '\u00b7'));
+          return separator + ' ' + stop.textContent;
+        }).join(' ');
+        var beatCopy = shareCueBeatCopy(state, view, stops);
+        shareCue.setAttribute('data-state', state);
+        shareCue.setAttribute('aria-live', state === 'playing' ? 'off' : 'polite');
+        shareCueState.textContent = shareCueStatus(state);
+        shareCueCount.textContent = 'Chapter ' + (activeIndex + 1 < 10 ? '0' : '') + (activeIndex + 1) + ' / ' + (views.length < 10 ? '0' : '') + views.length;
+        shareCueLabel.textContent = view.label;
+        shareCueNote.textContent = beatCopy;
+        shareCueRoute.textContent = route;
+        shareCue.setAttribute('aria-label', shareCueStatus(state) + ' chapter ' + (activeIndex + 1) + ' of ' + views.length + ': ' + view.label + '. ' + beatCopy + '. ' + route);
+      }
+
+      function setShareCueProgress(fraction) {
+        if (!shareCueProgress) return;
+        shareCueProgress.style.animation = 'none';
+        shareCueProgress.style.setProperty('--guided-progress-start', String(Math.max(0, Math.min(1, fraction))));
+        shareCueProgress.style.transform = 'scaleX(' + Math.max(0, Math.min(1, fraction)) + ')';
+      }
+
+      function startShareCueProgress(fraction, duration) {
+        if (!shareCueProgress) return;
+        setShareCueProgress(fraction || 0);
+        void shareCueProgress.offsetWidth;
+        shareCueProgress.style.animation = 'archify-guided-progress ' + Math.max(1, duration || VIEW_INTERVAL_MS) + 'ms linear forwards';
+      }
+
+      function storyNodeLabel(node, fallback) {
+        if (!node) return fallback;
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '');
+      }
+
+      function storyEdgeKey(edge) {
+        return edge.getAttribute('data-edge-key') || (
+          edge.getAttribute('data-edge-from') + '\u0000' +
+          edge.getAttribute('data-edge-to') + '\u0000' +
+          (edge.getAttribute('data-edge-label') || '')
+        );
+      }
+
+      function uniqueStoryEdges(edgeList) {
+        var positions = {};
+        var unique = [];
+        edgeList.forEach(function (edge) {
+          var key = storyEdgeKey(edge);
+          if (!Object.prototype.hasOwnProperty.call(positions, key)) {
+            positions[key] = unique.length;
+            unique.push(edge);
+            return;
+          }
+          var index = positions[key];
+          if (!storyGeometry(unique[index]).length && storyGeometry(edge).length) unique[index] = edge;
+        });
+        return unique;
+      }
+
+      function storyStep(view, index, edgeList, byId) {
+        var id = view.focus[index];
+        var node = byId[id];
+        var previousId = index > 0 ? view.focus[index - 1] : '';
+        var forward = [];
+        var reverse = [];
+        if (previousId) {
+          edgeList.forEach(function (edge) {
+            var from = edge.getAttribute('data-edge-from');
+            var to = edge.getAttribute('data-edge-to');
+            if (from === previousId && to === id) forward.push(edge);
+            else if (from === id && to === previousId) reverse.push(edge);
+          });
+        }
+        forward = uniqueStoryEdges(forward);
+        reverse = uniqueStoryEdges(reverse);
+        var edges = forward.concat(reverse).sort(function (left, right) {
+          return edgeList.indexOf(left) - edgeList.indexOf(right);
+        });
+        var relation = index === 0 ? 'start' : (!edges.length ? 'group' : (
+          edges.length === 1 && forward.length === 1 ? 'forward' :
+          (edges.length === 1 && reverse.length === 1 ? 'reverse' : 'multiple')
+        ));
+        return {
+          index: index,
+          nodeId: id,
+          nodeLabel: storyNodeLabel(byId[id], id),
+          previousId: previousId,
+          previousLabel: previousId ? storyNodeLabel(byId[previousId], previousId) : '',
+          relation: relation,
+          edges: edges,
+          edgeKeys: edges.map(storyEdgeKey),
+          edgeLabels: edges.map(function (edge) { return edge.getAttribute('data-edge-label') || ''; }).filter(function (value, edgeIndex, values) {
+            return value && values.indexOf(value) === edgeIndex;
+          }),
+          responsibility: node ? (node.getAttribute('data-node-sublabel') || '') : '',
+          context: node ? (node.getAttribute('data-node-context') || '') : ''
+        };
+      }
+
+      function storyBeatCopy(step, total) {
+        if (!step) return '';
+        var position = (step.index + 1 < 10 ? '0' : '') + (step.index + 1);
+        var countValue = (total < 10 ? '0' : '') + total;
+        if (step.relation === 'start') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.nodeLabel + ' \u00b7 starting point';
+        if (step.relation === 'forward') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u2192 ' + step.nodeLabel;
+        if (step.relation === 'reverse') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.nodeLabel + ' \u2192 ' + step.previousLabel + ' \u00b7 reverse authored link';
+        if (step.relation === 'multiple') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u21c4 ' + step.nodeLabel + ' \u00b7 ' + step.edges.length + ' authored links';
+        return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u00b7 ' + step.nodeLabel + ' \u00b7 grouped \u00b7 no direct link';
+      }
+
+      function storyBeatAria(step, total) {
+        var prefix = 'Story beat ' + (step.index + 1) + ' of ' + total + ': ' + step.nodeLabel + '. ';
+        if (step.relation === 'start') return prefix + 'Starting point.';
+        if (step.relation === 'forward') return prefix + 'From ' + step.previousLabel + ' through one authored forward relationship.';
+        if (step.relation === 'reverse') return prefix + 'From ' + step.previousLabel + '; the authored relationship points from ' + step.nodeLabel + ' to ' + step.previousLabel + '.';
+        if (step.relation === 'multiple') return prefix + 'From ' + step.previousLabel + ' through ' + step.edges.length + ' authored relationships; shown without arbitrary motion.';
+        return prefix + 'Grouped from ' + step.previousLabel + ' with no direct authored relationship.';
+      }
+
+      function storyCaptionRouteCopy(step) {
+        if (step.relation === 'start') return step.nodeLabel + ' · Starting point';
+        if (step.relation === 'reverse') return step.previousLabel + ' ← ' + step.nodeLabel;
+        if (step.relation === 'multiple') return step.previousLabel + ' ⇄ ' + step.nodeLabel;
+        if (step.relation === 'group') return step.previousLabel + ' · ' + step.nodeLabel;
+        return step.previousLabel + ' → ' + step.nodeLabel;
+      }
+
+      function storyCaptionDetailCopy(step) {
+        var facts = [];
+        if (step.relation === 'group') facts.push('Grouped transition · no direct authored link');
+        else if (step.edgeLabels.length) facts.push(step.edgeLabels.slice(0, 3).join(' + ') + (step.edgeLabels.length > 3 ? ' +' + (step.edgeLabels.length - 3) + ' more' : ''));
+        else if (step.relation === 'reverse') facts.push('Reverse authored relationship');
+        else if (step.relation === 'multiple') facts.push(step.edges.length + ' authored relationships');
+        else if (step.relation !== 'start') facts.push('Authored relationship');
+        if (step.relation === 'reverse') facts.push('authored direction: ' + step.nodeLabel + ' → ' + step.previousLabel);
+        if (step.responsibility) facts.push(step.responsibility);
+        if (step.context) facts.push(step.context);
+        if (!facts.length) facts.push('Authored starting point');
+        return facts.join(' · ');
+      }
+
+      function renderStoryCaption(step, total, nextStep) {
+        if (!storyCaption) return;
+        if (!step) {
+          storyCaption.hidden = true;
+          storyCaption.removeAttribute('data-story-caption');
+          storyCaptionNext.hidden = true;
+          storyCaptionNextLabel.textContent = '';
+          return;
+        }
+        storyCaption.hidden = false;
+        storyCaption.setAttribute('data-story-caption', step.relation);
+        storyCaption.setAttribute('aria-live', playing ? 'off' : 'polite');
+        storyCaptionIndex.textContent = (step.index + 1 < 10 ? '0' : '') + (step.index + 1) + ' / ' + (total < 10 ? '0' : '') + total;
+        storyCaptionRoute.textContent = storyCaptionRouteCopy(step);
+        storyCaptionDetail.textContent = storyCaptionDetailCopy(step);
+        storyCaptionNext.hidden = !nextStep;
+        storyCaptionNextLabel.textContent = nextStep
+          ? ((nextStep.index + 1 < 10 ? '0' : '') + (nextStep.index + 1) + ' · ' + nextStep.nodeLabel)
+          : '';
+        storyCaption.style.animation = 'none';
+        void storyCaption.offsetWidth;
+        storyCaption.style.removeProperty('animation');
+      }
+
+      function storyMomentLink() {
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        if (!view || !step) return '';
+        var url = new URL(location.href);
+        url.searchParams.delete('play');
+        url.hash = 'view=' + encodeURIComponent(view.id) + '&beat=' + encodeURIComponent(step.nodeId);
+        return url.href;
+      }
+
+      function fallbackCopyStoryMoment(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+
+      function resetBeatLinkFeedback() {
+        if (beatLinkFeedbackTimer) clearTimeout(beatLinkFeedbackTimer);
+        beatLinkFeedbackTimer = null;
+        beatLink.removeAttribute('data-copy-state');
+        beatLinkLabel.textContent = 'Copy moment';
+      }
+
+      function syncBeatLink() {
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        var available = !!(activeIndex >= 0 && step && !currentHandoff);
+        beatLink.disabled = !available;
+        if (!beatLink.hasAttribute('data-copy-state')) beatLinkLabel.textContent = 'Copy moment';
+        var description = available
+          ? 'Copy link to current story moment: Beat ' + (step.index + 1) + ' of ' + storySteps.length + ': ' + step.nodeLabel
+          : 'Select a Story Beat to copy its exact link';
+        beatLink.setAttribute('aria-label', description);
+        beatLink.title = description;
+      }
+
+      function setBeatLinkFeedback(copied) {
+        resetBeatLinkFeedback();
+        beatLink.setAttribute('data-copy-state', copied ? 'copied' : 'failed');
+        beatLinkLabel.textContent = copied ? 'Copied' : 'Copy failed';
+        beatLink.setAttribute('aria-label', copied ? 'Moment link copied' : 'Could not copy story moment link');
+        beatLinkFeedbackTimer = setTimeout(function () {
+          resetBeatLinkFeedback();
+          syncBeatLink();
+        }, 1600);
+      }
+
+      function copyStoryMomentLink() {
+        if (playing) pausePlayback();
+        var value = storyMomentLink();
+        if (!value) return Promise.resolve(false);
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopyStoryMoment(value); })
+          : Promise.resolve(fallbackCopyStoryMoment(value));
+        return copy.then(function (copied) {
+          setBeatLinkFeedback(copied);
+          return copied;
+        });
+      }
+
+      function hashBeatMatchesCurrent() {
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        if (!view || !step) return false;
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          return params.get('view') === view.id && params.get('beat') === step.nodeId;
+        } catch (_) { return false; }
+      }
+
+      function storyMotionAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (document.documentElement.getAttribute('data-motion') !== 'live') return false;
+        if (document.documentElement.getAttribute('data-embed') === 'true' &&
+            document.documentElement.getAttribute('data-share-playback') !== 'true') return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        return !(Archify.motionGovernor && Archify.motionGovernor.isPaused());
+      }
+
+      function storyAutomaticPlaybackAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) return !Archify.motionGovernor.isPaused();
+        return true;
+      }
+
+      function clearStoryPulse(options) {
+        options = options || {};
+        storyPulseGeneration += 1;
+        Array.prototype.forEach.call(svg.querySelectorAll('.story-trail-flow[data-story-pulse]'), function (flow) {
+          flow.removeAttribute('data-story-pulse');
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-carrier-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        if (storyPulseOwnerToken && options.release !== false && Archify.motionGovernor) {
+          var token = storyPulseOwnerToken;
+          storyPulseOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        } else if (options.release === false) storyPulseOwnerToken = 0;
+      }
+
+      function pulseStoryStep(step) {
+        clearStoryPulse();
+        if (!step || (step.relation !== 'forward' && step.relation !== 'reverse') || step.edges.length !== 1 || !storyMotionAllowed()) return false;
+        var flows = Array.prototype.slice.call(svg.querySelectorAll('.story-trail-flow[data-story-beat-step="' + step.index + '"]'));
+        if (!flows.length) return false;
+        var pulseGeneration = storyPulseGeneration;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          storyPulseOwnerToken = Archify.motionGovernor.claim('story', function () {
+            clearStoryPulse({ release: false });
+          });
+        }
+        flows.forEach(function (flow) { flow.setAttribute('data-story-pulse', 'true'); });
+        if (Archify.flowTokens && typeof Archify.flowTokens.create === 'function') {
+          var edge = step.edges[0];
+          var shapes = storyGeometry(edge);
+          var carrier = shapes.length ? Archify.flowTokens.create(edge, shapes[0], {
+            className: 'story-flow-token',
+            duration: '0.78s'
+          }) : null;
+          if (carrier) {
+            var carrierOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            var carrierWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            carrierOverlay.setAttribute('class', 'story-carrier-overlay');
+            carrierOverlay.setAttribute('data-story-carrier-overlay', '');
+            carrierOverlay.setAttribute('aria-hidden', 'true');
+            if (edge.hasAttribute('transform')) carrierWrapper.setAttribute('transform', edge.getAttribute('transform'));
+            carrier.setAttribute('data-story-carrier-token', '');
+            carrier.setAttribute('data-story-beat-step', String(step.index));
+            carrierWrapper.appendChild(carrier);
+            carrierOverlay.appendChild(carrierWrapper);
+            var firstNode = svg.querySelector('[data-node-id]');
+            while (firstNode && firstNode.parentNode !== svg) firstNode = firstNode.parentNode;
+            if (firstNode) svg.insertBefore(carrierOverlay, firstNode);
+            else svg.appendChild(carrierOverlay);
+          }
+        }
+        void flows[0].getBoundingClientRect();
+        flows[0].addEventListener('animationend', function () {
+          if (pulseGeneration === storyPulseGeneration) clearStoryPulse();
+        }, { once: true });
+        return true;
+      }
+
+      function stopStoryBeatTimer(options) {
+        options = options || {};
+        storyPlaybackGeneration += 1;
+        if (storyBeatTimer && options.preserveElapsed === true && storyBeatStartedAt) {
+          storyBeatElapsedMs = Math.min(storyBeatDwellMs, storyBeatElapsedMs + Math.max(0, Date.now() - storyBeatStartedAt));
+        }
+        if (storyBeatTimer) clearTimeout(storyBeatTimer);
+        storyBeatTimer = null;
+        storyBeatStartedAt = 0;
+      }
+
+      function centerStoryStop(stop) {
+        if (!stop || !trail) return false;
+        var target = Math.max(0, stop.offsetLeft - (trail.clientWidth - stop.offsetWidth) / 2);
+        trail.scrollLeft = target;
+        return true;
+      }
+
+      function storyBeatDwell(total) {
+        return Math.max(STORY_FOLLOW_MIN_DWELL_MS, VIEW_INTERVAL_MS / Math.max(1, total));
+      }
+
+      function clearStoryFollow() {
+        storyFollowGeneration += 1;
+        svg.removeAttribute('data-story-follow');
+        panel.removeAttribute('data-story-follow');
+        panel.removeAttribute('data-story-follow-node');
+      }
+
+      function storyFrameIds(step) {
+        if (!step) return [];
+        var ids = [];
+        if (step.index > 0 && storySteps[step.index - 1]) ids.push(storySteps[step.index - 1].nodeId);
+        ids.push(step.nodeId);
+        if (step.index + 1 < storySteps.length) ids.push(storySteps[step.index + 1].nodeId);
+        return ids;
+      }
+
+      function followStoryStep(step, options) {
+        options = options || {};
+        if (!step || document.hidden) return false;
+        if (!Archify.view || typeof Archify.view.reveal !== 'function') {
+          var deferredIndex = step.index;
+          var deferredGeneration = ++storyFollowGeneration;
+          requestAnimationFrame(function () {
+            if (deferredGeneration !== storyFollowGeneration || storyBeatIndex !== deferredIndex) return;
+            if (Archify.view && typeof Archify.view.reveal === 'function') followStoryStep(step, options);
+          });
+          return true;
+        }
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        var embed = document.documentElement.getAttribute('data-embed') === 'true';
+        var explicitEmbedPlayback = document.documentElement.getAttribute('data-share-playback') === 'true';
+        if (embed && !explicitEmbedPlayback && options.linked !== true) return false;
+        var ids = storyFrameIds(step);
+        var generation = ++storyFollowGeneration;
+        svg.setAttribute('data-story-follow', step.nodeId);
+        panel.setAttribute('data-story-follow', 'moving');
+        panel.setAttribute('data-story-follow-node', step.nodeId);
+        var receipt = Archify.view.reveal(ids, {
+          reason: options.manual === true ? 'story-beat' : 'story-follow',
+          padding: 64,
+          maxScale: 1.65,
+          duration: STORY_FOLLOW_DURATION_MS,
+          instant: options.instant === true || reducedMotion() || document.documentElement.getAttribute('data-motion') !== 'live'
+        });
+        if (receipt && receipt.finished && typeof receipt.finished.then === 'function') {
+          receipt.finished.then(function (result) {
+            if (generation !== storyFollowGeneration || storyBeatIndex !== step.index) return;
+            svg.removeAttribute('data-story-follow');
+            panel.setAttribute('data-story-follow', result && result.state === 'complete' ? 'settled' : 'interrupted');
+          });
+        } else if (generation === storyFollowGeneration) {
+          panel.setAttribute('data-story-follow', 'settled');
+        }
+        return receipt;
+      }
+
+      function setStoryBeat(index, options) {
+        options = options || {};
+        var stops = Array.prototype.slice.call(trail.querySelectorAll('[data-story-node]'));
+        if (!stops.length) return false;
+        resetBeatLinkFeedback();
+        storyBeatIndex = Math.max(0, Math.min(stops.length - 1, index));
+        var nextStep = storyBeatIndex + 1 < storySteps.length ? storySteps[storyBeatIndex + 1] : null;
+        svg.setAttribute('data-story-beat', (storyBeatIndex + 1) + '/' + stops.length);
+        panel.setAttribute('data-story-beat', (storyBeatIndex + 1) + '/' + stops.length);
+        if (nextStep) {
+          svg.setAttribute('data-story-next', nextStep.nodeId);
+          panel.setAttribute('data-story-next', nextStep.nodeId);
+        } else {
+          svg.removeAttribute('data-story-next');
+          panel.removeAttribute('data-story-next');
+        }
+        function storyBeatState(step) {
+          if (step < storyBeatIndex) return 'past';
+          if (step === storyBeatIndex) return 'active';
+          if (step === storyBeatIndex + 1) return 'next';
+          return 'pending';
+        }
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-step]'), function (node) {
+          var step = Number(node.getAttribute('data-story-step'));
+          node.setAttribute('data-story-beat-state', storyBeatState(step));
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-beat-step]'), function (edge) {
+          var step = Number(edge.getAttribute('data-story-beat-step'));
+          edge.setAttribute('data-story-beat-state', storyBeatState(step));
+        });
+        stops.forEach(function (stop, step) {
+          stop.setAttribute('data-story-beat-state', storyBeatState(step));
+          if (step === storyBeatIndex) stop.setAttribute('aria-current', 'step');
+          else stop.removeAttribute('aria-current');
+        });
+        note.setAttribute('aria-live', 'off');
+        note.textContent = storyBeatCopy(storySteps[storyBeatIndex], stops.length);
+        renderStoryCaption(storySteps[storyBeatIndex], stops.length, nextStep);
+        if (options.center === true) centerStoryStop(stops[storyBeatIndex]);
+        if (options.pulse === true) pulseStoryStep(storySteps[storyBeatIndex]);
+        else clearStoryPulse();
+        if (options.follow === true) followStoryStep(storySteps[storyBeatIndex], {
+          manual: options.manual === true,
+          linked: options.linked === true,
+          instant: options.followInstant === true
+        });
+        renderShareCue();
+        syncBeatLink();
+        return true;
+      }
+
+      function settleStoryBeats() {
+        stopStoryBeatTimer();
+        clearStoryPulse();
+        clearStoryFollow();
+        resetBeatLinkFeedback();
+        storyBeatIndex = -1;
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = 0;
+        svg.removeAttribute('data-story-beat');
+        svg.removeAttribute('data-story-next');
+        panel.removeAttribute('data-story-beat');
+        panel.removeAttribute('data-story-next');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-beat-state]'), function (el) {
+          el.removeAttribute('data-story-beat-state');
+        });
+        Array.prototype.forEach.call(trail.querySelectorAll('[data-story-beat-state]'), function (stop) {
+          stop.removeAttribute('data-story-beat-state');
+          stop.removeAttribute('aria-current');
+        });
+        note.setAttribute('aria-live', 'polite');
+        if (activeIndex >= 0) note.textContent = views[activeIndex].note || views[activeIndex].focus.length + ' selected nodes';
+        renderStoryCaption(null, 0);
+        renderShareCue();
+        syncBeatLink();
+      }
 
-    <!-- Main Diagram -->
-    <div class="diagram-container">
-      <svg viewBox="0 0 820 760" role="img" aria-label="Cache Miss Request Sequence — Frontend request path with auth, cache fallback, persistence, and async trace (sequence diagram)">
-        <!-- Definitions -->
-        <defs>
-          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-default" />
-          </marker>
-          <marker id="arrowhead-emphasis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-emphasis" />
-          </marker>
-          <marker id="arrowhead-security" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-security" />
-          </marker>
-          <marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-dashed" />
-          </marker>
-          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-            <path d="M 40 0 L 0 0 0 40" class="c-grid" stroke-width="0.5"/>
-          </pattern>
-        </defs>
+      function clearStoryTrail() {
+        stopStoryBeatTimer();
+        clearStoryPulse();
+        clearStoryFollow();
+        resetBeatLinkFeedback();
+        storyBeatIndex = -1;
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = 0;
+        storySteps = [];
+        svg.removeAttribute('data-story-active');
+        svg.removeAttribute('data-story-playing');
+        svg.removeAttribute('data-story-beat');
+        svg.removeAttribute('data-story-next');
+        panel.removeAttribute('data-story-beat');
+        panel.removeAttribute('data-story-next');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-step], [data-story-beat-state]'), function (node) {
+          node.removeAttribute('data-story-step');
+          node.removeAttribute('data-story-beat-state');
+          node.style.removeProperty('--story-step');
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-story-beat-step]'), function (edge) {
+          edge.removeAttribute('data-story-beat-step');
+          edge.removeAttribute('data-story-beat-state');
+        });
+        trail.textContent = '';
+        trail.hidden = true;
+        trail.removeAttribute('aria-label');
+        renderStoryCaption(null, 0);
+        syncBeatLink();
+      }
 
-        <!-- Background Grid -->
-        <rect width="100%" height="100%" fill="url(#grid)" />
+      function storyGeometry(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
 
-        <!-- Time Segments -->
-        <rect x="48" y="150" width="724" height="145" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="62" y="168" class="t-dim" font-size="9" font-weight="600">Request</text>
+      function renderStoryTrail(view) {
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        clearStoryTrail();
+        if (!view) return;
 
-        <rect x="48" y="315" width="724" height="190" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="62" y="333" class="t-dim" font-size="9" font-weight="600">Fallback</text>
+        var nodeList = Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+        var edgeList = Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        storySteps = view.focus.map(function (_, index) { return storyStep(view, index, edgeList, byId); });
+        var labels = [];
+        storySteps.forEach(function (step, index) {
+          var id = step.nodeId;
+          var node = byId[id];
+          if (!node) return;
+          node.setAttribute('data-story-step', String(index));
+          node.style.setProperty('--story-step', String(index));
+          var nodeLabel = step.nodeLabel;
+          labels.push(nodeLabel);
+          var stop = document.createElement('button');
+          stop.type = 'button';
+          stop.className = 'guided-view-stop';
+          stop.setAttribute('data-story-node', id);
+          stop.setAttribute('data-story-index', String(index));
+          stop.setAttribute('data-story-relation', step.relation);
+          stop.setAttribute('data-story-number', (index + 1 < 10 ? '0' : '') + (index + 1));
+          if (index > 0) stop.setAttribute('data-story-link', step.relation);
+          stop.style.setProperty('--story-step', String(index));
+          stop.setAttribute('aria-label', storyBeatAria(step, storySteps.length));
+          stop.title = storyBeatCopy(step, storySteps.length);
+          stop.textContent = nodeLabel;
+          trail.appendChild(stop);
+        });
+        trail.hidden = labels.length === 0;
+        trail.setAttribute('aria-label', 'Story trail for ' + view.label + ': ' + labels.length + ' beats');
+        trail.scrollLeft = 0;
+        svg.setAttribute('data-story-active', view.id);
 
-        <rect x="48" y="525" width="724" height="140" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="62" y="543" class="t-dim" font-size="9" font-weight="600">Response + trace</text>
+        var overlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        overlay.setAttribute('class', 'story-trail-overlay');
+        overlay.setAttribute('data-story-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var copied = 0;
+        storySteps.forEach(function (step) {
+          step.edges.forEach(function (edge) {
+            var edgeBeat = step.index;
+            edge.setAttribute('data-story-beat-step', String(edgeBeat));
+            var wrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+            storyGeometry(edge).forEach(function (shape) {
+              var clone = shape.cloneNode(false);
+              clone.removeAttribute('id');
+              clone.removeAttribute('marker-start');
+              clone.removeAttribute('marker-mid');
+              clone.removeAttribute('marker-end');
+              clone.removeAttribute('aria-label');
+              clone.removeAttribute('role');
+              clone.removeAttribute('data-animate');
+              clone.removeAttribute('data-edge-from');
+              clone.removeAttribute('data-edge-to');
+              clone.removeAttribute('data-edge-key');
+              clone.removeAttribute('data-edge-id');
+              clone.removeAttribute('data-edge-label');
+              clone.setAttribute('class', 'story-trail-flow');
+              clone.setAttribute('data-story-beat-step', String(edgeBeat));
+              clone.style.setProperty('--story-step', String(edgeBeat));
+              wrapper.appendChild(clone);
+              copied += 1;
+            });
+            if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+          });
+        });
+        if (copied) {
+          var firstEdge = edgeList[0];
+          if (firstEdge && firstEdge.parentNode) firstEdge.parentNode.insertBefore(overlay, firstEdge);
+          else svg.insertBefore(overlay, svg.firstChild);
+        }
+      }
 
-        <!-- Lifelines -->
-        <path d="M 62 142 L 62 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 170 142 L 170 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 278 142 L 278 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 386 142 L 386 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 494 142 L 494 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 602 142 L 602 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
-        <path d="M 710 142 L 710 695" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>
+      function syncStoryPlayback() {
+        var shouldPlay = playing && activeIndex >= 0;
+        if (shouldPlay && svg.getAttribute('data-story-playing') !== 'true') svg.setAttribute('data-story-playing', 'true');
+        else if (!shouldPlay && svg.hasAttribute('data-story-playing')) svg.removeAttribute('data-story-playing');
+      }
 
-        <!-- Messages -->
-        <path d="M 69 185 L 163 185" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
-        <rect x="86.6" y="165" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
-        <text x="116" y="175" class="t-backend" font-size="9" text-anchor="middle">open page</text>
+      function resetProgress(fraction) {
+        fraction = Math.max(0, Math.min(1, Number(fraction) || 0));
+        progressBar.style.animation = 'none';
+        progressBar.style.setProperty('--guided-progress-start', String(fraction));
+        progressBar.style.transform = 'scaleX(' + fraction + ')';
+      }
 
-        <path d="M 177 228 L 271 228" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
-        <rect x="181.6" y="208" width="84.8" height="16" rx="3" class="c-mask"/>
-        <text x="224" y="218" class="t-backend" font-size="9" text-anchor="middle">GET /dashboard</text>
+      function startProgress(fraction, duration) {
+        resetProgress(fraction);
+        void progressBar.offsetWidth;
+        progressBar.style.animation = 'archify-guided-progress ' + Math.max(1, duration || VIEW_INTERVAL_MS) + 'ms linear forwards';
+      }
 
-        <path d="M 285 270 L 379 270" class="a-security" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
-        <rect x="300" y="250" width="64" height="16" rx="3" class="c-mask"/>
-        <text x="332" y="260" class="t-security" font-size="9" text-anchor="middle">verify JWT</text>
+      function currentStoryProgress() {
+        var total = storySteps.length;
+        if (!total || storyBeatIndex < 0) return 0;
+        var elapsed = storyBeatElapsedMs;
+        if (playing && storyBeatTimer && storyBeatStartedAt) elapsed += Math.max(0, Date.now() - storyBeatStartedAt);
+        var dwell = storyBeatDwellMs || storyBeatDwell(total);
+        return Math.max(0, Math.min(1, (storyBeatIndex + Math.min(1, elapsed / dwell)) / total));
+      }
 
-        <path d="M 379 305 L 285 305" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <rect x="302.6" y="285" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
-        <text x="332" y="295" class="t-muted" font-size="9" text-anchor="middle">claims ok</text>
+      function renderPlayback() {
+        var automaticPlaybackAllowed = storyAutomaticPlaybackAllowed();
+        panel.setAttribute('data-playing', playing ? 'true' : 'false');
+        syncStoryPlayback();
+        play.disabled = !playing && !automaticPlaybackAllowed;
+        play.setAttribute('aria-pressed', playing ? 'true' : 'false');
+        play.setAttribute('aria-label', playing ? 'Pause guided story' : (!automaticPlaybackAllowed ? 'Story playback unavailable while motion is Still' : (storyPlaybackComplete ? 'Replay guided story' : 'Play guided story')));
+        play.title = playing ? 'Pause guided story (P)' : (!automaticPlaybackAllowed ? 'Switch motion to Live to play the guided story' : (storyPlaybackComplete ? 'Replay guided story (P)' : 'Play guided story (P)'));
+        playIcon.textContent = playing ? '\u2016' : '\u25b6';
+        playLabel.textContent = playing ? 'Pause' : (storyPlaybackComplete ? 'Replay story' : 'Play story');
+        if (storyCaption && !storyCaption.hidden) storyCaption.setAttribute('aria-live', playing ? 'off' : 'polite');
+      }
 
-        <path d="M 285 354 L 487 354" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
-        <rect x="354" y="334" width="64" height="16" rx="3" class="c-mask"/>
-        <text x="386" y="344" class="t-backend" font-size="9" text-anchor="middle">read cache</text>
+      function render() {
+        var view = views[activeIndex];
+        count.textContent = activeIndex < 0 ? '0 / ' + views.length : (activeIndex + 1) + ' / ' + views.length;
+        label.textContent = view ? view.label : 'Explore this system';
+        note.setAttribute('aria-live', storyBeatIndex >= 0 ? 'off' : 'polite');
+        note.textContent = storyBeatIndex >= 0
+          ? storyBeatCopy(storySteps[storyBeatIndex], storySteps.length)
+          : (view ? (view.note || view.focus.length + ' selected nodes') : 'Step through curated paths without changing the source diagram.');
+        prev.disabled = activeIndex < 0;
+        next.disabled = activeIndex >= views.length - 1;
+        all.disabled = activeIndex < 0;
+        panel.setAttribute('data-active-view', view ? view.id : 'all');
+        syncChapterIndex();
+        renderShareCue();
+        renderPlayback();
+        syncBeatLink();
+      }
 
-        <path d="M 487 391 L 285 391" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <rect x="369" y="371" width="34" height="16" rx="3" class="c-mask"/>
-        <text x="386" y="381" class="t-muted" font-size="9" text-anchor="middle">miss</text>
+      function pausePlayback(options) {
+        options = options || {};
+        var progress = options.complete === true ? 1 : currentStoryProgress();
+        if (panel.getAttribute('data-autoplay') === 'playing') {
+          setShareCueProgress(progress);
+          setAutoplayState(options.complete === true ? 'complete' : 'interrupted');
+        }
+        stopStoryBeatTimer({ preserveElapsed: options.complete !== true });
+        clearStoryPulse();
+        clearStoryFollow();
+        playing = false;
+        storyPlaybackComplete = options.complete === true;
+        resetProgress(progress);
+        renderPlayback();
+        renderShareCue();
+      }
 
-        <path d="M 285 443 L 595 443" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
-        <rect x="374.2" y="423" width="131.60000000000002" height="16" rx="3" class="c-mask"/>
-        <text x="440" y="433" class="t-backend" font-size="9" text-anchor="middle">query profile + metrics</text>
+      function finishStoryChapter() {
+        if (!playing) return false;
+        if (storyPlaybackScope === 'chapter') {
+          pausePlayback({ complete: true });
+          return true;
+        }
+        if (activeIndex < views.length - 1) {
+          var destinationIndex = activeIndex + 1;
+          activate(destinationIndex, { playback: true });
+          afterHandoff(function () {
+            if (!playing || activeIndex !== destinationIndex) return;
+            storyBeatElapsedMs = 0;
+            setStoryBeat(0, { pulse: true, follow: true });
+            scheduleStoryPlayback();
+          });
+          return true;
+        }
+        pausePlayback({ complete: true });
+        return true;
+      }
 
-        <path d="M 595 489 L 285 489" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <rect x="423" y="469" width="34" height="16" rx="3" class="c-mask"/>
-        <text x="440" y="479" class="t-muted" font-size="9" text-anchor="middle">rows</text>
+      function scheduleStoryPlayback() {
+        var total = storySteps.length;
+        if (!playing || !total || reducedMotion()) {
+          if (playing) pausePlayback();
+          return false;
+        }
+        storyBeatDwellMs = storyBeatDwell(total);
+        if (storyBeatIndex < 0) {
+          storyBeatElapsedMs = 0;
+          setStoryBeat(0, { pulse: true, follow: true });
+        }
+        storyBeatElapsedMs = Math.max(0, Math.min(storyBeatDwellMs, storyBeatElapsedMs));
+        var remainingDwell = Math.max(1, storyBeatDwellMs - storyBeatElapsedMs);
+        var progress = (storyBeatIndex + storyBeatElapsedMs / storyBeatDwellMs) / total;
+        var remainingChapter = remainingDwell + Math.max(0, total - storyBeatIndex - 1) * storyBeatDwellMs;
+        startProgress(progress, remainingChapter);
+        if (panel.getAttribute('data-autoplay') === 'playing') startShareCueProgress(progress, remainingChapter);
+        var generation = ++storyPlaybackGeneration;
+        storyBeatStartedAt = Date.now();
+        storyBeatTimer = setTimeout(function () {
+          if (!playing || generation !== storyPlaybackGeneration) return;
+          storyBeatTimer = null;
+          storyBeatStartedAt = 0;
+          storyBeatElapsedMs = 0;
+          if (storyBeatIndex < total - 1) {
+            setStoryBeat(storyBeatIndex + 1, { pulse: true, follow: true });
+            scheduleStoryPlayback();
+          } else finishStoryChapter();
+        }, remainingDwell);
+        return true;
+      }
 
-        <path d="M 285 536 L 487 536" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
-        <rect x="356.6" y="516" width="58.800000000000004" height="16" rx="3" class="c-mask"/>
-        <text x="386" y="526" class="t-messagebus" font-size="9" text-anchor="middle">set cache</text>
+      function startPlayback() {
+        if (!storyAutomaticPlaybackAllowed()) {
+          renderPlayback();
+          return false;
+        }
+        autoplayPending = false;
+        setAutoplayState(null);
+        setShareCueProgress(0);
+        document.documentElement.removeAttribute('data-share-playback');
+        storyPlaybackScope = 'story';
+        if (storyPlaybackComplete) showAll({ updateUrl: false });
+        storyPlaybackComplete = false;
+        if (activeIndex < 0) activate(0, { playback: true });
+        playing = true;
+        renderPlayback();
+        afterHandoff(function () {
+          if (!playing) return;
+          if (storyBeatIndex >= 0) followStoryStep(storySteps[storyBeatIndex]);
+          scheduleStoryPlayback();
+        });
+        return true;
+      }
 
-        <path d="M 285 580 L 703 580" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
-        <rect x="462" y="560" width="64" height="16" rx="3" class="c-mask"/>
-        <text x="494" y="570" class="t-messagebus" font-size="9" text-anchor="middle">emit trace</text>
+      function startCurrentViewPlayback() {
+        if (document.hidden) return false;
+        autoplayPending = false;
+        document.documentElement.setAttribute('data-share-playback', 'true');
+        storyPlaybackScope = 'chapter';
+        storyPlaybackComplete = false;
+        if (activeIndex < 0) activate(0, { playback: true, updateUrl: false });
+        if (!storyAutomaticPlaybackAllowed()) {
+          var preserveMoment = hashBeatMatchesCurrent();
+          setShareCueProgress(preserveMoment && storySteps.length ? (storyBeatIndex + 1) / storySteps.length : 1);
+          setAutoplayState('reduced-motion');
+          playing = false;
+          if (preserveMoment) {
+            clearStoryPulse();
+            renderShareCue();
+          } else settleStoryBeats();
+          renderPlayback();
+          return false;
+        }
+        playing = true;
+        setAutoplayState('playing');
+        renderPlayback();
+        afterHandoff(function () {
+          if (!playing) return;
+          if (storyBeatIndex >= 0) followStoryStep(storySteps[storyBeatIndex]);
+          scheduleStoryPlayback();
+        });
+        return true;
+      }
 
-        <path d="M 271 625 L 177 625" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <rect x="197.2" y="605" width="53.6" height="16" rx="3" class="c-mask"/>
-        <text x="224" y="615" class="t-muted" font-size="9" text-anchor="middle">200 JSON</text>
+      function maybeStartSharePlayback() {
+        if (!autoplayPending || document.hidden) return false;
+        return startCurrentViewPlayback();
+      }
 
-        <path d="M 163 662 L 69 662" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <rect x="94.4" y="642" width="43.2" height="16" rx="3" class="c-mask"/>
-        <text x="116" y="652" class="t-muted" font-size="9" text-anchor="middle">render</text>
+      function togglePlayback() {
+        return playing ? (pausePlayback(), false) : startPlayback();
+      }
 
-        <!-- Activations -->
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-mask"/>
-        <rect x="165" y="220" width="10" height="448" rx="3" class="c-frontend" stroke-width="1"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-mask"/>
-        <rect x="273" y="228" width="10" height="404" rx="3" class="c-backend" stroke-width="1"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-mask"/>
-        <rect x="381" y="265" width="10" height="45" rx="3" class="c-security" stroke-width="1"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-mask"/>
-        <rect x="489" y="349" width="10" height="49" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-mask"/>
-        <rect x="597" y="438" width="10" height="58" rx="3" class="c-database" stroke-width="1"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-mask"/>
-        <rect x="705" y="575" width="10" height="55" rx="3" class="c-messagebus" stroke-width="1"/>
+      function syncStoryControlsDisabled() {
+        Array.prototype.forEach.call(trail.querySelectorAll('[data-story-node]'), function (stop) {
+          stop.disabled = !!currentHandoff;
+        });
+        syncBeatLink();
+      }
 
-        <!-- Participants -->
-        <rect x="19" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="19" y="72" width="86" height="54" rx="6" class="c-external" stroke-width="1.5"/>
-        <text x="62" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">User</text>
-        <text x="62" y="111" class="t-muted" font-size="7" text-anchor="middle">browser session</text>
-
-        <rect x="127" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="127" y="72" width="86" height="54" rx="6" class="c-frontend" stroke-width="1.5"/>
-        <text x="170" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Web App</text>
-        <text x="170" y="111" class="t-muted" font-size="7" text-anchor="middle">React UI</text>
-
-        <rect x="235" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="235" y="72" width="86" height="54" rx="6" class="c-backend" stroke-width="1.5"/>
-        <text x="278" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">API</text>
-        <text x="278" y="111" class="t-muted" font-size="7" text-anchor="middle">request handler</text>
-
-        <rect x="343" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="343" y="72" width="86" height="54" rx="6" class="c-security" stroke-width="1.5"/>
-        <text x="386" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Auth</text>
-        <text x="386" y="111" class="t-muted" font-size="7" text-anchor="middle">JWT verify</text>
-
-        <rect x="451" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="451" y="72" width="86" height="54" rx="6" class="c-database" stroke-width="1.5"/>
-        <text x="494" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Redis</text>
-        <text x="494" y="111" class="t-muted" font-size="7" text-anchor="middle">cache</text>
-
-        <rect x="559" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="559" y="72" width="86" height="54" rx="6" class="c-database" stroke-width="1.5"/>
-        <text x="602" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Postgres</text>
-        <text x="602" y="111" class="t-muted" font-size="7" text-anchor="middle">source of truth</text>
-
-        <rect x="667" y="72" width="86" height="54" rx="6" class="c-mask"/>
-        <rect x="667" y="72" width="86" height="54" rx="6" class="c-messagebus" stroke-width="1.5"/>
-        <text x="710" y="94" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Trace</text>
-        <text x="710" y="111" class="t-muted" font-size="7" text-anchor="middle">async event</text>
+      function selectStoryBeat(index) {
+        if (currentHandoff || activeIndex < 0 || index < 0 || index >= storySteps.length) return false;
+        momentRestoreGeneration += 1;
+        clearChapterPreview({ clearIntents: true });
+        if (playing) pausePlayback();
+        else {
+          stopStoryBeatTimer();
+          clearStoryPulse();
+        }
+        storyPlaybackComplete = false;
+        storyPlaybackScope = 'story';
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = storyBeatDwell(storySteps.length);
+        var view = views[activeIndex];
+        Archify.focus.setMany(view.focus, {
+          toggle: false,
+          updateUrl: false,
+          mode: 'selection',
+          label: view.label,
+          hideChip: true
+        });
+        setStoryBeat(index, { manual: true, center: true, pulse: true, follow: true });
+        resetProgress(index / storySteps.length);
+        renderPlayback();
+        return true;
+      }
 
-        <!-- Legend -->
-        <text x="150" y="686" class="t-primary" font-size="10" font-weight="600">Legend</text>
-        <path d="M 150 706 L 184 706" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
-        <text x="193" y="709" class="t-muted" font-size="8">request</text>
-        <path d="M 270 706 L 304 706" class="a-default" stroke-width="1.4" stroke-dasharray="3,5" marker-end="url(#arrowhead)"/>
-        <text x="313" y="709" class="t-muted" font-size="8">return</text>
-        <path d="M 385 706 L 419 706" class="a-security" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
-        <text x="428" y="709" class="t-muted" font-size="8">security</text>
-        <path d="M 530 706 L 564 706" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
-        <text x="573" y="709" class="t-muted" font-size="8">async trace</text>
-      </svg>
-    </div>
+      function selectStoryBeatById(id, options) {
+        options = options || {};
+        var index = storySteps.findIndex(function (step) { return step.nodeId === id; });
+        if (index < 0) return false;
+        if (playing) pausePlayback();
+        else {
+          stopStoryBeatTimer();
+          clearStoryPulse();
+        }
+        storyPlaybackComplete = false;
+        storyPlaybackScope = 'story';
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = storyBeatDwell(storySteps.length);
+        setStoryBeat(index, {
+          manual: false,
+          center: true,
+          pulse: false,
+          follow: options.follow === true,
+          linked: options.linked === true,
+          followInstant: options.followInstant === true
+        });
+        resetProgress(index / storySteps.length);
+        renderPlayback();
+        return true;
+      }
 
-    <!-- Info Cards -->
-    <div class="cards">
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot emerald"></div>
-          <h3>Happy Path</h3>
-        </div>
-        <ul>
-          <li>&bull; The main request is Web App -&gt; API -&gt; data source -&gt; response</li>
-          <li>&bull; Return messages are quieter than forward calls</li>
-          <li>&bull; Activation bars make ownership duration visible</li>
-        </ul>
-      </div>
+      function updateUrl(view) {
+        try {
+          history.replaceState(null, '', location.pathname + location.search + (view ? '#view=' + encodeURIComponent(view.id) : ''));
+        } catch (_) {}
+      }
 
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot rose"></div>
-          <h3>Policy + Fallback</h3>
-        </div>
-        <ul>
-          <li>&bull; JWT verification is colored as a security interaction</li>
-          <li>&bull; Cache miss is visible without overpowering the main path</li>
-          <li>&bull; Database access only appears after cache fallback</li>
-        </ul>
-      </div>
+      function showAll(options) {
+        options = options || {};
+        if (options.restore !== true) momentRestoreGeneration += 1;
+        clearChapterPreview({ clearIntents: true });
+        if (playing && options.playback !== true) pausePlayback();
+        if (options.playback !== true) storyPlaybackComplete = false;
+        cancelHandoff('overview');
+        activeIndex = -1;
+        renderStoryTrail(null);
+        if (options.clearFocus !== false) Archify.focus.clear({ updateUrl: false });
+        if (options.resetView !== false && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        render();
+        if (options.updateUrl !== false) updateUrl(null);
+      }
 
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot orange"></div>
-          <h3>Async Trace</h3>
-        </div>
-        <ul>
-          <li>&bull; Trace emission is dashed and secondary</li>
-          <li>&bull; It does not block the response path</li>
-          <li>&bull; The diagram separates user-facing latency from observability</li>
-        </ul>
-      </div>
-    </div>
+      function activate(index, options) {
+        options = options || {};
+        if (options.restore !== true) momentRestoreGeneration += 1;
+        if (playing && options.playback !== true) pausePlayback();
+        if (options.playback !== true) storyPlaybackComplete = false;
+        if (index < 0) { showAll(options); return true; }
+        if (index >= views.length) return false;
+        clearChapterPreview({ clearIntents: true });
+        var previousIndex = activeIndex;
+        var previous = previousIndex >= 0 ? views[previousIndex] : null;
+        var outgoingBeatIndex = storyBeatIndex;
+        cancelHandoff('replaced');
+        activeIndex = index;
+        var view = views[index];
+        Archify.focus.setMany(view.focus, {
+          toggle: false,
+          updateUrl: false,
+          mode: 'selection',
+          label: view.label,
+          hideChip: true
+        });
+        renderStoryTrail(view);
+        beginHandoff(previousIndex, index, previous, view, outgoingBeatIndex, options.playback === true ? 'playback' : 'guided');
+        syncStoryControlsDisabled();
+        render();
+        if (options.updateUrl !== false) updateUrl(view);
+        return true;
+      }
+
+      function activateById(id, options) {
+        var index = views.findIndex(function (view) { return view.id === id; });
+        return index >= 0 && activate(index, options);
+      }
+
+      prev.addEventListener('click', function () { activate(activeIndex - 1); });
+      next.addEventListener('click', function () { activate(activeIndex + 1); });
+      all.addEventListener('click', function () { showAll(); });
+      play.addEventListener('click', togglePlayback);
+      beatLink.addEventListener('click', copyStoryMomentLink);
+      trail.addEventListener('focusin', function (event) {
+        if (!event.target.closest('[data-story-node]')) return;
+        if (playing) pausePlayback();
+      });
+      trail.addEventListener('click', function (event) {
+        var stop = event.target.closest('[data-story-node]');
+        if (!stop || stop.disabled) return;
+        selectStoryBeat(Number(stop.getAttribute('data-story-index')));
+      });
+      trail.addEventListener('keydown', function (event) {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        var stop = event.target.closest('[data-story-node]');
+        if (!stop || stop.disabled) return;
+        event.preventDefault();
+        selectStoryBeat(Number(stop.getAttribute('data-story-index')));
+      });
+      chapterList.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button) return;
+        activateById(button.getAttribute('data-guided-view-id'));
+      });
+      chapterList.addEventListener('pointerover', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || !hoverCapable() || event.pointerType === 'touch') return;
+        if (event.relatedTarget && button.contains(event.relatedTarget)) return;
+        setChapterPreviewIntent('pointer', chapterButtons.indexOf(button));
+      });
+      chapterList.addEventListener('pointerout', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        clearChapterPreviewIntent('pointer', chapterButtons.indexOf(button));
+      });
+      chapterIndex.addEventListener('focusin', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button) return;
+        setChapterPreviewIntent('focus', chapterButtons.indexOf(button));
+      });
+      chapterIndex.addEventListener('focusout', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        clearChapterPreviewIntent('focus', chapterButtons.indexOf(button));
+      });
+      chapterList.addEventListener('keydown', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        var index = chapterButtons.indexOf(button);
+        if (index < 0) return;
+        var target = null;
+        if (event.key === 'ArrowRight') target = Math.min(chapterButtons.length - 1, index + 1);
+        else if (event.key === 'ArrowLeft') target = Math.max(0, index - 1);
+        else if (event.key === 'Home') target = 0;
+        else if (event.key === 'End') target = chapterButtons.length - 1;
+        if (target === null) return;
+        event.preventDefault();
+        focusChapterButton(target);
+      });
+
+      // A direct node exploration supersedes the curated view. Capture phase
+      // releases the view before the focus explorer writes its own deep link.
+      function releaseForNode(event) {
+        if (activeIndex >= 0 && event.target.closest('[data-node-id]')) {
+          pausePlayback();
+          showAll({ clearFocus: false, updateUrl: false });
+        }
+      }
+      svg.addEventListener('click', releaseForNode, true);
+      svg.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') releaseForNode(event);
+      }, true);
+
+      document.addEventListener('keydown', function (event) {
+        if (event.metaKey || event.ctrlKey || event.altKey) return;
+        if (document.documentElement.getAttribute('data-guide-open') === 'true') return;
+        var target = event.target;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
+        if (event.key === ']') {
+          event.preventDefault();
+          if (activeIndex < views.length - 1) activate(activeIndex + 1);
+        } else if (event.key === '[') {
+          event.preventDefault();
+          if (activeIndex >= 0) activate(activeIndex - 1);
+        } else if (event.key.toLowerCase() === 'p') {
+          event.preventDefault();
+          togglePlayback();
+        } else if (event.key === 'Escape' && activePreviewIndex >= 0) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          clearChapterPreview({ clearIntents: true });
+        } else if (event.key === 'Escape' && activeIndex >= 0) {
+          event.preventDefault();
+          showAll();
+        }
+      }, true);
+
+      function syncViewFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var initial = params.get('view');
+          var requestedBeat = params.get('beat');
+          var restoreGeneration = ++momentRestoreGeneration;
+          if (initial) {
+            var activated = activateById(initial, { updateUrl: false, restore: true });
+            if (!activated) {
+              showAll({ updateUrl: false, restore: true });
+              return;
+            }
+            if (requestedBeat) afterHandoff(function () {
+              if (restoreGeneration !== momentRestoreGeneration) return;
+              var latest = new URLSearchParams(location.hash.replace(/^#/, ''));
+              if (latest.get('view') !== initial || latest.get('beat') !== requestedBeat) return;
+              if (activeIndex < 0 || views[activeIndex].id !== initial) return;
+              selectStoryBeatById(requestedBeat, { linked: true, follow: true, followInstant: true });
+            });
+          } else if (params.get('focus') || params.get('relation')) {
+            activeIndex = -1;
+            render();
+          } else {
+            showAll({ updateUrl: false, restore: true });
+          }
+        } catch (_) { showAll({ updateUrl: false, restore: true }); }
+      }
+
+      window.addEventListener('hashchange', syncViewFromHash);
+      document.addEventListener('visibilitychange', function () {
+        if (document.hidden) {
+          clearChapterPreview({ clearIntents: true });
+          if (playing) pausePlayback();
+          else clearStoryPulse();
+          settleHandoff('hidden');
+        }
+        else if (!document.hidden) maybeStartSharePlayback();
+      });
+      if (window.matchMedia) {
+        var guidedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        var onGuidedMotionChange = function () {
+          if (guidedMotionQuery.matches) {
+            if (playing) pausePlayback();
+            else clearStoryPulse();
+            settleHandoff('reduced-motion');
+          }
+        };
+        if (typeof guidedMotionQuery.addEventListener === 'function') guidedMotionQuery.addEventListener('change', onGuidedMotionChange);
+        else if (typeof guidedMotionQuery.addListener === 'function') guidedMotionQuery.addListener(onGuidedMotionChange);
+      }
+      if (document.documentElement.getAttribute('data-embed') !== 'true' && typeof MutationObserver !== 'undefined' && typeof Node !== 'undefined' && svg instanceof Node && document.documentElement instanceof Node) {
+        var chapterPreviewOwnerObserver = new MutationObserver(syncChapterPreview);
+        chapterPreviewOwnerObserver.observe(svg, {
+          attributes: true,
+          attributeFilter: [
+            'data-route-picking', 'data-route-active', 'data-lens-active',
+            'data-legend-preview-active', 'data-relationship-preview-active',
+            'data-intent-trace-active', 'data-focus-active'
+          ]
+        });
+        var storyMotionObserver = new MutationObserver(function () {
+          if (document.documentElement.getAttribute('data-motion') !== 'live') clearStoryPulse();
+          renderPlayback();
+        });
+        storyMotionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-motion'] });
+      }
+      window.addEventListener('beforeprint', function () {
+        clearChapterPreview({ clearIntents: true });
+        if (playing) pausePlayback();
+        else clearStoryPulse();
+        settleHandoff('print');
+      });
+      syncViewFromHash();
+      if (autoplayPending) {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(maybeStartSharePlayback);
+        });
+      }
+
+      return {
+        count: views.length,
+        activate: activateById,
+        showAll: showAll,
+        play: startPlayback,
+        playCurrent: startCurrentViewPlayback,
+        pause: pausePlayback,
+        beatLink: storyMomentLink,
+        copyBeatLink: copyStoryMomentLink,
+        cancelHandoff: cancelHandoff,
+        settleHandoff: settleHandoff,
+        clearPreview: function () { return clearChapterPreview({ clearIntents: true }); },
+        isPlaying: function () { return playing; },
+        handoff: function () {
+          return currentHandoff ? { id: currentHandoff.id, mode: currentHandoff.mode, anchor: currentHandoff.anchor || null } : null;
+        },
+        active: function () { return activeIndex < 0 ? null : views[activeIndex].id; },
+        preview: function () { return activePreviewIndex < 0 ? null : views[activePreviewIndex].id; },
+        delta: function (id) {
+          var index = views.findIndex(function (view) { return view.id === id; });
+          if (index < 0) return null;
+          var value = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+          return { stay: value.stay.slice(), enter: value.enter.slice(), leave: value.leave.slice() };
+        },
+        beat: function () {
+          var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+          return step ? {
+            index: step.index,
+            position: step.index + 1,
+            total: storySteps.length,
+            nodeId: step.nodeId,
+            relation: step.relation,
+            edgeKeys: step.edgeKeys.slice()
+          } : null;
+        },
+        focus: function () { return activeIndex < 0 ? [] : views[activeIndex].focus.slice(); }
+      };
+    })();
+
+    /* ============================================================
+       Adaptive Reader Shell — one diagram across laptop and monitor.
+       The canonical SVG and viewBox never change. On ordinary desktop pages,
+       wide diagrams receive only enough outer width to use the available
+       height without pushing summary cards below the viewport. Mobile,
+       embed, presentation, print, and non-wide diagrams retain their own
+       established layout contracts.
+       ============================================================ */
+    Archify.readerLayout = (function () {
+      var html = document.documentElement;
+      var body = document.body;
+      var shell = document.querySelector('.container');
+      var diagram = document.querySelector('.diagram-container');
+      var svg = diagram && diagram.querySelector(':scope > svg');
+      var header = shell && shell.querySelector('.header');
+      var guided = shell && shell.querySelector('.guided-views');
+      var cards = shell && shell.querySelector('.cards');
+      var viewBox = svg && svg.viewBox && svg.viewBox.baseVal;
+      var ratio = viewBox && viewBox.height > 0 ? viewBox.width / viewBox.height : 0;
+      var frame = 0;
+      var settleFrame = 0;
+      var lastWidth = 0;
+      var WIDE_RATIO = 1.55;
+      var MIN_DESKTOP_WIDTH = 1024;
+      var MIN_READER_WIDTH = 960;
+      var MAX_READER_WIDTH = 1920;
+      var SAFE_BOTTOM_GAP = 12;
+
+      if (diagram && ratio >= WIDE_RATIO) {
+        diagram.setAttribute('data-wide-diagram', 'true');
+        html.setAttribute('data-diagram-shape', 'wide');
+      }
+
+      function number(value) {
+        var parsed = parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+      }
+      function visible(element) {
+        return Boolean(element && !element.hidden && window.getComputedStyle(element).display !== 'none');
+      }
+      function outerHeight(element) {
+        if (!visible(element)) return 0;
+        var style = window.getComputedStyle(element);
+        return element.getBoundingClientRect().height + number(style.marginTop) + number(style.marginBottom);
+      }
+      function eligible() {
+        return Boolean(
+          shell && diagram && svg && ratio >= WIDE_RATIO &&
+          window.innerWidth >= MIN_DESKTOP_WIDTH &&
+          html.getAttribute('data-embed') !== 'true' &&
+          html.getAttribute('data-present') !== 'true' &&
+          (!window.matchMedia || !window.matchMedia('print').matches)
+        );
+      }
+      function clear() {
+        html.style.removeProperty('--archify-reader-width');
+        html.removeAttribute('data-reader-layout');
+        html.removeAttribute('data-reader-overflow');
+        lastWidth = 0;
+      }
+      function chromeMetrics() {
+        var bodyStyle = window.getComputedStyle(body);
+        var diagramStyle = window.getComputedStyle(diagram);
+        return {
+          bodyX: number(bodyStyle.paddingLeft) + number(bodyStyle.paddingRight),
+          bodyY: number(bodyStyle.paddingTop) + number(bodyStyle.paddingBottom),
+          diagramX: number(diagramStyle.paddingLeft) + number(diagramStyle.paddingRight) +
+            number(diagramStyle.borderLeftWidth) + number(diagramStyle.borderRightWidth),
+          diagramY: number(diagramStyle.paddingTop) + number(diagramStyle.paddingBottom) +
+            number(diagramStyle.borderTopWidth) + number(diagramStyle.borderBottomWidth)
+        };
+      }
+      function applyWidth(width) {
+        var rounded = Math.round(width);
+        if (Math.abs(rounded - lastWidth) < 1) return false;
+        lastWidth = rounded;
+        html.style.setProperty('--archify-reader-width', rounded + 'px');
+        html.setAttribute('data-reader-layout', 'adaptive');
+        return true;
+      }
+      function settleOverflow(minWidth) {
+        if (settleFrame) cancelAnimationFrame(settleFrame);
+        settleFrame = requestAnimationFrame(function () {
+          settleFrame = 0;
+          if (!eligible() || !lastWidth) return;
+          var overflow = Math.max(
+            document.documentElement.scrollHeight,
+            document.body.scrollHeight
+          ) - window.innerHeight;
+          if (overflow > 1 && lastWidth > minWidth) {
+            applyWidth(Math.max(minWidth, lastWidth - overflow * ratio - 4));
+            html.setAttribute('data-reader-overflow', 'reduced');
+          } else if (overflow > 1) {
+            html.setAttribute('data-reader-overflow', 'authored');
+          } else {
+            html.removeAttribute('data-reader-overflow');
+          }
+        });
+      }
+      function measure() {
+        frame = 0;
+        if (!eligible()) {
+          clear();
+          return null;
+        }
+        var chrome = chromeMetrics();
+        var viewportCap = Math.max(0, window.innerWidth - chrome.bodyX);
+        var minWidth = Math.min(MIN_READER_WIDTH, viewportCap);
+        var maxWidth = Math.min(MAX_READER_WIDTH, viewportCap);
+        var fixedHeight = chrome.bodyY + chrome.diagramY + SAFE_BOTTOM_GAP +
+          outerHeight(header) + outerHeight(guided) + outerHeight(cards);
+        var availableSvgHeight = Math.max(1, window.innerHeight - fixedHeight);
+        var desiredWidth = availableSvgHeight * ratio + chrome.diagramX;
+        var width = Math.max(minWidth, Math.min(maxWidth, desiredWidth));
+        applyWidth(width);
+        settleOverflow(minWidth);
+        return {
+          ratio: ratio,
+          width: Math.round(width),
+          availableSvgHeight: Math.round(availableSvgHeight),
+          fixedHeight: Math.round(fixedHeight)
+        };
+      }
+      function schedule() {
+        if (frame) return;
+        frame = requestAnimationFrame(measure);
+      }
+
+      window.addEventListener('resize', schedule, { passive: true });
+      window.addEventListener('load', schedule, { once: true });
+      if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule).catch(function () {});
+      if (typeof ResizeObserver === 'function') {
+        var resizeObserver = new ResizeObserver(schedule);
+        [header, guided, cards].forEach(function (element) { if (element) resizeObserver.observe(element); });
+      }
+      if (typeof MutationObserver === 'function') {
+        var contentObserver = new MutationObserver(schedule);
+        if (guided) contentObserver.observe(guided, { attributes: true, childList: true, subtree: true });
+        if (cards) contentObserver.observe(cards, { attributes: true, childList: true, subtree: true });
+        contentObserver.observe(html, { attributes: true, attributeFilter: ['data-embed', 'data-present'] });
+      }
+      schedule();
+
+      return {
+        measure: measure,
+        schedule: schedule,
+        active: function () { return html.getAttribute('data-reader-layout') === 'adaptive'; },
+        receipt: function () { return { ratio: ratio, width: lastWidth }; }
+      };
+    })();
+
+    Archify.view = (function () {
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var outBtn = container.querySelector('[data-view="out"]');
+      var resetBtn = container.querySelector('[data-view="reset"]');
+      var resetDetailLabel = resetBtn.querySelector('[data-view-detail]');
+      var resetPercentLabel = resetBtn.querySelector('[data-view-percent]');
+      var inBtn = container.querySelector('[data-view="in"]');
+      var state = { scale: 1, x: 0, y: 0, mode: 'overview' };
+      var drag = null;
+      var cameraTimer = null;
+      var cameraFrame = null;
+      var cameraGeneration = 0;
+      var cameraTransaction = null;
+      var resizeFrame = 0;
+      var autoScrollUntil = 0;
+
+      var viewBox = svg.viewBox && svg.viewBox.baseVal;
+
+      function clamp() {
+        var width = svg.clientWidth || 1;
+        var height = svg.clientHeight || 1;
+        state.x = Math.min(0, Math.max(width - width * state.scale, state.x));
+        state.y = Math.min(0, Math.max(height - height * state.scale, state.y));
+      }
+      function reducedMotion() {
+        return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      }
+      function contentMetrics() {
+        if (!viewBox || viewBox.width <= 0 || viewBox.height <= 0) return null;
+        var width = svg.clientWidth || 1;
+        var height = svg.clientHeight || 1;
+        var scale = Math.min(width / viewBox.width, height / viewBox.height);
+        return {
+          width: width,
+          height: height,
+          scale: scale,
+          offsetX: (width - viewBox.width * scale) / 2,
+          offsetY: (height - viewBox.height * scale) / 2
+        };
+      }
+      function logicalViewport() {
+        var metrics = contentMetrics();
+        if (!metrics) return null;
+        var x;
+        var y;
+        var width;
+        var height;
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram')) {
+          x = viewBox.x + container.scrollLeft / metrics.scale;
+          y = viewBox.y;
+          width = Math.min(viewBox.width, Math.max(1, container.clientWidth / metrics.scale));
+          height = viewBox.height;
+        } else {
+          x = viewBox.x + ((-state.x / state.scale) - metrics.offsetX) / metrics.scale;
+          y = viewBox.y + ((-state.y / state.scale) - metrics.offsetY) / metrics.scale;
+          width = Math.min(viewBox.width, metrics.width / state.scale / metrics.scale);
+          height = Math.min(viewBox.height, metrics.height / state.scale / metrics.scale);
+        }
+        width = Math.max(1, Math.min(viewBox.width, width));
+        height = Math.max(1, Math.min(viewBox.height, height));
+        x = Math.max(viewBox.x, Math.min(viewBox.x + viewBox.width - width, x));
+        y = Math.max(viewBox.y, Math.min(viewBox.y + viewBox.height - height, y));
+        return { x: x, y: y, width: width, height: height, scale: state.scale };
+      }
+      function detailLevel() {
+        if (state.mode === 'semantic') return 'full';
+        if (state.scale >= 1.75) return 'full';
+        if (state.scale >= 1) return 'read';
+        return 'map';
+      }
+      function renderControls() {
+        var semantic = state.mode === 'semantic' && state.scale > 1.01;
+        var detail = detailLevel();
+        var percent = Math.round(state.scale * 100) + '%';
+        var levelLabel = detail === 'map' ? 'MAP ' : detail === 'read' ? 'READ ' : 'FULL ';
+        var detailHint = detail === 'map'
+          ? 'Zoom in to reveal relationship labels and node context'
+          : detail === 'read'
+            ? 'Zoom in again to reveal tags and annotations'
+            : 'Full diagram detail';
+        var resolvedLevel = (semantic ? 'AUTO ' : levelLabel).trim();
+        var showDetailLevel = resolvedLevel !== 'READ';
+        if (resetDetailLabel) {
+          resetDetailLabel.textContent = resolvedLevel;
+          resetDetailLabel.hidden = !showDetailLevel;
+        }
+        if (resetPercentLabel) resetPercentLabel.textContent = percent;
+        resetBtn.toggleAttribute('data-detail-visible', showDetailLevel);
+        resetBtn.title = (semantic ? 'Semantic camera active · ' : '') + detailHint + ' · reset view (0)';
+        resetBtn.setAttribute('aria-label', detailHint + '. Reset diagram view');
+        resetBtn.setAttribute('data-detail-level', detail);
+        container.setAttribute('data-detail-level', detail);
+        container.setAttribute('data-camera-mode', state.mode);
+        container.setAttribute('data-camera-indicator', semantic ? 'true' : 'false');
+      }
+      function apply() {
+        clamp();
+        svg.style.transform = 'translate(' + state.x + 'px,' + state.y + 'px) scale(' + state.scale + ')';
+        renderControls();
+        outBtn.disabled = state.scale <= 1;
+        inBtn.disabled = state.scale >= 3;
+        container.classList.toggle('is-pannable', state.scale > 1);
+        svg.setAttribute('data-view-scale', String(state.scale));
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+      }
+      function sampleRenderedState() {
+        var transform = '';
+        try { transform = getComputedStyle(svg).transform || ''; } catch (_) {}
+        var match = transform.match(/^matrix\(([^)]+)\)$/);
+        if (!match) return { scale: state.scale, x: state.x, y: state.y, mode: state.mode };
+        var values = match[1].split(',').map(Number);
+        if (values.length !== 6 || !values.every(Number.isFinite)) {
+          return { scale: state.scale, x: state.x, y: state.y, mode: state.mode };
+        }
+        return { scale: values[0], x: values[4], y: values[5], mode: state.mode };
+      }
+      function finishCameraTransaction(transaction, outcome) {
+        if (!transaction || transaction.settled) return false;
+        transaction.settled = true;
+        transaction.state = outcome || 'complete';
+        if (transaction.frame) cancelAnimationFrame(transaction.frame);
+        if (transaction.timer) clearTimeout(transaction.timer);
+        transaction.frame = null;
+        transaction.timer = null;
+        if (cameraTransaction === transaction) cameraTransaction = null;
+        cameraFrame = null;
+        cameraTimer = null;
+        container.classList.remove('is-camera-moving');
+        container.classList.remove('is-camera-transaction');
+        container.removeAttribute('data-camera-transaction');
+        if (Archify.focus && Archify.focus.reposition) Archify.focus.reposition();
+        transaction.resolve({ id: transaction.id, state: transaction.state });
+        return true;
+      }
+      function cameraReceipt(target, options) {
+        var resolver;
+        var transaction = {
+          id: ++cameraGeneration,
+          state: 'running',
+          target: target,
+          settled: false,
+          frame: null,
+          timer: null,
+          finished: new Promise(function (resolve) { resolver = resolve; }),
+          resolve: resolver,
+          cancel: function (reason, commitTarget) {
+            if (transaction.settled) return false;
+            if (commitTarget && transaction.target) {
+              if (Object.prototype.hasOwnProperty.call(transaction.target, 'scrollLeft')) {
+                container.scrollLeft = transaction.target.scrollLeft;
+              } else {
+                state = {
+                  scale: transaction.target.scale,
+                  x: transaction.target.x,
+                  y: transaction.target.y,
+                  mode: transaction.target.mode
+                };
+                apply();
+              }
+            }
+            return finishCameraTransaction(transaction, reason || 'cancelled');
+          }
+        };
+        return transaction;
+      }
+      function stopCameraMotion(reason, commitTarget) {
+        if (cameraTransaction && !cameraTransaction.settled) {
+          cameraTransaction.cancel(reason || 'cancelled', commitTarget === true);
+          return;
+        }
+        if (cameraTimer) clearTimeout(cameraTimer);
+        if (cameraFrame) cancelAnimationFrame(cameraFrame);
+        cameraTimer = null;
+        cameraFrame = null;
+        container.classList.remove('is-camera-moving');
+        container.classList.remove('is-camera-transaction');
+        container.removeAttribute('data-camera-transaction');
+      }
+      function interruptCamera(reason) {
+        if (Archify.guidedViews && Archify.guidedViews.cancelHandoff) {
+          Archify.guidedViews.cancelHandoff(reason || 'manual');
+        }
+        var rendered = sampleRenderedState();
+        stopCameraMotion(reason || 'manual', false);
+        state = rendered;
+        state.mode = 'manual';
+        apply();
+        renderControls();
+        if (Archify.guidedViews && Archify.guidedViews.isPlaying && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
+        }
+        if (Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: reason || 'manual' });
+        }
+      }
+      function zoom(next, options) {
+        options = options || {};
+        if (options.manual !== false) interruptCamera();
+        var previous = state.scale;
+        next = Math.max(1, Math.min(3, Math.round(next * 4) / 4));
+        if (next === previous) return;
+        var centerX = (svg.clientWidth || 1) / 2;
+        var centerY = (svg.clientHeight || 1) / 2;
+        var contentX = (centerX - state.x) / previous;
+        var contentY = (centerY - state.y) / previous;
+        state.scale = next;
+        state.x = centerX - contentX * next;
+        state.y = centerY - contentY * next;
+        apply();
+      }
+      function reset(options) {
+        options = options || {};
+        if (options.automatic !== true) interruptCamera();
+        else stopCameraMotion('reset', false);
+        state = { scale: 1, x: 0, y: 0, mode: 'overview' };
+        apply();
+      }
+      function centerAt(logicalX, logicalY, options) {
+        options = options || {};
+        logicalX = Number(logicalX);
+        logicalY = Number(logicalY);
+        var metrics = contentMetrics();
+        if (!metrics || !Number.isFinite(logicalX) || !Number.isFinite(logicalY)) return false;
+        interruptCamera();
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram')) {
+          state.scale = 1;
+          state.x = 0;
+          state.y = 0;
+          state.mode = 'manual';
+          apply();
+          var mobileTarget = (logicalX - viewBox.x) * metrics.scale - container.clientWidth / 2;
+          mobileTarget = Math.max(0, Math.min(svg.clientWidth - container.clientWidth, mobileTarget));
+          autoScrollUntil = Date.now() + 80;
+          try { container.scrollTo({ left: mobileTarget, behavior: options.instant ? 'auto' : 'smooth' }); }
+          catch (_) { container.scrollLeft = mobileTarget; }
+          return true;
+        }
+        var minimumScale = Math.max(1, Math.min(3, Number(options.minimumScale) || 1));
+        var requestedScale = Number(options.scale);
+        state.scale = Math.max(minimumScale, Math.min(3, Number.isFinite(requestedScale) ? requestedScale : state.scale));
+        var contentX = metrics.offsetX + (logicalX - viewBox.x) * metrics.scale;
+        var contentY = metrics.offsetY + (logicalY - viewBox.y) * metrics.scale;
+        state.x = metrics.width / 2 - contentX * state.scale;
+        state.y = metrics.height / 2 - contentY * state.scale;
+        state.mode = 'manual';
+        apply();
+        if (Archify.focus && Archify.focus.reposition) Archify.focus.reposition();
+        return true;
+      }
+      function semanticIds(ids, includeNeighbors) {
+        var seeds = {};
+        var wanted = {};
+        (ids || []).forEach(function (id) { seeds[id] = true; wanted[id] = true; });
+        if (includeNeighbors) {
+          Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+            var from = edge.getAttribute('data-edge-from');
+            var to = edge.getAttribute('data-edge-to');
+            if (seeds[from] || seeds[to]) { wanted[from] = true; wanted[to] = true; }
+          });
+        }
+        return wanted;
+      }
+      function boxesFor(ids, includeNeighbors) {
+        var wanted = semanticIds(ids, includeNeighbors);
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'))
+          .filter(function (node) { return wanted[node.getAttribute('data-node-id')]; })
+          .map(function (node) {
+            try { return node.getBBox(); } catch (_) { return null; }
+          })
+          .filter(Boolean);
+      }
+      function frameDesktop(ids, options) {
+        options = options || {};
+        var boxes = boxesFor(ids, options.includeNeighbors === true);
+        if (!boxes.length || !viewBox || viewBox.width <= 0 || viewBox.height <= 0) return false;
+        var svgWidth = svg.clientWidth || 1;
+        var svgHeight = svg.clientHeight || 1;
+        var contentScale = Math.min(svgWidth / viewBox.width, svgHeight / viewBox.height);
+        var contentOffsetX = (svgWidth - viewBox.width * contentScale) / 2;
+        var contentOffsetY = (svgHeight - viewBox.height * contentScale) / 2;
+        var minX = Math.min.apply(Math, boxes.map(function (box) { return box.x; }));
+        var minY = Math.min.apply(Math, boxes.map(function (box) { return box.y; }));
+        var maxX = Math.max.apply(Math, boxes.map(function (box) { return box.x + box.width; }));
+        var maxY = Math.max.apply(Math, boxes.map(function (box) { return box.y + box.height; }));
+        var bounds = {
+          x: contentOffsetX + minX * contentScale,
+          y: contentOffsetY + minY * contentScale,
+          width: Math.max(1, (maxX - minX) * contentScale),
+          height: Math.max(1, (maxY - minY) * contentScale)
+        };
+        var padding = options.padding || 48;
+        var left = padding;
+        var right = svgWidth - padding;
+        var top = padding;
+        var bottom = svgHeight - Math.max(padding, 72);
+        var containerRect = container.getBoundingClientRect();
+        var visibleTop = Math.max(0, -containerRect.top);
+        var visibleBottom = Math.min(svgHeight, window.innerHeight - containerRect.top);
+        if (visibleBottom - visibleTop >= 240) {
+          top = Math.max(top, visibleTop + padding);
+          bottom = Math.min(bottom, visibleBottom - Math.max(padding, 72));
+        }
+        var chip = document.getElementById('focus-chip');
+        if (chip && !chip.hidden) {
+          var lensEnd = chip.offsetLeft + chip.offsetWidth + 24 - (svg.offsetLeft || 0);
+          left = Math.max(left, Math.min(svgWidth * 0.42, lensEnd));
+        }
+        var routeReceipt = document.getElementById('route-probe');
+        if (routeReceipt && !routeReceipt.hidden && routeReceipt.hasAttribute('data-route-journey')) {
+          var receiptTop = routeReceipt.offsetTop;
+          var receiptBottom = receiptTop + routeReceipt.offsetHeight;
+          if (receiptTop < svgHeight / 2) top = Math.max(top, receiptBottom + 24);
+          else bottom = Math.min(bottom, receiptTop - 24);
+        }
+        if (right <= left || bottom <= top) return false;
+        var maxScale = options.maxScale || (options.includeNeighbors ? 1.9 : 2.15);
+        var targetScale = Math.min((right - left) / bounds.width, (bottom - top) / bounds.height) * 0.9;
+        targetScale = Math.max(1, Math.min(maxScale, targetScale));
+        if (targetScale < 1.08) targetScale = 1;
+        var target = {
+          scale: Math.round(targetScale * 100) / 100,
+          x: 0,
+          y: 0,
+          mode: 'semantic'
+        };
+        target.x = (left + right) / 2 - (bounds.x + bounds.width / 2) * target.scale;
+        target.y = (top + bottom) / 2 - (bounds.y + bounds.height / 2) * target.scale;
+        var start = sampleRenderedState();
+        stopCameraMotion('replaced', false);
+        var transaction = cameraReceipt(target, options);
+        cameraTransaction = transaction;
+        var instant = options.instant === true || reducedMotion() || document.hidden;
+        if (instant) {
+          state = target;
+          apply();
+          finishCameraTransaction(transaction, reducedMotion() ? 'reduced-motion' : (document.hidden ? 'hidden' : 'complete'));
+          return transaction;
+        }
+        var duration = Math.max(180, Math.min(520, Number(options.duration) || 420));
+        var startedAt = 0;
+        state = start;
+        state.mode = 'semantic';
+        apply();
+        container.classList.add('is-camera-moving');
+        container.classList.add('is-camera-transaction');
+        container.setAttribute('data-camera-transaction', String(transaction.id));
+        var step = function (timestamp) {
+          if (cameraTransaction !== transaction || transaction.settled) return;
+          if (!startedAt) startedAt = timestamp;
+          var fraction = Math.max(0, Math.min(1, (timestamp - startedAt) / duration));
+          var eased = 1 - Math.pow(1 - fraction, 3);
+          state = {
+            scale: start.scale + (target.scale - start.scale) * eased,
+            x: start.x + (target.x - start.x) * eased,
+            y: start.y + (target.y - start.y) * eased,
+            mode: 'semantic'
+          };
+          apply();
+          if (fraction < 1) {
+            transaction.frame = requestAnimationFrame(step);
+            cameraFrame = transaction.frame;
+          } else {
+            state = target;
+            apply();
+            finishCameraTransaction(transaction, 'complete');
+          }
+        };
+        transaction.frame = requestAnimationFrame(step);
+        cameraFrame = transaction.frame;
+        return transaction;
+      }
+      function reveal(ids, options) {
+        options = options || {};
+        if (window.innerWidth > 720) return frameDesktop(ids, options);
+        stopCameraMotion('replaced', false);
+        state.scale = 1;
+        state.x = 0;
+        state.y = 0;
+        state.mode = 'semantic';
+        apply();
+        if (!container.hasAttribute('data-wide-diagram')) {
+          var contained = cameraReceipt({ scale: 1, x: 0, y: 0, mode: 'semantic' }, options);
+          cameraTransaction = contained;
+          finishCameraTransaction(contained, 'complete');
+          return contained;
+        }
+        var boxes = boxesFor(ids, options.includeNeighbors === true);
+        if (!boxes.length || !viewBox || viewBox.width <= 0) return false;
+        var minX = Math.min.apply(Math, boxes.map(function (box) { return box.x; }));
+        var maxX = Math.max.apply(Math, boxes.map(function (box) { return box.x + box.width; }));
+        var center = ((minX + maxX) / 2 / viewBox.width) * (svg.clientWidth || 1);
+        var target = Math.max(0, Math.min(svg.clientWidth - container.clientWidth, center - container.clientWidth / 2));
+        var transaction = cameraReceipt({ scrollLeft: target }, options);
+        cameraTransaction = transaction;
+        var instant = options.instant === true || reducedMotion() || document.hidden;
+        autoScrollUntil = Date.now() + (instant ? 50 : 470);
+        try { container.scrollTo({ left: target, behavior: instant ? 'auto' : 'smooth' }); }
+        catch (_) { container.scrollLeft = target; }
+        if (instant) finishCameraTransaction(transaction, reducedMotion() ? 'reduced-motion' : (document.hidden ? 'hidden' : 'complete'));
+        else {
+          transaction.timer = setTimeout(function () { finishCameraTransaction(transaction, 'complete'); }, 460);
+          cameraTimer = transaction.timer;
+          container.classList.add('is-camera-moving');
+          container.setAttribute('data-camera-transaction', String(transaction.id));
+        }
+        return transaction;
+      }
+      function syncSemantic() {
+        var guided = Archify.guidedViews && typeof Archify.guidedViews.focus === 'function'
+          ? Archify.guidedViews.focus() : [];
+        if (guided && guided.length) return reveal(guided, { reason: 'guided-sync' });
+        var active = Archify.focus && typeof Archify.focus.active === 'function' ? Archify.focus.active() : null;
+        if (typeof active === 'string') return reveal([active], { includeNeighbors: true, reason: 'focus-sync' });
+        if (Array.isArray(active) && active.length) return reveal(active, { reason: 'selection-sync' });
+        return false;
+      }
+      function pinControls() {
+        container.style.setProperty('--archify-scroll-x', container.scrollLeft + 'px');
+      }
+      function onScroll() {
+        pinControls();
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram') && Date.now() > autoScrollUntil) {
+          interruptCamera();
+        }
+      }
+      function onPointerEnd(event) {
+        if (!drag) return;
+        var moved = drag.moved;
+        drag = null;
+        container.classList.remove('is-panning');
+        try { container.releasePointerCapture(event.pointerId); } catch (_) {}
+        if (moved) {
+          container.setAttribute('data-just-panned', 'true');
+          setTimeout(function () { container.removeAttribute('data-just-panned'); }, 80);
+        }
+      }
 
-  </div>
+      inBtn.addEventListener('click', function () { zoom(state.scale + 0.25); });
+      outBtn.addEventListener('click', function () { zoom(state.scale - 0.25); });
+      resetBtn.addEventListener('click', reset);
+      container.addEventListener('pointerdown', function (event) {
+        if (state.scale <= 1 || event.button !== 0 || event.target.closest('.diagram-nav, .focus-chip, .node-finder, .diagram-guide, .overview-map, .route-probe, .semantic-lens') || event.target.closest('[data-node-id]') || event.target.closest('[data-relationship-hit-key]')) return;
+        interruptCamera();
+        drag = { startX: event.clientX, startY: event.clientY, x: state.x, y: state.y, moved: false };
+        container.classList.add('is-panning');
+        try { container.setPointerCapture(event.pointerId); } catch (_) {}
+      });
+      container.addEventListener('pointermove', function (event) {
+        if (!drag) return;
+        var dx = event.clientX - drag.startX;
+        var dy = event.clientY - drag.startY;
+        if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
+        state.x = drag.x + dx;
+        state.y = drag.y + dy;
+        apply();
+      });
+      container.addEventListener('pointerup', onPointerEnd);
+      container.addEventListener('pointercancel', onPointerEnd);
+      container.addEventListener('scroll', onScroll, { passive: true });
+      window.addEventListener('resize', function () {
+        if (resizeFrame) cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(function () {
+          resizeFrame = 0;
+          if (state.mode === 'semantic') syncSemantic();
+          else apply();
+        });
+      });
+      window.addEventListener('hashchange', function () { requestAnimationFrame(syncSemantic); });
+      apply();
+      pinControls();
+      requestAnimationFrame(syncSemantic);
+
+      return {
+        zoomIn: function () { zoom(state.scale + 0.25); },
+        zoomOut: function () { zoom(state.scale - 0.25); },
+        reset: reset,
+        reveal: reveal,
+        centerAt: centerAt,
+        logicalViewport: logicalViewport,
+        sync: syncSemantic,
+        state: function () { return { scale: state.scale, x: state.x, y: state.y, mode: state.mode }; }
+      };
+    })();
 
-  <script>
     /* ============================================================
-       Theme toggle — persists to localStorage, respects system pref
+       Semantic Radar — simplified semantic bounds + live viewport.
+       The radar is built at runtime so the checked artifact still contains
+       one canonical SVG block, and export serialization remains untouched.
        ============================================================ */
-    var Archify = {};
+    Archify.radar = (function () {
+      var container = document.querySelector('.diagram-container');
+      var diagram = container.querySelector(':scope > svg');
+      var panel = document.getElementById('overview-map');
+      var surface = document.getElementById('overview-map-surface');
+      var status = document.getElementById('overview-map-status');
+      var trigger = document.getElementById('btn-overview-map');
+      var closeBtn = document.getElementById('overview-map-close');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var viewBox = diagram.viewBox && diagram.viewBox.baseVal;
+      var mapSvg = document.createElementNS(namespace, 'svg');
+      var nodeLayer = document.createElementNS(namespace, 'g');
+      var viewport = document.createElementNS(namespace, 'rect');
+      var nodes = [];
+      var drag = null;
+      var syncFrame = 0;
 
-    Archify.theme = (function () {
-      var STORAGE_KEY = 'archify-theme';
-      var html = document.documentElement;
-      var btn = document.getElementById('btn-theme');
-      var icon = document.getElementById('theme-icon');
-      var label = document.getElementById('theme-label');
+      mapSvg.setAttribute('role', 'group');
+      mapSvg.setAttribute('aria-label', 'Semantic diagram radar nodes');
+      mapSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      nodeLayer.setAttribute('class', 'overview-map-nodes');
+      viewport.setAttribute('class', 'overview-map-viewport');
+      viewport.setAttribute('rx', '3');
+      viewport.setAttribute('ry', '3');
+      mapSvg.appendChild(nodeLayer);
+      mapSvg.appendChild(viewport);
+      surface.appendChild(mapSvg);
 
-      // localStorage can throw (blocked cookies, sandboxed iframes); the whole
-      // script element dies on an uncaught error, so guard every access.
-      function readStored() {
-        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
       }
-      function writeStored(value) {
-        try { localStorage.setItem(STORAGE_KEY, value); } catch (_) {}
+      function build() {
+        if (!viewBox || viewBox.width <= 0 || viewBox.height <= 0) return false;
+        mapSvg.setAttribute('viewBox', [viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' '));
+        nodeLayer.textContent = '';
+        nodes = [];
+        Array.prototype.forEach.call(diagram.querySelectorAll('[data-node-id]'), function (node) {
+          var box;
+          try { box = node.getBBox(); } catch (_) { box = null; }
+          if (!box || box.width <= 0 || box.height <= 0) return;
+          var id = node.getAttribute('data-node-id');
+          var rect = document.createElementNS(namespace, 'rect');
+          rect.setAttribute('class', 'overview-map-node');
+          rect.setAttribute('x', String(box.x));
+          rect.setAttribute('y', String(box.y));
+          rect.setAttribute('width', String(Math.max(3, box.width)));
+          rect.setAttribute('height', String(Math.max(3, box.height)));
+          rect.setAttribute('rx', String(Math.max(2, Math.min(8, Math.min(box.width, box.height) * 0.1))));
+          rect.setAttribute('data-radar-node-id', id);
+          rect.setAttribute('data-kind', node.getAttribute('data-node-kind') || 'neutral');
+          rect.setAttribute('tabindex', '0');
+          rect.setAttribute('role', 'button');
+          rect.setAttribute('aria-label', 'Focus ' + nodeLabel(node, id) + ' from Semantic Radar');
+          nodeLayer.appendChild(rect);
+          nodes.push({ id: id, node: node, rect: rect });
+        });
+        status.textContent = nodes.length + ' nodes · full map';
+        return true;
       }
-      function urlOverride() {
-        // URL param wins (useful for deterministic screenshots / share links)
-        try {
-          var param = new URLSearchParams(window.location.search).get('theme');
-          if (param === 'light' || param === 'dark') return param;
-        } catch (_) {}
-        return null;
+      function updateDocking() {
+        if (panel.hidden) return;
+        var containerRect = container.getBoundingClientRect();
+        var intersectsWindow = containerRect.bottom > 12 && containerRect.top < window.innerHeight - 12;
+        if (!intersectsWindow) {
+          panel.removeAttribute('data-docked');
+          panel.removeAttribute('data-dock-side');
+          panel.style.removeProperty('--archify-radar-right');
+          panel.style.removeProperty('--archify-radar-left');
+          panel.style.removeProperty('--archify-radar-top');
+          return;
+        }
+        var active = diagram.querySelector('[data-focus-selected]');
+        var activeRect = active ? active.getBoundingClientRect() : null;
+        var dockLeft = !!(activeRect && activeRect.left + activeRect.width / 2 > window.innerWidth / 2);
+        var right = Math.max(16, window.innerWidth - Math.min(containerRect.right - 16, window.innerWidth - 16));
+        var left = Math.max(16, Math.min(containerRect.left + 16, window.innerWidth - panel.offsetWidth - 16));
+        var topLimit = Math.max(16, containerRect.top + 16);
+        var bottomLimit = Math.min(window.innerHeight - 16, containerRect.bottom - 16);
+        var panelLeft = dockLeft ? left : window.innerWidth - right - panel.offsetWidth;
+        var panelRight = panelLeft + panel.offsetWidth;
+        var lens = document.getElementById('focus-chip');
+        var lensRect = lens && !lens.hidden ? lens.getBoundingClientRect() : null;
+        var blockers = [activeRect, lensRect].filter(function (rect) {
+          return rect && rect.right > panelLeft && rect.left < panelRight;
+        });
+        var desiredTop = bottomLimit - panel.offsetHeight;
+        var candidates = [desiredTop, topLimit];
+        blockers.forEach(function (rect) {
+          candidates.push(rect.top - 10 - panel.offsetHeight, rect.bottom + 10);
+        });
+        var valid = candidates.filter(function (candidate) {
+          if (candidate < topLimit || candidate + panel.offsetHeight > bottomLimit) return false;
+          return blockers.every(function (rect) {
+            return candidate + panel.offsetHeight <= rect.top - 10 || candidate >= rect.bottom + 10;
+          });
+        });
+        valid.sort(function (a, b) { return Math.abs(a - desiredTop) - Math.abs(b - desiredTop); });
+        var top = valid.length ? valid[0] : Math.max(topLimit, desiredTop);
+        top = Math.min(window.innerHeight - panel.offsetHeight - 16, top);
+        panel.setAttribute('data-docked', 'true');
+        panel.setAttribute('data-dock-side', dockLeft ? 'left' : 'right');
+        panel.style.setProperty('--archify-radar-right', Math.round(right) + 'px');
+        panel.style.setProperty('--archify-radar-left', Math.round(left) + 'px');
+        panel.style.setProperty('--archify-radar-top', Math.round(Math.max(16, top)) + 'px');
       }
-
-      function resolveInitial() {
-        var fromUrl = urlOverride();
-        if (fromUrl) return fromUrl;
-        var saved = readStored();
-        if (saved === 'light' || saved === 'dark') return saved;
-        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      function syncNow() {
+        syncFrame = 0;
+        if (panel.hidden || !Archify.view || typeof Archify.view.logicalViewport !== 'function') return;
+        updateDocking();
+        var visible = Archify.view.logicalViewport();
+        if (!visible) return;
+        viewport.setAttribute('x', String(visible.x));
+        viewport.setAttribute('y', String(visible.y));
+        viewport.setAttribute('width', String(visible.width));
+        viewport.setAttribute('height', String(visible.height));
+        var full = visible.width >= viewBox.width * 0.98 && visible.height >= viewBox.height * 0.98;
+        var mobileWide = window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram');
+        var viewportCopy = full
+          ? 'full map'
+          : (mobileWide ? Math.round(visible.width / viewBox.width * 100) + '% width' : Math.round(visible.scale * 100) + '% viewport');
+        status.textContent = nodes.length + ' nodes · ' + viewportCopy;
+        nodes.forEach(function (item) {
+          var active = item.node.hasAttribute('data-focus-selected') ||
+            item.node.getAttribute('data-story-beat-state') === 'active';
+          if (active) item.rect.setAttribute('data-radar-active', 'true');
+          else item.rect.removeAttribute('data-radar-active');
+        });
       }
-
-      function apply(theme) {
-        html.setAttribute('data-theme', theme);
-        icon.textContent = theme === 'dark' ? '\u263E' : '\u263C';
-        label.textContent = theme === 'dark' ? 'Dark' : 'Light';
-        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+      function sync() {
+        if (syncFrame) return;
+        syncFrame = requestAnimationFrame(syncNow);
       }
-
-      function toggle() {
-        var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-        apply(next);
-        writeStored(next);
+      function setOpen(next, options) {
+        options = options || {};
+        next = Boolean(next);
+        if (next && Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (next && Archify.semanticLens && Archify.semanticLens.isOpen()) {
+          Archify.semanticLens.close({ restoreFocus: false });
+        }
+        panel.hidden = !next;
+        trigger.setAttribute('aria-expanded', next ? 'true' : 'false');
+        trigger.setAttribute('aria-label', next ? 'Close semantic radar' : 'Open semantic radar');
+        if (next) {
+          build();
+          updateDocking();
+          sync();
+          if (options.focus === true) surface.focus();
+        } else {
+          panel.removeAttribute('data-docked');
+          panel.removeAttribute('data-dock-side');
+          panel.style.removeProperty('--archify-radar-right');
+          panel.style.removeProperty('--archify-radar-left');
+          panel.style.removeProperty('--archify-radar-top');
+          if (options.restoreFocus === true) trigger.focus();
+        }
+        return next;
+      }
+      function toggle() { return setOpen(panel.hidden, { focus: false }); }
+      function close(options) { return setOpen(false, options); }
+      function bringNodeIntoWindow(node) {
+        var delay = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 540;
+        window.setTimeout(function () {
+          var rect = node.getBoundingClientRect();
+          var safeTop = 64;
+          var safeBottom = window.innerHeight - 64;
+          if (rect.top >= safeTop && rect.bottom <= safeBottom) return;
+          var top = Math.max(0, window.scrollY + rect.top + rect.height / 2 - window.innerHeight / 2);
+          try { window.scrollTo({ top: top, behavior: delay ? 'smooth' : 'auto' }); }
+          catch (_) { window.scrollTo(0, top); }
+        }, delay);
+      }
+      function focusNode(id) {
+        var main = diagram.querySelector('[data-node-id="' + id + '"]');
+        if (!main) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.focus && typeof Archify.focus.set === 'function') {
+          Archify.focus.set(id, { toggle: false });
+        }
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'radar' });
+        }
+        bringNodeIntoWindow(main);
+        try { main.focus({ preventScroll: true }); } catch (_) { try { main.focus(); } catch (_) {} }
+        sync();
+        return true;
+      }
+      function diagramPoint(event) {
+        var matrix = mapSvg.getScreenCTM();
+        if (!matrix) return null;
+        var point = mapSvg.createSVGPoint();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        return point.matrixTransform(matrix.inverse());
+      }
+      function navigate(event) {
+        var point = diagramPoint(event);
+        if (!point || !Archify.view || typeof Archify.view.centerAt !== 'function') return;
+        Archify.view.centerAt(point.x, point.y, { minimumScale: 1.5, instant: true });
+        sync();
+      }
+      function endDrag(event) {
+        if (!drag) return;
+        drag = null;
+        panel.removeAttribute('data-dragging');
+        container.classList.remove('is-panning');
+        try { surface.releasePointerCapture(event.pointerId); } catch (_) {}
       }
 
-      apply(resolveInitial());
-      btn.addEventListener('click', toggle);
-
-      // Follow live OS theme changes while the user has no explicit preference.
-      try {
-        var media = window.matchMedia('(prefers-color-scheme: light)');
-        var onChange = function (e) {
-          var saved = readStored();
-          if (urlOverride() || saved === 'light' || saved === 'dark') return;
-          apply(e.matches ? 'light' : 'dark');
-        };
-        if (media.addEventListener) media.addEventListener('change', onChange);
-        else if (media.addListener) media.addListener(onChange);
-      } catch (_) {}
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close({ restoreFocus: true }); });
+      surface.addEventListener('pointerdown', function (event) {
+        if (event.button !== 0 || event.target.closest('[data-radar-node-id]')) return;
+        event.preventDefault();
+        drag = { pointerId: event.pointerId };
+        panel.setAttribute('data-dragging', 'true');
+        container.classList.add('is-panning');
+        try { surface.setPointerCapture(event.pointerId); } catch (_) {}
+        navigate(event);
+      });
+      surface.addEventListener('pointermove', function (event) {
+        if (!drag || drag.pointerId !== event.pointerId) return;
+        navigate(event);
+      });
+      surface.addEventListener('pointerup', endDrag);
+      surface.addEventListener('pointercancel', endDrag);
+      surface.addEventListener('click', function (event) {
+        var node = event.target.closest('[data-radar-node-id]');
+        if (node) focusNode(node.getAttribute('data-radar-node-id'));
+      });
+      surface.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          close({ restoreFocus: true });
+          return;
+        }
+        var node = event.target.closest('[data-radar-node-id]');
+        if (node && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          focusNode(node.getAttribute('data-radar-node-id'));
+          return;
+        }
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+        var visible = Archify.view && Archify.view.logicalViewport ? Archify.view.logicalViewport() : null;
+        if (!visible) return;
+        event.preventDefault();
+        var x = visible.x + visible.width / 2;
+        var y = visible.y + visible.height / 2;
+        var stepX = Math.max(12, visible.width * 0.24);
+        var stepY = Math.max(12, visible.height * 0.24);
+        if (event.key === 'ArrowLeft') x -= stepX;
+        else if (event.key === 'ArrowRight') x += stepX;
+        else if (event.key === 'ArrowUp') y -= stepY;
+        else y += stepY;
+        Archify.view.centerAt(x, y, { minimumScale: 1.5, instant: true });
+        sync();
+      });
+      window.addEventListener('resize', sync);
+      window.addEventListener('scroll', function () { updateDocking(); sync(); }, { passive: true });
+      requestAnimationFrame(build);
 
-      return { toggle: toggle };
+      return {
+        open: function () { return setOpen(true); },
+        close: close,
+        toggle: toggle,
+        sync: sync,
+        focus: focusNode,
+        isOpen: function () { return !panel.hidden; },
+        count: function () { return nodes.length; }
+      };
     })();
 
     /* ============================================================
-       Export — PNG / JPEG / WebP / SVG (download) and Copy PNG (clipboard)
-
-       Raster exports are always rendered at 4x source resolution for
-       maximum sharpness. The trick: we set the serialized SVG's
-       `width`/`height` to viewBox * 4 so the browser rasterizes the
-       vectors at that resolution natively. drawImage then draws at
-       the image's natural size (no upscaling = no blur).
-
-       JPEG/WebP paint the current theme's background explicitly since
-       those formats have no alpha channel.
+       Presentation Stage — a shareable, viewport-filling live view.
+       It changes only HTML layout and URL state; SVG semantics and export
+       serialization remain untouched. Escape first clears an active guided
+       view/focus, then exits the stage.
        ============================================================ */
-    (function () {
-      var RASTER_SCALE = 4;
+    Archify.presentation = (function () {
+      var html = document.documentElement;
+      var btn = document.getElementById('btn-present');
+      var label = document.getElementById('present-label');
+      var previousScrollY = 0;
 
-      function diagramFilename() {
-        var title = (document.title || 'diagram')
-          .replace(/\s+Architecture(\s+Diagram)?$/i, '')
-          .replace(/\s+Diagram$/i, '')
-          .trim();
-        return title.replace(/[^a-z0-9_\-]+/gi, '-')
-                    .toLowerCase()
-                    .replace(/^-+|-+$/g, '') || 'diagram';
-      }
+      function active() { return html.getAttribute('data-present') === 'true'; }
 
-      function currentBg() {
-        return getComputedStyle(document.body).backgroundColor || '#ffffff';
+      function updateUrl(next) {
+        try {
+          var url = new URL(window.location.href);
+          if (next) url.searchParams.set('present', '1');
+          else url.searchParams.delete('present');
+          history.replaceState(null, '', url.pathname + url.search + url.hash);
+        } catch (_) {}
       }
 
-      /**
-       * Serialize the main SVG into a standalone document.
-       *
-       * Two modes:
-       * - Default (opts.autoTheme=false) — locks the serialized SVG to the
-       *   viewer's current theme. Used by the raster pipeline
-       *   (PNG/JPEG/WebP/clipboard) because canvas rasterization needs
-       *   deterministic colors; a raster cannot react to
-       *   prefers-color-scheme after encoding.
-       * - autoTheme=true — emits BOTH dark and light variable sets plus a
-       *   `@media (prefers-color-scheme)` rule so the resulting SVG
-       *   self-themes when embedded in GitHub READMEs or other hosts that
-       *   expose a color scheme. Used for "Download SVG".
-       */
-      function serializeSvg(scale, opts) {
-        // scale: integer multiplier for intrinsic SVG pixel dimensions used by
-        // the raster path. Defaults to 1 (natural size) for SVG download.
-        scale = scale || 1;
-        opts = opts || {};
-        var autoTheme = opts.autoTheme === true;
-
-        var svg = document.querySelector('.diagram-container svg');
-        var clone = svg.cloneNode(true);
-
-        var vb = svg.viewBox.baseVal;
-        // Scale width/height so the browser rasterizes the vectors at target
-        // resolution directly. viewBox stays unchanged so coordinates don't
-        // shift. This is the key to sharp rasters — do NOT scale later via
-        // canvas upscaling.
-        clone.setAttribute('width', vb.width * scale);
-        clone.setAttribute('height', vb.height * scale);
-        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      function render(next) {
+        btn.setAttribute('aria-pressed', next ? 'true' : 'false');
+        btn.setAttribute('aria-label', next ? 'Exit presentation stage' : 'Enter presentation stage');
+        btn.title = next ? 'Exit presentation stage (F or Escape)' : 'Presentation stage (F)';
+        label.textContent = next ? 'Exit' : 'Present';
+      }
 
-        // Only the SVG-relevant rules: semantic classes, markers, and the
-        // theme variable blocks. Toolbar/cards/print CSS can never apply
-        // inside a standalone SVG and would only bloat the export.
-        var hostStyle = (function () {
-          var out = [];
-          Array.prototype.forEach.call(document.styleSheets, function (sheet) {
-            var rules;
-            try { rules = sheet.cssRules; } catch (_) { return; } // cross-origin
-            if (!rules) return;
-            Array.prototype.forEach.call(rules, function (rule) {
-              if (rule.type !== 1) return; // plain style rules only
-              var sel = rule.selectorText || '';
-              if (/(^|,)\s*(svg|:root|\[data-theme|\.c-|\.t-|\.a-|\.m-)/.test(sel)) {
-                out.push(rule.cssText);
-              }
+      function setActive(next, options) {
+        options = options || {};
+        next = Boolean(next);
+        if (next === active()) {
+          render(next);
+          return next;
+        }
+        if (next) {
+          if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+          previousScrollY = window.scrollY || 0;
+          html.setAttribute('data-present', 'true');
+          try { window.scrollTo(0, 0); } catch (_) {}
+        } else {
+          html.removeAttribute('data-present');
+        }
+        render(next);
+        if (options.updateUrl !== false) updateUrl(next);
+        requestAnimationFrame(function () {
+          if (Archify.view && typeof Archify.view.reset === 'function') {
+            Archify.view.reset({ automatic: true });
+            requestAnimationFrame(function () {
+              if (Archify.view && typeof Archify.view.sync === 'function') Archify.view.sync();
             });
-          });
-          return out.join('\n');
-        })();
-
-        // Derive the variable list from the stylesheet so newly added theme
-        // variables can never be missed by the export pipeline again
-        // (--lane-fill/--lane-stroke once were).
-        var varNames = (function () {
-          var seen = {};
-          var names = [];
-          (hostStyle.match(/--[a-zA-Z0-9-]+(?=\s*:)/g) || []).forEach(function (n) {
-            if (!seen[n]) { seen[n] = true; names.push(n); }
-          });
-          return names;
-        })();
-
-        // Resolve the full variable set for a given data-theme via an
-        // off-DOM probe, independent of what the viewer is currently set to.
-        function resolveVars(themeAttr) {
-          var probe = document.createElement('div');
-          probe.setAttribute('data-theme', themeAttr);
-          probe.style.cssText = 'position:absolute;width:0;height:0;visibility:hidden;';
-          document.body.appendChild(probe);
-          try {
-            var c = getComputedStyle(probe);
-            return varNames.map(function (n) {
-              return n + ': ' + c.getPropertyValue(n).trim() + ';';
-            }).join(' ');
-          } finally {
-            document.body.removeChild(probe);
           }
-        }
-
-        // 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.
-        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'); }";
-        }).join('\n');
+          if (!next && previousScrollY) {
+            try { window.scrollTo(0, previousScrollY); } catch (_) {}
+          }
+        });
+        return next;
+      }
 
-        var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-        var bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        bgRect.setAttribute('width', '100%');
-        bgRect.setAttribute('height', '100%');
+      function toggle() { return setActive(!active()); }
 
-        if (autoTheme) {
-          // Dual-theme SVG. Dark is the default (so hosts without
-          // prefers-color-scheme still render), light swaps in via media
-          // query, and svg[data-theme="..."] still lets downstream
-          // consumers force a specific theme.
-          var darkVars = resolveVars('dark');
-          var lightVars = resolveVars('light');
+      render(active());
+      btn.addEventListener('click', toggle);
 
-          style.textContent =
-            fontFallback + "\n" +
-            "svg { 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" +
-            hostStyle + "\n" +
-            ":root, svg { " + darkVars + " }\n" +
-            "@media (prefers-color-scheme: light) { :root, svg { " + lightVars + " } }\n" +
-            "svg[data-theme=\"light\"] { " + lightVars + " }\n" +
-            "svg[data-theme=\"dark\"] { " + darkVars + " }\n" +
-            "rect.c-bg-rect { fill: var(--bg); }\n";
+      return {
+        enter: function () { return setActive(true); },
+        exit: function () { return setActive(false); },
+        toggle: toggle,
+        active: active
+      };
+    })();
 
-          // Don't lock the serialized SVG to the viewer's current theme.
-          clone.removeAttribute('data-theme');
-          // Background follows the CSS variable, not a fixed color, so it
-          // swaps with the media query.
-          bgRect.setAttribute('class', 'c-bg-rect');
-        } else {
-          // Raster path: lock to the viewer's current theme.
-          var theme = document.documentElement.getAttribute('data-theme') || 'dark';
-          var themeHost = document.querySelector('[data-theme="' + theme + '"]') || document.documentElement;
-          var computed = getComputedStyle(themeHost);
-          var vars = varNames.map(function (n) {
-            return n + ': ' + computed.getPropertyValue(n).trim() + ';';
-          }).join(' ');
+    /* ============================================================
+       Node Finder — stable-ID search over the existing semantic SVG.
+       Search never changes the IR or SVG geometry: selecting a result resets
+       the viewport, releases a guided view, and delegates to semantic focus.
+       ============================================================ */
+    Archify.finder = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var trigger = document.getElementById('btn-node-finder');
+      var panel = document.getElementById('node-finder');
+      var heading = document.getElementById('node-finder-title');
+      var closeBtn = document.getElementById('node-finder-close');
+      var input = document.getElementById('node-finder-input');
+      var results = document.getElementById('node-finder-results');
+      var empty = document.getElementById('node-finder-empty');
+      var status = document.getElementById('node-finder-status');
+      var visibleItems = [];
 
-          // IMPORTANT: inject the resolved variables AFTER hostStyle,
-          // otherwise hostStyle's ":root, [data-theme=\"dark\"] { ... }" rule
-          // overrides our chosen theme via later-in-cascade equal-specificity.
-          // Keep this order.
-          style.textContent =
-            fontFallback + "\n" +
-            "svg { 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" +
-            hostStyle + "\n" +
-            ":root, svg { " + vars + " }\n";
+      function defaultContext() {
+        return {
+          kind: 'focus',
+          title: 'Find a node',
+          placeholder: 'Search labels or IDs',
+          empty: 'No matching nodes',
+          resultsLabel: 'Diagram nodes',
+          availableNoun: 'nodes',
+          allowedIds: null,
+          badges: null
+        };
+      }
 
-          bgRect.setAttribute('fill', computed.getPropertyValue('--bg').trim() || '#ffffff');
-        }
+      var context = defaultContext();
 
-        clone.insertBefore(style, clone.firstChild);
-        clone.insertBefore(bgRect, style.nextSibling);
+      function semanticType(node) {
+        var authored = node.getAttribute('data-node-kind');
+        if (authored) return authored;
+        var types = ['frontend', 'backend', 'database', 'cloud', 'security', 'messagebus', 'external'];
+        return types.find(function (type) { return node.querySelector('.c-' + type); }) || 'node';
+      }
+
+      function connectionsFor(id) {
+        var count = 0;
+        var seen = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = from + '\u0000' + to;
+          if ((from === id || to === id) && !seen[key]) {
+            seen[key] = true;
+            count += 1;
+          }
+        });
+        return count;
+      }
 
+      var items = Array.prototype.map.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+        var id = node.getAttribute('data-node-id');
+        var label = node.getAttribute('data-node-label') || (node.getAttribute('aria-label') || id).replace(/^Focus\s+/, '');
+        var text = (node.textContent || '').replace(/\s+/g, ' ').trim();
+        var sublabel = node.getAttribute('data-node-sublabel') || '';
+        var context = node.getAttribute('data-node-context') || '';
+        var tag = node.getAttribute('data-node-tag') || '';
+        var type = semanticType(node);
+        var sources = Archify.sourceEvidence.node(id);
+        var sourceSearch = sources.map(function (source) {
+          return [source.path, source.label, source.line, source.endLine].filter(Boolean).join(' ');
+        }).join(' ');
         return {
-          svgString: new XMLSerializer().serializeToString(clone),
-          width: vb.width * scale,
-          height: vb.height * scale
+          id: id,
+          label: label,
+          type: type,
+          sublabel: sublabel,
+          context: context,
+          tag: tag,
+          sources: sources,
+          links: connectionsFor(id),
+          search: (id + ' ' + label + ' ' + type + ' ' + sublabel + ' ' + context + ' ' + tag + ' ' + sourceSearch + ' ' + text).toLowerCase(),
+          node: node
         };
+      });
+
+      function resultButtons() {
+        return Array.prototype.slice.call(results.querySelectorAll('.node-finder-result'));
       }
 
-      function download(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
+      function resolveContext(options) {
+        var requested = options && options.context ? options.context : null;
+        if (!requested && Archify.routeProbe && typeof Archify.routeProbe.finderContext === 'function') {
+          requested = Archify.routeProbe.finderContext();
+        }
+        if (!requested) return defaultContext();
+        var resolved = defaultContext();
+        Object.keys(requested).forEach(function (key) { resolved[key] = requested[key]; });
+        return resolved;
       }
 
-      // Conservative upper bound on total canvas pixels. Older Safari on iOS
-      // silently produces a blank canvas above ~16 Mpx; Chrome / Firefox /
-      // desktop Safari are far higher but start failing on memory-constrained
-      // devices. We pick the largest integer scale in {4,3,2,1} whose target
-      // pixel count fits under this cap.
-      var MAX_CANVAS_PIXELS = 16 * 1024 * 1024;
+      function availableItems() {
+        if (!context.allowedIds) return items.slice();
+        return items.filter(function (item) { return context.allowedIds.indexOf(item.id) !== -1; });
+      }
 
-      function pickSafeScale(vbW, vbH) {
-        for (var s = RASTER_SCALE; s >= 1; s--) {
-          if (vbW * s * vbH * s <= MAX_CANVAS_PIXELS) return s;
+      function applyContext() {
+        panel.setAttribute('data-context', context.kind);
+        heading.textContent = context.title;
+        input.placeholder = context.placeholder;
+        empty.textContent = context.empty;
+        results.setAttribute('aria-label', context.resultsLabel);
+      }
+
+      function select(id) {
+        var item = items.find(function (candidate) { return candidate.id === id; });
+        if (!item) return false;
+        var routeSelection = context.kind === 'route-source' || context.kind === 'route-target';
+        if (routeSelection) {
+          if (!Archify.routeProbe || typeof Archify.routeProbe.choose !== 'function' || !Archify.routeProbe.choose(id)) return false;
+          if (Archify.routeProbe.active() === 'target' && Archify.view && typeof Archify.view.reveal === 'function') {
+            Archify.view.reveal([id], { includeNeighbors: true, reason: 'route-pick' });
+          }
+          close({ restoreFocus: false });
+          try { item.node.focus({ preventScroll: true }); } catch (_) { try { item.node.focus(); } catch (_) {} }
+          return true;
         }
-        return 1;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.view && typeof Archify.view.reset === 'function') Archify.view.reset({ automatic: true });
+        Archify.focus.set(id, { toggle: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'finder' });
+        }
+        close({ restoreFocus: false });
+        try { item.node.focus({ preventScroll: true }); } catch (_) { try { item.node.focus(); } catch (_) {} }
+        return true;
       }
 
-      function rasterize(format) {
-        // Serialize at a safe scale (RASTER_SCALE=4 by default, reduced if the
-        // resulting canvas would exceed MAX_CANVAS_PIXELS). The SVG itself is
-        // rasterized at target resolution natively; drawImage draws at natural
-        // size — no upsampling blur.
-        var svg = document.querySelector('.diagram-container svg');
-        var vb = svg.viewBox.baseVal;
-        var scale = pickSafeScale(vb.width, vb.height);
-        var data = serializeSvg(scale);
-        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
-        var svgUrl = URL.createObjectURL(svgBlob);
+      function render(query) {
+        query = (query || '').trim().toLowerCase();
+        var available = availableItems();
+        visibleItems = available.filter(function (item) { return !query || item.search.indexOf(query) !== -1; });
+        results.textContent = '';
+        visibleItems.forEach(function (item) {
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'node-finder-result';
+          button.setAttribute('data-node-id', item.id);
+          var badge = context.badges && context.badges[item.id]
+            ? context.badges[item.id]
+            : context.kind === 'focus'
+              ? item.links + (item.links === 1 ? ' link' : ' links')
+              : String(item.links);
+          var action = context.kind === 'route-source'
+            ? 'Choose ' + item.label + ' as route start'
+            : context.kind === 'route-target'
+              ? 'Choose ' + item.label + ' as route destination, ' + badge
+              : 'Focus ' + item.label + ', ' + item.links + ' related connection' + (item.links === 1 ? '' : 's');
+          button.setAttribute('aria-label', action);
 
-        return new Promise(function (resolve, reject) {
-          var img = new Image();
-          img.onload = function () {
-            var canvas = document.createElement('canvas');
-            canvas.width = data.width;
-            canvas.height = data.height;
-            var ctx = canvas.getContext('2d');
-            if (format === 'jpeg') {
-              ctx.fillStyle = currentBg();
-              ctx.fillRect(0, 0, canvas.width, canvas.height);
-            }
-            // Draw at natural size — SVG was already rasterized at target res.
-            ctx.drawImage(img, 0, 0);
-            URL.revokeObjectURL(svgUrl);
-            var mime = format === 'jpeg' ? 'image/jpeg' :
-                       format === 'webp' ? 'image/webp' : 'image/png';
-            var quality = format === 'png' ? undefined : 0.95;
-            canvas.toBlob(function (blob) {
-              if (!blob) reject(new Error('toBlob returned null for ' + format));
-              else resolve(blob);
-            }, mime, quality);
+          var name = document.createElement('strong');
+          name.textContent = item.label;
+          var links = document.createElement('em');
+          links.textContent = badge;
+          links.title = context.kind === 'focus' ? badge : action;
+          var meta = document.createElement('small');
+          meta.textContent = [item.type, item.id, item.sublabel, item.tag].filter(Boolean).join(' \u00b7 ');
+          meta.title = [item.type, item.id, item.context, item.sublabel, item.tag].filter(Boolean).join(' \u00b7 ');
+          button.appendChild(name);
+          button.appendChild(links);
+          button.appendChild(meta);
+          button.addEventListener('click', function () { select(item.id); });
+          results.appendChild(button);
+        });
+        empty.hidden = visibleItems.length !== 0;
+        status.textContent = query
+          ? visibleItems.length + ' of ' + available.length + ' ' + context.availableNoun
+          : available.length + ' ' + context.availableNoun;
+      }
+
+      function open(options) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        context = resolveContext(options || {});
+        applyContext();
+        panel.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        if (context.kind.indexOf('route-') === 0 && Archify.routeProbe && typeof Archify.routeProbe.finderOpening === 'function') {
+          Archify.routeProbe.finderOpening();
+        }
+        input.value = '';
+        render('');
+        requestAnimationFrame(function () { input.focus(); });
+        return true;
+      }
+
+      function close(options) {
+        options = options || {};
+        var routeContext = context.kind.indexOf('route-') === 0;
+        panel.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        input.value = '';
+        if (routeContext && Archify.routeProbe && typeof Archify.routeProbe.finderClosed === 'function') {
+          Archify.routeProbe.finderClosed({ restoreFocus: options.restoreFocus !== false });
+        } else if (options.restoreFocus !== false) {
+          trigger.focus();
+        }
+      }
+
+      function toggle() { return panel.hidden ? open() : (close(), false); }
+
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close(); });
+      input.addEventListener('input', function () { render(input.value); });
+      input.addEventListener('keydown', function (event) {
+        var buttons = resultButtons();
+        if (event.key === 'ArrowDown' && buttons.length) {
+          event.preventDefault();
+          buttons[0].focus();
+        } else if (event.key === 'Enter' && visibleItems.length) {
+          event.preventDefault();
+          select(visibleItems[0].id);
+        }
+      });
+      results.addEventListener('keydown', function (event) {
+        var buttons = resultButtons();
+        var index = buttons.indexOf(document.activeElement);
+        if (index < 0 || !buttons.length) return;
+        var next = null;
+        if (event.key === 'ArrowDown') next = (index + 1) % buttons.length;
+        else if (event.key === 'ArrowUp') next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = buttons.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          buttons[next].focus();
+        }
+      });
+      panel.addEventListener('keydown', function (event) {
+        if (event.key !== 'Escape') return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+      });
+      document.addEventListener('click', function (event) {
+        if (!panel.hidden && !panel.contains(event.target) && !event.target.closest('[data-node-finder-trigger]')) close({ restoreFocus: false });
+      });
+
+      render('');
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        select: select,
+        isOpen: function () { return !panel.hidden; },
+        context: function () { return context.kind; },
+        count: items.length
+      };
+    })();
+
+    /* ============================================================
+       Route Probe — shortest directed path over compiled semantics.
+       The graph is read from renderer-owned stable IDs and relationship
+       endpoints. BFS order follows authored DOM edge order, so equal-length
+       choices are deterministic without adding weights or a graph runtime.
+       ============================================================ */
+    Archify.routeProbe = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-route-probe');
+      var panel = document.getElementById('route-probe');
+      var title = document.getElementById('route-probe-title');
+      var path = document.getElementById('route-probe-path');
+      var status = document.getElementById('route-probe-status');
+      var findBtn = document.getElementById('route-probe-find');
+      var copyBtn = document.getElementById('route-probe-copy');
+      var clearBtn = document.getElementById('route-probe-clear');
+      var journeyControls = document.getElementById('route-journey-controls');
+      var journeyPrevBtn = document.getElementById('route-journey-prev');
+      var journeyPlayBtn = document.getElementById('route-journey-play');
+      var journeyPlayIcon = document.getElementById('route-journey-play-icon');
+      var journeyPlayLabel = document.getElementById('route-journey-play-label');
+      var journeyNextBtn = document.getElementById('route-journey-next');
+      var journeyOverviewBtn = document.getElementById('route-journey-overview');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var mode = 'idle';
+      var startId = null;
+      var endId = null;
+      var activeNodeIds = [];
+      var activeEdges = [];
+      var journeyIndex = -1;
+      var journeyPlaying = false;
+      var journeyComplete = false;
+      var journeyGeneration = 0;
+      var journeyTimer = null;
+      var journeyStartedAt = 0;
+      var journeyElapsedMs = 0;
+      var journeyOwnerToken = 0;
+      var JOURNEY_DWELL_MS = 1100;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodesById() {
+        var out = Object.create(null);
+        nodes().forEach(function (node) { out[node.getAttribute('data-node-id')] = node; });
+        return out;
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
+      }
+      function exportSnapshot() {
+        if (mode !== 'result' || activeNodeIds.length < 2 || activeEdges.length !== activeNodeIds.length - 1) return null;
+        var allNodes = nodes();
+        var byId = nodesById();
+        var seenNodeIds = Object.create(null);
+        var seenEdgeKeys = Object.create(null);
+        if (startId !== activeNodeIds[0] || endId !== activeNodeIds[activeNodeIds.length - 1] ||
+            activeNodeIds.some(function (id) {
+              if (seenNodeIds[id] || allNodes.filter(function (node) {
+                return node.getAttribute('data-node-id') === id;
+              }).length !== 1) return true;
+              seenNodeIds[id] = true;
+              return !byId[id];
+            }) ||
+            activeEdges.some(function (edge, index) {
+              if (!edge || !svg.contains(edge)) return true;
+              var edgeKey = edge.getAttribute('data-edge-key');
+              var edgeId = edge.getAttribute('data-edge-id') || '';
+              if (!edgeKey || seenEdgeKeys[edgeKey]) return true;
+              seenEdgeKeys[edgeKey] = true;
+              var fragments = Array.prototype.slice.call(svg.querySelectorAll('[data-edge-key]')).filter(function (candidate) {
+                return candidate.getAttribute('data-edge-key') === edgeKey;
+              });
+              var drawableFragments = fragments.filter(hasDrawableGeometry);
+              return !fragments.length || !fragments.every(function (fragment) {
+                return fragment.getAttribute('data-edge-from') === activeNodeIds[index] &&
+                  fragment.getAttribute('data-edge-to') === activeNodeIds[index + 1] &&
+                  (fragment.getAttribute('data-edge-id') || '') === edgeId;
+              }) || drawableFragments.length !== 1 || drawableFragments[0] !== edge ||
+                edge.getAttribute('data-edge-from') !== activeNodeIds[index] ||
+                edge.getAttribute('data-edge-to') !== activeNodeIds[index + 1];
+            })) return null;
+        return {
+          source: { id: startId, label: nodeLabel(byId[startId], startId) },
+          target: { id: endId, label: nodeLabel(byId[endId], endId) },
+          nodeIds: activeNodeIds.slice(),
+          hops: activeEdges.length,
+          edges: activeEdges.map(function (edge) {
+            return {
+              key: edge.getAttribute('data-edge-key'),
+              id: edge.getAttribute('data-edge-id') || '',
+              from: edge.getAttribute('data-edge-from'),
+              to: edge.getAttribute('data-edge-to'),
+              label: edge.getAttribute('data-edge-label') || ''
+            };
+          })
+        };
+      }
+      function edgeShapes(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function removeOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-route-probe-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+      }
+      function removeJourneyPulse(options) {
+        options = options || {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-route-journey-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        if (journeyOwnerToken && options.release !== false && Archify.motionGovernor) {
+          var token = journeyOwnerToken;
+          journeyOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        }
+      }
+      function stopJourneyTimer(options) {
+        options = options || {};
+        journeyGeneration += 1;
+        if (journeyTimer) {
+          if (options.preserveElapsed === true && journeyStartedAt) {
+            journeyElapsedMs = Math.min(JOURNEY_DWELL_MS, journeyElapsedMs + Math.max(0, Date.now() - journeyStartedAt));
+          }
+          window.clearTimeout(journeyTimer);
+        }
+        journeyTimer = null;
+        journeyStartedAt = 0;
+        if (options.preserveElapsed !== true) journeyElapsedMs = 0;
+      }
+      function clearJourneyPresentation(options) {
+        options = options || {};
+        removeJourneyPulse();
+        svg.removeAttribute('data-route-journey');
+        panel.removeAttribute('data-route-journey');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-route-journey-state');
+          node.removeAttribute('data-route-journey-current');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-route-journey-state');
+          edge.removeAttribute('data-route-journey-current');
+        });
+        Array.prototype.forEach.call(path.querySelectorAll('[data-route-journey-index]'), function (button, index) {
+          button.removeAttribute('data-route-journey-state');
+          button.removeAttribute('aria-current');
+          button.setAttribute('tabindex', index === 0 ? '0' : '-1');
+        });
+        if (options.keepControls !== true) journeyControls.hidden = true;
+        journeyControls.setAttribute('data-playing', 'false');
+      }
+      function resetJourneyState() {
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        journeyIndex = -1;
+        clearJourneyPresentation();
+      }
+      function cleanSvgState() {
+        resetJourneyState();
+        svg.removeAttribute('data-route-picking');
+        svg.removeAttribute('data-route-active');
+        removeOverlay();
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-route-match');
+          node.removeAttribute('data-route-start');
+          node.removeAttribute('data-route-end');
+          node.removeAttribute('data-route-step');
+          node.removeAttribute('data-route-candidate');
+          node.style.removeProperty('--route-step');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-route-match');
+          edge.removeAttribute('data-route-step');
+          edge.style.removeProperty('--route-step');
+        });
+        panel.removeAttribute('data-route-dock');
+      }
+      function replaceRouteHash(value) {
+        try {
+          history.replaceState(null, '', location.pathname + location.search + (value ? '#route=' + value : ''));
+        } catch (_) {}
+      }
+      function renderPlaceholder(copy) {
+        path.textContent = '';
+        var placeholder = document.createElement('span');
+        placeholder.className = 'route-probe-placeholder';
+        placeholder.textContent = copy;
+        path.appendChild(placeholder);
+      }
+      function renderPath(ids, options) {
+        options = options || {};
+        var byId = nodesById();
+        path.textContent = '';
+        ids.forEach(function (id, index) {
+          if (index) {
+            var arrow = document.createElement('span');
+            arrow.className = 'route-probe-arrow';
+            arrow.setAttribute('aria-hidden', 'true');
+            arrow.textContent = '\u2192';
+            path.appendChild(arrow);
+          }
+          var item = document.createElement(options.interactive === true ? 'button' : 'span');
+          if (options.interactive === true) {
+            item.type = 'button';
+            item.setAttribute('data-route-journey-index', String(index));
+            item.setAttribute('data-route-node-id', id);
+            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+            item.setAttribute('aria-label', 'Route position ' + (index + 1) + ' of ' + ids.length + ': ' + nodeLabel(byId[id], id));
+          }
+          item.className = 'route-probe-node';
+          item.textContent = nodeLabel(byId[id], id);
+          item.title = nodeLabel(byId[id], id) + ' · ' + id;
+          if (index === 0) item.setAttribute('data-endpoint', 'start');
+          if (index === ids.length - 1 && ids.length > 1) item.setAttribute('data-endpoint', 'end');
+          path.appendChild(item);
+        });
+      }
+      function setTrigger(active) {
+        trigger.setAttribute('aria-pressed', active ? 'true' : 'false');
+        trigger.setAttribute('aria-label', active ? 'Clear traced route' : 'Trace a directed route');
+      }
+      function clear(options) {
+        options = options || {};
+        var wasActive = mode !== 'idle';
+        if (Archify.finder && Archify.finder.isOpen() && typeof Archify.finder.context === 'function' && Archify.finder.context().indexOf('route-') === 0) {
+          Archify.finder.close({ restoreFocus: false });
+        }
+        mode = 'idle';
+        startId = null;
+        endId = null;
+        activeNodeIds = [];
+        activeEdges = [];
+        cleanSvgState();
+        panel.hidden = true;
+        panel.setAttribute('data-state', 'idle');
+        panel.removeAttribute('data-finder-open');
+        title.textContent = 'Choose a start node';
+        renderPlaceholder('Pick two semantic nodes on the diagram');
+        status.textContent = 'Choose the source, then the destination. Direction matters.';
+        findBtn.hidden = true;
+        findBtn.textContent = 'Find start';
+        findBtn.setAttribute('aria-label', 'Find a route start');
+        copyBtn.hidden = true;
+        copyBtn.textContent = 'Copy link';
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncRouteShare === 'function') Archify.exportMenu.syncRouteShare();
+        setTrigger(false);
+        if (wasActive && options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.updateUrl !== false) replaceRouteHash('');
+        if (options.restoreFocus === true) trigger.focus();
+      }
+      function outgoingByNode() {
+        var byId = nodesById();
+        var outgoing = {};
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (!byId[from] || !byId[to] || from === to) return;
+          if (!outgoing[from]) outgoing[from] = [];
+          outgoing[from].push({ edge: edge, to: to });
+        });
+        return outgoing;
+      }
+      function reachableFrom(source) {
+        var outgoing = outgoingByNode();
+        var reached = {};
+        var queue = [source];
+        reached[source] = true;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.forEach(function (link) {
+            if (reached[link.to]) return;
+            reached[link.to] = true;
+            queue.push(link.to);
+          });
+        }
+        return reached;
+      }
+      function hopDistancesFrom(source) {
+        var outgoing = outgoingByNode();
+        var distances = {};
+        var queue = [source];
+        distances[source] = 0;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.forEach(function (link) {
+            if (Object.prototype.hasOwnProperty.call(distances, link.to)) return;
+            distances[link.to] = distances[queue[cursor]] + 1;
+            queue.push(link.to);
+          });
+        }
+        return distances;
+      }
+      function shortestDirectedPath(source, target) {
+        if (source === target) return null;
+        var outgoing = outgoingByNode();
+        var previous = {};
+        var queue = [source];
+        previous[source] = null;
+        for (var cursor = 0; cursor < queue.length && !Object.prototype.hasOwnProperty.call(previous, target); cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.some(function (link) {
+            if (Object.prototype.hasOwnProperty.call(previous, link.to)) return false;
+            previous[link.to] = { from: queue[cursor], edge: link.edge };
+            queue.push(link.to);
+            return link.to === target;
+          });
+        }
+        if (!Object.prototype.hasOwnProperty.call(previous, target)) return null;
+        var nodeIds = [target];
+        var routeEdges = [];
+        var current = target;
+        while (current !== source) {
+          var step = previous[current];
+          if (!step) return null;
+          routeEdges.unshift(step.edge);
+          nodeIds.unshift(step.from);
+          current = step.from;
+        }
+        return { nodes: nodeIds, edges: routeEdges };
+      }
+      function traceGeometry(shape, step) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-route-match');
+        clone.removeAttribute('data-route-step');
+        clone.setAttribute('class', 'route-probe-flow');
+        clone.setAttribute('pathLength', '1');
+        clone.style.setProperty('--route-step', String(step));
+        return clone;
+      }
+      function renderOverlay(routeEdges) {
+        removeOverlay();
+        if (!routeEdges.length) return;
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'route-probe-overlay');
+        overlay.setAttribute('data-route-probe-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        routeEdges.forEach(function (edge, step) {
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          edgeShapes(edge).forEach(function (shape) { wrapper.appendChild(traceGeometry(shape, step)); });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+      }
+      function journeyButtons() {
+        return Array.prototype.slice.call(path.querySelectorAll('[data-route-journey-index]'));
+      }
+      function journeyMotionAllowed() {
+        return html.getAttribute('data-embed') !== 'true' &&
+          !document.hidden &&
+          Archify.motionGovernor &&
+          Archify.motionGovernor.capable === true &&
+          !Archify.motionGovernor.isPaused();
+      }
+      function routeOverviewStatus() {
+        return activeNodeIds.length + ' nodes · ' + activeEdges.length + ' directed hop' + (activeEdges.length === 1 ? '' : 's') + ' · shortest authored route';
+      }
+      function centerJourneyButton(button) {
+        if (!button) return;
+        var target = button.offsetLeft - Math.max(0, (path.clientWidth - button.offsetWidth) / 2);
+        path.scrollLeft = Math.max(0, target);
+      }
+      function focusJourneyButton(index) {
+        var buttons = journeyButtons();
+        if (!buttons.length) return false;
+        var next = Math.max(0, Math.min(buttons.length - 1, index));
+        buttons.forEach(function (button, buttonIndex) {
+          button.setAttribute('tabindex', buttonIndex === next ? '0' : '-1');
+        });
+        try { buttons[next].focus({ preventScroll: true }); } catch (_) { buttons[next].focus(); }
+        centerJourneyButton(buttons[next]);
+        return true;
+      }
+      function renderJourneyControls() {
+        var hasRoute = mode === 'result' && activeNodeIds.length > 1;
+        var canPlay = hasRoute && journeyMotionAllowed();
+        journeyControls.hidden = !hasRoute;
+        journeyControls.setAttribute('data-playing', journeyPlaying ? 'true' : 'false');
+        journeyPrevBtn.disabled = !hasRoute || journeyIndex <= 0;
+        journeyNextBtn.disabled = !hasRoute || journeyIndex >= activeNodeIds.length - 1;
+        journeyOverviewBtn.disabled = !hasRoute || journeyIndex < 0;
+        journeyPlayBtn.disabled = !canPlay;
+        journeyPlayBtn.setAttribute('aria-pressed', journeyPlaying ? 'true' : 'false');
+        if (journeyPlaying) {
+          journeyPlayIcon.textContent = '\u275a\u275a';
+          journeyPlayLabel.textContent = 'Pause';
+          journeyPlayBtn.setAttribute('aria-label', 'Pause route journey');
+          journeyPlayBtn.title = 'Pause route journey';
+        } else if (journeyComplete || journeyIndex === activeNodeIds.length - 1) {
+          journeyPlayIcon.textContent = '\u21bb';
+          journeyPlayLabel.textContent = 'Replay';
+          journeyPlayBtn.setAttribute('aria-label', 'Replay route journey');
+          journeyPlayBtn.title = canPlay ? 'Replay route journey' : 'Automatic journey requires Live motion';
+        } else {
+          journeyPlayIcon.textContent = '\u25b6';
+          journeyPlayLabel.textContent = 'Journey';
+          journeyPlayBtn.setAttribute('aria-label', 'Play route journey');
+          journeyPlayBtn.title = canPlay ? 'Play route journey' : 'Automatic journey requires Live motion';
+        }
+      }
+      function journeyGeometry(shape) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-route-match');
+        clone.removeAttribute('data-route-step');
+        clone.removeAttribute('data-route-journey-state');
+        clone.removeAttribute('data-route-journey-current');
+        clone.setAttribute('class', 'route-journey-flow');
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function renderJourneyPulse(edge) {
+        removeJourneyPulse();
+        if (!edge || !journeyMotionAllowed()) return false;
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'route-journey-overlay');
+        overlay.setAttribute('data-route-journey-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var wrapper = document.createElementNS(namespace, 'g');
+        if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+        edgeShapes(edge).forEach(function (shape) { wrapper.appendChild(journeyGeometry(shape)); });
+        if (!wrapper.childNodes.length) return false;
+        overlay.appendChild(wrapper);
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          var token = 0;
+          token = Archify.motionGovernor.claim('route', function () {
+            if (journeyOwnerToken === token) journeyOwnerToken = 0;
+            removeJourneyPulse({ release: false });
+          });
+          journeyOwnerToken = token;
+        }
+        overlay.addEventListener('animationend', function () {
+          if (overlay.isConnected) removeJourneyPulse();
+        }, { once: true });
+        window.setTimeout(function () {
+          if (overlay.isConnected) removeJourneyPulse();
+        }, 860);
+        return true;
+      }
+      function applyJourneyState(index, options) {
+        options = options || {};
+        if (mode !== 'result' || !activeNodeIds.length) return false;
+        var byId = nodesById();
+        journeyIndex = Math.max(0, Math.min(activeNodeIds.length - 1, index));
+        removeJourneyPulse();
+        svg.setAttribute('data-route-journey', (journeyIndex + 1) + '/' + activeNodeIds.length);
+        panel.setAttribute('data-route-journey', String(journeyIndex));
+        activeNodeIds.forEach(function (id, step) {
+          var node = byId[id];
+          if (!node) return;
+          var state = step < journeyIndex ? 'past' : (step === journeyIndex ? 'current' : 'future');
+          node.setAttribute('data-route-journey-state', state);
+          if (step === journeyIndex) node.setAttribute('data-route-journey-current', '');
+          else node.removeAttribute('data-route-journey-current');
+        });
+        activeEdges.forEach(function (edge, step) {
+          var destination = step + 1;
+          var state = destination < journeyIndex ? 'past' : (destination === journeyIndex ? 'current' : 'future');
+          edge.setAttribute('data-route-journey-state', state);
+          if (destination === journeyIndex) edge.setAttribute('data-route-journey-current', '');
+          else edge.removeAttribute('data-route-journey-current');
+        });
+        var buttons = journeyButtons();
+        buttons.forEach(function (button, step) {
+          var state = step < journeyIndex ? 'past' : (step === journeyIndex ? 'current' : 'future');
+          button.setAttribute('data-route-journey-state', state);
+          button.setAttribute('tabindex', step === journeyIndex ? '0' : '-1');
+          if (step === journeyIndex) button.setAttribute('aria-current', 'step');
+          else button.removeAttribute('aria-current');
+        });
+        if (options.center !== false) centerJourneyButton(buttons[journeyIndex]);
+        var phase = journeyPlaying ? 'Playing' : (journeyComplete ? 'Complete' : 'Inspecting');
+        status.textContent = 'Step ' + (journeyIndex + 1) + ' of ' + activeNodeIds.length + ' · ' + phase + ' · ' + nodeLabel(byId[activeNodeIds[journeyIndex]], activeNodeIds[journeyIndex]);
+        if (options.pulse === true && journeyIndex > 0) renderJourneyPulse(activeEdges[journeyIndex - 1]);
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(activeNodeIds.slice(Math.max(0, journeyIndex - 1), Math.min(activeNodeIds.length, journeyIndex + 2)), {
+            includeNeighbors: false,
+            reason: 'route-journey',
+            maxScale: 1.65,
+            padding: 64,
+            duration: 360,
+            instant: !journeyMotionAllowed()
+          });
+        }
+        renderJourneyControls();
+        requestDocking();
+        return true;
+      }
+      function pauseJourney(options) {
+        options = options || {};
+        if (!journeyPlaying && options.complete !== true) {
+          renderJourneyControls();
+          return false;
+        }
+        stopJourneyTimer({ preserveElapsed: options.complete !== true && options.preserveElapsed !== false });
+        journeyPlaying = false;
+        journeyComplete = options.complete === true;
+        if (journeyComplete) journeyElapsedMs = 0;
+        removeJourneyPulse();
+        if (journeyIndex >= 0) applyJourneyState(journeyIndex, { center: false, pulse: false, reveal: false });
+        else renderJourneyControls();
+        return true;
+      }
+      function selectJourneyIndex(index) {
+        if (mode !== 'result') return false;
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        return applyJourneyState(index, { pulse: true, reveal: true });
+      }
+      function showJourneyOverview(options) {
+        options = options || {};
+        if (mode !== 'result') return false;
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        journeyIndex = -1;
+        clearJourneyPresentation({ keepControls: true });
+        status.textContent = routeOverviewStatus();
+        renderJourneyControls();
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(activeNodeIds, { includeNeighbors: false, reason: 'route', instant: !journeyMotionAllowed() });
+        }
+        requestDocking();
+        return true;
+      }
+      function scheduleJourney() {
+        if (!journeyPlaying || !journeyMotionAllowed()) {
+          pauseJourney({ preserveElapsed: true });
+          return false;
+        }
+        var generation = ++journeyGeneration;
+        var remaining = Math.max(0, JOURNEY_DWELL_MS - journeyElapsedMs);
+        journeyStartedAt = Date.now();
+        journeyTimer = window.setTimeout(function () {
+          if (generation !== journeyGeneration || !journeyPlaying) return;
+          journeyTimer = null;
+          journeyStartedAt = 0;
+          journeyElapsedMs = 0;
+          if (journeyIndex >= activeNodeIds.length - 1) {
+            pauseJourney({ complete: true, preserveElapsed: false });
+            return;
+          }
+          applyJourneyState(journeyIndex + 1, { pulse: true, reveal: true });
+          // Camera and motion-owner handoff are allowed to synchronously
+          // settle the previous step. The new step always starts with a fresh
+          // dwell; never carry cleanup time into the next scheduler lease.
+          journeyElapsedMs = 0;
+          journeyStartedAt = 0;
+          scheduleJourney();
+        }, remaining);
+        return true;
+      }
+      function playJourney() {
+        if (mode !== 'result' || activeNodeIds.length < 2 || !journeyMotionAllowed()) {
+          renderJourneyControls();
+          return false;
+        }
+        if (journeyPlaying) return true;
+        if (journeyComplete || journeyIndex >= activeNodeIds.length - 1) {
+          journeyIndex = -1;
+          journeyElapsedMs = 0;
+          journeyComplete = false;
+        }
+        journeyPlaying = true;
+        if (journeyIndex < 0) applyJourneyState(0, { pulse: false, reveal: true });
+        else applyJourneyState(journeyIndex, { center: false, pulse: false, reveal: false });
+        scheduleJourney();
+        return true;
+      }
+      function toggleJourney() {
+        return journeyPlaying ? pauseJourney({ preserveElapsed: true }) : playJourney();
+      }
+      function previousJourney() {
+        return selectJourneyIndex(Math.max(0, journeyIndex < 0 ? 0 : journeyIndex - 1));
+      }
+      function nextJourney() {
+        return selectJourneyIndex(Math.min(activeNodeIds.length - 1, journeyIndex + 1));
+      }
+      function overlapArea(a, b) {
+        var width = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));
+        var height = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+        return width * height;
+      }
+      function updateDocking() {
+        if (panel.hidden) {
+          panel.removeAttribute('data-route-dock');
+          return;
+        }
+        var containerRect = container.getBoundingClientRect();
+        var width = panel.offsetWidth;
+        var height = panel.offsetHeight;
+        if (!width || !height) return;
+        var currentRect = panel.getBoundingClientRect();
+        var left = currentRect.left;
+        var topCandidate = {
+          left: left,
+          right: left + width,
+          top: containerRect.top + 8,
+          bottom: containerRect.top + 8 + height
+        };
+        var nav = container.querySelector('.diagram-nav');
+        var navRect = nav ? nav.getBoundingClientRect() : null;
+        var bottom = navRect ? navRect.top - 9 : containerRect.bottom - 8;
+        var bottomCandidate = {
+          left: left,
+          right: left + width,
+          top: bottom - height,
+          bottom: bottom
+        };
+        var byId = nodesById();
+        var relevant = activeNodeIds.length ? activeNodeIds : (startId ? [startId] : []);
+        var blockers = relevant.map(function (id) { return byId[id]; }).filter(Boolean).map(function (node) {
+          return node.getBoundingClientRect();
+        });
+        function score(candidate) {
+          var value = blockers.reduce(function (sum, rect) { return sum + overlapArea(candidate, rect); }, 0);
+          if (navRect) value += overlapArea(candidate, navRect) * 4;
+          if (candidate.top < containerRect.top || candidate.bottom > containerRect.bottom) value += 1000000;
+          return value;
+        }
+        if (score(topCandidate) <= score(bottomCandidate)) panel.setAttribute('data-route-dock', 'top');
+        else panel.setAttribute('data-route-dock', 'bottom');
+      }
+      function requestDocking() {
+        requestAnimationFrame(updateDocking);
+        window.setTimeout(updateDocking, 120);
+        window.setTimeout(updateDocking, 560);
+      }
+      function chooseStart(id) {
+        var byId = nodesById();
+        if (!byId[id]) return false;
+        cleanSvgState();
+        startId = id;
+        endId = null;
+        mode = 'target';
+        var reached = reachableFrom(id);
+        byId[id].setAttribute('data-route-start', '');
+        byId[id].setAttribute('data-route-match', '');
+        Object.keys(reached).forEach(function (candidateId) {
+          if (candidateId !== id && byId[candidateId]) byId[candidateId].setAttribute('data-route-candidate', '');
+        });
+        svg.setAttribute('data-route-picking', 'target');
+        panel.setAttribute('data-state', 'target');
+        title.textContent = 'Choose a destination from ' + nodeLabel(byId[id], id);
+        renderPath([id]);
+        var count = Math.max(0, Object.keys(reached).length - 1);
+        status.textContent = count
+          ? count + ' directed destination' + (count === 1 ? '' : 's') + ' available. Pick a highlighted node.'
+          : 'No outgoing route starts here. Clear and choose another source.';
+        findBtn.hidden = false;
+        findBtn.textContent = 'Find target';
+        findBtn.setAttribute('aria-label', 'Find a reachable route destination');
+        requestDocking();
+        return true;
+      }
+      function showResult(result, options) {
+        options = options || {};
+        var byId = nodesById();
+        cleanSvgState();
+        mode = 'result';
+        startId = result.nodes[0];
+        endId = result.nodes[result.nodes.length - 1];
+        activeNodeIds = result.nodes.slice();
+        activeEdges = result.edges.slice();
+        result.nodes.forEach(function (id, step) {
+          var node = byId[id];
+          if (!node) return;
+          node.setAttribute('data-route-match', '');
+          node.setAttribute('data-route-step', String(step));
+          node.style.setProperty('--route-step', String(step));
+          if (step === 0) node.setAttribute('data-route-start', '');
+          if (step === result.nodes.length - 1) node.setAttribute('data-route-end', '');
+        });
+        result.edges.forEach(function (edge, step) {
+          edge.setAttribute('data-route-match', '');
+          edge.setAttribute('data-route-step', String(step));
+          edge.style.setProperty('--route-step', String(step));
+        });
+        svg.setAttribute('data-route-active', startId + '~' + endId);
+        renderOverlay(result.edges);
+        renderPath(result.nodes, { interactive: true });
+        panel.setAttribute('data-state', 'result');
+        panel.hidden = false;
+        title.textContent = nodeLabel(byId[startId], startId) + ' to ' + nodeLabel(byId[endId], endId);
+        findBtn.hidden = true;
+        copyBtn.hidden = false;
+        setTrigger(true);
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncRouteShare === 'function') Archify.exportMenu.syncRouteShare();
+        if (options.updateUrl !== false) {
+          replaceRouteHash(encodeURIComponent(startId) + '~' + encodeURIComponent(endId));
+        }
+        showJourneyOverview({ reveal: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(result.nodes, { includeNeighbors: false, reason: 'route' });
+        }
+        return true;
+      }
+      function choose(id, options) {
+        options = options || {};
+        var byId = nodesById();
+        if (!byId[id]) return false;
+        if (mode === 'source') return chooseStart(id);
+        if (mode !== 'target') return false;
+        if (id === startId) {
+          panel.setAttribute('data-state', 'error');
+          title.textContent = 'Choose a different destination';
+          status.textContent = 'A route needs two distinct semantic nodes.';
+          return false;
+        }
+        var result = shortestDirectedPath(startId, id);
+        if (!result) {
+          panel.setAttribute('data-state', 'error');
+          title.textContent = 'No directed route to ' + nodeLabel(byId[id], id);
+          status.textContent = nodeLabel(byId[id], id) + ' is not reachable from ' + nodeLabel(byId[startId], startId) + '. Pick a highlighted destination.';
+          return false;
+        }
+        return showResult(result, options);
+      }
+      function begin(options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.active()) {
+          Archify.semanticLens.clear({ updateUrl: false, preserveView: true, closePanel: true });
+        }
+        var focused = options.source || (Archify.focus && typeof Archify.focus.active === 'function' ? Archify.focus.active() : null);
+        if (Array.isArray(focused)) focused = null;
+        clear({ updateUrl: false, preserveView: true, restoreFocus: false });
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') Archify.intentTrace.clear({ announce: false });
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.focus && typeof Archify.focus.clear === 'function') {
+          Archify.focus.clear({ updateUrl: false, preserveView: true });
+        }
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        mode = 'source';
+        panel.hidden = false;
+        panel.setAttribute('data-state', 'source');
+        svg.setAttribute('data-route-picking', 'source');
+        title.textContent = 'Choose a start node';
+        renderPlaceholder('Pick a semantic node on the diagram');
+        status.textContent = 'Select the source. The next step will reveal only directed destinations.';
+        findBtn.hidden = false;
+        findBtn.textContent = 'Find start';
+        findBtn.setAttribute('aria-label', 'Find a route start');
+        copyBtn.hidden = true;
+        setTrigger(true);
+        if (focused && nodesById()[focused]) chooseStart(focused);
+        if (options.focusNode === true && !focused) {
+          var first = nodes()[0];
+          if (first) {
+            try { first.focus({ preventScroll: true }); } catch (_) { try { first.focus(); } catch (_) {} }
+          }
+        }
+        return true;
+      }
+      function toggle(options) {
+        if (mode !== 'idle') {
+          clear({ restoreFocus: true });
+          return false;
+        }
+        return begin(options);
+      }
+      function finderContext() {
+        var byId = nodesById();
+        if (mode === 'source') {
+          var outgoing = outgoingByNode();
+          var sourceIds = nodes().map(function (node) { return node.getAttribute('data-node-id'); }).filter(function (id) {
+            return outgoing[id] && outgoing[id].length;
+          });
+          var sourceBadges = {};
+          sourceIds.forEach(function (id) { sourceBadges[id] = 'start'; });
+          return {
+            kind: 'route-source',
+            title: 'Choose route start',
+            placeholder: 'Search route sources',
+            empty: 'No matching route sources',
+            resultsLabel: 'Nodes that can start a route',
+            availableNoun: 'route sources',
+            allowedIds: sourceIds,
+            badges: sourceBadges
           };
-          img.onerror = function (e) {
-            URL.revokeObjectURL(svgUrl);
-            reject(e);
+        }
+        if (mode === 'target' && startId && byId[startId]) {
+          var distances = hopDistancesFrom(startId);
+          var targetIds = Object.keys(distances).filter(function (id) { return id !== startId && byId[id]; });
+          var targetBadges = {};
+          targetIds.forEach(function (id) {
+            targetBadges[id] = distances[id] + ' hop' + (distances[id] === 1 ? '' : 's');
+          });
+          return {
+            kind: 'route-target',
+            title: 'Destination from ' + nodeLabel(byId[startId], startId),
+            placeholder: 'Search reachable destinations',
+            empty: 'No matching reachable destinations',
+            resultsLabel: 'Reachable route destinations',
+            availableNoun: 'reachable destinations',
+            allowedIds: targetIds,
+            badges: targetBadges
           };
-          img.src = svgUrl;
+        }
+        return null;
+      }
+      function finderOpening() {
+        panel.setAttribute('data-finder-open', 'true');
+      }
+      function finderClosed(options) {
+        options = options || {};
+        panel.removeAttribute('data-finder-open');
+        requestDocking();
+        if (options.restoreFocus === true && !findBtn.hidden) findBtn.focus();
+      }
+      function openFinder() {
+        var context = finderContext();
+        if (!context || !Archify.finder) return false;
+        return Archify.finder.open({ context: context });
+      }
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+      function copyLink() {
+        if (mode !== 'result') return Promise.resolve(false);
+        var value = location.href.replace(/#.*$/, '') + '#route=' + encodeURIComponent(startId) + '~' + encodeURIComponent(endId);
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          copyBtn.setAttribute('aria-label', copied ? 'Traced route link copied' : 'Could not copy traced route link');
+          window.setTimeout(function () {
+            copyBtn.textContent = 'Copy link';
+            copyBtn.setAttribute('aria-label', 'Copy link to traced route');
+          }, 1600);
+          return copied;
+        });
+      }
+      function interceptSelection(event) {
+        if (mode !== 'source' && mode !== 'target') return;
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        var node = event.target.closest('[data-node-id]');
+        if (!node) return;
+        if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        choose(node.getAttribute('data-node-id'));
+      }
+      function syncFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var route = params.get('route');
+          if (!route) {
+            if (mode !== 'idle') clear({ updateUrl: false, restoreFocus: false });
+            return;
+          }
+          var parts = route.split('~');
+          if (parts.length !== 2) return;
+          var byId = nodesById();
+          if (!byId[parts[0]] || !byId[parts[1]]) return;
+          begin({ source: parts[0], focusNode: false });
+          choose(parts[1], { updateUrl: false });
+        } catch (_) {}
+      }
+      function escapeRoute(options) {
+        options = options || {};
+        if (journeyPlaying) {
+          pauseJourney({ preserveElapsed: true });
+          if (options.restoreFocus === true) journeyPlayBtn.focus();
+          return 'paused';
+        }
+        if (journeyIndex >= 0) {
+          showJourneyOverview({ reveal: true });
+          if (options.restoreFocus === true) journeyOverviewBtn.focus();
+          return 'overview';
+        }
+        clear({ restoreFocus: options.restoreFocus === true });
+        return 'cleared';
+      }
+      function syncJourneyMotion() {
+        if (journeyPlaying && !journeyMotionAllowed()) pauseJourney({ preserveElapsed: true });
+        renderJourneyControls();
+        return journeyMotionAllowed();
+      }
+
+      trigger.addEventListener('click', function () { toggle({ focusNode: false }); });
+      findBtn.addEventListener('click', openFinder);
+      clearBtn.addEventListener('click', function () { clear({ restoreFocus: true }); });
+      copyBtn.addEventListener('click', copyLink);
+      journeyPrevBtn.addEventListener('click', previousJourney);
+      journeyPlayBtn.addEventListener('click', toggleJourney);
+      journeyNextBtn.addEventListener('click', nextJourney);
+      journeyOverviewBtn.addEventListener('click', function () { showJourneyOverview({ reveal: true }); });
+      path.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-route-journey-index]');
+        if (!button) return;
+        selectJourneyIndex(Number(button.getAttribute('data-route-journey-index')));
+      });
+      path.addEventListener('focusin', function (event) {
+        if (journeyPlaying && event.target.closest('[data-route-journey-index]')) pauseJourney({ preserveElapsed: true });
+      });
+      path.addEventListener('keydown', function (event) {
+        var button = event.target.closest('[data-route-journey-index]');
+        if (!button) return;
+        var index = Number(button.getAttribute('data-route-journey-index'));
+        var next = null;
+        if (event.key === 'ArrowRight') next = Math.min(activeNodeIds.length - 1, index + 1);
+        else if (event.key === 'ArrowLeft') next = Math.max(0, index - 1);
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = activeNodeIds.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          focusJourneyButton(next);
+          return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          selectJourneyIndex(index);
+        }
+      });
+      svg.addEventListener('click', interceptSelection, true);
+      svg.addEventListener('keydown', interceptSelection, true);
+      container.addEventListener('scroll', updateDocking, { passive: true });
+      window.addEventListener('resize', requestDocking);
+      window.addEventListener('beforeprint', function () {
+        if (journeyPlaying) pauseJourney({ preserveElapsed: true, reason: 'print' });
+        else removeJourneyPulse();
+      });
+      window.addEventListener('hashchange', function () { requestAnimationFrame(syncFromHash); });
+      syncFromHash();
+
+      return {
+        begin: begin,
+        choose: choose,
+        clear: clear,
+        toggle: toggle,
+        escape: escapeRoute,
+        copyLink: copyLink,
+        playJourney: playJourney,
+        pauseJourney: pauseJourney,
+        showOverview: showJourneyOverview,
+        selectJourneyIndex: selectJourneyIndex,
+        syncMotion: syncJourneyMotion,
+        isJourneyPlaying: function () { return journeyPlaying; },
+        finderContext: finderContext,
+        finderOpening: finderOpening,
+        finderClosed: finderClosed,
+        openFinder: openFinder,
+        exportSnapshot: exportSnapshot,
+        active: function () { return mode === 'idle' ? null : mode; },
+        result: function () {
+          return mode === 'result'
+            ? { source: startId, target: endId, nodes: activeNodeIds.slice(), hops: activeEdges.length, journey: journeyIndex, playing: journeyPlaying }
+            : null;
+        }
+      };
+    })();
+
+    /* ============================================================
+       Semantic Lens — a counted, viewer-only legend over data-node-kind.
+       One selected kind reveals every authored relationship touching it.
+       Two selected kinds compare only direct cross-kind relationships while
+       preserving the full diagram as a dimmed spatial reference.
+       ============================================================ */
+    Archify.semanticLens = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-semantic-lens');
+      var panel = document.getElementById('semantic-lens');
+      var closeBtn = document.getElementById('semantic-lens-close');
+      var kindsRoot = document.getElementById('semantic-lens-kinds');
+      var status = document.getElementById('semantic-lens-status');
+      var copyBtn = document.getElementById('semantic-lens-copy');
+      var clearBtn = document.getElementById('semantic-lens-clear');
+      var legendBridge = svg.querySelector('[data-legend-bridge]');
+      var legendEntries = [];
+      var hoveredLegendEntry = null;
+      var focusedLegendEntry = null;
+      var activeLegendPreview = null;
+      var lensOpener = trigger;
+      var selectedKinds = [];
+      var namespace = 'http://www.w3.org/2000/svg';
+      var finePointerQuery = window.matchMedia ? window.matchMedia('(hover: hover) and (pointer: fine)') : null;
+      var MAX_LENS_FLOW_EDGES = 24;
+
+      function kindLabel(value) {
+        return String(value || 'neutral')
+          .replace(/messagebus/gi, 'message bus')
+          .replace(/[-_]+/g, ' ')
+          .replace(/\b\w/g, function (letter) { return letter.toUpperCase(); });
+      }
+      function nodesById() {
+        var byId = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id][data-node-kind]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (id && !byId[id]) byId[id] = node;
+        });
+        return byId;
+      }
+      function collectKinds() {
+        var kinds = {};
+        var byId = nodesById();
+        Object.keys(byId).forEach(function (id) {
+          var node = byId[id];
+          var value = node.getAttribute('data-node-kind') || 'neutral';
+          var kind = kinds[value] || (kinds[value] = { id: value, label: kindLabel(value), nodes: [] });
+          kind.nodes.push(node);
+        });
+        return Object.keys(kinds).map(function (key) { return kinds[key]; }).sort(function (a, b) {
+          return b.nodes.length - a.nodes.length || a.label.localeCompare(b.label);
+        });
+      }
+      function edgeGroups() {
+        var groups = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = edge.getAttribute('data-edge-key') || [from, to, edge.getAttribute('data-edge-label') || ''].join('\u0000');
+          if (!groups[key]) groups[key] = { key: key, from: from, to: to, members: [] };
+          groups[key].members.push(edge);
+        });
+        return Object.keys(groups).map(function (key) { return groups[key]; });
+      }
+      function edgeShapes(edge) {
+        if (!edge) return [];
+        if (/^(path|line|polyline)$/i.test(edge.tagName || '')) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function legendSourceBounds(entry) {
+        var bounds = null;
+        Array.prototype.forEach.call(entry.children, function (child) {
+          if (child.hasAttribute('data-legend-bridge-runtime')) return;
+          var box;
+          try { box = child.getBBox(); } catch (_) { return; }
+          if (!box || !Number.isFinite(box.x) || !Number.isFinite(box.y)) return;
+          var next = { left: box.x, top: box.y, right: box.x + box.width, bottom: box.y + box.height };
+          if (!bounds) bounds = next;
+          else {
+            bounds.left = Math.min(bounds.left, next.left);
+            bounds.top = Math.min(bounds.top, next.top);
+            bounds.right = Math.max(bounds.right, next.right);
+            bounds.bottom = Math.max(bounds.bottom, next.bottom);
+          }
         });
+        return bounds;
       }
-
-      var menu = document.getElementById('export-menu');
-      var btn = document.getElementById('btn-export');
-      var items = function () {
-        return Array.prototype.slice.call(menu.querySelectorAll('button[role="menuitem"]'));
-      };
-
-      // ---- Clipboard support ----------------------------------------------
-      function canCopyImage() {
-        return typeof ClipboardItem !== 'undefined' &&
-               navigator.clipboard &&
-               typeof navigator.clipboard.write === 'function';
+      function layoutLegendEntry(entry) {
+        var bounds = legendSourceBounds(entry);
+        var hit = entry.querySelector('[data-legend-hit]');
+        var badge = entry.querySelector('[data-legend-count-badge]');
+        if (!bounds || !hit || !badge) return false;
+        var count = entry.getAttribute('data-legend-count') || '0';
+        var centerY = (bounds.top + bounds.bottom) / 2;
+        var badgeWidth = Math.max(14, count.length * 5 + 8);
+        var badgeX = bounds.right + 3;
+        var hitX = bounds.left - 5;
+        var hitRight = badgeX + badgeWidth + 4;
+        hit.setAttribute('x', hitX.toFixed(2));
+        hit.setAttribute('y', (centerY - 12).toFixed(2));
+        hit.setAttribute('width', Math.max(24, hitRight - hitX).toFixed(2));
+        hit.setAttribute('height', '24');
+        hit.setAttribute('rx', '4');
+        var badgeRect = badge.querySelector('rect');
+        var badgeText = badge.querySelector('text');
+        badgeRect.setAttribute('x', badgeX.toFixed(2));
+        badgeRect.setAttribute('y', (centerY - 7).toFixed(2));
+        badgeRect.setAttribute('width', badgeWidth.toFixed(2));
+        badgeRect.setAttribute('height', '14');
+        badgeRect.setAttribute('rx', '7');
+        badgeText.setAttribute('x', (badgeX + badgeWidth / 2).toFixed(2));
+        badgeText.setAttribute('y', (centerY + 2.5).toFixed(2));
+        return true;
       }
-
-      // ---- Raster format detection ----------------------------------------
-      // canvas.toBlob('image/webp') silently returns a PNG on browsers without
-      // WebP encoding (older Safari), so detect explicitly.
-      function supports(format) {
-        if (format === 'svg' || format === 'png') return true;
-        var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+      function layoutLegendBridge() {
+        legendEntries.forEach(layoutLegendEntry);
+        if (!legendBridge) return;
+        Array.prototype.forEach.call(legendBridge.querySelectorAll('[data-legend-zero]'), layoutLegendEntry);
+      }
+      function decorateLegendBridge() {
+        legendEntries = [];
+        if (!legendBridge || html.getAttribute('data-embed') === 'true') return false;
+        var facts = {};
+        collectKinds().forEach(function (kind) { facts[kind.id] = kind; });
+        Array.prototype.forEach.call(legendBridge.querySelectorAll('[data-legend-kind]'), function (entry) {
+          var kind = entry.getAttribute('data-legend-kind');
+          var fact = facts[kind];
+          var count = fact ? fact.nodes.length : 0;
+          entry.setAttribute('data-legend-count', String(count));
+          var hit = document.createElementNS(namespace, 'rect');
+          hit.setAttribute('data-legend-bridge-runtime', '');
+          hit.setAttribute('data-legend-hit', '');
+          hit.setAttribute('aria-hidden', 'true');
+          entry.insertBefore(hit, entry.firstChild);
+          var badge = document.createElementNS(namespace, 'g');
+          badge.setAttribute('data-legend-bridge-runtime', '');
+          badge.setAttribute('data-legend-count-badge', '');
+          badge.setAttribute('aria-hidden', 'true');
+          badge.appendChild(document.createElementNS(namespace, 'rect'));
+          var countText = document.createElementNS(namespace, 'text');
+          countText.textContent = String(count);
+          badge.appendChild(countText);
+          entry.appendChild(badge);
+          if (!fact || !count) {
+            entry.setAttribute('data-legend-zero', '');
+            return;
+          }
+          entry.setAttribute('role', 'button');
+          entry.setAttribute('tabindex', legendEntries.length ? '-1' : '0');
+          var visibleLabel = entry.getAttribute('data-legend-label') || fact.label;
+          entry.setAttribute('aria-label', 'Inspect ' + visibleLabel + ', ' + count + ' node' + (count === 1 ? '' : 's'));
+          entry.setAttribute('aria-pressed', 'false');
+          entry.setAttribute('aria-haspopup', 'dialog');
+          entry.setAttribute('aria-controls', 'semantic-lens');
+          entry.setAttribute('aria-expanded', 'false');
+          legendEntries.push(entry);
+        });
+        if (!legendEntries.length) return false;
+        legendBridge.setAttribute('role', legendEntries.length >= 3 ? 'toolbar' : 'group');
+        legendBridge.setAttribute('aria-label', 'Semantic legend');
+        syncLegendBridge();
+        layoutLegendBridge();
         try {
-          var c = document.createElement('canvas');
-          c.width = c.height = 2;
-          return c.toDataURL(mime).indexOf('data:' + mime) === 0;
-        } catch (_) { return false; }
+          if (document.fonts && document.fonts.ready) document.fonts.ready.then(layoutLegendBridge);
+        } catch (_) {}
+        return true;
       }
-
-      // Gray out unsupported items.
-      items().forEach(function (it) {
-        if (it.dataset.format && !supports(it.dataset.format)) {
-          it.disabled = true;
-          it.title = 'Not supported by this browser';
-          it.style.opacity = '0.5';
+      function syncLegendBridge() {
+        legendEntries.forEach(function (entry) {
+          var selected = selectedKinds.indexOf(entry.getAttribute('data-legend-kind')) >= 0;
+          entry.setAttribute('aria-pressed', selected ? 'true' : 'false');
+          entry.setAttribute('aria-expanded', !panel.hidden && lensOpener === entry ? 'true' : 'false');
+          if (selected) entry.setAttribute('data-legend-selected', '');
+          else entry.removeAttribute('data-legend-selected');
+        });
+      }
+      function clearLegendPreview() {
+        activeLegendPreview = null;
+        svg.removeAttribute('data-legend-preview-active');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer]'), function (element) {
+          element.removeAttribute('data-legend-preview-match');
+          element.removeAttribute('data-legend-preview-selected');
+          element.removeAttribute('data-legend-preview-peer');
+        });
+      }
+      function strongerLegendOwnerActive() {
+        return selectedKinds.length > 0 || !panel.hidden || html.getAttribute('data-present') === 'true' ||
+          svg.hasAttribute('data-focus-active') || svg.hasAttribute('data-intent-trace-active') ||
+          svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active') ||
+          svg.hasAttribute('data-story-active') || svg.hasAttribute('data-relationship-preview-active');
+      }
+      function previewLegendKind(entry) {
+        clearLegendPreview();
+        if (!entry || strongerLegendOwnerActive()) return false;
+        var kind = entry.getAttribute('data-legend-kind');
+        var byId = nodesById();
+        var matches = Object.keys(byId).filter(function (id) {
+          return (byId[id].getAttribute('data-node-kind') || 'neutral') === kind;
+        });
+        if (!matches.length) return false;
+        var chosen = {};
+        matches.forEach(function (id) {
+          chosen[id] = true;
+          byId[id].setAttribute('data-legend-preview-match', '');
+          byId[id].setAttribute('data-legend-preview-selected', '');
+        });
+        edgeGroups().forEach(function (edge) {
+          if (!chosen[edge.from] && !chosen[edge.to]) return;
+          edge.members.forEach(function (member) { member.setAttribute('data-legend-preview-match', ''); });
+          [edge.from, edge.to].forEach(function (id) {
+            if (!byId[id] || chosen[id]) return;
+            byId[id].setAttribute('data-legend-preview-match', '');
+            byId[id].setAttribute('data-legend-preview-peer', '');
+          });
+        });
+        svg.setAttribute('data-legend-preview-active', kind);
+        activeLegendPreview = entry;
+        return true;
+      }
+      function syncLegendPreview() {
+        var next = focusedLegendEntry || hoveredLegendEntry;
+        if (next === activeLegendPreview) return;
+        clearLegendPreview();
+        if (next) previewLegendKind(next);
+      }
+      function activateLegendEntry(entry) {
+        if (!entry || entry.getAttribute('role') !== 'button') return false;
+        clearLegendPreview();
+        select(entry.getAttribute('data-legend-kind'));
+        return open({ opener: entry });
+      }
+      function removeFlowOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-semantic-lens-overlay]'), function (element) {
+          element.remove();
+        });
+        svg.removeAttribute('data-lens-flow-count');
+        svg.removeAttribute('data-lens-flow-density');
+      }
+      function flowGeometry(shape, direction, step) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-lens-match');
+        clone.setAttribute('class', 'semantic-lens-flow');
+        clone.setAttribute('data-direction', direction);
+        clone.setAttribute('pathLength', '1');
+        clone.style.setProperty('--lens-flow-delay', (step * 0.08).toFixed(2) + 's');
+        return clone;
+      }
+      function renderFlowOverlay(entries) {
+        removeFlowOverlay();
+        svg.setAttribute('data-lens-flow-count', String(entries.length));
+        if (!entries.length || html.getAttribute('data-embed') === 'true') return false;
+        if (entries.length > MAX_LENS_FLOW_EDGES) {
+          svg.setAttribute('data-lens-flow-density', 'quiet');
+          return false;
         }
-        if (it.dataset.action === 'copy' && !canCopyImage()) {
-          it.disabled = true;
-          it.title = 'Clipboard image write not supported by this browser';
-          it.style.opacity = '0.5';
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'semantic-lens-overlay');
+        overlay.setAttribute('data-semantic-lens-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        entries.forEach(function (entry, step) {
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (entry.edge.members[0].hasAttribute('transform')) {
+            wrapper.setAttribute('transform', entry.edge.members[0].getAttribute('transform'));
+          }
+          edgeShapes(entry.edge.members[0]).forEach(function (shape) {
+            wrapper.appendChild(flowGeometry(shape, entry.direction, step));
+          });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        if (!overlay.childNodes.length) return false;
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        return true;
+      }
+      function cleanSvgState() {
+        removeFlowOverlay();
+        svg.removeAttribute('data-lens-active');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-lens-match], [data-lens-selected], [data-lens-peer]'), function (element) {
+          element.removeAttribute('data-lens-match');
+          element.removeAttribute('data-lens-selected');
+          element.removeAttribute('data-lens-peer');
+        });
+      }
+      function renderKinds() {
+        kindsRoot.textContent = '';
+        collectKinds().forEach(function (kind) {
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'semantic-lens-kind';
+          button.setAttribute('data-kind', kind.id);
+          button.setAttribute('aria-pressed', selectedKinds.indexOf(kind.id) >= 0 ? 'true' : 'false');
+          button.setAttribute('aria-label', kind.label + ', ' + kind.nodes.length + ' node' + (kind.nodes.length === 1 ? '' : 's'));
+          button.disabled = selectedKinds.length >= 2 && selectedKinds.indexOf(kind.id) === -1;
+          var swatch = document.createElement('span');
+          swatch.className = 'semantic-lens-swatch';
+          swatch.setAttribute('aria-hidden', 'true');
+          var label = document.createElement('strong');
+          label.textContent = kind.label;
+          var count = document.createElement('em');
+          count.textContent = String(kind.nodes.length);
+          button.appendChild(swatch);
+          button.appendChild(label);
+          button.appendChild(count);
+          kindsRoot.appendChild(button);
+        });
+      }
+      function updateHash() {
+        try {
+          var hash = selectedKinds.length
+            ? '#lens=' + selectedKinds.map(encodeURIComponent).join('~')
+            : '';
+          history.replaceState(null, '', location.pathname + location.search + hash);
+        } catch (_) {}
+      }
+      function updateTrigger() {
+        var active = selectedKinds.length > 0;
+        trigger.setAttribute('aria-pressed', active ? 'true' : 'false');
+        trigger.setAttribute('aria-label', active ? 'Open active semantic lens' : 'Open semantic lens');
+        copyBtn.hidden = !active;
+        syncLegendBridge();
+      }
+      function overlapArea(a, b) {
+        var width = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));
+        var height = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+        return width * height;
+      }
+      function dockPanel(byId) {
+        panel.removeAttribute('data-dock-side');
+        if (panel.hidden || !selectedKinds.length || window.innerWidth <= 720) return 'right';
+        var panelRect = panel.getBoundingClientRect();
+        var containerRect = container.getBoundingClientRect();
+        if (!panelRect.width || !panelRect.height) return 'right';
+        var selectedRects = Object.keys(byId).filter(function (id) {
+          return selectedKinds.indexOf(byId[id].getAttribute('data-node-kind') || 'neutral') >= 0;
+        }).map(function (id) { return byId[id].getBoundingClientRect(); });
+        var top = panelRect.top;
+        var width = panelRect.width;
+        var leftCandidate = { left: containerRect.left + 16, right: containerRect.left + 16 + width, top: top, bottom: panelRect.bottom };
+        var rightCandidate = { left: containerRect.right - 16 - width, right: containerRect.right - 16, top: top, bottom: panelRect.bottom };
+        var leftScore = selectedRects.reduce(function (score, rect) { return score + overlapArea(leftCandidate, rect); }, 0);
+        var rightScore = selectedRects.reduce(function (score, rect) { return score + overlapArea(rightCandidate, rect); }, 0);
+        var side = leftScore < rightScore ? 'left' : 'right';
+        panel.setAttribute('data-dock-side', side);
+        return side;
+      }
+      function applySelection(options) {
+        options = options || {};
+        cleanSvgState();
+        var byId = nodesById();
+        var nodeKind = {};
+        Object.keys(byId).forEach(function (id) { nodeKind[id] = byId[id].getAttribute('data-node-kind') || 'neutral'; });
+        if (!selectedKinds.length) {
+          status.textContent = 'Choose a kind to inspect its nodes and touching relationships.';
+          updateTrigger();
+          renderKinds();
+          dockPanel(byId);
+          if (options.updateUrl !== false) updateHash();
+          return false;
         }
-      });
 
-      // ---- Toast ----------------------------------------------------------
-      // A live region only announces CHANGES to an existing node, so the toast
-      // element is created once up front and updated in place.
-      var toastEl = document.createElement('div');
-      toastEl.className = 'archify-toast';
-      toastEl.setAttribute('role', 'status');
-      document.body.appendChild(toastEl);
-      var toastTimer = null;
+        var chosen = {};
+        selectedKinds.forEach(function (kind) { chosen[kind] = true; });
+        Object.keys(byId).forEach(function (id) {
+          if (!chosen[nodeKind[id]]) return;
+          byId[id].setAttribute('data-lens-match', '');
+          byId[id].setAttribute('data-lens-selected', '');
+        });
 
-      function toast(msg) {
-        toastEl.textContent = '';
+        var touching = 0;
+        var forward = 0;
+        var reverse = 0;
+        var crossKind = selectedKinds.length === 2;
+        var matchedFlow = [];
+        edgeGroups().forEach(function (edge) {
+          var fromKind = nodeKind[edge.from];
+          var toKind = nodeKind[edge.to];
+          var match = false;
+          if (crossKind) {
+            if (fromKind === selectedKinds[0] && toKind === selectedKinds[1]) { match = true; forward += 1; }
+            if (fromKind === selectedKinds[1] && toKind === selectedKinds[0]) { match = true; reverse += 1; }
+          } else if (fromKind === selectedKinds[0] || toKind === selectedKinds[0]) {
+            match = true;
+            touching += 1;
+          }
+          if (!match) return;
+          var direction = 'within';
+          if (crossKind) {
+            direction = fromKind === selectedKinds[0] ? 'forward' : 'reverse';
+          } else {
+            direction = fromKind === selectedKinds[0] && toKind !== selectedKinds[0] ? 'out'
+              : (toKind === selectedKinds[0] && fromKind !== selectedKinds[0] ? 'in' : 'within');
+          }
+          matchedFlow.push({ edge: edge, direction: direction });
+          edge.members.forEach(function (member) { member.setAttribute('data-lens-match', ''); });
+          if (!crossKind) {
+            [edge.from, edge.to].forEach(function (id) {
+              if (!byId[id]) return;
+              byId[id].setAttribute('data-lens-match', '');
+              if (!chosen[nodeKind[id]]) byId[id].setAttribute('data-lens-peer', '');
+            });
+          }
+        });
+
+        svg.setAttribute('data-lens-active', selectedKinds.join(' '));
+        renderFlowOverlay(matchedFlow);
+        if (crossKind) {
+          var total = forward + reverse;
+          status.textContent = kindLabel(selectedKinds[0]) + ' → ' + kindLabel(selectedKinds[1]) + ': ' + forward + ' · ' +
+            kindLabel(selectedKinds[1]) + ' → ' + kindLabel(selectedKinds[0]) + ': ' + reverse + ' · ' +
+            total + ' direct relationship' + (total === 1 ? '' : 's');
+        } else {
+          var nodeCount = collectKinds().filter(function (kind) { return kind.id === selectedKinds[0]; })[0].nodes.length;
+          status.textContent = nodeCount + ' ' + kindLabel(selectedKinds[0]) + ' node' + (nodeCount === 1 ? '' : 's') + ' · ' +
+            touching + ' touching relationship' + (touching === 1 ? '' : 's') + ' · connected peers remain visible';
+        }
+        updateTrigger();
+        renderKinds();
+        dockPanel(byId);
+        if (options.updateUrl !== false) updateHash();
+        return true;
+      }
+      function prepareForLens() {
+        clearLegendPreview();
+        if (Archify.focus && typeof Archify.focus.clear === 'function') {
+          Archify.focus.clear({ updateUrl: false, preserveView: true });
+        }
+        if (Archify.routeProbe && typeof Archify.routeProbe.clear === 'function') {
+          Archify.routeProbe.clear({ updateUrl: false, restoreFocus: false });
+        }
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') {
+          Archify.intentTrace.clear({ announce: false });
+        }
+      }
+      function select(kind, options) {
+        options = options || {};
+        clearLegendPreview();
+        var exists = collectKinds().some(function (entry) { return entry.id === kind; });
+        if (!exists) return false;
+        var index = selectedKinds.indexOf(kind);
+        if (index >= 0) selectedKinds.splice(index, 1);
+        else {
+          if (selectedKinds.length >= 2) return false;
+          if (!selectedKinds.length) prepareForLens();
+          selectedKinds.push(kind);
+        }
+        return applySelection(options);
+      }
+      function close(options) {
+        options = options || {};
+        panel.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        updateTrigger();
+        if (options.restoreFocus !== false && lensOpener && typeof lensOpener.focus === 'function') lensOpener.focus();
+        return false;
+      }
+      function open(options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        lensOpener = options.opener || trigger;
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        if (Archify.guide && Archify.guide.isOpen()) Archify.guide.close({ restoreFocus: false });
+        renderKinds();
+        panel.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        updateTrigger();
         requestAnimationFrame(function () {
-          toastEl.textContent = msg;
-          toastEl.classList.add('show');
+          dockPanel(nodesById());
+          var activeButton = kindsRoot.querySelector('[aria-pressed="true"]');
+          var firstButton = activeButton || kindsRoot.querySelector('button:not(:disabled)');
+          if (firstButton) firstButton.focus();
         });
-        clearTimeout(toastTimer);
-        toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, 1500);
+        return true;
       }
-
-      function open(focusLast) {
-        menu.classList.add('open');
-        btn.setAttribute('aria-expanded', 'true');
-        var available = items().filter(function (i) { return !i.disabled; });
-        var target = focusLast ? available[available.length - 1] : available[0];
-        if (target) target.focus();
+      function toggle() { return panel.hidden ? open({ opener: trigger }) : close(); }
+      function clear(options) {
+        options = options || {};
+        selectedKinds = [];
+        cleanSvgState();
+        panel.removeAttribute('data-dock-side');
+        updateTrigger();
+        renderKinds();
+        status.textContent = 'Choose a kind to inspect its nodes and touching relationships.';
+        if (options.updateUrl !== false) updateHash();
+        if (options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.closePanel === true) close({ restoreFocus: false });
+        return false;
       }
-      function close(focusTrigger) {
-        menu.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-        if (focusTrigger) btn.focus();
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+      function copyLink() {
+        if (!selectedKinds.length) return Promise.resolve(false);
+        var value = location.href.replace(/#.*$/, '') + '#lens=' + selectedKinds.map(encodeURIComponent).join('~');
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          window.setTimeout(function () { copyBtn.textContent = 'Copy link'; }, 1600);
+          return copied;
+        });
+      }
+      function syncFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var value = params.get('lens');
+          if (!value) {
+            if (selectedKinds.length) clear({ updateUrl: false, preserveView: true });
+            return;
+          }
+          var available = collectKinds().map(function (kind) { return kind.id; });
+          var requested = value.split('~').filter(function (kind, index, list) {
+            return available.indexOf(kind) >= 0 && list.indexOf(kind) === index;
+          }).slice(0, 2);
+          if (!requested.length) return;
+          prepareForLens();
+          selectedKinds = requested;
+          applySelection({ updateUrl: false });
+        } catch (_) {}
       }
-      function isOpen() { return menu.classList.contains('open'); }
 
-      btn.addEventListener('click', function (e) {
-        e.stopPropagation();
-        if (isOpen()) close(false);
-        else open();
+      trigger.addEventListener('click', toggle);
+      if (decorateLegendBridge()) {
+        legendBridge.addEventListener('click', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (entry) activateLegendEntry(entry);
+        });
+        legendBridge.addEventListener('pointerover', function (event) {
+          if (event.pointerType === 'touch' || (finePointerQuery && !finePointerQuery.matches)) return;
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          hoveredLegendEntry = entry;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('pointerout', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          if (hoveredLegendEntry === entry) hoveredLegendEntry = null;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('focusin', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry) return;
+          focusedLegendEntry = entry;
+          legendEntries.forEach(function (candidate) {
+            candidate.setAttribute('tabindex', candidate === entry ? '0' : '-1');
+          });
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('focusout', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          if (focusedLegendEntry === entry) focusedLegendEntry = null;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('keydown', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry) return;
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            activateLegendEntry(entry);
+            return;
+          }
+          var index = legendEntries.indexOf(entry);
+          var next = null;
+          if (event.key === 'ArrowRight') next = (index + 1) % legendEntries.length;
+          else if (event.key === 'ArrowLeft') next = (index - 1 + legendEntries.length) % legendEntries.length;
+          else if (event.key === 'Home') next = 0;
+          else if (event.key === 'End') next = legendEntries.length - 1;
+          if (next === null) return;
+          event.preventDefault();
+          legendEntries.forEach(function (candidate, candidateIndex) {
+            candidate.setAttribute('tabindex', candidateIndex === next ? '0' : '-1');
+          });
+          legendEntries[next].focus();
+        });
+      }
+      closeBtn.addEventListener('click', function () { close(); });
+      clearBtn.addEventListener('click', function () { clear({ preserveView: true }); });
+      copyBtn.addEventListener('click', copyLink);
+      kindsRoot.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-kind]');
+        if (!button || button.disabled) return;
+        select(button.getAttribute('data-kind'));
       });
-      // APG menu-button pattern: ArrowDown/ArrowUp on the trigger opens the menu.
-      btn.addEventListener('keydown', function (e) {
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-          e.preventDefault();
-          if (!isOpen()) open(e.key === 'ArrowUp');
-        }
+      kindsRoot.addEventListener('keydown', function (event) {
+        var buttons = Array.prototype.slice.call(kindsRoot.querySelectorAll('button:not(:disabled)'));
+        var index = buttons.indexOf(document.activeElement);
+        var next = null;
+        if (index >= 0 && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) next = (index + 1) % buttons.length;
+        else if (index >= 0 && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home' && buttons.length) next = 0;
+        else if (event.key === 'End' && buttons.length) next = buttons.length - 1;
+        if (next !== null) { event.preventDefault(); buttons[next].focus(); }
       });
-      document.addEventListener('click', function (e) {
-        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      panel.addEventListener('keydown', function (event) {
+        if (event.key !== 'Escape') return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+      });
+      document.addEventListener('click', function (event) {
+        var eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        var clickedInside = eventPath.indexOf(panel) >= 0 || panel.contains(event.target);
+        var clickedLauncher = event.target === trigger || legendEntries.some(function (entry) {
+          return event.target === entry || entry.contains(event.target);
+        });
+        if (!panel.hidden && !clickedInside && !clickedLauncher) close({ restoreFocus: false });
+      });
+      window.addEventListener('hashchange', syncFromHash);
+      window.addEventListener('resize', function () {
+        if (!panel.hidden && selectedKinds.length) dockPanel(nodesById());
+        layoutLegendBridge();
       });
+      renderKinds();
+      syncFromHash();
 
-      // Keyboard navigation inside the menu.
-      //   Menu items: Up/Down, Home/End.
-      //   Esc closes + returns focus to trigger; Tab closes.
-      menu.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
-        if (e.key === 'Tab')    { close(false); return; }
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        clear: clear,
+        clearPreview: clearLegendPreview,
+        select: select,
+        copyLink: copyLink,
+        isOpen: function () { return !panel.hidden; },
+        active: function () { return selectedKinds.length ? selectedKinds.slice() : null; },
+        kinds: function () { return collectKinds().map(function (kind) { return { id: kind.id, count: kind.nodes.length }; }); }
+      };
+    })();
 
-        var available = items().filter(function (i) { return !i.disabled; });
-        var current = available.indexOf(document.activeElement);
-        switch (e.key) {
-          case 'ArrowDown':
-            e.preventDefault();
-            if (available.length) available[(current + 1 + available.length) % available.length].focus();
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            if (available.length) available[(current - 1 + available.length) % available.length].focus();
-            break;
-          case 'Home':
-            e.preventDefault();
-            if (available[0]) available[0].focus();
-            break;
-          case 'End':
-            e.preventDefault();
-            if (available.length) available[available.length - 1].focus();
-            break;
-        }
-      });
+    /* ============================================================
+       Diagram Guide — a factual command deck over existing interactions.
+       Counts come from compiled semantics; actions delegate to Finder, Route
+       Probe, Semantic Radar, Semantic Lens, Story Trail, Presentation, theme, export, and
+       camera without adding a second command implementation or SVG state.
+       ============================================================ */
+    Archify.guide = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-diagram-guide');
+      var panel = document.getElementById('diagram-guide');
+      var closeBtn = document.getElementById('diagram-guide-close');
+      var stats = document.getElementById('diagram-guide-stats');
+      var actions = document.getElementById('diagram-guide-actions');
+      var feedback = document.getElementById('diagram-guide-feedback');
+      var storyBtn = actions.querySelector('[data-guide-action="story"]');
+      var storyCopy = document.getElementById('diagram-guide-story-copy');
+      var routePanel = document.getElementById('route-probe');
 
-      function runExport(format) {
-        var base = diagramFilename();
-        close(true);
-        return (format === 'svg'
-          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
-              download(new Blob([d.svgString], { type: 'image/svg+xml;charset=utf-8' }), base + '.svg');
-            })
-          : rasterize(format).then(function (blob) {
-              download(blob, base + '.' + format);
-            })
-        ).catch(function (err) {
-          console.error(err);
-          alert('Export failed: ' + (err && err.message ? err.message : format));
+      function viewCount() {
+        return Archify.guidedViews && Number(Archify.guidedViews.count) || 0;
+      }
+      function relationshipCount() {
+        var seen = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var key = edge.getAttribute('data-edge-key') || [
+            edge.getAttribute('data-edge-from'),
+            edge.getAttribute('data-edge-to'),
+            edge.getAttribute('data-edge-label') || ''
+          ].join('\u0000');
+          seen[key] = true;
         });
+        return Object.keys(seen).length;
       }
-
-      function runCopy() {
-        close(true);
-        if (!canCopyImage()) {
-          alert('Clipboard image write not supported in this browser.');
-          return;
+      function renderFacts() {
+        var nodes = svg.querySelectorAll('[data-node-id]').length;
+        var relationships = relationshipCount();
+        var views = viewCount();
+        stats.textContent = nodes + ' semantic node' + (nodes === 1 ? '' : 's') + ' · ' +
+          relationships + ' relationship' + (relationships === 1 ? '' : 's') + ' · ' +
+          views + ' guided view' + (views === 1 ? '' : 's');
+        storyBtn.disabled = views === 0;
+        storyBtn.setAttribute('aria-disabled', views === 0 ? 'true' : 'false');
+        storyCopy.textContent = views
+          ? 'Walk ' + views + ' authored chapter' + (views === 1 ? '' : 's') + ' and their real relationships.'
+          : 'No authored guided story in this diagram.';
+      }
+      function actionButtons() {
+        return Array.prototype.slice.call(actions.querySelectorAll('.diagram-guide-action:not(:disabled)'));
+      }
+      function close(options) {
+        options = options || {};
+        panel.hidden = true;
+        html.removeAttribute('data-guide-open');
+        routePanel.removeAttribute('data-guide-open');
+        trigger.setAttribute('aria-expanded', 'false');
+        trigger.setAttribute('aria-label', 'Open diagram guide');
+        feedback.textContent = '';
+        if (options.restoreFocus !== false) trigger.focus();
+        return false;
+      }
+      function open() {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        if (Archify.guidedViews && Archify.guidedViews.isPlaying && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
         }
-        // WebKit requires ClipboardItem to be constructed synchronously inside
-        // the user gesture — pass the pending Promise<Blob> as the item value.
-        // Browsers that reject promise values throw synchronously; fall back
-        // to awaiting the blob first (works in Chromium/Firefox).
-        var blobPromise = rasterize('png');
-        var writePromise;
-        try {
-          writePromise = navigator.clipboard.write([new ClipboardItem({ 'image/png': blobPromise })]);
-        } catch (_) {
-          writePromise = blobPromise.then(function (blob) {
-            return navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
-          });
+        if (Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: 'guide' });
         }
-        return writePromise.then(function () {
-          toast('Copied PNG to clipboard');
-        }).catch(function (err) {
-          console.error(err);
-          alert('Copy failed: ' + (err && err.message ? err.message : 'unknown'));
+        renderFacts();
+        panel.hidden = false;
+        html.setAttribute('data-guide-open', 'true');
+        routePanel.setAttribute('data-guide-open', 'true');
+        trigger.setAttribute('aria-expanded', 'true');
+        trigger.setAttribute('aria-label', 'Close diagram guide');
+        feedback.textContent = '';
+        requestAnimationFrame(function () {
+          var first = actionButtons()[0];
+          if (first) first.focus();
         });
+        return true;
+      }
+      function toggle() { return panel.hidden ? open() : close(); }
+      function execute(action) {
+        feedback.textContent = '';
+        if (action === 'story' && !viewCount()) {
+          feedback.textContent = 'This diagram has no authored guided story.';
+          return false;
+        }
+        close({ restoreFocus: false });
+        if (action === 'find') return Archify.finder.open();
+        if (action === 'route') return Archify.routeProbe.begin({ focusNode: true });
+        if (action === 'map') return Archify.radar.open();
+        if (action === 'lens') return Archify.semanticLens.open();
+        if (action === 'story') return Archify.guidedViews.play();
+        if (action === 'present') return Archify.presentation.enter();
+        if (action === 'export') return Archify.exportMenu.open();
+        if (action === 'theme') return Archify.theme.toggle();
+        if (action === 'preset') return Archify.preset.cycle();
+        if (action === 'reset') return Archify.view.reset();
+        if (action === 'zoom-in') return Archify.view.zoomIn();
+        if (action === 'zoom-out') return Archify.view.zoomOut();
+        return false;
+      }
+      function actionForKey(key) {
+        return {
+          '/': 'find',
+          r: 'route',
+          m: 'map',
+          l: 'lens',
+          p: 'story',
+          f: 'present',
+          e: 'export',
+          t: 'theme',
+          s: 'preset',
+          '0': 'reset',
+          '+': 'zoom-in',
+          '=': 'zoom-in',
+          '-': 'zoom-out'
+        }[key] || null;
       }
 
-      menu.addEventListener('click', function (e) {
-        var copyBtn = e.target.closest('button[data-action="copy"]');
-        if (copyBtn && !copyBtn.disabled) { runCopy(); return; }
-
-        var formatBtn = e.target.closest('button[data-format]');
-        if (formatBtn && !formatBtn.disabled) { runExport(formatBtn.dataset.format); }
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close(); });
+      actions.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-guide-action]');
+        if (!button || button.disabled) return;
+        event.stopPropagation();
+        execute(button.getAttribute('data-guide-action'));
+      });
+      panel.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' || event.key === '?') {
+          event.preventDefault();
+          event.stopPropagation();
+          close();
+          return;
+        }
+        var buttons = actionButtons();
+        var index = buttons.indexOf(document.activeElement);
+        var next = null;
+        if (index >= 0 && event.key === 'ArrowRight') next = (index + 1) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowDown') next = (index + 1) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowLeft') next = (index - 1 + buttons.length) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowUp') next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home' && buttons.length) next = 0;
+        else if (event.key === 'End' && buttons.length) next = buttons.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          event.stopPropagation();
+          buttons[next].focus();
+          return;
+        }
+        var action = actionForKey(event.key.length === 1 ? event.key.toLowerCase() : event.key);
+        if (!action) return;
+        event.preventDefault();
+        event.stopPropagation();
+        execute(action);
+      });
+      document.addEventListener('click', function (event) {
+        if (!panel.hidden && !panel.contains(event.target) && event.target !== trigger) close({ restoreFocus: false });
       });
 
-      Archify.exportMenu = { open: open, close: close, isOpen: isOpen, run: runExport };
-
-      // Auto-open on page load for demo/screenshot purposes: ?openExport=1
-      // Wait for fonts (so the menu doesn't flash before typography lands)
-      // and paint before opening. Fallback timeout for browsers without the
-      // Font Loading API.
-      try {
-        if (new URLSearchParams(window.location.search).get('openExport') === '1') {
-          var openWhenReady = function () {
-            requestAnimationFrame(function () { requestAnimationFrame(open); });
+      renderFacts();
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        execute: execute,
+        isOpen: function () { return !panel.hidden; },
+        facts: function () {
+          return {
+            nodes: svg.querySelectorAll('[data-node-id]').length,
+            relationships: relationshipCount(),
+            views: viewCount()
           };
-          if (document.fonts && document.fonts.ready) {
-            document.fonts.ready.then(openWhenReady);
-          } else {
-            setTimeout(openWhenReady, 200);
-          }
         }
-      } catch (_) {}
+      };
     })();
 
     /* ============================================================
        Global keyboard shortcuts
-         T -> toggle theme
-         E -> open export menu
+       ? -> open Diagram Guide
+       T -> toggle theme
+       S -> cycle visual style
+       E -> open export menu
+         F -> toggle presentation stage
+         M -> toggle Semantic Radar
+         L -> toggle Semantic Lens
+         R -> start/clear Route Probe
+         / -> open node finder or the active route endpoint picker
+         + / - -> zoom, 0 -> reset view
+         Escape -> clear temporary trace/focus/view first, then exit presentation
        Ignored when focus is inside an input/textarea/contenteditable.
        ============================================================ */
     document.addEventListener('keydown', function (e) {
       if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.defaultPrevented) return;
       var t = e.target;
       if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
-      if (e.key === 't' || e.key === 'T') {
+      if (Archify.preset && Archify.preset.isOpen() && e.key !== 'Escape' && e.key !== 's' && e.key !== 'S') {
+        Archify.preset.close(false);
+      }
+      if (e.key === '?') {
+        e.preventDefault();
+        Archify.guide.toggle();
+      } else if (e.key === '/') {
+        e.preventDefault();
+        Archify.finder.open();
+      } else if (e.key === 't' || e.key === 'T') {
         e.preventDefault();
         Archify.theme.toggle();
+      } else if (e.key === 's' || e.key === 'S') {
+        e.preventDefault();
+        Archify.preset.cycle();
       } else if (e.key === 'e' || e.key === 'E') {
         e.preventDefault();
         if (!Archify.exportMenu.isOpen()) Archify.exportMenu.open();
+      } else if (e.key === 'f' || e.key === 'F') {
+        e.preventDefault();
+        Archify.presentation.toggle();
+      } else if (e.key === 'm' || e.key === 'M') {
+        e.preventDefault();
+        Archify.radar.toggle();
+      } else if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        Archify.semanticLens.toggle();
+      } else if (e.key === 'r' || e.key === 'R') {
+        e.preventDefault();
+        Archify.routeProbe.toggle({ focusNode: true });
+      } else if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        Archify.view.zoomIn();
+      } else if (e.key === '-') {
+        e.preventDefault();
+        Archify.view.zoomOut();
+      } else if (e.key === '0') {
+        e.preventDefault();
+        Archify.view.reset();
+      } else if (e.key === 'Escape' && Archify.preset.isOpen()) {
+        e.preventDefault();
+        Archify.preset.close(true);
+      } else if (e.key === 'Escape' && Archify.semanticLens.isOpen()) {
+        e.preventDefault();
+        Archify.semanticLens.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.semanticLens.active()) {
+        e.preventDefault();
+        Archify.semanticLens.clear({ preserveView: true });
+      } else if (e.key === 'Escape' && Archify.guide.isOpen()) {
+        e.preventDefault();
+        Archify.guide.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.radar.isOpen()) {
+        e.preventDefault();
+        Archify.radar.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.routeProbe.active()) {
+        e.preventDefault();
+        Archify.routeProbe.escape({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.intentTrace.active()) {
+        e.preventDefault();
+        Archify.intentTrace.clear();
+      } else if (e.key === 'Escape' && Archify.focus.active()) {
+        e.preventDefault();
+        Archify.focus.clear({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.presentation.active()) {
+        e.preventDefault();
+        Archify.presentation.exit();
       }
     });
   </script>
diff --git a/examples/sequence-strict.drawio b/examples/sequence-strict.drawio
new file mode 100644
index 0000000..ac305e9
--- /dev/null
+++ b/examples/sequence-strict.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/sequence.drawio b/examples/sequence.drawio
new file mode 100644
index 0000000..56431f0
--- /dev/null
+++ b/examples/sequence.drawio
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="820" dy="760" grid="1" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="820" pageHeight="760" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="Request" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="150" width="724" height="145" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="Fallback" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="315" width="724" height="190" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="Response + trace" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=none;strokeColor=#b0b0b0;strokeWidth=1;fontColor=#666666;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="48" y="525" width="724" height="140" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;browser session&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="19" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-web" value="&lt;b&gt;Web App&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;React UI&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="127" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;request handler&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="235" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;JWT verify&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="343" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-redis" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;cache&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="451" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;Postgres&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;source of truth&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="559" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#666666&quot;&gt;async event&lt;/font&gt;" style="shape=umlLifeline;perimeter=lifelinePerimeter;size=54;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1.5;fontColor=#000000;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+      <mxGeometry x="667" y="72" width="86" height="623" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-0" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=1;html=1;" vertex="1" parent="node-web">
+      <mxGeometry x="38" y="148" width="10" height="448" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-1" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=1;html=1;" vertex="1" parent="node-api">
+      <mxGeometry x="38" y="156" width="10" height="404" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-2" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#ffe6cc;strokeColor=#d79b00;strokeWidth=1;html=1;" vertex="1" parent="node-auth">
+      <mxGeometry x="38" y="193" width="10" height="45" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-3" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-redis">
+      <mxGeometry x="38" y="277" width="10" height="49" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-4" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#fff2cc;strokeColor=#d6b656;strokeWidth=1;html=1;" vertex="1" parent="node-db">
+      <mxGeometry x="38" y="366" width="10" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="activation-5" value="" style="rounded=1;absoluteArcSize=1;arcSize=3;fillColor=#e1d5e7;strokeColor=#9673a6;strokeWidth=1;html=1;" vertex="1" parent="node-trace">
+      <mxGeometry x="38" y="503" width="10" height="55" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-open-page" value="open page" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.181;exitDx=0;exitDy=0;entryX=0.5;entryY=0.181;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-user" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-request" value="GET /dashboard" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.250;exitDx=0;exitDy=0;entryX=0.5;entryY=0.250;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-verify-jwt" value="verify JWT" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.318;exitDx=0;exitDy=0;entryX=0.5;entryY=0.318;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-auth">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-auth-claims" value="claims ok" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.374;exitDx=0;exitDy=0;entryX=0.5;entryY=0.374;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read" value="read cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.453;exitDx=0;exitDy=0;entryX=0.5;entryY=0.453;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-miss" value="miss" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.512;exitDx=0;exitDy=0;entryX=0.5;entryY=0.512;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-redis" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-query" value="query profile + metrics" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.596;exitDx=0;exitDy=0;entryX=0.5;entryY=0.596;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-profile-rows" value="rows" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.669;exitDx=0;exitDy=0;entryX=0.5;entryY=0.669;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-db" target="node-api">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-write" value="set cache" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.745;exitDx=0;exitDy=0;entryX=0.5;entryY=0.745;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-redis">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-trace-emit" value="emit trace" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.815;exitDx=0;exitDy=0;entryX=0.5;entryY=0.815;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-trace">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-dashboard-response" value="200 JSON" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.888;exitDx=0;exitDy=0;entryX=0.5;entryY=0.888;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-api" target="node-web">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-page-render" value="render" style="edgeStyle=none;rounded=0;strokeColor=#666666;strokeWidth=1.4;dashed=1;dashPattern=3 5;endArrow=block;endFill=1;endSize=14;fontColor=#666666;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0.947;exitDx=0;exitDy=0;entryX=0.5;entryY=0.947;entryDx=0;entryDy=0;" edge="1" parent="1" source="node-web" target="node-user">
+      <mxGeometry x="0" y="-1" relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/web-app-rendered.html b/examples/web-app-rendered.html
index b454244..d3d6579 100644
--- a/examples/web-app-rendered.html
+++ b/examples/web-app-rendered.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6602,7 +6609,7 @@ <h3>Security</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6707,6 +6714,698 @@ <h3>Security</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6724,6 +7423,30 @@ <h3>Security</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/web-app-strict.drawio b/examples/web-app-strict.drawio
new file mode 100644
index 0000000..10b9c6a
--- /dev/null
+++ b/examples/web-app-strict.drawio
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="588" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="588" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="AWS Region: us-west-2" style="rounded=1;absoluteArcSize=1;arcSize=12;fillColor=#f8f7f1;strokeColor=#d97706;strokeWidth=1;dashed=1;dashPattern=8 4;fontColor=#d97706;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="220" y="120" width="820" height="400" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="sg-api :443/:8000" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="430" y="270" width="400" height="110" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-users" value="&lt;b&gt;Users&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;Browser / Mobile&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth Provider&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;OAuth 2.0&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;JWT + PKCE&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="1">
+      <mxGeometry x="40" y="110" width="120" height="64" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cdn" value="&lt;b&gt;CloudFront&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;CDN&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-lb" value="&lt;b&gt;Load Balancer&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;HTTPS :443&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API Server&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;FastAPI :8000&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-1">
+      <mxGeometry x="240" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cache" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;cache :6379&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;PostgreSQL&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;primary :5432&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-s3" value="&lt;b&gt;S3&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;static assets&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#d97706&quot;&gt;OAI protected&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-queue" value="&lt;b&gt;SQS&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;job queue&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-worker" value="&lt;b&gt;Worker&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;async jobs&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-users-to-cdn" value="HTTPS" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-users" target="node-cdn">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-jwt-verification" value="verify JWT" style="edgeStyle=none;rounded=1;arcSize=16;strokeColor=#e11d48;strokeWidth=1.5;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=15;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.359" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="620" y="142"/>
+          <mxPoint x="620" y="246"/>
+          <mxPoint x="735" y="246"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cdn-to-lb" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-cdn" target="node-lb">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-static-assets" value="static" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-cdn" target="node-s3">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.100" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-lb-to-api" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-lb" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read-through" value="read-through" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-cache">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.822" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-api-sql" value="SQL" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.000" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-enqueue-job" value="enqueue" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.5;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=15;fontColor=#ea580c;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-api" target="node-queue">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.100" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-queue-to-worker" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.5;endArrow=block;endFill=1;endSize=15;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-queue" target="node-worker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/web-app.drawio b/examples/web-app.drawio
new file mode 100644
index 0000000..2daac24
--- /dev/null
+++ b/examples/web-app.drawio
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="1080" dy="588" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1080" pageHeight="588" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="AWS Region: us-west-2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="220" y="120" width="820" height="400" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="sg-api :443/:8000" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;" vertex="1" parent="1">
+      <mxGeometry x="430" y="270" width="400" height="110" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-users" value="&lt;b&gt;Users&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;Browser / Mobile&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="120" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-auth" value="&lt;b&gt;Auth Provider&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;OAuth 2.0 · JWT + PKCE&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+      <mxGeometry x="40" y="110" width="120" height="64" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cdn" value="&lt;b&gt;CloudFront&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;CDN&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-lb" value="&lt;b&gt;Load Balancer&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;HTTPS :443&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-1">
+      <mxGeometry x="30" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-api" value="&lt;b&gt;API Server&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;FastAPI :8000&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-1">
+      <mxGeometry x="240" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-cache" value="&lt;b&gt;Redis&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;cache :6379&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="30" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-db" value="&lt;b&gt;PostgreSQL&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;primary :5432&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="180" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-s3" value="&lt;b&gt;S3&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;static assets · OAI protected&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-0">
+      <mxGeometry x="30" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-queue" value="&lt;b&gt;SQS&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;job queue&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-0">
+      <mxGeometry x="450" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-worker" value="&lt;b&gt;Worker&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;async jobs&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="660" y="320" width="130" height="60" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-users-to-cdn" value="HTTPS" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-users" target="node-cdn">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-jwt-verification" value="verify JWT" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-auth" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="620" y="142"/>
+          <mxPoint x="620" y="246"/>
+          <mxPoint x="735" y="246"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cdn-to-lb" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-cdn" target="node-lb">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-static-assets" value="static" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-cdn" target="node-s3">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-lb-to-api" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-lb" target="node-api">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-cache-read-through" value="read-through" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-cache">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-api-sql" value="SQL" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-db">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-enqueue-job" value="enqueue" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-api" target="node-queue">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-queue-to-worker" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-queue" target="node-worker">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/web-app.html b/examples/web-app.html
index b454244..d3d6579 100644
--- a/examples/web-app.html
+++ b/examples/web-app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="classic">
+<html lang="en" data-theme="dark" data-preset="classic" data-diagram-type="architecture">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6602,7 +6609,7 @@ <h3>Security</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6707,6 +6714,698 @@ <h3>Security</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6724,6 +7423,30 @@ <h3>Security</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/workflow-agent-tool-call-rendered-strict.drawio b/examples/workflow-agent-tool-call-rendered-strict.drawio
new file mode 100644
index 0000000..614748c
--- /dev/null
+++ b/examples/workflow-agent-tool-call-rendered-strict.drawio
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#059669;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#ea580c;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;asks for work&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;plan next step&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;context aware&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;scope + consent&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;block risky ops&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;wait or reject&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;revise request&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;shell / browser / MCP&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;structured result&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;network service&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;repo + memory&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;events + output&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.153" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.554" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.284" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.2;endArrow=block;endFill=1;endSize=12;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.396" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.053" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/workflow-agent-tool-call-rendered.drawio b/examples/workflow-agent-tool-call-rendered.drawio
new file mode 100644
index 0000000..a8d4925
--- /dev/null
+++ b/examples/workflow-agent-tool-call-rendered.drawio
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;asks for work&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;plan next step · context aware&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;scope + consent · block risky ops&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;wait or reject&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;revise request&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;shell / browser / MCP · structured result&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;network service&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;repo + memory&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;events + output&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/workflow-agent-tool-call-rendered.html b/examples/workflow-agent-tool-call-rendered.html
index 4732bcd..a0c7379 100644
--- a/examples/workflow-agent-tool-call-rendered.html
+++ b/examples/workflow-agent-tool-call-rendered.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" data-preset="signal-flow">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -3424,6 +3424,11 @@
       -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");
       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");
     }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
     .toolbar .export-menu button[data-format="share-card"],
     .toolbar .export-menu button[data-action="route-share-card"],
     .toolbar .export-menu button[data-action="reach-share-card"] {
@@ -4825,6 +4830,8 @@
         <div class="export-menu-section" role="group" aria-label="Vector and motion">
           <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
           <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
           <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
         </div>
       </div>
@@ -6644,7 +6651,7 @@ <h3>Why It Matters</h3>
       // WebP encoding (older Safari), so detect explicitly.
       function supports(format) {
         if (format === 'share-card') return true;
-        if (format === 'svg' || format === 'png') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
         if (format === 'webm') return canRecordMotion();
         var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
         try {
@@ -6749,6 +6756,698 @@ <h3>Why It Matters</h3>
         }
       });
 
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
       function runExport(format) {
         var base = diagramFilename();
         close(true);
@@ -6766,6 +7465,30 @@ <h3>Why It Matters</h3>
               recordExportReceipt('svg', blob, d.canonicalStateClean);
               download(blob, base + '.svg');
             })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
           : format === 'webm'
             ? recordWebm().then(function (blob) {
                 document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
diff --git a/examples/workflow-agent-tool-call-strict.drawio b/examples/workflow-agent-tool-call-strict.drawio
new file mode 100644
index 0000000..614748c
--- /dev/null
+++ b/examples/workflow-agent-tool-call-strict.drawio
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#059669;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#ea580c;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;asks for work&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;plan next step&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;context aware&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;scope + consent&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;block risky ops&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;wait or reject&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;revise request&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;shell / browser / MCP&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;structured result&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;network service&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;repo + memory&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;events + output&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.153" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.554" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.284" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.2;endArrow=block;endFill=1;endSize=12;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.396" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.053" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/workflow-agent-tool-call.drawio b/examples/workflow-agent-tool-call.drawio
new file mode 100644
index 0000000..a8d4925
--- /dev/null
+++ b/examples/workflow-agent-tool-call.drawio
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;asks for work&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;plan next step · context aware&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;scope + consent · block risky ops&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;wait or reject&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;revise request&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;shell / browser / MCP · structured result&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;network service&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;repo + memory&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;events + output&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/workflow-agent-tool-call.html b/examples/workflow-agent-tool-call.html
index 2d25b4a..a0c7379 100644
--- a/examples/workflow-agent-tool-call.html
+++ b/examples/workflow-agent-tool-call.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="dark" data-preset="signal-flow" data-diagram-type="workflow">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="generator" content="archify 2.9.0">
+  <meta name="generator" content="archify 2.14.0">
   <title>Agent Tool Call Workflow Diagram</title>
   <script>
     // Resolve the theme before first paint so light-preference users don't
@@ -14,6 +14,12 @@
         try {
           var param = new URLSearchParams(window.location.search).get('theme');
           if (param === 'light' || param === 'dark') theme = param;
+          if (new URLSearchParams(window.location.search).get('embed') === '1') {
+            document.documentElement.setAttribute('data-embed', 'true');
+          }
+          if (new URLSearchParams(window.location.search).get('present') === '1') {
+            document.documentElement.setAttribute('data-present', 'true');
+          }
         } catch (_) {}
         if (!theme) {
           try { theme = localStorage.getItem('archify-theme'); } catch (_) {}
@@ -44,7 +50,7 @@
       --text: #ffffff;
       --text-muted: #94a3b8;
       --text-dim: #475569;
-      /* UI chrome (menu hints, footer) needs more contrast than SVG .t-dim accents */
+      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */
       --text-faint: #7d8da1;
 
       --panel: rgba(15, 23, 42, 0.5);
@@ -121,6 +127,227 @@
       --toolbar-menu-bg:  #ffffff;
     }
 
+    /* ==========================================================
+       SIGNAL FLOW — an opt-in, motion-forward visual preset.
+       The variables also target a standalone exported SVG, whose
+       root carries data-preset and data-theme directly.
+       ========================================================== */
+    [data-preset="signal-flow"][data-theme="dark"] {
+      --bg: #030711;
+      --grid: #15233a;
+      --panel: rgba(6, 14, 28, 0.78);
+      --panel-border: #1d3350;
+      --lane-fill: rgba(9, 22, 40, 0.5);
+      --lane-stroke: #2c4564;
+      --text: #f5fbff;
+      --text-muted: #9eb0c7;
+      --text-dim: #52667f;
+      --text-faint: #7890ad;
+      --mask: #07101e;
+      --frontend-fill: rgba(6, 182, 212, 0.14);
+      --frontend-stroke: #67e8f9;
+      --backend-fill: rgba(16, 185, 129, 0.14);
+      --backend-stroke: #5eead4;
+      --database-fill: rgba(139, 92, 246, 0.16);
+      --database-stroke: #c4b5fd;
+      --cloud-fill: rgba(245, 158, 11, 0.13);
+      --cloud-stroke: #fcd34d;
+      --security-fill: rgba(244, 63, 94, 0.13);
+      --security-stroke: #fda4af;
+      --messagebus-fill: rgba(249, 115, 22, 0.13);
+      --messagebus-stroke: #fdba74;
+      --external-fill: rgba(71, 85, 105, 0.24);
+      --external-stroke: #a5b4c7;
+      --arrow: #7890ad;
+      --arrow-emphasis: #2dd4bf;
+      --toolbar-bg: rgba(7, 16, 30, 0.86);
+      --toolbar-border: #29415f;
+      --toolbar-menu-bg: #07101e;
+    }
+
+    [data-preset="signal-flow"][data-theme="light"] {
+      --bg: #f4f9fc;
+      --grid: #d4e5ee;
+      --panel: rgba(255, 255, 255, 0.82);
+      --panel-border: #bfd5e2;
+      --lane-fill: rgba(232, 243, 248, 0.62);
+      --lane-stroke: #a9c5d5;
+      --text: #102638;
+      --text-muted: #587287;
+      --text-dim: #8aa2b4;
+      --text-faint: #668397;
+      --mask: #ffffff;
+      --frontend-fill: rgba(6, 182, 212, 0.09);
+      --frontend-stroke: #0789a1;
+      --backend-fill: rgba(5, 150, 105, 0.09);
+      --backend-stroke: #087f69;
+      --database-fill: rgba(124, 58, 237, 0.09);
+      --database-stroke: #7254c7;
+      --cloud-fill: rgba(217, 119, 6, 0.08);
+      --cloud-stroke: #b9670b;
+      --security-fill: rgba(225, 29, 72, 0.08);
+      --security-stroke: #c53a59;
+      --messagebus-fill: rgba(234, 88, 12, 0.08);
+      --messagebus-stroke: #c65f27;
+      --external-fill: rgba(100, 116, 139, 0.1);
+      --external-stroke: #607a8c;
+      --arrow: #7b97aa;
+      --arrow-emphasis: #0d9488;
+    }
+
+    /* ==========================================================
+       BLUEPRINT — a review-first drafting preset for deployment,
+       infrastructure, and technical design documentation. It keeps
+       the same semantic palette and geometry while trading glow for
+       precise grid contrast, squared materials, and drafting marks.
+       ========================================================== */
+    [data-preset="blueprint"][data-theme="dark"] {
+      --bg: #06131f;
+      --grid: #17425a;
+      --panel: rgba(7, 27, 43, 0.9);
+      --panel-border: #27627f;
+      --lane-fill: rgba(10, 43, 66, 0.36);
+      --lane-stroke: #34799a;
+      --text: #e3f6ff;
+      --text-muted: #91b8ca;
+      --text-dim: #557e92;
+      --text-faint: #739caf;
+      --mask: #0a2031;
+      --frontend-fill: rgba(26, 157, 193, 0.14);
+      --frontend-stroke: #66d9ef;
+      --backend-fill: rgba(31, 155, 124, 0.13);
+      --backend-stroke: #69dfbd;
+      --database-fill: rgba(120, 105, 196, 0.14);
+      --database-stroke: #b4a8ff;
+      --cloud-fill: rgba(197, 145, 43, 0.13);
+      --cloud-stroke: #ffd166;
+      --security-fill: rgba(199, 76, 104, 0.13);
+      --security-stroke: #ff8da1;
+      --messagebus-fill: rgba(207, 112, 49, 0.13);
+      --messagebus-stroke: #ffad66;
+      --external-fill: rgba(84, 119, 139, 0.18);
+      --external-stroke: #a7cad9;
+      --arrow: #78a3b7;
+      --arrow-emphasis: #64dfc1;
+      --toolbar-bg: rgba(7, 28, 45, 0.92);
+      --toolbar-border: #34799a;
+      --toolbar-text: #d8f3ff;
+      --toolbar-hover: rgba(18, 58, 83, 0.95);
+      --toolbar-menu-bg: #0a2031;
+    }
+
+    [data-preset="blueprint"][data-theme="light"] {
+      --bg: #edf7fa;
+      --grid: #b5d5e1;
+      --panel: rgba(249, 253, 255, 0.94);
+      --panel-border: #78aabd;
+      --lane-fill: rgba(210, 232, 240, 0.42);
+      --lane-stroke: #83b2c4;
+      --text: #123344;
+      --text-muted: #4e7486;
+      --text-dim: #86a6b4;
+      --text-faint: #668c9d;
+      --mask: #f9fdff;
+      --frontend-fill: rgba(8, 145, 178, 0.08);
+      --frontend-stroke: #087f9c;
+      --backend-fill: rgba(5, 128, 101, 0.08);
+      --backend-stroke: #08755f;
+      --database-fill: rgba(100, 75, 180, 0.08);
+      --database-stroke: #6757a8;
+      --cloud-fill: rgba(181, 120, 15, 0.08);
+      --cloud-stroke: #a86609;
+      --security-fill: rgba(190, 48, 80, 0.07);
+      --security-stroke: #b32f50;
+      --messagebus-fill: rgba(196, 81, 22, 0.07);
+      --messagebus-stroke: #b65120;
+      --external-fill: rgba(79, 112, 128, 0.08);
+      --external-stroke: #506f7e;
+      --arrow: #6d93a5;
+      --arrow-emphasis: #087f69;
+      --toolbar-bg: rgba(247, 252, 254, 0.94);
+      --toolbar-border: #8ab5c5;
+      --toolbar-text: #294f61;
+      --toolbar-hover: #ffffff;
+      --toolbar-menu-bg: #f9fdff;
+    }
+
+    /* ==========================================================
+       EDITORIAL — a warm, publication-minded preset for design
+       reviews, launch notes, and documentation. The diagram keeps
+       the same semantic palette and exact geometry, but trades
+       software chrome for paper, ink, ruled structure, and one
+       restrained vermilion accent.
+       ========================================================== */
+    [data-preset="editorial"][data-theme="dark"] {
+      --bg: #181611;
+      --grid: #39342a;
+      --panel: rgba(35, 31, 24, 0.96);
+      --panel-border: #625a4a;
+      --lane-fill: rgba(52, 46, 35, 0.46);
+      --lane-stroke: #726957;
+      --text: #f4eddf;
+      --text-muted: #b9ae9b;
+      --text-dim: #776e60;
+      --text-faint: #9d917e;
+      --mask: #231f18;
+      --frontend-fill: rgba(43, 133, 142, 0.16);
+      --frontend-stroke: #7fc6c7;
+      --backend-fill: rgba(63, 132, 92, 0.16);
+      --backend-stroke: #8fc29e;
+      --database-fill: rgba(117, 91, 141, 0.17);
+      --database-stroke: #c0a4d0;
+      --cloud-fill: rgba(170, 119, 49, 0.16);
+      --cloud-stroke: #d8ad68;
+      --security-fill: rgba(157, 69, 65, 0.17);
+      --security-stroke: #df9085;
+      --messagebus-fill: rgba(174, 79, 42, 0.16);
+      --messagebus-stroke: #df946f;
+      --external-fill: rgba(126, 115, 96, 0.18);
+      --external-stroke: #b8ad99;
+      --arrow: #948978;
+      --arrow-emphasis: #dd6b3d;
+      --toolbar-bg: rgba(35, 31, 24, 0.92);
+      --toolbar-border: #625a4a;
+      --toolbar-text: #eee5d5;
+      --toolbar-hover: #302a20;
+      --toolbar-menu-bg: #231f18;
+    }
+
+    [data-preset="editorial"][data-theme="light"] {
+      --bg: #f2eee5;
+      --grid: #d8d0c2;
+      --panel: rgba(251, 248, 241, 0.97);
+      --panel-border: #c4b9a6;
+      --lane-fill: rgba(229, 221, 207, 0.42);
+      --lane-stroke: #b8aa94;
+      --text: #242018;
+      --text-muted: #6f6658;
+      --text-dim: #a09788;
+      --text-faint: #817767;
+      --mask: #fbf8f1;
+      --frontend-fill: rgba(31, 117, 126, 0.09);
+      --frontend-stroke: #287e84;
+      --backend-fill: rgba(42, 119, 75, 0.09);
+      --backend-stroke: #397b53;
+      --database-fill: rgba(105, 75, 130, 0.09);
+      --database-stroke: #765d86;
+      --cloud-fill: rgba(157, 103, 31, 0.1);
+      --cloud-stroke: #9a671f;
+      --security-fill: rgba(153, 58, 52, 0.09);
+      --security-stroke: #9e463f;
+      --messagebus-fill: rgba(182, 70, 27, 0.09);
+      --messagebus-stroke: #ad4b25;
+      --external-fill: rgba(101, 91, 75, 0.09);
+      --external-stroke: #746b5e;
+      --arrow: #8a806f;
+      --arrow-emphasis: #bb4c23;
+      --toolbar-bg: rgba(251, 248, 241, 0.94);
+      --toolbar-border: #c4b9a6;
+      --toolbar-text: #40392f;
+      --toolbar-hover: #fffdf8;
+      --toolbar-menu-bg: #fbf8f1;
+    }
+
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {
@@ -132,9 +359,266 @@
       transition: background 0.2s ease, color 0.2s ease;
     }
 
-    .container { max-width: 1200px; margin: 0 auto; }
+    html[data-preset="signal-flow"] body {
+      background-image:
+        radial-gradient(circle at 18% -8%, rgba(34, 211, 238, 0.14), transparent 34rem),
+        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.12), transparent 30rem);
+      background-attachment: fixed;
+    }
+    html[data-preset="signal-flow"][data-theme="light"] body {
+      background-image:
+        radial-gradient(circle at 18% -8%, rgba(6, 182, 212, 0.12), transparent 34rem),
+        radial-gradient(circle at 92% 18%, rgba(139, 92, 246, 0.08), transparent 30rem);
+    }
+    html[data-preset="blueprint"] body {
+      background-image:
+        linear-gradient(var(--grid) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+      background-size: 32px 32px;
+      background-position: -1px -1px;
+      background-attachment: fixed;
+    }
+    html[data-preset="editorial"] body {
+      background-image:
+        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)),
+        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);
+      background-attachment: fixed;
+    }
+
+    /* Gallery/embed mode keeps the generated artifact as the source of truth
+       while presenting only its diagram surface inside a proof card. */
+    html[data-embed="true"] body {
+      min-height: 0;
+      padding: 0;
+      overflow: hidden;
+      background: var(--bg);
+      background-image: none;
+    }
+    html[data-embed="true"] .toolbar,
+    html[data-embed="true"] .header,
+    html[data-embed="true"] .cards,
+    html[data-embed="true"] .diagram-nav,
+    html[data-embed="true"] .overview-map,
+    html[data-embed="true"] .focus-chip,
+    html[data-embed="true"] .route-probe,
+    html[data-embed="true"] .semantic-lens,
+    html[data-embed="true"] .diagram-guide,
+    html[data-embed="true"] .node-finder,
+    html[data-embed="true"] .guided-views { display: none !important; }
+    html[data-embed="true"] .container { max-width: none; }
+    html[data-embed="true"] .diagram-container {
+      padding: 0.5rem;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+    html[data-embed="true"] .diagram-container svg { min-width: 0; }
+
+    /* Share Chapter Cue lives in the HTML viewer layer, not inside the SVG.
+       It gives one-shot embeds a title, authored note, truthful stop order,
+       and lifecycle state while canonical diagram geometry stays untouched. */
+    .share-chapter-cue { display: none; }
+    html[data-embed="true"][data-share-playback="true"] .share-chapter-cue:not([hidden]),
+    html[data-embed="true"][data-share-moment="true"] .share-chapter-cue:not([hidden]) {
+      position: absolute;
+      z-index: 18;
+      top: 0.85rem;
+      left: 50%;
+      display: grid;
+      grid-template-columns: auto minmax(9rem, 13.5rem) minmax(0, 1fr);
+      align-items: center;
+      gap: 0.45rem 0.85rem;
+      width: min(52rem, calc(100% - 1.5rem));
+      min-height: 3.35rem;
+      padding: 0.55rem 0.75rem 0.65rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));
+      border-radius: 0.75rem;
+      background:
+        linear-gradient(115deg, color-mix(in srgb, var(--frontend-fill) 52%, transparent), transparent 45%),
+        color-mix(in srgb, var(--toolbar-menu-bg) 92%, transparent);
+      color: var(--toolbar-text);
+      box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
+      backdrop-filter: blur(16px);
+      pointer-events: none;
+      animation: archify-share-cue-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    html[data-preset="blueprint"] .share-chapter-cue {
+      border-radius: 0.2rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 46%, transparent), transparent 36%),
+        var(--toolbar-menu-bg);
+      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
+      backdrop-filter: none;
+    }
+    html[data-preset="editorial"] .share-chapter-cue {
+      border-color: var(--panel-border);
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 42%),
+        var(--toolbar-menu-bg);
+      box-shadow: 0 10px 30px color-mix(in srgb, #000 18%, transparent);
+      backdrop-filter: none;
+    }
+    html[data-preset="editorial"] .share-chapter-state { color: var(--arrow-emphasis); }
+    html[data-preset="editorial"] .share-chapter-state::before {
+      border-radius: 0;
+      box-shadow: none;
+      transform: rotate(45deg) scale(0.8);
+    }
+    .share-chapter-index {
+      display: grid;
+      gap: 0.12rem;
+      min-width: 5rem;
+      padding-right: 0.75rem;
+      border-right: 1px solid var(--toolbar-border);
+    }
+    .share-chapter-state {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.36rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+    .share-chapter-state::before {
+      width: 0.38rem;
+      height: 0.38rem;
+      border-radius: 50%;
+      background: currentColor;
+      box-shadow: 0 0 10px currentColor;
+      content: '';
+    }
+    .share-chapter-cue[data-state="playing"] .share-chapter-state::before {
+      animation: archify-share-cue-pulse 1.15s ease-in-out infinite;
+    }
+    .share-chapter-count {
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .share-chapter-copy { min-width: 0; }
+    .share-chapter-copy strong,
+    .share-chapter-copy small,
+    .share-chapter-route {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .share-chapter-copy strong {
+      color: var(--toolbar-text);
+      font-size: 0.6875rem;
+      line-height: 1.35;
+    }
+    .share-chapter-copy small {
+      margin-top: 0.08rem;
+      color: var(--text-muted);
+      font-size: 0.5rem;
+      line-height: 1.35;
+    }
+    .share-chapter-route {
+      color: color-mix(in srgb, var(--frontend-stroke) 76%, var(--text-muted));
+      font-size: 0.5625rem;
+      font-weight: 650;
+      letter-spacing: 0.015em;
+      text-align: right;
+    }
+    .share-chapter-progress {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      overflow: hidden;
+      background: color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    .share-chapter-progress span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, var(--frontend-stroke), var(--database-stroke));
+      box-shadow: 0 0 12px var(--frontend-stroke);
+      transform: scaleX(0);
+      transform-origin: left center;
+    }
+
+    /* Presentation Stage is a viewer-only layer: it gives the live diagram
+       the viewport while keeping guided views, theme, focus, and exports real.
+       Embed mode wins when both query parameters are present. */
+    html[data-present="true"]:not([data-embed="true"]) body {
+      height: 100dvh;
+      min-height: 0;
+      padding: 1rem;
+      overflow: hidden;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      width: 100%;
+      max-width: none;
+      height: calc(100dvh - 2rem);
+    }
+    html[data-present="true"]:not([data-embed="true"]) .header {
+      flex: none;
+      min-width: 0;
+      margin: 0;
+      padding-right: 23rem;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .header-row { margin-bottom: 0.25rem; }
+    html[data-present="true"]:not([data-embed="true"]) .subtitle {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .guided-views {
+      flex: none;
+      margin-bottom: 0;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .diagram-container {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: center;
+      min-height: 0;
+      padding: 0.75rem;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .diagram-container > svg {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+    }
+    html[data-present="true"]:not([data-embed="true"]) .cards { display: none; }
+    html[data-present="true"]:not([data-embed="true"]) #btn-present {
+      border-color: var(--frontend-stroke);
+      color: var(--frontend-stroke);
+    }
+
+    /* The reader owns only the outer scale. Wide diagrams keep one authored
+       SVG/viewBox while the runtime chooses a desktop width from the actual
+       vertical budget. This avoids device-specific files and breakpoint
+       jumps between a laptop and a tall monitor. */
+    .container {
+      width: 100%;
+      max-width: var(--archify-reader-width, 1440px);
+      margin: 0 auto;
+    }
+    @media (min-width: 768px) and (max-height: 920px) {
+      .header { margin-bottom: 1rem; }
+      .diagram-container { padding: 1rem; }
+      .cards { margin-top: 1rem; }
+      .card { padding: 1rem; }
+    }
+
+    .header { margin-bottom: 1.5rem; padding-right: 29.5rem; }
 
-    .header { margin-bottom: 2rem; }
+    html[data-preset="signal-flow"] .header,
+    html[data-preset="blueprint"] .header,
+    html[data-preset="editorial"] .header { padding-right: 29.5rem; }
 
     .header-row {
       display: flex;
@@ -148,9 +632,11 @@
       height: 12px;
       background: var(--frontend-stroke);
       border-radius: 50%;
-      animation: pulse 2s infinite;
+      animation: none;
     }
 
+    html[data-motion-capable="true"] .pulse-dot { animation: pulse 2s infinite; }
+
     @keyframes pulse {
       0%, 100% { opacity: 1; }
       50% { opacity: 0.5; }
@@ -168,1102 +654,13814 @@
       margin-left: 1.75rem;
     }
 
+    html[data-preset="signal-flow"] .header-row::after {
+      content: "SIGNAL FLOW";
+      margin-left: auto;
+      color: var(--frontend-stroke);
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 999px;
+      padding: 0.28rem 0.6rem;
+      font-size: 0.625rem;
+      letter-spacing: 0.12em;
+      opacity: 0.82;
+      box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
+      white-space: nowrap;
+    }
+
+    html[data-preset="blueprint"] .pulse-dot {
+      width: 10px;
+      height: 10px;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 1px;
+      background: transparent;
+      box-shadow: inset 0 0 0 2px var(--bg);
+      transform: rotate(45deg);
+      animation: none;
+    }
+    html[data-preset="blueprint"] .header-row::after {
+      content: "BLUEPRINT / REV 01";
+      margin-left: auto;
+      padding: 0.28rem 0.55rem;
+      border-top: 1px solid var(--frontend-stroke);
+      border-bottom: 1px solid var(--frontend-stroke);
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 700;
+      letter-spacing: 0.14em;
+      white-space: nowrap;
+    }
+
+    html[data-preset="editorial"] h1,
+    html[data-preset="editorial"] .card h3 {
+      font-family: Georgia, 'Times New Roman', 'Songti SC', STSong, serif;
+      letter-spacing: -0.02em;
+    }
+    html[data-preset="editorial"] h1 { font-size: 1.72rem; font-weight: 600; }
+    html[data-preset="editorial"] .pulse-dot {
+      width: 9px;
+      height: 9px;
+      border: 1px solid var(--arrow-emphasis);
+      border-radius: 0;
+      background: var(--arrow-emphasis);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);
+      transform: rotate(45deg);
+      animation: none;
+    }
+    html[data-preset="editorial"] .header-row::after {
+      content: "EDITORIAL / FIELD NOTE";
+      margin-left: auto;
+      padding: 0.32rem 0 0.24rem;
+      border-bottom: 2px solid var(--arrow-emphasis);
+      color: var(--arrow-emphasis);
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 0.625rem;
+      font-style: italic;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      white-space: nowrap;
+    }
+
     .diagram-container {
       background: var(--panel);
       border-radius: 1rem;
       border: 1px solid var(--panel-border);
       padding: 1.5rem;
-      overflow-x: auto;
+      overflow: hidden;
+      position: relative;
     }
 
-    svg {
-      width: 100%;
-      min-width: min(900px, 100%);
-      display: block;
+    html[data-preset="signal-flow"] .diagram-container {
+      position: relative;
+      overflow: hidden;
+      background: linear-gradient(180deg, rgba(8, 20, 38, 0.82), rgba(3, 8, 18, 0.94));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.34);
     }
-
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
-      margin-top: 2rem;
+    html[data-preset="signal-flow"][data-theme="light"] .diagram-container {
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(237, 246, 250, 0.94));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 60px rgba(45, 78, 99, 0.12);
     }
-
-    .card {
+    html[data-preset="blueprint"] .diagram-container {
+      border-color: var(--panel-border);
+      border-radius: 0.35rem;
       background: var(--panel);
-      border-radius: 0.75rem;
+      box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 34%, transparent),
+        0 18px 48px rgba(0, 0, 0, 0.16);
+    }
+    html[data-preset="blueprint"] .diagram-container::after {
+      content: "";
+      position: absolute;
+      z-index: 10;
+      inset: 0.7rem;
+      pointer-events: none;
+      background:
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left top / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right top / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) left bottom / 1px 1.35rem no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1.35rem 1px no-repeat,
+        linear-gradient(var(--frontend-stroke), var(--frontend-stroke)) right bottom / 1px 1.35rem no-repeat;
+      opacity: 0.58;
+    }
+    html[data-preset="editorial"] .diagram-container {
+      overflow: hidden;
+      border-color: var(--panel-border);
+      border-radius: 0.38rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--security-fill) 58%, transparent), transparent 12%),
+        var(--panel);
+      box-shadow:
+        0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
+        0 18px 48px color-mix(in srgb, #000 19%, transparent);
+    }
+    html[data-preset="editorial"] .diagram-container::after {
+      position: absolute;
+      z-index: 10;
+      top: 0.72rem;
+      right: 1.25rem;
+      padding: 0.2rem 0.52rem;
       border: 1px solid var(--panel-border);
-      padding: 1.25rem;
+      background: var(--panel);
+      color: var(--arrow-emphasis);
+      content: "ARCHIFY / PLATE 04";
+      font-family: Georgia, 'Times New Roman', serif;
+      font-size: 0.52rem;
+      font-style: italic;
+      font-weight: 600;
+      letter-spacing: 0.09em;
+      pointer-events: none;
     }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.75rem;
+    html[data-embed="true"][data-preset="editorial"] .diagram-container::after { display: none; }
+    html[data-motion-capable="true"][data-preset="signal-flow"][data-ambient-motion="running"] .diagram-container::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(115deg, transparent 28%, rgba(103, 232, 249, 0.035) 48%, transparent 68%);
+      transform: translateX(-70%);
+      animation: archify-signal-scan 4.8s ease-in-out 1 both;
     }
 
-    .card-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
+    /* Motion Governor gives the reader a real static state and gives the
+       strongest semantic action the only motion budget. Atmosphere resets to
+       its authored base instead of freezing mid-cycle. Static artifacts never
+       start a decorative pulse or scan. */
+    html:not([data-motion-capable="true"]) svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
     }
-
-    .card-dot.cyan     { background: var(--frontend-stroke); }
-    .card-dot.emerald  { background: var(--backend-stroke); }
-    .card-dot.violet   { background: var(--database-stroke); }
-    .card-dot.amber    { background: var(--cloud-stroke); }
-    .card-dot.rose     { background: var(--security-stroke); }
-    .card-dot.orange   { background: var(--messagebus-stroke); }
-    .card-dot.slate    { background: var(--external-stroke); }
-
-    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }
-
-    .card ul {
-      list-style: none;
-      color: var(--text-muted);
-      font-size: 0.75rem;
+    html[data-motion="still"] .pulse-dot,
+    html[data-motion="still"] .diagram-container::before,
+    html[data-motion="still"] svg[data-animation="trace"] [data-animate],
+    html[data-motion-owner] .pulse-dot,
+    html[data-motion-owner] .diagram-container::before,
+    html[data-motion-owner] svg[data-animation="trace"] [data-animate],
+    html[data-embed="true"] .pulse-dot,
+    html[data-embed="true"] .diagram-container::before,
+    html[data-share-playback="true"] .pulse-dot,
+    html[data-share-playback="true"] .diagram-container::before,
+    html[data-document-hidden="true"] .pulse-dot,
+    html[data-document-hidden="true"] .diagram-container::before,
+    html[data-document-hidden="true"] svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
+    }
+    html[data-motion="still"] .diagram-container::before,
+    html[data-motion-owner] .diagram-container::before,
+    html[data-embed="true"] .diagram-container::before,
+    html[data-share-playback="true"] .diagram-container::before {
+      opacity: 0;
+    }
+    html[data-motion="still"] .guided-view-progress span,
+    html[data-motion="still"] .guided-story-caption,
+    html[data-motion="still"] .story-trail-flow,
+    html[data-motion="still"] .intent-trace-flow,
+    html[data-motion="still"] .route-probe-flow,
+    html[data-motion="still"] .route-journey-flow,
+    html[data-motion="still"] .semantic-lens-flow,
+    html[data-motion="still"] .diagram-guide,
+    html[data-motion="still"] [data-story-step],
+    html[data-motion="still"] .overview-map-live,
+    html[data-motion="still"] .guided-view-stop,
+    html[data-motion="still"] .share-chapter-cue,
+    html[data-motion="still"] .share-chapter-state::before,
+    html[data-motion="still"] .share-chapter-progress span,
+    html[data-document-hidden="true"] .guided-view-progress span,
+    html[data-document-hidden="true"] .story-trail-flow,
+    html[data-document-hidden="true"] .intent-trace-flow,
+    html[data-document-hidden="true"] .route-probe-flow,
+    html[data-document-hidden="true"] .route-journey-flow,
+    html[data-document-hidden="true"] .semantic-lens-flow,
+    html[data-document-hidden="true"] .diagram-guide,
+    html[data-document-hidden="true"] [data-story-step],
+    html[data-document-hidden="true"] .overview-map-live,
+    html[data-document-hidden="true"] .guided-view-stop,
+    html[data-document-hidden="true"] .share-chapter-cue,
+    html[data-document-hidden="true"] .share-chapter-state::before,
+    html[data-document-hidden="true"] .share-chapter-progress span {
+      animation: none !important;
+    }
+    html[data-motion="still"] .guided-view-progress span {
+      transform: scaleX(1) !important;
+    }
+    html[data-motion="still"] svg[data-story-playing="true"] .story-trail-flow {
+      stroke-dasharray: none;
+      stroke-dashoffset: 0;
+      opacity: 0.55;
+    }
+    html[data-motion="still"] .intent-trace-flow,
+    html[data-motion="still"] .route-probe-flow {
+      stroke-dasharray: none;
+      stroke-dashoffset: 0;
+      opacity: 0.72;
+    }
+    html[data-motion="still"] .route-journey-overlay,
+    html[data-document-hidden="true"] .route-journey-overlay { display: none !important; }
+    html[data-motion="still"] .relationship-pulse-overlay,
+    html[data-motion="still"] .story-carrier-overlay,
+    html[data-document-hidden="true"] .story-carrier-overlay { display: none !important; }
+    html[data-motion="still"] .chapter-handoff-overlay { display: none !important; }
+    html[data-motion="still"] .chapter-handoff-anchor { animation: none !important; }
+    html[data-motion="still"] .guided-view-chapter,
+    html[data-motion="still"] svg [data-node-id],
+    html[data-motion="still"] svg [data-edge-from],
+    html[data-motion="still"] svg [data-detail],
+    html[data-motion="still"] svg [data-detail-anchor],
+    html[data-motion="still"] svg [data-legend-hit],
+    html[data-motion="still"] svg {
+      transition: none !important;
     }
 
-    .card li { margin-bottom: 0.375rem; }
-
-    /* ==========================================================
-       Print stylesheet — hide interactive controls, force light,
-       drop the grid so the diagram doesn't waste ink, use landscape
-       so wide diagrams fit, pack summary cards into 2 columns to
-       avoid an orphan card on a trailing page.
-       ========================================================== */
-    @page { size: landscape; margin: 1.5cm; }
+    svg {
+      width: 100%;
+      min-width: min(900px, 100%);
+      display: block;
+      transform-origin: 0 0;
+      transition: transform 0.18s ease;
+    }
 
-    @media print {
-      /* Force the FULL light palette — including component fills/strokes and
-         lane/arrow colors — so printing from dark theme doesn't put neon
-         strokes and translucent dark fills on white paper. */
-      :root, [data-theme="dark"], [data-theme="light"] {
-        --bg: #ffffff;
-        --grid: transparent;
-        --panel: #ffffff;
-        --panel-border: #e2e8f0;
-        --text: #0f172a;
-        --text-muted: #475569;
-        --text-dim: #94a3b8;
-        --text-faint: #64748b;
-        --mask: #ffffff;
-        --lane-fill: rgba(248, 250, 252, 0.65);
-        --lane-stroke: #cbd5e1;
-        --arrow: #94a3b8;
-        --arrow-emphasis: #059669;
-        --frontend-fill:    rgba(34, 211, 238, 0.15);
-        --frontend-stroke:  #0891b2;
-        --backend-fill:     rgba(52, 211, 153, 0.18);
-        --backend-stroke:   #059669;
-        --database-fill:    rgba(167, 139, 250, 0.2);
-        --database-stroke:  #7c3aed;
-        --cloud-fill:       rgba(251, 191, 36, 0.18);
-        --cloud-stroke:     #d97706;
-        --security-fill:    rgba(251, 113, 133, 0.15);
-        --security-stroke:  #e11d48;
-        --messagebus-fill:  rgba(251, 146, 60, 0.15);
-        --messagebus-stroke:#ea580c;
-        --external-fill:    rgba(148, 163, 184, 0.18);
-        --external-stroke:  #64748b;
-      }
-      body { background: #ffffff !important; padding: 0; }
-      .container { max-width: none; }
-      .toolbar, .archify-toast, .no-print { display: none !important; }
-      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }
-      .cards { grid-template-columns: 1fr 1fr; }
-      /* Ensure elements break sensibly across pages */
-      .card { break-inside: avoid; page-break-inside: avoid; }
-      .diagram-container { break-inside: avoid; page-break-inside: avoid; }
-      h1, .subtitle { color: #0f172a; }
+    .diagram-container.is-camera-moving svg {
+      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
     }
+    .diagram-container.is-camera-transaction svg { transition: none; }
+    .diagram-container.is-pannable { cursor: grab; }
+    .diagram-container.is-panning { cursor: grabbing; user-select: none; }
+    .diagram-container.is-panning svg { transition: none; }
 
-    /* ==========================================================
-       TOOLBAR (theme toggle + export menu)
-       ========================================================== */
-    .toolbar {
-      position: fixed;
-      top: 1rem;
+    .diagram-nav {
+      position: absolute;
       right: 1rem;
-      display: flex;
-      gap: 0.5rem;
-      z-index: 100;
+      bottom: 1rem;
+      z-index: 12;
+      display: inline-flex;
+      align-items: center;
+      max-width: calc(100% - 2rem);
+      padding: 0.15rem;
+      gap: 0;
+      overflow-x: auto;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 48%, transparent);
+      border-radius: 0.58rem;
+      background: color-mix(in srgb, var(--toolbar-bg) 82%, transparent);
+      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.07);
+      backdrop-filter: blur(10px);
+      scrollbar-width: none;
     }
-    .toolbar button {
-      background: var(--toolbar-bg);
+    .diagram-nav::-webkit-scrollbar { display: none; }
+    .diagram-nav button,
+    .focus-chip button,
+    .guided-views button {
+      border: 0;
+      background: transparent;
       color: var(--toolbar-text);
-      border: 1px solid var(--toolbar-border);
-      padding: 0.5rem 0.875rem;
-      border-radius: 0.5rem;
-      font-family: inherit;
-      font-size: 0.75rem;
-      font-weight: 500;
+      font: inherit;
       cursor: pointer;
-      backdrop-filter: blur(8px);
-      transition: background 0.15s, border-color 0.15s;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
     }
-    .toolbar button:hover {
-      background: var(--toolbar-hover);
-      border-color: var(--arrow);
+    .diagram-nav button {
+      min-width: 2rem;
+      height: 2rem;
+      padding: 0 0.35rem;
+      border-radius: 0.35rem;
+      color: color-mix(in srgb, var(--toolbar-text) 68%, transparent);
+      font-size: 0.56rem;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      transition: background 0.15s, color 0.15s;
     }
-    .toolbar button:focus-visible {
+    .diagram-nav button:hover,
+    .diagram-nav button:focus-visible,
+    .focus-chip button:hover,
+    .focus-chip button:focus-visible,
+    .guided-views button:hover,
+    .guided-views button:focus-visible { background: var(--toolbar-hover); }
+    .diagram-nav button:focus-visible,
+    .focus-chip button:focus-visible,
+    .guided-views button:focus-visible {
       outline: 2px solid var(--frontend-stroke);
-      outline-offset: 2px;
+      outline-offset: 1px;
     }
-    .toolbar .export-wrap { position: relative; }
-    .toolbar .export-menu {
+    .diagram-nav button:disabled { opacity: 0.38; cursor: default; }
+    .diagram-nav button:disabled:hover { background: transparent; }
+    .diagram-nav #btn-route-probe,
+    .diagram-nav #btn-overview-map,
+    .diagram-nav #btn-semantic-lens {
+      min-width: auto;
+      padding-inline: 0.5rem;
+      color: color-mix(in srgb, var(--toolbar-text) 86%, transparent);
+      font-weight: 650;
+    }
+    .diagram-nav #btn-node-finder,
+    .diagram-nav [data-view="out"] {
+      position: relative;
+      margin-left: 0.25rem;
+    }
+    .diagram-nav #btn-node-finder::before,
+    .diagram-nav [data-view="out"]::before {
       position: absolute;
-      top: calc(100% + 0.375rem);
-      right: 0;
-      background: var(--toolbar-menu-bg);
-      border: 1px solid var(--toolbar-border);
-      border-radius: 0.5rem;
-      padding: 0.375rem;
-      min-width: 160px;
-      display: none;
-      flex-direction: column;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+      top: 0.4rem;
+      bottom: 0.4rem;
+      left: -0.13rem;
+      width: 1px;
+      background: color-mix(in srgb, var(--toolbar-border) 62%, transparent);
+      content: "";
+      pointer-events: none;
     }
-    .toolbar .export-menu.open { display: flex; }
-    .toolbar .export-menu button {
-      background: transparent;
+    .diagram-nav-icon {
+      display: block;
+      width: 0.72rem;
+      height: 0.72rem;
+      margin: auto;
+      background: currentColor;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .diagram-nav-icon.find {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.guide {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.minus {
+      -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");
+      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");
+    }
+    .diagram-nav-icon.plus {
+      -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");
+      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");
+    }
+    .diagram-nav [data-view="reset"] {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.2rem;
+      min-width: 3.1rem;
+      padding-inline: 0.35rem;
+    }
+    .diagram-nav [data-view="reset"][data-detail-visible] {
+      min-width: 3.8rem;
+    }
+    .diagram-nav-detail {
+      color: color-mix(in srgb, var(--toolbar-text) 52%, transparent);
+      font-size: 0.44rem;
+      font-weight: 700;
+      line-height: 1;
+      letter-spacing: 0.07em;
+    }
+    .diagram-nav-percent {
+      color: color-mix(in srgb, var(--toolbar-text) 84%, transparent);
+      font-size: 0.55rem;
+      font-weight: 650;
+      line-height: 1;
+    }
+    .diagram-container[data-camera-indicator="true"] .diagram-nav-detail,
+    .diagram-container[data-camera-indicator="true"] .diagram-nav-percent { color: var(--frontend-stroke); }
+    .diagram-nav #btn-diagram-guide[aria-expanded="true"] {
+      color: var(--cloud-stroke);
+      background: var(--toolbar-hover);
+    }
+
+    /* Semantic Radar is a deliberately simplified, viewer-only overview. It
+       uses authored node bounds and the live camera viewport rather than
+       cloning the canonical SVG, so IDs, filters, animation, and export state
+       stay singular and deterministic. */
+    .overview-map {
+      position: absolute;
+      right: 1rem;
+      bottom: 4.15rem;
+      z-index: 12;
+      width: 11.25rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));
+      border-radius: 0.78rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.625rem;
+    }
+    .overview-map[hidden] { display: none; }
+    .overview-map[data-docked="true"] {
+      position: fixed;
+      right: var(--archify-radar-right, 1rem);
+      top: var(--archify-radar-top, 1rem);
+      bottom: auto;
+    }
+    .overview-map[data-docked="true"][data-dock-side="left"] {
+      right: auto;
+      left: var(--archify-radar-left, 1rem);
+    }
+    html[data-preset="blueprint"] .overview-map { border-radius: 0.28rem; }
+    .overview-map-head {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.45rem;
+      min-height: 2.25rem;
+      padding: 0.42rem 0.48rem 0.38rem 0.55rem;
+      border-bottom: 1px solid var(--toolbar-border);
+      background: linear-gradient(110deg, color-mix(in srgb, var(--frontend-fill) 45%, transparent), transparent 68%);
+    }
+    .overview-map-live {
+      width: 0.42rem;
+      height: 0.42rem;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent);
+      animation: archify-radar-live 2.4s ease-out infinite;
+    }
+    .overview-map-copy { min-width: 0; line-height: 1.1; }
+    .overview-map-copy strong {
+      display: block;
+      overflow: hidden;
+      color: var(--frontend-stroke);
+      font-size: 0.59rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .overview-map-copy small {
+      display: block;
+      margin-top: 0.18rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.52rem;
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .overview-map-close {
+      width: 1.55rem;
+      height: 1.55rem;
+      padding: 0;
       border: 0;
-      justify-content: space-between;
+      border-radius: 0.34rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 0.9rem;
+      cursor: pointer;
+    }
+    .overview-map-close:hover,
+    .overview-map-close:focus-visible { background: var(--toolbar-hover); }
+    .overview-map-close:focus-visible,
+    .overview-map-surface:focus-visible,
+    .overview-map-node:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .overview-map-surface {
+      position: relative;
+      height: 7rem;
+      margin: 0.42rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
+      border-radius: 0.42rem;
+      background:
+        linear-gradient(color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),
+        linear-gradient(90deg, color-mix(in srgb, var(--panel-border) 26%, transparent) 1px, transparent 1px),
+        color-mix(in srgb, var(--bg) 86%, transparent);
+      background-size: 12px 12px;
+      cursor: crosshair;
+      touch-action: none;
+    }
+    html[data-preset="blueprint"] .overview-map-surface { border-radius: 0.1rem; }
+    .overview-map-surface > svg {
       width: 100%;
-      text-align: left;
-      padding: 0.5rem 0.75rem;
+      height: 100%;
+      min-width: 0;
+      transform: none !important;
+      transition: none !important;
+      display: block;
+      overflow: visible;
     }
-    .toolbar .export-menu button:hover {
-      background: var(--toolbar-hover);
+    .overview-map-node {
+      fill: var(--backend-stroke);
+      fill-opacity: 0.52;
+      stroke: var(--backend-stroke);
+      stroke-opacity: 0.86;
+      vector-effect: non-scaling-stroke;
+      cursor: pointer;
+      transition: fill-opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;
     }
-    .toolbar .export-menu .hint {
+    .overview-map-node[data-kind="frontend"],
+    .overview-map-node[data-kind="start"] { fill: var(--frontend-stroke); stroke: var(--frontend-stroke); }
+    .overview-map-node[data-kind="database"],
+    .overview-map-node[data-kind="success"] { fill: var(--database-stroke); stroke: var(--database-stroke); }
+    .overview-map-node[data-kind="cloud"],
+    .overview-map-node[data-kind="waiting"] { fill: var(--cloud-stroke); stroke: var(--cloud-stroke); }
+    .overview-map-node[data-kind="messagebus"] { fill: var(--messagebus-stroke); stroke: var(--messagebus-stroke); }
+    .overview-map-node[data-kind="security"],
+    .overview-map-node[data-kind="decision"],
+    .overview-map-node[data-kind="failure"] { fill: var(--security-stroke); stroke: var(--security-stroke); }
+    .overview-map-node[data-kind="external"],
+    .overview-map-node[data-kind="neutral"] { fill: var(--external-stroke); stroke: var(--external-stroke); }
+    .overview-map-node[data-radar-active="true"],
+    .overview-map-node:hover,
+    .overview-map-node:focus-visible {
+      fill-opacity: 0.92;
+      stroke-width: 2.2;
+      filter: drop-shadow(0 0 3px currentColor);
+    }
+    .overview-map-viewport {
+      fill: color-mix(in srgb, var(--frontend-fill) 56%, transparent);
+      stroke: var(--frontend-stroke);
+      stroke-width: 2;
+      vector-effect: non-scaling-stroke;
+      pointer-events: none;
+      filter: drop-shadow(0 0 3px color-mix(in srgb, var(--frontend-stroke) 54%, transparent));
+    }
+    .overview-map-hint {
+      display: flex;
+      justify-content: space-between;
+      gap: 0.5rem;
+      padding: 0 0.52rem 0.46rem;
       color: var(--text-faint);
-      font-size: 0.625rem;
+      font-size: 0.49rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .diagram-nav #btn-overview-map[aria-expanded="true"] {
+      color: var(--frontend-stroke);
+      background: var(--toolbar-hover);
+    }
+    .diagram-nav #btn-route-probe[aria-pressed="true"] {
+      color: var(--backend-stroke);
+      background: var(--toolbar-hover);
+    }
+    .diagram-nav #btn-semantic-lens[aria-expanded="true"],
+    .diagram-nav #btn-semantic-lens[aria-pressed="true"] {
+      color: var(--database-stroke);
+      background: var(--toolbar-hover);
+    }
+
+    /* Semantic Lens turns the compiled node-kind palette into an analytical
+       legend. One kind reveals its real traffic; two kinds compare only their
+       direct authored relationships. Geometry and the canonical SVG stay put. */
+    .semantic-lens {
+      position: absolute;
+      right: 1rem;
+      bottom: 4.15rem;
+      z-index: 24;
+      width: min(20rem, calc(100% - 2rem));
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--database-stroke) 58%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(135deg, color-mix(in srgb, var(--database-fill) 34%, transparent), transparent 48%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
+      backdrop-filter: blur(18px);
+      animation: archify-lens-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .semantic-lens[hidden] { display: none; }
+    .semantic-lens[data-dock-side="left"] { left: 1rem; right: auto; }
+    .semantic-lens[data-dock-side="right"] { left: auto; right: 1rem; }
+    html[data-preset="blueprint"] .semantic-lens { border-radius: 0.28rem; }
+    .semantic-lens-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.75rem;
+      padding: 0.72rem 0.78rem 0.62rem;
+      border-bottom: 1px solid var(--toolbar-border);
+    }
+    .semantic-lens-eyebrow {
+      display: block;
+      color: var(--database-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+    .semantic-lens-title {
+      display: block;
+      margin-top: 0.16rem;
+      color: var(--text);
+      font-size: 0.82rem;
+      letter-spacing: -0.02em;
     }
-    .toolbar .export-menu hr {
+    .semantic-lens-close {
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
       border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .semantic-lens-close:hover,
+    .semantic-lens-close:focus-visible { background: var(--toolbar-hover); }
+    .semantic-lens-instruction {
+      margin: 0;
+      padding: 0.52rem 0.78rem 0.48rem;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      line-height: 1.45;
+    }
+    .semantic-lens-kinds {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.3rem;
+      max-height: min(15rem, 40vh);
+      padding: 0 0.5rem 0.5rem;
+      overflow-y: auto;
+      scrollbar-width: thin;
+    }
+    .semantic-lens-kind {
+      --lens-color: var(--external-stroke);
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.42rem;
+      min-width: 0;
+      min-height: 2.15rem;
+      padding: 0.35rem 0.42rem;
+      border: 1px solid color-mix(in srgb, var(--lens-color) 24%, var(--toolbar-border));
+      border-radius: 0.45rem;
+      background: color-mix(in srgb, var(--panel) 76%, transparent);
+      color: var(--toolbar-text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease;
+    }
+    html[data-preset="blueprint"] .semantic-lens-kind { border-radius: 0.12rem; }
+    .semantic-lens-kind[data-kind="frontend"],
+    .semantic-lens-kind[data-kind="start"] { --lens-color: var(--frontend-stroke); }
+    .semantic-lens-kind[data-kind="backend"],
+    .semantic-lens-kind[data-kind="active"] { --lens-color: var(--backend-stroke); }
+    .semantic-lens-kind[data-kind="database"],
+    .semantic-lens-kind[data-kind="success"] { --lens-color: var(--database-stroke); }
+    .semantic-lens-kind[data-kind="cloud"],
+    .semantic-lens-kind[data-kind="waiting"] { --lens-color: var(--cloud-stroke); }
+    .semantic-lens-kind[data-kind="messagebus"] { --lens-color: var(--messagebus-stroke); }
+    .semantic-lens-kind[data-kind="security"],
+    .semantic-lens-kind[data-kind="decision"],
+    .semantic-lens-kind[data-kind="failure"] { --lens-color: var(--security-stroke); }
+    .semantic-lens-kind:hover,
+    .semantic-lens-kind:focus-visible,
+    .semantic-lens-kind[aria-pressed="true"] {
+      border-color: color-mix(in srgb, var(--lens-color) 78%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--lens-color) 11%, var(--panel));
+    }
+    .semantic-lens-kind:focus-visible,
+    .semantic-lens-close:focus-visible,
+    .semantic-lens-actions button:focus-visible {
+      outline: 2px solid var(--database-stroke);
+      outline-offset: 1px;
+    }
+    .semantic-lens-kind:disabled { opacity: 0.34; cursor: default; }
+    .semantic-lens-swatch {
+      width: 0.48rem;
+      height: 0.48rem;
+      border-radius: 50%;
+      background: var(--lens-color);
+      box-shadow: 0 0 8px color-mix(in srgb, var(--lens-color) 58%, transparent);
+    }
+    .semantic-lens-kind strong {
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.61rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-lens-kind em {
+      color: var(--lens-color);
+      font-size: 0.54rem;
+      font-style: normal;
+      font-weight: 800;
+    }
+    .semantic-lens-status {
+      min-height: 2.5rem;
+      margin: 0;
+      padding: 0.55rem 0.78rem;
       border-top: 1px solid var(--toolbar-border);
-      margin: 0.25rem 0.375rem;
-      opacity: 0.5;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      line-height: 1.45;
+    }
+    .semantic-lens-status strong { color: var(--database-stroke); font-weight: 800; }
+    .semantic-lens-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.28rem;
+      padding: 0 0.62rem 0.62rem;
+    }
+    .semantic-lens-actions button {
+      min-height: 1.8rem;
+      padding: 0.28rem 0.48rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 0.56rem;
+      cursor: pointer;
+    }
+    .semantic-lens-actions button:hover { background: var(--toolbar-hover); }
+    .semantic-lens-actions #semantic-lens-copy { color: var(--database-stroke); }
+    @keyframes archify-lens-in {
+      from { opacity: 0; transform: translateY(5px) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
     }
 
-    /* Toast — brief feedback for actions like "copied" */
-    .archify-toast {
-      position: fixed;
+    /* Route Probe answers a reader question over the compiled semantic graph:
+       choose two stable nodes and reveal the shortest authored directed route.
+       The receipt and signal live entirely in the viewer layer. */
+    .route-probe {
+      position: absolute;
+      left: 1rem;
+      bottom: 1rem;
+      z-index: 12;
+      width: min(46rem, calc(100% - 25rem));
+      min-width: 18rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 62%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(115deg, color-mix(in srgb, var(--backend-fill) 50%, transparent), transparent 62%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.625rem;
+    }
+    .route-probe[hidden] { display: none; }
+    .route-probe[data-route-dock="top"] {
       top: 1rem;
-      left: 50%;
-      transform: translateX(-50%) translateY(-8px);
-      background: var(--toolbar-menu-bg);
+      bottom: auto;
+    }
+    html[data-preset="blueprint"] .route-probe { border-radius: 0.25rem; }
+    .route-probe-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.65rem;
+      padding: 0.52rem 0.58rem 0.44rem;
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 80%, transparent);
+    }
+    .route-probe-copy { min-width: 0; }
+    .route-probe-eyebrow {
+      display: block;
+      color: var(--backend-stroke);
+      font-size: 0.48rem;
+      font-weight: 800;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+    .route-probe-title {
+      display: block;
+      margin-top: 0.14rem;
+      overflow: hidden;
+      color: var(--toolbar-text);
+      font-size: 0.72rem;
+      line-height: 1.25;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .route-probe-actions { display: flex; gap: 0.2rem; }
+    .route-probe button {
+      min-height: 1.55rem;
+      padding: 0.25rem 0.42rem;
+      border: 0;
+      border-radius: 0.36rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      cursor: pointer;
+    }
+    .route-probe button:hover,
+    .route-probe button:focus-visible { background: var(--toolbar-hover); }
+    .route-probe button:focus-visible {
+      outline: 2px solid var(--backend-stroke);
+      outline-offset: 1px;
+    }
+    .route-probe-copy-link { color: var(--frontend-stroke) !important; }
+    .route-probe-find { color: var(--backend-stroke) !important; }
+    .route-probe-copy-link[hidden] { display: none; }
+    .route-probe-find[hidden] { display: none; }
+    .route-probe-path {
+      display: flex;
+      align-items: center;
+      min-height: 2.2rem;
+      padding: 0.42rem 0.58rem 0.24rem;
+      overflow-x: auto;
+      scrollbar-width: thin;
+      white-space: nowrap;
+    }
+    .route-probe-node,
+    .route-probe button.route-probe-node {
+      flex: none;
+      max-width: 9.5rem;
+      overflow: hidden;
+      min-height: 1.75rem !important;
+      padding: 0.22rem 0.38rem;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 46%, var(--toolbar-border));
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--backend-fill) 52%, transparent);
       color: var(--text);
-      border: 1px solid var(--toolbar-border);
-      padding: 0.5rem 1rem;
-      border-radius: 0.5rem;
-      font-family: inherit;
-      font-size: 0.75rem;
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      z-index: 200;
-      pointer-events: none;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+      font-size: 0.56rem;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-    .archify-toast.show {
+    .route-probe-node[data-endpoint="start"] {
+      border-color: var(--frontend-stroke);
+      color: var(--frontend-stroke);
+    }
+    .route-probe-node[data-endpoint="end"] {
+      border-color: var(--security-stroke);
+      color: var(--security-stroke);
+    }
+    .route-probe-node[data-route-journey-state="past"] { opacity: 0.66; }
+    .route-probe-node[data-route-journey-state="future"] { opacity: 0.48; }
+    .route-probe-node[aria-current="step"] {
+      border-color: var(--backend-stroke);
+      background: color-mix(in srgb, var(--backend-fill) 82%, var(--toolbar-menu-bg));
+      color: var(--text);
+      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);
       opacity: 1;
-      transform: translateX(-50%) translateY(0);
     }
-
-    @media (max-width: 720px) {
-      body { padding: 1rem; }
-      .toolbar {
-        position: static;
-        justify-content: flex-end;
-        margin-bottom: 1rem;
-      }
-      .header { margin-bottom: 1.25rem; }
-      .header-row {
-        gap: 0.75rem;
-        align-items: flex-start;
-      }
-      h1 {
-        font-size: 1.25rem;
-        line-height: 1.25;
-      }
-      .subtitle {
-        margin-left: 0;
-        font-size: 0.8125rem;
-        line-height: 1.55;
-      }
-      .diagram-container {
-        padding: 0.75rem;
-        border-radius: 0.75rem;
-      }
-      .cards {
-        grid-template-columns: 1fr;
-        margin-top: 1rem;
-      }
+    html[data-preset="blueprint"] .route-probe-node[aria-current="step"] {
+      border-style: double;
+      border-width: 3px;
+      border-radius: 0.2rem;
+      box-shadow: none;
     }
-
-    /* ==========================================================
-       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke
-       ========================================================== */
-    .c-grid       { stroke: var(--grid); fill: none; }
-    .c-mask       { fill: var(--mask); stroke: none; }
-
-    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }
-    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }
-    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }
-    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }
-    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }
-    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }
-    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }
-
-    /* Text helpers */
-    .t-primary { fill: var(--text); }
-    .t-muted   { fill: var(--text-muted); }
-    .t-dim     { fill: var(--text-dim); }
-    .t-frontend   { fill: var(--frontend-stroke); }
-    .t-backend    { fill: var(--backend-stroke); }
-    .t-database   { fill: var(--database-stroke); }
-    .t-cloud      { fill: var(--cloud-stroke); }
-    .t-security   { fill: var(--security-stroke); }
-    .t-messagebus { fill: var(--messagebus-stroke); }
-    .t-external   { fill: var(--external-stroke); }
-
-    /* Arrows */
-    .a-default   { stroke: var(--arrow); fill: none; }
-    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }
-    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }
-    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }
-
-    /* Arrowhead markers reference these */
-    .m-default   { fill: var(--arrow); }
-    .m-emphasis  { fill: var(--arrow-emphasis); }
-    .m-security  { fill: var(--security-stroke); }
-    .m-dashed    { fill: var(--database-stroke); }
-
-    /* Dashed boundary variants */
-    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }
-    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }
-    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }
-
-    /* Optional trace animation, enabled only by meta.animation = "trace".
-       Static diagrams do not carry data-animation and render exactly as before. */
-    svg[data-animation="trace"] [data-animate="edge"] {
-      stroke-dasharray: 10 8;
-      stroke-dashoffset: 54;
-      animation: archify-edge-flow 2.4s linear infinite;
-      animation-delay: calc(var(--step, 0) * 160ms);
+    .route-probe-arrow {
+      flex: none;
+      padding: 0 0.28rem;
+      color: var(--text-faint);
+      font-size: 0.65rem;
     }
-    svg[data-animation="trace"] [data-animate="node"] {
-      transform-box: fill-box;
-      transform-origin: center;
-      animation: archify-node-pulse 3.6s ease-in-out infinite;
-      animation-delay: calc(var(--step, 0) * 160ms);
+    .route-probe-placeholder {
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.03em;
     }
-    @keyframes archify-edge-flow {
-      to { stroke-dashoffset: 0; }
+    .route-probe-status {
+      display: block;
+      min-height: 1.45rem;
+      padding: 0.08rem 0.58rem 0.44rem;
+      color: var(--text-faint);
+      font-size: 0.52rem;
+      line-height: 1.35;
     }
-    @keyframes archify-node-pulse {
-      0%, 72%, 100% { filter: none; stroke-width: 1.5; }
-      18%, 36% {
-        filter: drop-shadow(0 0 8px var(--arrow-emphasis));
-        stroke-width: 2.4;
-      }
+    .route-journey-controls {
+      display: grid;
+      grid-template-columns: 2rem minmax(5.8rem, auto) 2rem minmax(4.8rem, auto);
+      justify-content: start;
+      gap: 0.22rem;
+      padding: 0.08rem 0.58rem 0.28rem;
     }
-    @media (prefers-reduced-motion: reduce) {
-      svg[data-animation="trace"] [data-animate] {
-        animation: none !important;
-        stroke-dashoffset: 0;
-      }
+    .route-journey-controls[hidden] { display: none; }
+    .route-journey-controls button {
+      min-height: 1.8rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
+      background: color-mix(in srgb, var(--toolbar-bg) 72%, transparent);
+      font-size: 0.54rem;
+      font-weight: 700;
     }
-  </style>
-</head>
-<body>
-  <!-- Toolbar: theme toggle + export menu (present on every generated diagram)
-       Keyboard: T toggles theme, E opens export menu (when no input focused) -->
-  <div class="toolbar" role="toolbar" aria-label="Diagram actions">
-    <button id="btn-theme" type="button"
-            title="Toggle theme (T)"
-            aria-label="Toggle color theme"
-            aria-pressed="false">
-      <span id="theme-icon" aria-hidden="true">&#9790;</span>
-      <span id="theme-label">Dark</span>
-    </button>
-    <div class="export-wrap">
+    .route-journey-controls button:disabled {
+      cursor: default;
+      opacity: 0.34;
+    }
+    .route-journey-play { color: var(--backend-stroke) !important; }
+    .route-journey-overview { color: var(--frontend-stroke) !important; }
+    .route-journey-controls[data-playing="true"] .route-journey-play {
+      border-color: color-mix(in srgb, var(--backend-stroke) 64%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--backend-fill) 62%, transparent);
+    }
+    .route-probe[data-state="error"] {
+      border-color: color-mix(in srgb, var(--security-stroke) 72%, var(--toolbar-border));
+    }
+    .route-probe[data-state="error"] .route-probe-status { color: var(--security-stroke); }
+
+    .focus-chip {
+      position: absolute;
+      left: 1rem;
+      top: 1rem;
+      z-index: 12;
+      display: block;
+      width: min(22rem, calc(100% - 13rem));
+      max-width: calc(100% - 13rem);
+      overflow: hidden;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 0.85rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(16px);
+      font-size: 0.6875rem;
+    }
+    .focus-chip[hidden] { display: none; }
+    html[data-preset="blueprint"] .focus-chip { border-radius: 0.3rem; }
+    .focus-chip button {
+      flex: none;
+      padding: 0.3rem 0.45rem;
+      border-radius: 0.35rem;
+      font-size: 0.625rem;
+    }
+    .relationship-lens-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.75rem;
+      padding: 0.7rem 0.75rem 0.65rem;
+      border-bottom: 1px solid var(--toolbar-border);
+      background: linear-gradient(120deg, color-mix(in srgb, var(--frontend-fill) 34%, transparent), transparent 72%);
+    }
+    .relationship-lens-copy { min-width: 0; }
+    .relationship-lens-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 0.18rem;
+    }
+    .relationship-lens-actions button { white-space: nowrap; }
+    .relationship-lens-actions #btn-focus-clear {
+      display: grid;
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      place-items: center;
+      color: var(--text-muted);
+      font-size: 1rem;
+      line-height: 1;
+    }
+    .relationship-lens-actions #btn-focus-clear:hover,
+    .relationship-lens-actions #btn-focus-clear:focus-visible {
+      background: var(--toolbar-hover);
+      color: var(--text);
+    }
+    .relationship-lens-actions #btn-focus-copy { color: var(--frontend-stroke); }
+    .relationship-lens-actions #btn-focus-relations { display: none; }
+    .relationship-lens-eyebrow {
+      display: block;
+      margin-bottom: 0.18rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+    }
+    .relationship-lens-title {
+      display: block;
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.8rem;
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-detail {
+      display: block;
+      margin-top: 0.12rem;
+      overflow: hidden;
+      color: var(--text-muted);
+      font-size: 0.625rem;
+      line-height: 1.4;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-detail[hidden] { display: none; }
+    .semantic-passport-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.24rem;
+      margin-top: 0.42rem;
+    }
+    .semantic-passport-meta span,
+    .semantic-passport-meta code {
+      max-width: 100%;
+      overflow: hidden;
+      padding: 0.14rem 0.34rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 82%, transparent);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--panel) 68%, transparent);
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5rem;
+      letter-spacing: 0.04em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-meta [data-passport="kind"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 50%, var(--toolbar-border));
+      color: var(--frontend-stroke);
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+    .semantic-passport-meta [data-passport="tag"] { color: var(--cloud-stroke); }
+    .semantic-passport-meta [hidden] { display: none; }
+    html[data-preset="blueprint"] .semantic-passport-meta span,
+    html[data-preset="blueprint"] .semantic-passport-meta code { border-radius: 0.1rem; }
+    .semantic-passport-evidence {
+      margin-top: 0.52rem;
+      padding: 0.5rem;
+      border: 1px solid color-mix(in srgb, var(--backend-stroke) 32%, var(--toolbar-border));
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--backend-fill) 18%, var(--panel));
+    }
+    .semantic-passport-evidence[hidden] { display: none; }
+    html[data-preset="blueprint"] .semantic-passport-evidence { border-radius: 0.18rem; }
+    .semantic-passport-evidence-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.55rem;
+      margin-bottom: 0.35rem;
+    }
+    .semantic-passport-evidence-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.28rem;
+      color: var(--backend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .semantic-passport-evidence-status::before {
+      content: '';
+      width: 0.38rem;
+      height: 0.38rem;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--backend-stroke) 14%, transparent);
+    }
+    .semantic-passport-repository {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-repository:hover,
+    .semantic-passport-repository:focus-visible { color: var(--backend-stroke); }
+    .semantic-passport-evidence-links { display: grid; gap: 0.22rem; }
+    .semantic-passport-source {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 0.15rem 0.45rem;
+      align-items: center;
+      padding: 0.34rem 0.4rem;
+      border: 1px solid transparent;
+      border-radius: 0.38rem;
+      color: var(--text-muted);
+      text-decoration: none;
+    }
+    .semantic-passport-source:hover,
+    .semantic-passport-source:focus-visible {
+      border-color: color-mix(in srgb, var(--backend-stroke) 42%, transparent);
+      background: color-mix(in srgb, var(--backend-fill) 32%, transparent);
+      color: var(--text);
+    }
+    .semantic-passport-source strong {
+      overflow: hidden;
+      font-size: 0.5625rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .semantic-passport-source code {
+      color: var(--backend-stroke);
+      font: inherit;
+      font-size: 0.5rem;
+    }
+    .semantic-passport-source small {
+      grid-column: 1 / -1;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-summary {
+      display: block;
+      margin-top: 0.12rem;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+    }
+    .semantic-passport-reach {
+      display: grid;
+      gap: 0.28rem;
+      margin-top: 0.52rem;
+      padding-top: 0.48rem;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 76%, transparent);
+    }
+    .semantic-passport-reach[hidden] { display: none; }
+    .semantic-passport-reach-label {
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .semantic-passport-reach-actions {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.25rem;
+    }
+    .semantic-passport-reach-actions button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      min-width: 0;
+      min-height: 2rem;
+      padding: 0.32rem 0.42rem;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent);
+      background: color-mix(in srgb, var(--panel) 70%, transparent);
+      color: var(--text-muted);
+      text-align: left;
+    }
+    .semantic-passport-reach-actions button:hover:not(:disabled),
+    .semantic-passport-reach-actions button:focus-visible {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 62%, var(--toolbar-border));
+      color: var(--text);
+    }
+    .semantic-passport-reach-actions button:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .semantic-passport-reach-actions button:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    .semantic-passport-reach-actions button[aria-pressed="true"] {
+      border-color: color-mix(in srgb, var(--reach-color, var(--frontend-stroke)) 72%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--reach-fill, var(--frontend-fill)) 48%, transparent);
+      color: var(--text);
+    }
+    #btn-reach-upstream {
+      --reach-color: var(--database-stroke);
+      --reach-fill: var(--database-fill);
+    }
+    #btn-reach-downstream {
+      --reach-color: var(--backend-stroke);
+      --reach-fill: var(--backend-fill);
+    }
+    .semantic-passport-reach-actions strong {
+      color: var(--reach-color, var(--frontend-stroke));
+      font-size: 0.625rem;
+    }
+    .semantic-passport-reach-status {
+      color: var(--text-faint);
+      font-size: 0.525rem;
+      line-height: 1.4;
+    }
+    .semantic-passport-reach-status[hidden] { display: none; }
+    .relationship-lens-list {
+      max-height: min(18rem, 46vh);
+      overflow: auto;
+      padding: 0.4rem;
+      scrollbar-width: thin;
+      scrollbar-color: var(--frontend-stroke) transparent;
+    }
+    .relationship-lens-list::-webkit-scrollbar { width: 4px; }
+    .relationship-lens-list::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--frontend-stroke) 68%, transparent);
+    }
+    .relationship-lens-group + .relationship-lens-group { margin-top: 0.35rem; }
+    .relationship-lens-group-title {
+      display: block;
+      padding: 0.24rem 0.38rem 0.16rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .relationship-lens-row {
+      display: grid;
+      grid-template-columns: 2.1rem minmax(0, 1fr);
+      gap: 0.06rem 0.45rem;
+      width: 100%;
+      padding: 0.45rem 0.5rem !important;
+      text-align: left;
+    }
+    .relationship-lens-row:hover,
+    .relationship-lens-row:focus-visible,
+    .relationship-lens-row[data-preview-active="true"] {
+      background: var(--toolbar-hover);
+      box-shadow: inset 2px 0 0 var(--frontend-stroke);
+    }
+    .relationship-lens-row:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: -2px;
+    }
+    .relationship-lens-direction {
+      grid-row: 1 / 3;
+      align-self: center;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+    }
+    .relationship-lens-row[data-direction="in"] .relationship-lens-direction { color: var(--database-stroke); }
+    .relationship-lens-row[data-direction="loop"] .relationship-lens-direction { color: var(--security-stroke); }
+    .relationship-lens-row strong {
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.6875rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-row small {
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .relationship-lens-empty {
+      margin: 0;
+      padding: 0.75rem;
+      color: var(--text-faint);
+      font-size: 0.625rem;
+      text-align: center;
+    }
+
+    /* Diagram Guide keeps the artifact's growing reader vocabulary
+       discoverable without widening the permanent control bar. It derives
+       honest counts at runtime and delegates every action to an existing
+       production interaction instead of creating a second command system. */
+    .diagram-guide {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      z-index: 26;
+      width: min(32rem, calc(100% - 2rem));
+      max-height: min(42rem, calc(100% - 2rem));
+      overflow: auto;
+      border: 1px solid color-mix(in srgb, var(--cloud-stroke) 58%, var(--toolbar-border));
+      border-radius: 0.82rem;
+      background:
+        linear-gradient(135deg, color-mix(in srgb, var(--cloud-fill) 32%, transparent), transparent 42%),
+        var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 22px 64px rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(18px);
+      animation: archify-guide-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .diagram-guide[hidden] { display: none; }
+    html[data-preset="blueprint"] .diagram-guide { border-radius: 0.28rem; }
+    .diagram-guide-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 1rem;
+      padding: 0.82rem 0.9rem 0.68rem;
+      border-bottom: 1px solid var(--toolbar-border);
+    }
+    .diagram-guide-eyebrow {
+      display: block;
+      color: var(--cloud-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+    .diagram-guide-title {
+      display: block;
+      margin-top: 0.16rem;
+      color: var(--text);
+      font-size: 0.86rem;
+      letter-spacing: -0.02em;
+    }
+    .diagram-guide-close {
+      width: 1.8rem;
+      height: 1.8rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .diagram-guide-close:hover,
+    .diagram-guide-close:focus-visible { background: var(--toolbar-hover); }
+    .diagram-guide-stats {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0.54rem 0.9rem;
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 74%, transparent);
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.025em;
+    }
+    .diagram-guide-stats::before {
+      content: '';
+      width: 0.42rem;
+      height: 0.42rem;
+      flex: none;
+      border-radius: 50%;
+      background: var(--backend-stroke);
+      box-shadow: 0 0 10px color-mix(in srgb, var(--backend-stroke) 72%, transparent);
+    }
+    .diagram-guide-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.38rem;
+      padding: 0.62rem;
+    }
+    .diagram-guide-action {
+      --guide-accent: var(--frontend-stroke);
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.55rem;
+      min-height: 4.15rem;
+      padding: 0.55rem 0.58rem;
+      border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, var(--toolbar-border));
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 78%, transparent);
+      color: var(--toolbar-text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
+    }
+    .diagram-guide-action[data-guide-action="route"] { --guide-accent: var(--backend-stroke); }
+    .diagram-guide-action[data-guide-action="map"] { --guide-accent: var(--database-stroke); }
+    .diagram-guide-action[data-guide-action="lens"] { --guide-accent: var(--messagebus-stroke); }
+    .diagram-guide-action[data-guide-action="story"] { --guide-accent: var(--security-stroke); }
+    .diagram-guide-action[data-guide-action="present"] {
+      --guide-accent: var(--cloud-stroke);
+    }
+    .diagram-guide-action:hover,
+    .diagram-guide-action:focus-visible {
+      border-color: color-mix(in srgb, var(--guide-accent) 76%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--guide-accent) 9%, var(--panel));
+      transform: translateY(-1px);
+    }
+    .diagram-guide-action:focus-visible,
+    .diagram-guide-close:focus-visible {
+      outline: 2px solid var(--cloud-stroke);
+      outline-offset: 1px;
+    }
+    .diagram-guide-action:disabled {
+      opacity: 0.42;
+      cursor: default;
+      transform: none;
+    }
+    .diagram-guide-index {
+      display: grid;
+      place-items: center;
+      width: 1.65rem;
+      height: 1.65rem;
+      border: 1px solid color-mix(in srgb, var(--guide-accent) 64%, var(--toolbar-border));
+      border-radius: 0.35rem;
+      color: var(--guide-accent);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+    }
+    .diagram-guide-action-copy { min-width: 0; }
+    .diagram-guide-action strong {
+      display: block;
+      overflow: hidden;
+      color: var(--text);
+      font-size: 0.66rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .diagram-guide-action small {
+      display: -webkit-box;
+      margin-top: 0.18rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      line-height: 1.35;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    .diagram-guide kbd {
+      align-self: start;
+      min-width: 1.45rem;
+      padding: 0.12rem 0.3rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.25rem;
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5rem;
+      text-align: center;
+    }
+    .diagram-guide-shortcuts {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.34rem 0.62rem;
+      padding: 0.58rem 0.9rem 0.68rem;
+      border-top: 1px solid var(--toolbar-border);
+      color: var(--text-faint);
+      font-size: 0.5rem;
+    }
+    .diagram-guide-shortcuts span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.28rem;
+      white-space: nowrap;
+    }
+    .diagram-guide-feedback {
+      min-height: 1rem;
+      margin: -0.18rem 0.9rem 0.62rem;
+      color: var(--security-stroke);
+      font-size: 0.5rem;
+    }
+    .diagram-guide-feedback:empty { display: none; }
+    @keyframes archify-guide-in {
+      from { opacity: 0; transform: translateY(-5px) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .node-finder {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      z-index: 24;
+      display: flex;
+      flex-direction: column;
+      width: min(22rem, calc(100% - 2rem));
+      max-height: calc(100% - 2rem);
+      overflow: hidden;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.85rem;
+      background: var(--toolbar-menu-bg);
+      color: var(--toolbar-text);
+      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.22);
+      backdrop-filter: blur(16px);
+    }
+    .node-finder[hidden] { display: none; }
+    .node-finder[data-context="route-source"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 68%, var(--toolbar-border));
+    }
+    .node-finder[data-context="route-target"] {
+      border-color: color-mix(in srgb, var(--security-stroke) 68%, var(--toolbar-border));
+    }
+    html[data-preset="blueprint"] .node-finder { border-radius: 0.3rem; }
+    .node-finder-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.7rem 0.8rem 0.45rem;
+    }
+    .node-finder-head strong {
+      color: var(--text);
+      font-size: 0.6875rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .node-finder[data-context="route-source"] .node-finder-head strong { color: var(--frontend-stroke); }
+    .node-finder[data-context="route-target"] .node-finder-head strong { color: var(--security-stroke); }
+    .node-finder-close {
+      width: 1.75rem;
+      height: 1.75rem;
+      border: 0;
+      border-radius: 0.35rem;
+      background: transparent;
+      color: var(--toolbar-text);
+      font: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    .node-finder-close:hover,
+    .node-finder-close:focus-visible { background: var(--toolbar-hover); }
+    .node-finder-close:focus-visible,
+    .node-finder-result:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: -2px;
+    }
+    .node-finder-search {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.55rem;
+      margin: 0 0.55rem 0.55rem;
+      padding: 0 0.7rem;
+      min-height: 2.6rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 78%, transparent);
+      transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
+    }
+    html[data-preset="blueprint"] .node-finder-search { border-radius: 0.18rem; }
+    .node-finder-search > span { color: var(--frontend-stroke); font-size: 0.875rem; }
+    .node-finder-search:focus-within {
+      border-color: var(--frontend-stroke);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--frontend-stroke) 20%, transparent);
+    }
+    .node-finder-input {
+      appearance: none;
+      width: 100%;
+      min-width: 0;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      font-size: 0.75rem;
+    }
+    .node-finder-input:focus-visible { outline: none; }
+    .node-finder-input::placeholder { color: var(--text-faint); }
+    .node-finder kbd {
+      padding: 0.1rem 0.32rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.25rem;
+      color: var(--text-faint);
+      font: inherit;
+      font-size: 0.5625rem;
+    }
+    .node-finder-results {
+      display: grid;
+      flex: 1 1 auto;
+      gap: 0;
+      min-height: 0;
+      max-height: min(18rem, 48vh);
+      margin: 0 0.55rem 0.45rem;
+      padding: 0;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 78%, transparent);
+      border-radius: 0.55rem;
+      background: color-mix(in srgb, var(--panel) 54%, transparent);
+      scroll-padding-block: 0.25rem;
+      scrollbar-width: thin;
+    }
+    html[data-preset="blueprint"] .node-finder-results { border-radius: 0.18rem; }
+    .node-finder-result {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 0.2rem 0.75rem;
+      width: 100%;
+      min-height: 3.25rem;
+      padding: 0.58rem 0.65rem;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      color: var(--text);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      transition: background-color 160ms ease-out;
+    }
+    .node-finder-result:not(:last-child) {
+      border-bottom: 1px solid color-mix(in srgb, var(--toolbar-border) 62%, transparent);
+    }
+    .node-finder-result:hover,
+    .node-finder-result:focus-visible {
+      position: relative;
+      z-index: 1;
+      background: color-mix(in srgb, var(--frontend-fill) 48%, var(--toolbar-hover));
+    }
+    .node-finder-result strong {
+      overflow: hidden;
+      font-size: 0.75rem;
+      line-height: 1.25;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .node-finder-result small {
+      grid-column: 1 / -1;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+      letter-spacing: 0.015em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .node-finder-result em {
+      align-self: center;
+      color: var(--frontend-stroke);
+      font-size: 0.625rem;
+      font-style: normal;
+    }
+    .node-finder[data-context^="route-"] .node-finder-result em {
+      padding: 0.1rem 0.3rem;
+      border: 1px solid color-mix(in srgb, currentColor 52%, transparent);
+      border-radius: 999px;
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+    .node-finder[data-context="route-target"] .node-finder-result em { color: var(--security-stroke); }
+    .node-finder-empty {
+      padding: 1.1rem 0.75rem 1.25rem;
+      color: var(--text-faint);
+      font-size: 0.6875rem;
+      text-align: center;
+    }
+    .node-finder-status {
+      margin: 0;
+      padding: 0.1rem 0.8rem 0.65rem;
+      color: var(--text-faint);
+      font-size: 0.5625rem;
+    }
+
+    .guided-views {
+      display: grid;
+      grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem auto;
+      align-items: stretch;
+      gap: 0.35rem;
+      min-width: 0;
+      margin: 0 0 0.75rem;
+      padding: 0.35rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.85rem;
+      background: var(--toolbar-bg);
+      background: linear-gradient(120deg, var(--toolbar-bg), color-mix(in srgb, var(--toolbar-bg) 82%, var(--frontend-fill)));
+      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
+      backdrop-filter: blur(12px);
+    }
+    .guided-views[hidden] { display: none; }
+
+    html[data-preset="blueprint"] .guided-views {
+      border-color: var(--panel-border);
+      border-radius: 0.35rem;
+      background:
+        linear-gradient(90deg, color-mix(in srgb, var(--frontend-fill) 36%, transparent), transparent 24%),
+        var(--toolbar-bg);
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+    }
+    html[data-preset="blueprint"] .guided-views button { border-radius: 0.2rem; }
+    html[data-preset="blueprint"] .guided-view-progress { border-radius: 0; }
+    html[data-preset="blueprint"] .guided-view-progress span { border-radius: 0; }
+    .guided-views button {
+      min-width: 0;
+      padding: 0.45rem 0.6rem;
+      border-radius: 0.55rem;
+      font-size: 0.75rem;
+    }
+    .guided-views > #guided-view-prev,
+    .guided-views > #guided-view-next { min-width: 2.75rem; min-height: 2.75rem; }
+    .guided-views button:disabled { opacity: 0.3; cursor: default; }
+    .guided-view-copy {
+      min-width: 0;
+      padding: 0.2rem 0.5rem;
+      border-left: 1px solid var(--toolbar-border);
+      overflow: hidden;
+    }
+    .guided-view-meta {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-height: 1rem;
+      margin-bottom: 0.12rem;
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .guided-view-handoff {
+      box-sizing: border-box;
+      height: 1rem;
+      min-width: 0;
+      max-width: 15rem;
+      overflow: hidden;
+      padding: 0 0.38rem;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 46%, transparent);
+      border-radius: 999px;
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-fill) 44%, transparent);
+      font-size: 0.5rem;
+      line-height: calc(1rem - 2px);
+      letter-spacing: 0.06em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-view-handoff[hidden] { display: none; }
+    html[data-preset="blueprint"] .guided-view-handoff { border-radius: 0.15rem; }
+    .chapter-handoff-overlay { pointer-events: none; }
+    .chapter-handoff-anchor {
+      fill: color-mix(in srgb, var(--frontend-fill) 10%, transparent);
+      stroke: var(--frontend-stroke);
+      stroke-width: 2;
+      stroke-dasharray: 4 4;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+      animation: archify-chapter-anchor 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="stay"] { opacity: 1; }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="enter"] { opacity: 0.78; }
+    svg[data-chapter-handoff] [data-node-id][data-chapter-role="leave"] { opacity: 0.26; }
+    @keyframes archify-chapter-anchor {
+      0% { opacity: 0.35; stroke-dashoffset: 8; }
+      45% { opacity: 1; }
+      100% { opacity: 0.72; stroke-dashoffset: 0; }
+    }
+    .guided-view-progress {
+      width: 3.5rem;
+      height: 2px;
+      overflow: hidden;
+      border-radius: 999px;
+      background: var(--toolbar-border);
+    }
+    .guided-view-progress span {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--frontend-stroke);
+      transform: scaleX(0);
+      transform-origin: left center;
+    }
+    .guided-view-copy strong,
+    .guided-view-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .guided-view-copy strong { color: var(--toolbar-text); font-size: 0.75rem; line-height: 1.35; }
+    .guided-view-copy small { margin-top: 0; color: var(--text-muted); font-size: 0.625rem; line-height: 1.35; }
+    .guided-story-caption {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      gap: 0.12rem 0.55rem;
+      align-items: center;
+      min-width: 0;
+      margin-top: 0.18rem;
+      padding: 0.3rem 0.5rem;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 32%, var(--toolbar-border));
+      border-radius: 0.58rem;
+      background: color-mix(in srgb, var(--frontend-fill) 26%, transparent);
+      animation: archify-story-caption-in 140ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .guided-story-caption[hidden] { display: none; }
+    .guided-story-caption-index {
+      grid-row: 1 / span 2;
+      align-self: stretch;
+      display: inline-grid;
+      min-width: 3.3rem;
+      place-items: center;
+      padding-right: 0.52rem;
+      border-right: 1px solid color-mix(in srgb, var(--frontend-stroke) 28%, var(--toolbar-border));
+      color: var(--frontend-stroke);
+      font-size: 0.5625rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .guided-story-caption strong,
+    .guided-story-caption small {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-story-caption strong { color: var(--toolbar-text); font-size: 0.6875rem; line-height: 1.3; }
+    .guided-story-caption small { color: var(--text-muted); font-size: 0.5625rem; line-height: 1.35; }
+    .guided-story-caption-next {
+      grid-column: 3;
+      grid-row: 1 / span 2;
+      display: grid;
+      min-width: 6.4rem;
+      max-width: 9.5rem;
+      align-self: stretch;
+      align-content: center;
+      padding-left: 0.58rem;
+      border-left: 1px solid color-mix(in srgb, var(--frontend-stroke) 22%, var(--toolbar-border));
+    }
+    .guided-story-caption-next[hidden] { display: none; }
+    .guided-story-caption-next small {
+      color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--text-muted));
+      font-weight: 800;
+      letter-spacing: 0.09em;
+      text-transform: uppercase;
+    }
+    .guided-story-caption-next strong { color: var(--text-muted); font-weight: 700; }
+    html[data-preset="blueprint"] .guided-story-caption { border-radius: 0.2rem; }
+    .guided-views[data-story-beat] .guided-view-copy > #guided-view-label,
+    .guided-views[data-story-beat] .guided-view-copy > #guided-view-note { display: none; }
+    @keyframes archify-story-caption-in {
+      from { opacity: 0; transform: translateY(3px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .guided-view-trail {
+      display: flex;
+      align-items: center;
+      gap: 0.28rem;
+      min-width: 0;
+      min-height: 1.7rem;
+      margin-top: 0;
+      padding: 0;
+      overflow-x: auto;
+      color: var(--text-faint);
+      overscroll-behavior-x: contain;
+      touch-action: pan-x;
+      scrollbar-width: none;
+      white-space: nowrap;
+    }
+    .guided-view-trail[hidden] { display: none; }
+    .guided-view-trail::-webkit-scrollbar { display: none; }
+    .guided-view-trail .guided-view-stop {
+      appearance: none;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 0.28rem;
+      min-height: 1.5rem;
+      padding: 0.1rem 0.3rem 0.1rem 0.18rem;
+      border: 1px solid transparent;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 0.5625rem;
+      font-weight: 650;
+      letter-spacing: 0.02em;
+      line-height: 1;
+      transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease;
+    }
+    .guided-view-stop:hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);
+      background: color-mix(in srgb, var(--frontend-fill) 34%, transparent);
+    }
+    .guided-view-stop:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .guided-view-stop:disabled { cursor: wait; }
+    .guided-view-stop::before {
+      display: inline-grid;
+      width: 1rem;
+      height: 1rem;
+      place-items: center;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--frontend-fill) 58%, var(--toolbar-bg));
+      color: var(--frontend-stroke);
+      content: attr(data-story-number);
+      font-size: 0.5rem;
+      line-height: 1;
+    }
+    .guided-view-stop + .guided-view-stop::after {
+      order: -1;
+      color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--text-faint));
+      content: '\00b7';
+      font-size: 0.65rem;
+    }
+    .guided-view-stop[data-story-link="forward"]::after { content: '\2192'; }
+    .guided-view-stop[data-story-link="reverse"]::after { content: '\2190'; }
+    .guided-view-stop[data-story-link="multiple"]::after { content: '\21c4'; }
+    .guided-view-stop[data-story-beat-state="pending"] { opacity: 0.38; }
+    .guided-view-stop[data-story-beat-state="next"] {
+      border-style: dashed;
+      border-color: color-mix(in srgb, var(--frontend-stroke) 42%, var(--toolbar-border));
+      color: color-mix(in srgb, var(--toolbar-text) 68%, var(--text-muted));
+      opacity: 0.58;
+    }
+    .guided-view-stop[data-story-beat-state="past"] { color: var(--text-muted); opacity: 0.76; }
+    .guided-view-stop[data-story-beat-state="active"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--frontend-fill) 42%, transparent);
+      color: var(--toolbar-text);
+      font-weight: 800;
+      opacity: 1;
+    }
+    .guided-view-stop[data-story-beat-state="active"]::before {
+      border-color: var(--frontend-stroke);
+      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 54%, transparent);
+    }
+    html[data-preset="blueprint"] .guided-view-stop,
+    html[data-preset="blueprint"] .guided-view-stop::before { border-radius: 0.1rem; }
+    html[data-preset="blueprint"] .guided-view-stop[data-story-beat-state="active"]::before { box-shadow: none; }
+    .guided-view-actions { display: flex; align-items: stretch; gap: 0.2rem; }
+    .guided-view-actions button { white-space: nowrap; }
+    .guided-view-play {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.38rem;
+      min-width: 6.25rem !important;
+      color: var(--frontend-stroke) !important;
+      font-size: 0.625rem !important;
+    }
+    .guided-view-play[aria-pressed="true"] { background: var(--toolbar-hover); }
+    .guided-view-all { min-width: 3.25rem !important; color: var(--text-muted) !important; font-size: 0.625rem !important; }
+    .guided-view-beat-link {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.3rem;
+      min-width: 5.4rem !important;
+      min-height: 1.5rem;
+      color: var(--text-muted) !important;
+      font-size: 0.5625rem !important;
+      letter-spacing: 0.025em;
+      transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+    }
+    .guided-view-beat-link:not(:disabled):hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));
+      color: var(--frontend-stroke) !important;
+    }
+    .guided-view-beat-link[data-copy-state="copied"] {
+      border-color: color-mix(in srgb, var(--backend-stroke) 58%, var(--toolbar-border));
+      background: color-mix(in srgb, var(--backend-fill) 46%, transparent);
+      color: var(--backend-stroke) !important;
+    }
+    .guided-view-index {
+      grid-column: 1 / -1;
+      min-width: 0;
+      padding: 0.28rem 0.12rem 0.08rem;
+      overflow: hidden;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    @media (min-width: 721px) {
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-index,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-beat-link,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-all,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-trail,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-copy > #guided-view-label,
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-view-copy > #guided-view-note { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) .guided-views[data-playing="true"] .guided-story-caption { margin-top: 0.08rem; }
+    }
+    .guided-view-chapters {
+      display: flex;
+      gap: 0.28rem;
+      min-width: 0;
+      margin: 0;
+      padding: 0.08rem 0.05rem 0.2rem;
+      overflow-x: auto;
+      list-style: none;
+      scroll-padding-inline: 0.05rem;
+      scroll-snap-type: x proximity;
+      scrollbar-width: none;
+    }
+    .guided-view-chapters::-webkit-scrollbar { display: none; }
+    .guided-view-chapters li {
+      display: flex;
+      flex: 1 1 0;
+      min-width: 9.5rem;
+      scroll-snap-align: center;
+    }
+    .guided-view-chapter {
+      position: relative;
+      display: grid !important;
+      grid-template-columns: 1.55rem minmax(0, 1fr) auto;
+      align-items: center;
+      width: 100%;
+      min-height: 2.75rem;
+      padding: 0.36rem 0.48rem !important;
+      overflow: hidden;
+      border: 1px solid color-mix(in srgb, var(--toolbar-border) 86%, transparent) !important;
+      border-radius: 0.48rem !important;
+      background: color-mix(in srgb, var(--toolbar-bg) 88%, transparent) !important;
+      color: var(--text-muted) !important;
+      text-align: left;
+      transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
+    }
+    .guided-view-chapter:hover {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 58%, var(--toolbar-border)) !important;
+      background: color-mix(in srgb, var(--frontend-fill) 42%, var(--toolbar-bg)) !important;
+    }
+    .guided-view-chapter:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 1px;
+    }
+    .guided-view-chapter-index {
+      display: inline-grid;
+      width: 1.32rem;
+      height: 1.32rem;
+      place-items: center;
+      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));
+      border-radius: 50%;
+      color: var(--frontend-stroke);
+      font-size: 0.5rem;
+      font-weight: 800;
+      letter-spacing: 0.03em;
+    }
+    .guided-view-chapter-title {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--toolbar-text);
+      font-size: 0.625rem;
+      font-weight: 700;
+      line-height: 1.3;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-count {
+      grid-column: 3;
+      grid-row: 1;
+      margin-left: 0.38rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-style: normal;
+      font-weight: 650;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-delta {
+      display: inline-flex;
+      grid-column: 3;
+      grid-row: 1;
+      align-items: center;
+      gap: 0.22rem;
+      margin-left: 0.38rem;
+      color: var(--text-faint);
+      font-size: 0.5rem;
+      font-weight: 750;
+      letter-spacing: 0.01em;
+      white-space: nowrap;
+    }
+    .guided-view-chapter-delta[hidden] { display: none; }
+    .guided-view-chapter-delta [data-delta-kind="stay"] { color: var(--text-muted); }
+    .guided-view-chapter-delta [data-delta-kind="enter"] { color: var(--frontend-stroke); }
+    .guided-view-chapter-delta [data-delta-kind="leave"] { color: var(--security-stroke); }
+    .guided-view-chapter[data-preview-active="true"] {
+      border-color: color-mix(in srgb, var(--frontend-stroke) 72%, var(--toolbar-border)) !important;
+      background: color-mix(in srgb, var(--frontend-fill) 54%, var(--toolbar-bg)) !important;
+    }
+    .guided-view-chapter[data-chapter-position="current"] {
+      border: 2px solid var(--frontend-stroke) !important;
+      padding: calc(0.36rem - 1px) calc(0.48rem - 1px) !important;
+      box-shadow: inset 3px 0 0 var(--frontend-stroke);
+      color: var(--toolbar-text) !important;
+    }
+    .guided-view-chapter[data-chapter-position="current"] .guided-view-chapter-index {
+      background: var(--frontend-stroke);
+      color: var(--bg);
+    }
+    .guided-view-chapter[data-chapter-position="before"] {
+      border-style: solid !important;
+      opacity: 0.72;
+    }
+    .guided-view-chapter[data-chapter-position="after"] { border-style: dashed !important; }
+    html[data-preset="signal-flow"] .guided-view-chapter[data-chapter-position="current"] {
+      box-shadow: inset 3px 0 0 var(--frontend-stroke), 0 0 18px color-mix(in srgb, var(--frontend-stroke) 18%, transparent);
+    }
+    html[data-preset="blueprint"] .guided-view-chapter,
+    html[data-preset="blueprint"] .guided-view-chapter-index { border-radius: 0.12rem !important; }
+
+    /* Story Shelf — keep every authored chapter and the Play action visible,
+       but do not spend a second row on unavailable director controls before
+       the reader enters a chapter. Existing data-active-view state expands
+       the full guided surface without a new toggle or stored preference. */
+    .guided-views[data-active-view="all"] {
+      grid-template-columns: minmax(11rem, .72fr) auto minmax(0, 2fr);
+      align-items: center;
+      padding: 0.28rem 0.35rem;
+    }
+    .guided-views[data-active-view="all"] > #guided-view-prev,
+    .guided-views[data-active-view="all"] > #guided-view-next,
+    .guided-views[data-active-view="all"] .guided-view-beat-link,
+    .guided-views[data-active-view="all"] .guided-view-all { display: none; }
+    .guided-views[data-active-view="all"] .guided-view-copy {
+      grid-column: 1;
+      grid-row: 1;
+      padding: 0.1rem 0.55rem;
+    }
+    .guided-views[data-active-view="all"] .guided-view-copy > #guided-view-note { display: none; }
+    .guided-views[data-active-view="all"] .guided-view-actions {
+      display: block;
+      grid-column: 2;
+      grid-row: 1;
+    }
+    .guided-views[data-active-view="all"] .guided-view-play { min-height: 2.75rem; }
+    .guided-views[data-active-view="all"] .guided-view-index {
+      grid-column: 3;
+      grid-row: 1;
+      padding: 0 0.08rem 0 0.42rem;
+      border-top: 0;
+      border-left: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+    }
+    .guided-views[data-active-view="all"] .guided-view-chapters {
+      gap: 0.3rem;
+      padding: 0;
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+
+    .card {
+      background: var(--panel);
+      border-radius: 0.75rem;
+      border: 1px solid var(--panel-border);
+      padding: 1.25rem;
+    }
+
+    html[data-preset="signal-flow"] .card {
+      background: linear-gradient(145deg, rgba(10, 24, 43, 0.86), rgba(5, 12, 24, 0.92));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
+    }
+    html[data-preset="signal-flow"][data-theme="light"] .card {
+      background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 246, 250, 0.9));
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 32px rgba(45, 78, 99, 0.08);
+    }
+
+    /* Preserve the one-screen guarantee on ordinary laptop displays. The
+       high-screen expansion above must not trade a fuller canvas for page
+       scrolling at 900–1080px heights. */
+    @media (min-width: 768px) and (max-height: 1100px) {
+      .header { margin-bottom: 1rem; }
+      .diagram-container { padding: 0.875rem; }
+      .cards { margin-top: 1rem; }
+      .card { padding: 1rem; }
+    }
+    @media (min-width: 768px) and (max-height: 920px) {
+      .header { margin-bottom: 0.875rem; }
+      .cards { margin-top: 0.75rem; }
+    }
+
+    html[data-preset="blueprint"] .card {
+      position: relative;
+      border-color: var(--panel-border);
+      border-radius: 0.3rem;
+      background: var(--panel);
+      box-shadow: none;
+    }
+    html[data-preset="blueprint"] .card::before {
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: 1rem;
+      width: 2.5rem;
+      border-top: 2px solid var(--frontend-stroke);
+    }
+
+    html[data-preset="editorial"] .card {
+      position: relative;
+      border-radius: 0.28rem;
+      background: var(--panel);
+      box-shadow: 0 10px 28px color-mix(in srgb, #000 10%, transparent);
+    }
+    html[data-preset="editorial"] .card::before {
+      position: absolute;
+      top: -1px;
+      left: 1.25rem;
+      width: 3.25rem;
+      border-top: 3px solid var(--arrow-emphasis);
+      content: "";
+    }
+    html[data-preset="editorial"] .card-dot { border-radius: 0; transform: rotate(45deg) scale(0.78); }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .card-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    .card-dot.cyan     { background: var(--frontend-stroke); }
+    .card-dot.emerald  { background: var(--backend-stroke); }
+    .card-dot.violet   { background: var(--database-stroke); }
+    .card-dot.amber    { background: var(--cloud-stroke); }
+    .card-dot.rose     { background: var(--security-stroke); }
+    .card-dot.orange   { background: var(--messagebus-stroke); }
+    .card-dot.slate    { background: var(--external-stroke); }
+
+    .card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text); }
+
+    .card ul {
+      list-style: none;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+
+    .card li { margin-bottom: 0.375rem; }
+
+    /* ==========================================================
+       Print stylesheet — hide interactive controls, force light,
+       drop the grid so the diagram doesn't waste ink, use landscape
+       so wide diagrams fit, pack summary cards into 2 columns to
+       avoid an orphan card on a trailing page.
+       ========================================================== */
+    @page { size: landscape; margin: 1.5cm; }
+
+    @media print {
+      /* Force the FULL light palette — including component fills/strokes and
+         lane/arrow colors — so printing from dark theme doesn't put neon
+         strokes and translucent dark fills on white paper. */
+      :root, [data-theme="dark"], [data-theme="light"] {
+        --bg: #ffffff;
+        --grid: transparent;
+        --panel: #ffffff;
+        --panel-border: #e2e8f0;
+        --text: #0f172a;
+        --text-muted: #475569;
+        --text-dim: #94a3b8;
+        --text-faint: #64748b;
+        --mask: #ffffff;
+        --lane-fill: rgba(248, 250, 252, 0.65);
+        --lane-stroke: #cbd5e1;
+        --arrow: #94a3b8;
+        --arrow-emphasis: #059669;
+        --frontend-fill:    rgba(34, 211, 238, 0.15);
+        --frontend-stroke:  #0891b2;
+        --backend-fill:     rgba(52, 211, 153, 0.18);
+        --backend-stroke:   #059669;
+        --database-fill:    rgba(167, 139, 250, 0.2);
+        --database-stroke:  #7c3aed;
+        --cloud-fill:       rgba(251, 191, 36, 0.18);
+        --cloud-stroke:     #d97706;
+        --security-fill:    rgba(251, 113, 133, 0.15);
+        --security-stroke:  #e11d48;
+        --messagebus-fill:  rgba(251, 146, 60, 0.15);
+        --messagebus-stroke:#ea580c;
+        --external-fill:    rgba(148, 163, 184, 0.18);
+        --external-stroke:  #64748b;
+      }
+      body { background: #ffffff !important; padding: 0; }
+      .container { max-width: none; }
+      .toolbar, .diagram-nav, .focus-chip, .guided-views, .archify-toast, .no-print { display: none !important; }
+      .chapter-handoff-overlay { display: none !important; }
+      svg [data-node-id][data-chapter-role] { opacity: 1 !important; }
+      svg[data-chapter-preview] [data-node-id],
+      svg[data-chapter-preview] [data-edge-from] { opacity: 1 !important; filter: none !important; }
+      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }
+      html[data-preset="signal-flow"] .diagram-container,
+      html[data-preset="signal-flow"] .card { background: #ffffff; }
+      .cards { grid-template-columns: 1fr 1fr; }
+      /* Ensure elements break sensibly across pages */
+      .card { break-inside: avoid; page-break-inside: avoid; }
+      .diagram-container { break-inside: avoid; page-break-inside: avoid; }
+      .diagram-container svg [data-detail] {
+        opacity: 1 !important;
+        pointer-events: auto !important;
+      }
+      .diagram-container svg [data-detail-anchor] { transform: none !important; }
+      .diagram-container svg[data-lens-active] [data-node-id],
+      .diagram-container svg[data-lens-active] [data-edge-from],
+      .diagram-container svg[data-legend-preview-active] [data-node-id],
+      .diagram-container svg[data-legend-preview-active] [data-edge-from] {
+        opacity: 1 !important;
+        filter: none !important;
+      }
+      [data-legend-bridge-runtime] { display: none !important; }
+      .semantic-lens-overlay { display: none !important; }
+      .relationship-hit-overlay { display: none !important; }
+      .relationship-pulse-overlay { display: none !important; }
+      .route-probe-overlay, .route-journey-overlay { display: none !important; }
+      .story-trail-overlay,
+      .story-carrier-overlay { display: none !important; }
+      .diagram-container svg[data-focus-active] [data-node-id],
+      .diagram-container svg[data-focus-active] [data-edge-from],
+      .diagram-container svg[data-reach-active] [data-node-id],
+      .diagram-container svg[data-reach-active] [data-edge-from],
+      .diagram-container svg[data-story-beat] [data-story-step],
+      .diagram-container svg[data-story-beat] [data-edge-from][data-story-beat-step],
+      .diagram-container svg[data-route-active] [data-node-id],
+      .diagram-container svg[data-route-active] [data-edge-from] {
+        opacity: 1 !important;
+        filter: none !important;
+        animation: none !important;
+      }
+      h1, .subtitle { color: #0f172a; }
+    }
+
+    /* ==========================================================
+       TOOLBAR (theme toggle + export menu)
+       ========================================================== */
+    .toolbar {
+      position: fixed;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+      z-index: 100;
+    }
+    .toolbar button {
+      background: var(--toolbar-bg);
+      color: var(--toolbar-text);
+      border: 1px solid var(--toolbar-border);
+      padding: 0.5rem 0.875rem;
+      border-radius: 0.625rem;
+      font-family: inherit;
+      font-size: 0.75rem;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+      backdrop-filter: blur(10px);
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+      transition: background 0.15s, border-color 0.15s, color 0.15s;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      min-height: 2.75rem;
+    }
+    .toolbar button:hover {
+      background: var(--toolbar-hover);
+      border-color: color-mix(in srgb, var(--arrow) 62%, var(--toolbar-border));
+    }
+    .toolbar button[aria-expanded="true"],
+    .toolbar button[aria-pressed="true"]:not(#btn-theme) {
+      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));
+      border-color: color-mix(in srgb, var(--frontend-stroke) 48%, var(--toolbar-border));
+    }
+    .toolbar #btn-export {
+      padding-right: 0.82rem;
+      padding-left: 0.82rem;
+    }
+    .toolbar #btn-export:hover,
+    .toolbar #btn-export[aria-expanded="true"] {
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-stroke) 10%, var(--toolbar-hover));
+      border-color: color-mix(in srgb, var(--frontend-stroke) 54%, var(--toolbar-border));
+    }
+    .toolbar button:focus-visible {
+      outline: 2px solid var(--frontend-stroke);
+      outline-offset: 2px;
+    }
+    .toolbar #btn-motion[hidden] { display: none !important; }
+    .toolbar #btn-motion { min-width: 4.4rem; }
+    .toolbar #btn-motion:disabled { cursor: default; opacity: 0.58; }
+    .toolbar .preset-wrap,
+    .toolbar .export-wrap {
+      position: relative;
+    }
+    .toolbar-icon {
+      display: inline-block;
+      width: 0.95rem;
+      height: 0.95rem;
+      flex: 0 0 auto;
+      background: currentColor;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .toolbar-chevron {
+      width: 0.65rem;
+      height: 0.65rem;
+      transition: transform 0.15s ease;
+    }
+    [aria-expanded="true"] > .toolbar-chevron { transform: rotate(180deg); }
+    [data-theme="light"] #theme-icon {
+      -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");
+      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");
+    }
+    [data-theme="dark"] #theme-icon {
+      -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");
+      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");
+    }
+    #btn-present[aria-pressed="false"] #present-icon {
+      -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");
+      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");
+    }
+    #btn-present[aria-pressed="true"] #present-icon {
+      -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");
+      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");
+    }
+    .toolbar-chevron {
+      -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");
+      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");
+    }
+    .toolbar #btn-preset { min-width: 5.4rem; }
+    .preset-control-mark {
+      width: 0.58rem;
+      height: 0.58rem;
+      flex: 0 0 auto;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 0.2rem;
+      background: color-mix(in srgb, var(--frontend-stroke) 28%, transparent);
+      transition: border-radius 0.15s, box-shadow 0.15s, transform 0.15s;
+    }
+    #btn-preset[data-preset-option="signal-flow"] .preset-control-mark {
+      border-radius: 50%;
+      box-shadow: 0 0 10px color-mix(in srgb, var(--frontend-stroke) 78%, transparent);
+    }
+    #btn-preset[data-preset-option="blueprint"] .preset-control-mark {
+      border-radius: 0.06rem;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--frontend-stroke) 32%, transparent);
+      transform: rotate(45deg) scale(0.84);
+    }
+    #btn-preset[data-preset-option="editorial"] .preset-control-mark {
+      border-color: var(--arrow-emphasis);
+      border-radius: 0;
+      background: var(--arrow-emphasis);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--arrow-emphasis) 14%, transparent);
+      transform: rotate(45deg) scale(0.72);
+    }
+    .toolbar .preset-menu {
+      position: absolute;
+      top: calc(100% + 0.375rem);
+      right: 0;
+      display: none;
+      width: 18.5rem;
+      max-width: calc(100vw - 2rem);
+      padding: 0.45rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.875rem;
+      background: var(--toolbar-menu-bg);
+      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
+    }
+    .toolbar .preset-menu.open { display: block; }
+    .toolbar .preset-menu.open,
+    .toolbar .export-menu.open {
+      animation: toolbar-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
+      transform-origin: top right;
+    }
+    @keyframes toolbar-menu-in {
+      from { opacity: 0; transform: translateY(-0.25rem) scale(0.985); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    .preset-menu-heading {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.42rem 0.6rem 0.55rem;
+      color: var(--text-faint);
+      font-size: 0.56rem;
+      letter-spacing: 0.13em;
+      text-transform: uppercase;
+    }
+    .preset-menu-heading span:last-child {
+      font-size: 0.52rem;
+      letter-spacing: 0.04em;
+      text-transform: none;
+    }
+    .toolbar .preset-option {
+      display: grid;
+      grid-template-columns: 2rem minmax(0, 1fr) 1rem;
+      align-items: center;
+      gap: 0.68rem;
+      width: 100%;
+      min-height: 3.35rem;
+      padding: 0.5rem 0.62rem;
+      border: 0;
+      border-radius: 0.5rem;
+      background: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+      text-align: left;
+    }
+    .toolbar .preset-option:hover,
+    .toolbar .preset-option:focus-visible { background: var(--toolbar-hover); }
+    .toolbar .preset-option[aria-checked="true"] {
+      background: color-mix(in srgb, var(--frontend-stroke) 9%, transparent);
+      border-color: color-mix(in srgb, var(--frontend-stroke) 36%, transparent);
+    }
+    .preset-option-swatch {
+      position: relative;
+      width: 2rem;
+      height: 1.55rem;
+      overflow: hidden;
+      border: 1px solid #64748b;
+      border-radius: 0.24rem;
+      background: #0f172a;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
+    }
+    .preset-option-swatch::before,
+    .preset-option-swatch::after { position: absolute; content: ""; }
+    .preset-option-swatch.classic::before {
+      top: 0.42rem;
+      right: 0.35rem;
+      bottom: 0.42rem;
+      left: 0.35rem;
+      border: 1px solid #22d3ee;
+      border-radius: 0.16rem;
+      background: rgba(34, 211, 238, 0.14);
+    }
+    .preset-option-swatch.signal-flow {
+      border-color: #29415f;
+      background: linear-gradient(135deg, #07101e 10%, #10243c 100%);
+    }
+    .preset-option-swatch.signal-flow::before {
+      top: 50%;
+      right: 0.2rem;
+      left: 0.2rem;
+      height: 1px;
+      background: linear-gradient(90deg, #67e8f9, #c4b5fd);
+      box-shadow: 0 0 8px #67e8f9;
+    }
+    .preset-option-swatch.signal-flow::after {
+      top: calc(50% - 0.13rem);
+      right: 0.28rem;
+      width: 0.26rem;
+      height: 0.26rem;
+      border-radius: 50%;
+      background: #67e8f9;
+      box-shadow: 0 0 7px #67e8f9;
+    }
+    .preset-option-swatch.blueprint {
+      border-color: #34799a;
+      border-radius: 0.08rem;
+      background-color: #0a2031;
+      background-image:
+        linear-gradient(rgba(102, 217, 239, 0.18) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(102, 217, 239, 0.18) 1px, transparent 1px);
+      background-size: 0.42rem 0.42rem;
+    }
+    .preset-option-swatch.blueprint::before {
+      top: 0.34rem;
+      right: 0.38rem;
+      bottom: 0.34rem;
+      left: 0.38rem;
+      border: 1px solid #66d9ef;
+    }
+    .preset-option-swatch.editorial {
+      border-color: #b8aa94;
+      border-radius: 0.08rem;
+      background: repeating-linear-gradient(0deg, #f2eee5 0 0.34rem, #d8d0c2 0.36rem, #f2eee5 0.38rem);
+    }
+    .preset-option-swatch.editorial::before {
+      top: 0;
+      bottom: 0;
+      left: 0.42rem;
+      width: 1px;
+      background: #c9502d;
+      opacity: 0.72;
+    }
+    .preset-option-swatch.editorial::after {
+      top: 0.52rem;
+      right: 0.45rem;
+      width: 0.38rem;
+      height: 0.38rem;
+      background: #c9502d;
+      transform: rotate(45deg);
+    }
+    .preset-option-copy { min-width: 0; }
+    .preset-option-copy strong,
+    .preset-option-copy small { display: block; }
+    .preset-option-copy strong {
+      color: var(--toolbar-text);
+      font-size: 0.72rem;
+      font-weight: 600;
+    }
+    .preset-option-copy small {
+      margin-top: 0.16rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.57rem;
+      font-weight: 400;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .preset-option-check {
+      display: inline-block;
+      width: 0.9rem;
+      height: 0.9rem;
+      color: var(--frontend-stroke);
+      background: currentColor;
+      -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");
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      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");
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      opacity: 0;
+    }
+    .preset-option[aria-checked="true"] .preset-option-check { opacity: 1; }
+    html[data-preset="editorial"] .toolbar button,
+    html[data-preset="editorial"] .preset-menu,
+    html[data-preset="editorial"] .export-menu,
+    html[data-preset="editorial"] .overview-map,
+    html[data-preset="editorial"] .semantic-lens,
+    html[data-preset="editorial"] .route-probe,
+    html[data-preset="editorial"] .focus-chip,
+    html[data-preset="editorial"] .diagram-guide,
+    html[data-preset="editorial"] .node-finder,
+    html[data-preset="editorial"] .guided-views,
+    html[data-preset="editorial"] .share-chapter-cue {
+      border-radius: 0.3rem;
+    }
+    .motion-control-dot {
+      width: 0.46rem;
+      height: 0.46rem;
+      flex: 0 0 auto;
+      border: 1px solid var(--frontend-stroke);
+      border-radius: 50%;
+      background: var(--frontend-stroke);
+      box-shadow: 0 0 9px color-mix(in srgb, var(--frontend-stroke) 72%, transparent);
+    }
+    #btn-motion[aria-pressed="false"] .motion-control-dot {
+      background: transparent;
+      box-shadow: none;
+    }
+    .toolbar .export-menu {
+      position: absolute;
+      top: calc(100% + 0.375rem);
+      right: 0;
+      background: var(--toolbar-menu-bg);
+      border: 1px solid var(--toolbar-border);
+      width: 19rem;
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100vh - 5.5rem);
+      overflow-y: auto;
+      border-radius: 0.875rem;
+      padding: 0.55rem;
+      display: none;
+      flex-direction: column;
+      box-shadow: 0 18px 48px rgba(0,0,0,0.24);
+    }
+    .toolbar .export-menu.open { display: flex; }
+    .export-menu-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.5rem 0.55rem 0.72rem;
+    }
+    .export-menu-header strong,
+    .export-menu-header span { display: block; }
+    .export-menu-header strong {
+      color: var(--toolbar-text);
+      font-size: 0.78rem;
+      font-weight: 650;
+      letter-spacing: -0.015em;
+    }
+    .export-menu-header span {
+      margin-top: 0.16rem;
+      color: var(--text-faint);
+      font-size: 0.56rem;
+    }
+    .export-menu-header kbd {
+      padding: 0.16rem 0.36rem;
+      border: 1px solid var(--toolbar-border);
+      border-radius: 0.3rem;
+      color: var(--text-faint);
+      background: color-mix(in srgb, var(--toolbar-border) 16%, transparent);
+      font-family: inherit;
+      font-size: 0.54rem;
+      font-weight: 600;
+    }
+    .export-menu-section {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.18rem;
+    }
+    .export-menu-section + .export-menu-section {
+      margin-top: 0.42rem;
+      padding-top: 0.42rem;
+      border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 68%, transparent);
+    }
+    .export-menu-heading {
+      grid-column: 1 / -1;
+      display: block;
+      padding: 0.24rem 0.55rem 0.2rem;
+      color: var(--text-faint);
+      font-size: 0.54rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .toolbar .export-menu button {
+      display: grid;
+      grid-template-columns: 1.15rem minmax(0, 1fr);
+      align-items: center;
+      column-gap: 0.52rem;
+      background: transparent;
+      border: 1px solid transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+      width: 100%;
+      min-height: 3rem;
+      text-align: left;
+      padding: 0.48rem 0.55rem;
+      border-radius: 0.5rem;
+      white-space: nowrap;
+    }
+    .export-item-copy {
+      display: block;
+      min-width: 0;
+    }
+    .export-item-copy strong,
+    .export-item-copy small { display: block; }
+    .export-item-copy strong {
+      overflow: hidden;
+      color: inherit;
+      font-size: 0.7rem;
+      font-weight: 550;
+      text-overflow: ellipsis;
+    }
+    .export-item-copy small {
+      margin-top: 0.12rem;
+      overflow: hidden;
+      color: var(--text-faint);
+      font-size: 0.55rem;
+      font-weight: 450;
+      text-overflow: ellipsis;
+    }
+    .toolbar .export-menu button::before {
+      width: 1rem;
+      height: 1rem;
+      background: currentColor;
+      content: "";
+      opacity: 0.72;
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+    .toolbar .export-menu button[data-format="share-card"]::before,
+    .toolbar .export-menu button[data-action="route-share-card"]::before,
+    .toolbar .export-menu button[data-action="reach-share-card"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-action^="copy"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="png"]::before,
+    .toolbar .export-menu button[data-format="jpeg"]::before,
+    .toolbar .export-menu button[data-format="webp"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="svg"]::before,
+    .toolbar .export-menu button[data-format="webm"]::before {
+      -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");
+      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");
+    }
+    .toolbar .export-menu button[data-format="drawio"]::before,
+    .toolbar .export-menu button[data-format="drawio-strict"]::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2.5' y='2.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='11.5' y='12.5' width='6' height='5' rx='1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.5 5h6v7.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
+    }
+    .toolbar .export-menu button[data-format="share-card"],
+    .toolbar .export-menu button[data-action="route-share-card"],
+    .toolbar .export-menu button[data-action="reach-share-card"] {
+      min-height: 3.35rem;
+      color: var(--toolbar-text);
+      background: color-mix(in srgb, var(--frontend-stroke) 8%, transparent);
+      border-color: color-mix(in srgb, var(--frontend-stroke) 24%, var(--toolbar-border));
+    }
+    .toolbar .export-menu button[hidden] { display: none; }
+    .toolbar .export-menu button:hover {
+      background: var(--toolbar-hover);
+    }
+    .toolbar .export-menu button:focus-visible {
+      background: var(--toolbar-hover);
+      outline-offset: -2px;
+    }
+    .toolbar .export-menu button:disabled {
+      color: var(--text-faint);
+      background: color-mix(in srgb, var(--toolbar-border) 18%, transparent);
+      cursor: not-allowed;
+    }
+    .toolbar .export-menu button:disabled:hover {
+      border-color: transparent;
+    }
+    .toolbar .export-menu .hint {
+      color: var(--text-faint);
+      font-size: 0.55rem;
+    }
+
+    /* Toast — brief feedback for actions like "copied" */
+    .archify-toast {
+      position: fixed;
+      top: 1rem;
+      left: 50%;
+      transform: translateX(-50%) translateY(-8px);
+      background: var(--toolbar-menu-bg);
+      color: var(--text);
+      border: 1px solid var(--toolbar-border);
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      font-family: inherit;
+      font-size: 0.75rem;
+      opacity: 0;
+      transition: opacity 0.2s, transform 0.2s;
+      z-index: 200;
+      pointer-events: none;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+    }
+    .archify-toast.show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    @media (max-width: 720px) {
+      body { padding: 1rem; }
+      .toolbar .preset-menu,
+      .toolbar .export-menu {
+        position: fixed;
+        top: 4.5rem;
+        right: 1rem;
+        left: 1rem;
+        width: auto;
+        max-width: none;
+      }
+      .toolbar {
+        position: relative;
+        justify-content: flex-end;
+        width: max-content;
+        max-width: 100%;
+        margin-left: auto;
+        margin-bottom: 1rem;
+      }
+      .header { margin-bottom: 1.25rem; padding-right: 0; }
+      html[data-preset="signal-flow"] .header,
+      html[data-preset="blueprint"] .header,
+      html[data-preset="editorial"] .header { padding-right: 0; }
+      .header-row {
+        gap: 0.75rem;
+        align-items: flex-start;
+      }
+      html[data-preset="signal-flow"] .header-row,
+      html[data-preset="blueprint"] .header-row,
+      html[data-preset="editorial"] .header-row { flex-wrap: wrap; }
+      html[data-preset="signal-flow"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      html[data-preset="blueprint"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      html[data-preset="editorial"] .header-row::after {
+        margin-left: 0;
+        order: 3;
+      }
+      h1 {
+        font-size: 1.25rem;
+        line-height: 1.25;
+      }
+      .subtitle {
+        margin-left: 0;
+        font-size: 0.8125rem;
+        line-height: 1.55;
+      }
+      .diagram-container {
+        padding: 0.75rem;
+        border-radius: 0.75rem;
+      }
+      html:not([data-embed="true"]) .diagram-container {
+        padding: 0.75rem 0.75rem 4.25rem;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] {
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior-x: contain;
+        scrollbar-width: thin;
+        scroll-behavior: smooth;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] > svg {
+        min-width: 720px;
+      }
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .diagram-nav,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .overview-map,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .focus-chip,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .route-probe,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .semantic-lens,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .diagram-guide,
+      html:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] .node-finder {
+        transform: translateX(var(--archify-scroll-x, 0px));
+      }
+      .diagram-nav { right: 0.5rem; bottom: 0.5rem; }
+      .diagram-nav button {
+        min-width: 2.75rem;
+        height: 2.75rem;
+      }
+      .diagram-nav [data-view="reset"] { min-width: 3.75rem; }
+      .diagram-nav [data-view="reset"][data-detail-visible] { min-width: 4.35rem; }
+      .overview-map {
+        right: 0.5rem;
+        bottom: 3.7rem;
+        width: min(10.25rem, calc(100% - 1rem));
+      }
+      .overview-map[data-docked="true"] {
+        right: 0.5rem;
+        top: var(--archify-radar-top, 0.5rem);
+        bottom: auto;
+        transform: none !important;
+      }
+      .overview-map[data-docked="true"][data-dock-side="left"] {
+        right: auto;
+        left: 0.5rem;
+      }
+      .overview-map-surface { height: 4rem; }
+      .semantic-lens {
+        right: 0.5rem;
+        bottom: 3.7rem;
+        width: calc(100% - 1rem);
+        max-height: calc(100% - 4.2rem);
+      }
+      .semantic-lens[data-dock-side] { left: auto; right: 0.5rem; }
+      .semantic-lens-kinds { max-height: min(12rem, 34vh); }
+      .focus-chip {
+        left: 0.5rem;
+        top: 0.5rem;
+        width: calc(100% - 1rem);
+        max-width: none;
+      }
+      .relationship-lens-list { max-height: min(12rem, 38vh); }
+      .relationship-lens-actions #btn-focus-relations { display: block; color: var(--database-stroke); }
+      .focus-chip:not([data-relations-expanded="true"]) .relationship-lens-head { border-bottom-color: transparent; }
+      .focus-chip:not([data-relations-expanded="true"]) .relationship-lens-list { display: none; }
+      /* While a mobile reader previews one relationship, turn the full Lens
+         into a compact peek card. This keeps the exact source and target on
+         canvas instead of covering them with a long, scrollable list. */
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-list {
+        max-height: none;
+        padding: 0.35rem;
+        overflow: hidden;
+      }
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-group { margin: 0; }
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-group-title,
+      .focus-chip[data-relationship-previewing="true"] .relationship-lens-row:not([data-preview-active="true"]) {
+        display: none;
+      }
+      .node-finder {
+        top: 0.5rem;
+        left: 0.5rem;
+        width: min(22rem, calc(100% - 1rem));
+        max-height: calc(100% - 1rem);
+      }
+      .diagram-guide {
+        top: 0.5rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        width: auto;
+        max-height: calc(100% - 1rem);
+      }
+      .diagram-guide-head { padding: 0.62rem 0.7rem 0.52rem; }
+      .diagram-guide-stats { padding: 0.42rem 0.7rem; }
+      .diagram-guide-actions {
+        grid-template-columns: 1fr;
+        gap: 0.28rem;
+        padding: 0.42rem;
+      }
+      .diagram-guide-action {
+        min-height: 3.1rem;
+        padding: 0.42rem 0.48rem;
+      }
+      .diagram-guide-action small {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .diagram-guide-index {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+      .diagram-guide-shortcuts { padding: 0.46rem 0.7rem 0.52rem; }
+      .diagram-guide-action[data-guide-action="present"] { grid-column: auto; }
+      .route-probe[data-guide-open="true"] {
+        visibility: hidden;
+        pointer-events: none;
+      }
+      .node-finder-results { max-height: min(16rem, 38vh); }
+      .route-probe {
+        left: 0.5rem;
+        bottom: 3.7rem;
+        width: calc(100% - 1rem);
+        min-width: 0;
+      }
+      .route-probe[data-route-dock="top"] {
+        top: 0.5rem;
+        bottom: auto;
+      }
+      .route-probe[data-finder-open="true"] {
+        visibility: hidden;
+        pointer-events: none;
+      }
+      .route-probe-head { padding: 0.45rem 0.48rem 0.38rem; }
+      .route-probe-path { padding: 0.35rem 0.48rem 0.2rem; }
+      .route-probe-node { min-height: 2.75rem !important; }
+      .route-journey-controls {
+        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem minmax(0, 1fr);
+        padding: 0.08rem 0.48rem 0.32rem;
+      }
+      .route-journey-controls button { min-height: 2.75rem; }
+      .route-probe-status { padding: 0.05rem 0.48rem 0.38rem; }
+      .route-probe-node { max-width: 7.5rem; }
+      .guided-views {
+        grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+        gap: 0.2rem;
+        padding: 0.25rem;
+      }
+      .guided-view-actions {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .guided-views > #guided-view-prev,
+      .guided-views > #guided-view-next {
+        align-self: center;
+        height: 2.75rem;
+      }
+      .guided-view-play,
+      .guided-view-all,
+      .guided-view-beat-link { min-height: 2.75rem; }
+      .guided-view-copy small { white-space: normal; }
+      .guided-story-caption { padding: 0.32rem 0.45rem; }
+      .guided-story-caption-index { min-width: 2.9rem; padding-right: 0.42rem; }
+      .guided-story-caption strong,
+      .guided-story-caption small { white-space: normal; }
+      .guided-story-caption-next { display: none; }
+      .guided-view-trail { min-height: 2rem; }
+      .guided-view-trail .guided-view-stop {
+        min-height: 2rem;
+        padding: 0.22rem 0.42rem 0.22rem 0.28rem;
+      }
+      .guided-view-handoff { max-width: min(9rem, 32vw); }
+      .guided-view-index { padding-top: 0.35rem; }
+      .guided-view-chapters {
+        gap: 0.35rem;
+        scroll-padding-inline: 0.2rem;
+      }
+      .guided-view-chapters li {
+        flex: 0 0 min(14rem, 78vw);
+        min-width: 0;
+      }
+      .guided-view-chapter { min-height: 2.75rem; }
+      .guided-views[data-active-view="all"] {
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 0.2rem;
+        padding: 0.25rem;
+      }
+      .guided-views[data-active-view="all"] .guided-view-copy {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .guided-views[data-active-view="all"] .guided-view-actions {
+        grid-column: 2;
+        grid-row: 1;
+      }
+      .guided-views[data-active-view="all"] .guided-view-play {
+        min-width: 6rem !important;
+        min-height: 2.75rem;
+      }
+      .guided-views[data-active-view="all"] .guided-view-index {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        padding: 0.3rem 0.08rem 0;
+        border-top: 1px solid color-mix(in srgb, var(--toolbar-border) 72%, transparent);
+        border-left: 0;
+      }
+      html[data-embed="true"][data-share-playback="true"] .share-chapter-cue:not([hidden]),
+      html[data-embed="true"][data-share-moment="true"] .share-chapter-cue:not([hidden]) {
+        top: 0.5rem;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 0.28rem 0.55rem;
+        width: calc(100% - 1rem);
+        min-height: 0;
+        padding: 0.45rem 0.55rem 0.55rem;
+      }
+      html[data-embed="true"][data-share-playback="true"] .diagram-container {
+        padding-top: 4.25rem;
+      }
+      html[data-embed="true"][data-share-moment="true"] .diagram-container {
+        padding-top: 4.25rem;
+      }
+      .share-chapter-index {
+        min-width: 4.4rem;
+        padding-right: 0.5rem;
+      }
+      .share-chapter-copy small { font-size: 0.46rem; }
+      .share-chapter-route {
+        grid-column: 1 / -1;
+        font-size: 0.5rem;
+        text-align: left;
+      }
+      .cards {
+        grid-template-columns: 1fr;
+        margin-top: 1rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) body { padding: 0.5rem; }
+      html[data-present="true"]:not([data-embed="true"]) .container {
+        gap: 0.5rem;
+        height: calc(100dvh - 1rem);
+      }
+      html[data-present="true"]:not([data-embed="true"]) .toolbar {
+        position: fixed;
+        top: 0.5rem;
+        right: 0.5rem;
+        margin: 0;
+        gap: 0.25rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .toolbar button {
+        min-height: 2.75rem;
+        padding: 0.42rem 0.58rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header {
+        min-height: 2.25rem;
+        padding: 3.5rem 0 0;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header-row {
+        min-height: 2.25rem;
+        margin: 0;
+        align-items: center;
+        flex-wrap: nowrap;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .header-row::after,
+      html[data-present="true"]:not([data-embed="true"]) .pulse-dot,
+      html[data-present="true"]:not([data-embed="true"]) .subtitle { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) h1 {
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        font-size: 0.875rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .guided-views {
+        padding: 0.2rem;
+      }
+      html[data-present="true"]:not([data-embed="true"]) .guided-view-copy small { display: none; }
+      html[data-present="true"]:not([data-embed="true"]) .guided-story-caption small { display: block; }
+      html[data-present="true"]:not([data-embed="true"]) .diagram-container { padding: 0.5rem 0.5rem 3.75rem; }
+      html[data-present="true"]:not([data-embed="true"]) .diagram-container[data-wide-diagram="true"] > svg {
+        width: 720px;
+        height: auto;
+        min-width: 720px;
+      }
+    }
+
+    @media (max-width: 420px) {
+      .export-menu-section { grid-template-columns: 1fr; }
+      .export-menu-heading,
+      .toolbar .export-menu button[data-format="share-card"],
+      .toolbar .export-menu button[data-action="route-share-card"],
+      .toolbar .export-menu button[data-action="reach-share-card"] { grid-column: 1; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .guided-story-caption { animation: none !important; }
+      .toolbar .preset-menu.open,
+      .toolbar .export-menu.open { animation: none; }
+      .toolbar-chevron { transition: none; }
+    }
+
+    @media (max-width: 360px) {
+      .toolbar { gap: 0.25rem; }
+      .toolbar button { padding-right: 0.58rem; padding-left: 0.58rem; }
+      .toolbar #btn-motion { min-width: 4.4rem; padding-right: 0.58rem; padding-left: 0.58rem; }
+      #theme-label, #preset-label, #present-label { display: none; }
+      .guided-view-handoff { max-width: 6.5rem; }
+    }
+
+    /* ==========================================================
+       SVG SEMANTIC CLASSES — use these instead of inline fill/stroke
+       ========================================================== */
+    .c-grid       { stroke: var(--grid); fill: none; }
+    .c-mask       { fill: var(--mask); stroke: none; }
+
+    .c-frontend   { fill: var(--frontend-fill);   stroke: var(--frontend-stroke); }
+    .c-backend    { fill: var(--backend-fill);    stroke: var(--backend-stroke); }
+    .c-database   { fill: var(--database-fill);   stroke: var(--database-stroke); }
+    .c-cloud      { fill: var(--cloud-fill);      stroke: var(--cloud-stroke); }
+    .c-security   { fill: var(--security-fill);   stroke: var(--security-stroke); }
+    .c-messagebus { fill: var(--messagebus-fill); stroke: var(--messagebus-stroke); }
+    .c-external   { fill: var(--external-fill);   stroke: var(--external-stroke); }
+
+    /* Text helpers */
+    .t-primary { fill: var(--text); }
+    .t-muted   { fill: var(--text-muted); }
+    .t-dim     { fill: var(--text-dim); }
+    .t-frontend   { fill: var(--frontend-stroke); }
+    .t-backend    { fill: var(--backend-stroke); }
+    .t-database   { fill: var(--database-stroke); }
+    .t-cloud      { fill: var(--cloud-stroke); }
+    .t-security   { fill: var(--security-stroke); }
+    .t-messagebus { fill: var(--messagebus-stroke); }
+    .t-external   { fill: var(--external-stroke); }
+
+    /* Semantic Sigils are small authored role stamps, not icons from a brand
+       pack and not viewer controls. Prefix selectors with svg so the canonical
+       export's SVG-only stylesheet collector keeps them automatically. */
+    svg .semantic-sigil {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.35;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      opacity: 0.76;
+      pointer-events: none;
+    }
+    svg .semantic-sigil > * { vector-effect: non-scaling-stroke; }
+    svg .semantic-sigil .sigil-fill { fill: currentColor; stroke: none; }
+    svg .s-frontend   { color: var(--frontend-stroke); }
+    svg .s-backend    { color: var(--backend-stroke); }
+    svg .s-database   { color: var(--database-stroke); }
+    svg .s-cloud      { color: var(--cloud-stroke); }
+    svg .s-security   { color: var(--security-stroke); }
+    svg .s-messagebus { color: var(--messagebus-stroke); }
+    svg .s-external   { color: var(--external-stroke); }
+
+    /* Reading Depth is a viewer-only level-of-detail layer. MAP preserves the
+       authored structure and primary labels, READ restores relationship labels
+       and node context, and FULL restores tags and fine annotations. Semantic
+       intent can reveal the relevant detail without moving any geometry. */
+    svg [data-detail] { transition: opacity 160ms ease; }
+    svg [data-detail-anchor] {
+      transform-box: fill-box;
+      transform-origin: center;
+      transition: transform 160ms ease;
+    }
+    .diagram-container[data-detail-level="map"] svg [data-detail="context"],
+    .diagram-container[data-detail-level="map"] svg [data-detail="fine"],
+    .diagram-container[data-detail-level="read"] svg [data-detail="fine"] {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .diagram-container[data-detail-level="map"] svg [data-detail-anchor] {
+      transform: translateY(8px);
+    }
+
+    /* Focus, lens, preview, route, and story states are stronger reader intent than
+       the global zoom level. Reveal only their exact semantic matches. */
+    svg[data-focus-active] [data-focus-match][data-detail],
+    svg[data-focus-active] [data-focus-match] [data-detail],
+    svg[data-reach-active] [data-reach-match][data-detail],
+    svg[data-reach-active] [data-reach-match] [data-detail],
+    svg[data-lens-active] [data-lens-match][data-detail],
+    svg[data-lens-active] [data-lens-match] [data-detail],
+    svg[data-legend-preview-active] [data-legend-preview-match][data-detail],
+    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail],
+    svg[data-intent-trace-active] [data-intent-trace-match][data-detail],
+    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail],
+    svg[data-route-active] [data-route-match][data-detail],
+    svg[data-route-active] [data-route-match] [data-detail],
+    svg[data-story-active] [data-story-step][data-detail],
+    svg[data-story-active] [data-story-step] [data-detail],
+    svg[data-relationship-preview-active] [data-relationship-preview][data-detail],
+    svg[data-relationship-preview-active] [data-relationship-preview] [data-detail],
+    svg [data-node-id]:hover [data-detail],
+    svg [data-node-id]:focus-visible [data-detail] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    svg[data-focus-active] [data-focus-match] [data-detail-anchor],
+    svg[data-reach-active] [data-reach-match] [data-detail-anchor],
+    svg[data-lens-active] [data-lens-match] [data-detail-anchor],
+    svg[data-legend-preview-active] [data-legend-preview-match] [data-detail-anchor],
+    svg[data-intent-trace-active] [data-intent-trace-match] [data-detail-anchor],
+    svg[data-route-active] [data-route-match] [data-detail-anchor],
+    svg[data-story-active] [data-story-step] [data-detail-anchor],
+    svg [data-node-id]:hover [data-detail-anchor],
+    svg [data-node-id]:focus-visible [data-detail-anchor] { transform: none; }
+
+    /* Arrows */
+    .a-default   { stroke: var(--arrow); fill: none; }
+    .a-emphasis  { stroke: var(--arrow-emphasis); fill: none; }
+    .a-security  { stroke: var(--security-stroke); fill: none; stroke-dasharray: 5,5; }
+    .a-dashed    { stroke: var(--database-stroke); fill: none; stroke-dasharray: 4,4; }
+
+    /* Arrowhead markers reference these */
+    .m-default   { fill: var(--arrow); }
+    .m-emphasis  { fill: var(--arrow-emphasis); }
+    .m-security  { fill: var(--security-stroke); }
+    .m-dashed    { fill: var(--database-stroke); }
+
+    /* Stable semantic exploration hooks emitted by every renderer. */
+    svg [data-node-id] {
+      cursor: pointer;
+      transition: opacity 0.18s ease, filter 0.18s ease;
+    }
+    svg [data-edge-from] { transition: opacity 0.18s ease, filter 0.18s ease; }
+    svg [data-node-id]:hover,
+    svg [data-node-id]:focus-visible {
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+      outline: none;
+    }
+    /* Verified Source Beacons are installed at runtime only for nodes whose
+       repository evidence passed the local revision/blob/line checks. They
+       live inside the owning node so every focus, route, story, and guided
+       view keeps one coherent opacity state. Export serialization removes
+       them before producing the canonical SVG or any derived visual. */
+    .source-evidence-beacon {
+      pointer-events: none;
+      opacity: 0.76;
+      transition: opacity 160ms ease, filter 160ms ease;
+    }
+    .source-evidence-beacon rect {
+      fill: color-mix(in srgb, var(--mask) 92%, var(--backend-stroke));
+      stroke: color-mix(in srgb, var(--backend-stroke) 82%, var(--panel-border));
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    .source-evidence-beacon text {
+      fill: var(--backend-stroke);
+      font-size: 5.5px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-anchor: middle;
+      text-transform: uppercase;
+    }
+    svg [data-node-id]:hover .source-evidence-beacon,
+    svg [data-node-id]:focus-visible .source-evidence-beacon,
+    svg [data-node-id][data-focus-selected] .source-evidence-beacon {
+      opacity: 1;
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));
+    }
+    svg[data-preset="signal-flow"] .source-evidence-beacon { opacity: 0.9; }
+    svg[data-preset="blueprint"] .source-evidence-beacon rect {
+      rx: 0.8px;
+      filter: none;
+    }
+    svg [data-legend-kind][role="button"] { cursor: pointer; }
+    svg [data-legend-kind]:focus { outline: none; }
+    svg [data-legend-hit] {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 1.4;
+      pointer-events: all;
+      vector-effect: non-scaling-stroke;
+      transition: stroke 150ms ease, stroke-width 150ms ease, filter 150ms ease;
+    }
+    svg [data-legend-count-badge] { pointer-events: none; }
+    svg [data-legend-count-badge] rect {
+      fill: var(--mask);
+      stroke: var(--panel-border);
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    svg [data-legend-count-badge] text {
+      fill: var(--text-muted);
+      font-size: 8px;
+      font-weight: 700;
+      text-anchor: middle;
+    }
+    svg [data-legend-kind][role="button"]:hover [data-legend-hit] {
+      stroke: color-mix(in srgb, var(--database-stroke) 58%, transparent);
+    }
+    svg [data-legend-kind][role="button"]:focus-visible [data-legend-hit] {
+      stroke: var(--frontend-stroke);
+      stroke-width: 1.8;
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg [data-legend-kind][data-legend-selected] [data-legend-hit] {
+      stroke: var(--database-stroke);
+      stroke-width: 2.2;
+      stroke-dasharray: 3 2;
+    }
+    svg [data-legend-kind][data-legend-selected] [data-legend-count-badge] rect {
+      stroke: var(--database-stroke);
+      stroke-width: 1.8;
+    }
+    svg [data-legend-kind][data-legend-zero] { opacity: 0.44; }
+    svg[data-preset="signal-flow"] [data-legend-kind][data-legend-selected] [data-legend-hit] {
+      filter: drop-shadow(0 0 4px var(--database-stroke));
+    }
+    svg[data-preset="blueprint"] [data-legend-hit],
+    svg[data-preset="blueprint"] [data-legend-count-badge] rect { rx: 0; filter: none; }
+    svg[data-legend-preview-active] [data-node-id],
+    svg[data-legend-preview-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-legend-preview-active] [data-legend-preview-match] { opacity: 1; }
+    svg[data-legend-preview-active] [data-legend-preview-peer] { opacity: 0.62; }
+    svg[data-legend-preview-active] [data-legend-preview-selected] {
+      filter: drop-shadow(0 0 8px var(--database-stroke));
+    }
+    svg[data-lens-active] [data-node-id],
+    svg[data-lens-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-lens-active] [data-lens-match] { opacity: 1; }
+    svg[data-lens-active] [data-lens-peer] { opacity: 0.62; }
+    svg[data-lens-active] [data-lens-selected] {
+      filter: drop-shadow(0 0 10px var(--database-stroke));
+    }
+    .semantic-lens-overlay { pointer-events: none; }
+    .semantic-lens-flow {
+      fill: none;
+      stroke-width: 3.05;
+      stroke-linecap: round;
+      stroke-dasharray: 0.075 0.925;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.9;
+      animation: archify-semantic-lens-flow 1.35s linear 1 both;
+      animation-delay: var(--lens-flow-delay, 0s);
+    }
+    .semantic-lens-flow[data-direction="out"],
+    .semantic-lens-flow[data-direction="forward"] {
+      stroke: var(--frontend-stroke);
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    .semantic-lens-flow[data-direction="in"],
+    .semantic-lens-flow[data-direction="reverse"] {
+      stroke: var(--database-stroke);
+      filter: drop-shadow(0 0 3px var(--database-stroke));
+    }
+    .semantic-lens-flow[data-direction="within"] {
+      stroke: var(--messagebus-stroke);
+      filter: drop-shadow(0 0 3px var(--messagebus-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow {
+      stroke-width: 3.7;
+      opacity: 1;
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="out"],
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="forward"] {
+      filter: drop-shadow(0 0 6px var(--frontend-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="in"],
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="reverse"] {
+      filter: drop-shadow(0 0 6px var(--database-stroke));
+    }
+    svg[data-preset="signal-flow"] .semantic-lens-flow[data-direction="within"] {
+      filter: drop-shadow(0 0 6px var(--messagebus-stroke));
+    }
+    svg[data-preset="blueprint"] .semantic-lens-flow {
+      stroke-width: 2.45;
+      stroke-linecap: square;
+      filter: none;
+      opacity: 0.78;
+    }
+    html[data-embed="true"] .semantic-lens-overlay { display: none; }
+    svg[data-focus-active] [data-node-id],
+    svg[data-focus-active] [data-edge-from] { opacity: 0.13; }
+    svg[data-focus-active] [data-focus-match] { opacity: 1; }
+    svg[data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+
+    /* Authored Reachability is a bounded graph query over the relationships
+       already present in the artifact. Upstream walks incoming edges;
+       downstream walks outgoing edges. It never claims runtime causality and
+       changes only viewer emphasis, not canonical geometry or export bytes. */
+    svg[data-reach-active] [data-node-id],
+    svg[data-reach-active] [data-edge-from] { opacity: 0.09; }
+    svg[data-reach-active] [data-reach-match] { opacity: 1; }
+    svg[data-reach-active="upstream"] [data-reach-origin] {
+      filter: drop-shadow(0 0 11px var(--database-stroke));
+    }
+    svg[data-reach-active="downstream"] [data-reach-origin] {
+      filter: drop-shadow(0 0 11px var(--backend-stroke));
+    }
+    svg[data-reach-active="upstream"] [data-edge-from][data-reach-match] {
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--database-stroke) 72%, transparent));
+    }
+    svg[data-reach-active="downstream"] [data-edge-from][data-reach-match] {
+      filter: drop-shadow(0 0 4px color-mix(in srgb, var(--backend-stroke) 72%, transparent));
+    }
+    svg[data-preset="blueprint"][data-reach-active] [data-reach-origin],
+    svg[data-preset="blueprint"][data-reach-active] [data-edge-from][data-reach-match] {
+      filter: none;
+    }
+
+    /* Direct Relationship Explorer makes authored paths a real input surface
+       without changing their visible stroke or canonical SVG. A transparent
+       runtime rail supplies forgiving pointer geometry; the exact authored
+       path and endpoints continue to carry every visible state. */
+    .relationship-hit-overlay { pointer-events: none; }
+    .relationship-hit-target { outline: none; }
+    .relationship-hit-rail {
+      fill: none;
+      stroke: transparent;
+      stroke-width: 24;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+      pointer-events: stroke;
+      cursor: pointer;
+    }
+    .relationship-focus-rail {
+      fill: none;
+      stroke: color-mix(in srgb, var(--frontend-stroke) 34%, transparent);
+      stroke-width: 6;
+      stroke-dasharray: 2 4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+      pointer-events: none;
+      opacity: 0;
+    }
+    .relationship-hit-target:focus-visible .relationship-focus-rail {
+      opacity: 1;
+    }
+    svg[data-preset="blueprint"] .relationship-hit-target:focus-visible .relationship-focus-rail {
+      stroke-linecap: square;
+      filter: none;
+    }
+    svg[data-relationship-direct-active] [data-node-id],
+    svg[data-relationship-direct-active] [data-edge-from] { opacity: 0.16; }
+    svg[data-relationship-direct-active] [data-relationship-preview],
+    svg[data-relationship-direct-active] [data-relationship-preview-node] { opacity: 1; }
+    svg[data-focus-active]:not([data-relationship-pin-active]) .relationship-hit-rail,
+    svg[data-story-active] .relationship-hit-rail,
+    svg[data-route-picking] .relationship-hit-rail,
+    svg[data-route-active] .relationship-hit-rail,
+    svg[data-lens-active] .relationship-hit-rail,
+    svg[data-chapter-preview] .relationship-hit-rail { pointer-events: none; }
+    html[data-embed="true"] .relationship-hit-overlay { display: none; }
+    @media (hover: none), (pointer: coarse) {
+      .relationship-hit-rail { stroke-width: 24; }
+    }
+
+    /* Relationship Preview is temporary exploration state layered on top of
+       neighborhood focus. It changes emphasis only; exported geometry and the
+       relationship's original solid/dashed visual language stay untouched. */
+    svg[data-relationship-preview-active] [data-focus-match] { opacity: 0.18; }
+    svg[data-relationship-preview-active] [data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview-node] { opacity: 1; }
+    svg[data-relationship-preview-active] [data-relationship-preview] {
+      filter: drop-shadow(0 0 5px var(--arrow-emphasis));
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview] path,
+    svg[data-relationship-preview-active] path[data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview] line,
+    svg[data-relationship-preview-active] line[data-relationship-preview],
+    svg[data-relationship-preview-active] [data-relationship-preview] polyline,
+    svg[data-relationship-preview-active] polyline[data-relationship-preview] {
+      stroke-width: 2.75;
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview-source] {
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+    }
+    svg[data-relationship-preview-active] [data-relationship-preview-target] {
+      filter: drop-shadow(0 0 7px var(--database-stroke));
+    }
+    .relationship-pulse-overlay { pointer-events: none; }
+    .relationship-flow-pulse {
+      fill: none;
+      stroke: var(--arrow-emphasis);
+      stroke-width: 3.35;
+      stroke-linecap: round;
+      stroke-dasharray: 0.085 0.915;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0;
+      filter: drop-shadow(0 0 4px var(--arrow-emphasis));
+      animation: archify-relationship-pulse 1.2s linear 1 both;
+    }
+    svg[data-preset="signal-flow"] .relationship-flow-pulse {
+      stroke: var(--frontend-stroke);
+      stroke-width: 3.85;
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"] .relationship-flow-pulse {
+      stroke-width: 2.5;
+      stroke-linecap: square;
+      filter: none;
+    }
+    svg[data-preset="editorial"] .relationship-flow-pulse {
+      stroke: var(--arrow-emphasis);
+      stroke-width: 2.75;
+      filter: none;
+    }
+    .semantic-flow-token {
+      color: var(--frontend-stroke);
+      opacity: 0;
+      pointer-events: none;
+    }
+    .relationship-flow-token {
+      animation: archify-relationship-token-life 1.2s linear 1 both;
+    }
+    .story-flow-token {
+      animation: archify-relationship-token-life 0.78s linear 1 both;
+    }
+    .semantic-flow-token-halo {
+      fill: var(--mask);
+      stroke: currentColor;
+      stroke-width: 1.1;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+    }
+    .relationship-flow-token-shape {
+      fill: var(--mask);
+      stroke: currentColor;
+      stroke-width: 1.35;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .relationship-flow-token-ink {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.05;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+    .relationship-flow-token-dot { fill: currentColor; stroke: none; }
+    .semantic-flow-token[data-token-kind="data"] { color: var(--database-stroke); }
+    .semantic-flow-token[data-token-kind="event"] { color: var(--messagebus-stroke); }
+    .semantic-flow-token[data-token-kind="security"] { color: var(--security-stroke); }
+    .semantic-flow-token[data-token-kind="state"] { color: var(--cloud-stroke); }
+    svg[data-preset="signal-flow"] .semantic-flow-token {
+      filter: drop-shadow(0 0 5px currentColor);
+    }
+    svg[data-preset="blueprint"] .semantic-flow-token { filter: none; }
+    svg[data-preset="editorial"] .semantic-flow-token { filter: none; }
+    html[data-embed="true"] .relationship-pulse-overlay { display: none; }
+
+    /* Intent Trace is a temporary, pre-click exploration layer. Related
+       topology stays readable while a short viewer-only signal runs over
+       cloned edge geometry; the authored edge remains untouched underneath. */
+    svg[data-intent-trace-active] [data-node-id],
+    svg[data-intent-trace-active] [data-edge-from] { opacity: 0.2; }
+    svg[data-intent-trace-active] [data-intent-trace-match] { opacity: 1; }
+    svg[data-intent-trace-active] [data-intent-trace-selected] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+    .intent-trace-overlay { pointer-events: none; }
+    .intent-trace-flow {
+      fill: none;
+      stroke-width: 3.1;
+      stroke-linecap: round;
+      stroke-dasharray: 0.1 0.9;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.94;
+      animation: archify-intent-trace-flow 1.15s linear 1 both;
+    }
+    .intent-trace-flow[data-direction="out"] {
+      stroke: var(--frontend-stroke);
+      filter: drop-shadow(0 0 4px var(--frontend-stroke));
+    }
+    .intent-trace-flow[data-direction="in"] {
+      stroke: var(--database-stroke);
+      filter: drop-shadow(0 0 4px var(--database-stroke));
+      animation-direction: reverse;
+    }
+    .intent-trace-flow[data-direction="loop"] {
+      stroke: var(--security-stroke);
+      filter: drop-shadow(0 0 4px var(--security-stroke));
+    }
+    svg[data-preset="blueprint"] [data-intent-trace-selected],
+    svg[data-preset="blueprint"] .intent-trace-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="editorial"] [data-intent-trace-selected],
+    svg[data-preset="editorial"] .intent-trace-flow { filter: none; }
+    .intent-trace-status {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Route Probe separates a durable two-point query from selection and
+       one-hop hover. Only the chosen shortest directed path stays prominent;
+       the traveling signal is cloned viewer geometry and never authored SVG. */
+    svg[data-route-picking="target"] [data-node-id] { opacity: 0.24; }
+    svg[data-route-picking="target"] [data-route-candidate],
+    svg[data-route-picking="target"] [data-route-start] { opacity: 1; }
+    svg[data-route-picking] [data-node-id] { cursor: crosshair; }
+    svg[data-route-picking] [data-route-start] {
+      filter: drop-shadow(0 0 10px var(--frontend-stroke));
+    }
+    svg[data-route-active] [data-node-id],
+    svg[data-route-active] [data-edge-from] { opacity: 0.11; }
+    svg[data-route-active] [data-route-match] { opacity: 1; }
+    svg[data-route-active] [data-route-start] {
+      filter: drop-shadow(0 0 11px var(--frontend-stroke));
+    }
+    svg[data-route-active] [data-route-end] {
+      filter: drop-shadow(0 0 11px var(--security-stroke));
+    }
+    svg[data-route-active] [data-route-step]:not([data-route-start]):not([data-route-end]) {
+      filter: drop-shadow(0 0 7px var(--backend-stroke));
+    }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="past"] { opacity: 0.62; }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="future"] { opacity: 0.34; }
+    svg[data-route-journey] [data-route-match][data-route-journey-state="current"] { opacity: 1; }
+    svg[data-route-journey] [data-node-id][data-route-journey-current] {
+      filter: drop-shadow(0 0 10px var(--backend-stroke));
+    }
+    svg[data-route-journey] [data-edge-from][data-route-journey-current] {
+      opacity: 1;
+      filter: drop-shadow(0 0 6px var(--backend-stroke));
+    }
+    .route-probe-overlay { pointer-events: none; }
+    .route-journey-overlay { pointer-events: none; }
+    .route-probe-flow {
+      fill: none;
+      stroke: var(--backend-stroke);
+      stroke-width: 3.25;
+      stroke-linecap: round;
+      stroke-dasharray: 0.085 0.915;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.96;
+      filter: drop-shadow(0 0 5px var(--backend-stroke));
+      animation: archify-route-probe-flow 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
+      animation-delay: calc(var(--route-step, 0) * 0.16s);
+    }
+    .route-journey-flow {
+      fill: none;
+      stroke: var(--backend-stroke);
+      stroke-width: 3.5;
+      stroke-linecap: round;
+      stroke-dasharray: 0.1 0.9;
+      stroke-dashoffset: 0;
+      vector-effect: non-scaling-stroke;
+      opacity: 0;
+      filter: drop-shadow(0 0 6px var(--backend-stroke));
+      animation: archify-route-journey-flow 780ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;
+    }
+    svg[data-preset="blueprint"] [data-route-start],
+    svg[data-preset="blueprint"] [data-route-end],
+    svg[data-preset="blueprint"] [data-route-step],
+    svg[data-preset="blueprint"] .route-probe-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="blueprint"] .route-journey-flow {
+      filter: none;
+      stroke-linecap: square;
+    }
+    svg[data-preset="editorial"] [data-route-start],
+    svg[data-preset="editorial"] [data-route-end],
+    svg[data-preset="editorial"] [data-route-step],
+    svg[data-preset="editorial"] .route-probe-flow,
+    svg[data-preset="editorial"] .route-journey-flow { filter: none; }
+
+    svg[data-preset="editorial"] .c-grid {
+      stroke-dasharray: 1 4;
+      opacity: 0.48;
+    }
+    svg[data-preset="editorial"] .c-region {
+      fill: color-mix(in srgb, var(--cloud-fill) 48%, transparent);
+      stroke-dasharray: 9 4;
+    }
+    svg[data-preset="editorial"] [data-node-id]:hover,
+    svg[data-preset="editorial"] [data-node-id]:focus-visible,
+    svg[data-preset="editorial"][data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent));
+    }
+
+    svg[data-preset="blueprint"] .c-grid {
+      stroke-dasharray: 1 3;
+      opacity: 0.78;
+    }
+    svg[data-preset="blueprint"] .c-region {
+      fill: color-mix(in srgb, var(--cloud-fill) 58%, transparent);
+      stroke-dasharray: 12 4 2 4;
+    }
+    svg[data-preset="blueprint"] .c-security-group,
+    svg[data-preset="blueprint"] .c-lane { stroke-dasharray: 7 3; }
+    svg[data-preset="blueprint"] [data-node-id]:hover,
+    svg[data-preset="blueprint"] [data-node-id]:focus-visible {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"][data-focus-active] [data-focus-selected] {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+    svg[data-preset="blueprint"][data-focus-active][data-reach-active] [data-focus-selected][data-reach-origin] {
+      filter: none;
+    }
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview],
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview-source],
+    svg[data-preset="blueprint"][data-relationship-preview-active] [data-relationship-preview-target] {
+      filter: drop-shadow(0 0 3px var(--frontend-stroke));
+    }
+
+    /* Story Trail is a viewer-only overlay derived from the ordered focus IDs
+       of the active guided view. The authored edge stays underneath with its
+       original color, dash pattern, marker, and geometry intact. */
+    .story-trail-overlay { pointer-events: none; }
+    .story-carrier-overlay { pointer-events: none; }
+    .story-trail-flow {
+      fill: none;
+      stroke: var(--frontend-stroke);
+      stroke-width: 2.8;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+      opacity: 0.34;
+      filter: drop-shadow(0 0 2px var(--frontend-stroke));
+    }
+    svg[data-story-beat] [data-story-step] {
+      opacity: 0.22;
+      filter: saturate(0.42);
+      transition: opacity 180ms ease, filter 180ms ease;
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="past"] {
+      opacity: 0.72;
+      filter: saturate(0.82);
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="next"] {
+      opacity: 0.5;
+      filter: saturate(0.66);
+    }
+    svg[data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      opacity: 1;
+      filter: drop-shadow(0 0 7px var(--frontend-stroke));
+      animation: archify-story-beat-node 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step] {
+      opacity: 0.16;
+      transition: opacity 160ms ease;
+    }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="past"] { opacity: 0.58; }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="next"] { opacity: 0.34; }
+    svg[data-story-beat] [data-edge-from][data-story-beat-step][data-story-beat-state="active"] { opacity: 1; }
+    svg[data-story-beat] .story-trail-flow { opacity: 0; transition: opacity 160ms ease; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="past"] { opacity: 0.34; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="next"] { opacity: 0.2; }
+    svg[data-story-beat] .story-trail-flow[data-story-beat-state="active"] { opacity: 0.92; }
+    svg[data-story-beat] .story-trail-flow[data-story-pulse="true"] {
+      stroke-dasharray: 2 13;
+      stroke-dashoffset: 30;
+      opacity: 0.92;
+      animation: archify-story-flow 0.78s linear 1 both;
+    }
+    svg[data-preset="blueprint"] .story-trail-flow {
+      stroke-linecap: square;
+      filter: none;
+      opacity: 0.5;
+    }
+    svg[data-preset="blueprint"][data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      filter: none;
+      animation: none;
+    }
+    svg[data-preset="editorial"] .story-trail-flow { filter: none; }
+    svg[data-preset="editorial"][data-story-beat] [data-story-step][data-story-beat-state="active"] {
+      filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 16%, transparent));
+    }
+
+    /* Chapter Delta Preview is a static, pre-commit comparison between two
+       chapter focus sets. Symbols in the rail carry the meaning without color;
+       these SVG rules only make exact stable-ID membership easier to scan. */
+    svg[data-chapter-preview] [data-node-id],
+    svg[data-chapter-preview] [data-edge-from] {
+      opacity: 0.1 !important;
+      filter: none !important;
+      transition: none !important;
+    }
+    svg[data-chapter-preview] .story-trail-overlay { opacity: 0.08 !important; }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="stay"] {
+      opacity: 0.76 !important;
+      filter: saturate(0.7) !important;
+    }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="enter"] {
+      opacity: 1 !important;
+      filter: saturate(1.2) !important;
+    }
+    svg[data-chapter-preview] [data-node-id][data-chapter-preview-role="leave"] {
+      opacity: 0.28 !important;
+      filter: grayscale(0.72) !important;
+    }
+    svg[data-preset="blueprint"][data-chapter-preview] [data-node-id] { filter: none !important; }
+
+    /* Dashed boundary variants */
+    .c-security-group { fill: transparent; stroke: var(--security-stroke); stroke-dasharray: 4,4; }
+    .c-region         { fill: rgba(251, 191, 36, 0.05); stroke: var(--cloud-stroke); stroke-dasharray: 8,4; }
+    .c-lane           { fill: var(--lane-fill); stroke: var(--lane-stroke); stroke-dasharray: 6,6; }
+
+    /* Optional trace animation, enabled only by meta.animation = "trace".
+       The ordinary viewer performs one ambient pass and then restores the
+       authored solid/security/async line language. WebM samples the same
+       authored geometry into an explicit canvas timeline. */
+    html[data-ambient-motion="running"] svg[data-animation="trace"] [data-animate="edge"] {
+      animation: archify-edge-flow 2.4s linear 1;
+      animation-delay: calc(var(--step, 0) * 160ms);
+    }
+    html[data-ambient-motion="running"] svg[data-animation="trace"] [data-animate="node"] {
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: archify-node-pulse 3.6s ease-in-out 1;
+      animation-delay: calc(var(--step, 0) * 160ms);
+    }
+    svg[data-preset="signal-flow"][data-animation="trace"] [data-animate="edge"] {
+      stroke-linecap: round;
+      filter: drop-shadow(0 0 3px var(--arrow-emphasis));
+      animation-duration: 1.75s;
+    }
+    svg[data-preset="signal-flow"][data-animation="trace"] [data-animate="node"] {
+      animation-duration: 3.1s;
+    }
+    svg[data-preset="blueprint"][data-animation="trace"] [data-animate="edge"] {
+      stroke-linecap: square;
+      filter: none;
+      animation-duration: 2.15s;
+    }
+    svg[data-preset="blueprint"][data-animation="trace"] [data-animate="node"] {
+      animation-name: archify-blueprint-node-pulse;
+      animation-duration: 3.8s;
+    }
+    svg[data-preset="editorial"][data-animation="trace"] [data-animate="edge"] {
+      filter: none;
+      animation-duration: 2.2s;
+    }
+    svg[data-preset="editorial"][data-animation="trace"] [data-animate="node"] {
+      animation-name: archify-editorial-node-pulse;
+      animation-duration: 3.5s;
+    }
+    /* Embedded proofs are static until a named Story Trail chapter is played.
+       This keeps proof grids calm and ensures ?play=1 stops all viewer motion
+       after one 3.2 second chapter instead of leaving ambient trace loops on. */
+    html[data-embed="true"] svg[data-animation="trace"] [data-animate],
+    html[data-share-playback="true"] svg[data-animation="trace"] [data-animate] {
+      animation: none !important;
+      stroke-dashoffset: 0;
+    }
+    @keyframes archify-edge-flow {
+      0% { stroke-dasharray: 10 8; stroke-dashoffset: 54; opacity: 0.42; }
+      88% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }
+      99.9% { stroke-dasharray: 10 8; stroke-dashoffset: 0; opacity: 1; }
+      100% { stroke-dashoffset: 0; opacity: 1; }
+    }
+    @keyframes archify-node-pulse {
+      0%, 72%, 100% { filter: none; stroke-width: 1.5; }
+      18%, 36% {
+        filter: drop-shadow(0 0 8px var(--arrow-emphasis));
+        stroke-width: 2.4;
+      }
+    }
+    @keyframes archify-blueprint-node-pulse {
+      0%, 72%, 100% { opacity: 1; filter: none; }
+      18%, 36% { opacity: 0.72; filter: drop-shadow(0 0 2px var(--frontend-stroke)); }
+    }
+    @keyframes archify-editorial-node-pulse {
+      0%, 72%, 100% { opacity: 1; filter: none; }
+      18%, 36% { opacity: 0.78; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--text) 18%, transparent)); }
+    }
+    @keyframes archify-signal-scan {
+      0%, 18% { opacity: 1; transform: translateX(-70%); }
+      70% { opacity: 1; transform: translateX(70%); }
+      100% { opacity: 0; transform: translateX(70%); }
+    }
+    @keyframes archify-radar-live {
+      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--backend-stroke) 52%, transparent); }
+      55%, 100% { box-shadow: 0 0 0 0.32rem transparent; }
+    }
+    @keyframes archify-guided-progress {
+      from { transform: scaleX(var(--guided-progress-start, 0)); }
+      to { transform: scaleX(1); }
+    }
+    @keyframes archify-story-flow {
+      to { stroke-dashoffset: 0; }
+    }
+    @keyframes archify-intent-trace-flow {
+      0% { opacity: 0.28; stroke-dashoffset: 0; }
+      12%, 78% { opacity: 0.94; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-route-probe-flow {
+      0% { stroke-dashoffset: 0; opacity: 0.96; }
+      78% { stroke-dashoffset: -1; opacity: 0.96; }
+      100% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.58; }
+    }
+    @keyframes archify-route-journey-flow {
+      0% { opacity: 0.16; stroke-dashoffset: 0; }
+      14%, 76% { opacity: 1; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-semantic-lens-flow {
+      0% { opacity: 0.2; stroke-dashoffset: 0; }
+      12%, 78% { opacity: 0.9; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-relationship-pulse {
+      0% { opacity: 0.18; stroke-dashoffset: 0; }
+      10%, 76% { opacity: 0.98; }
+      100% { opacity: 0; stroke-dashoffset: -1; }
+    }
+    @keyframes archify-relationship-token-life {
+      0%, 7% { opacity: 0; }
+      13%, 82% { opacity: 1; }
+      100% { opacity: 0; }
+    }
+    @keyframes archify-story-beat-node {
+      from { opacity: 0.48; filter: saturate(0.6); }
+      58% { opacity: 1; filter: drop-shadow(0 0 10px var(--frontend-stroke)); }
+      to { opacity: 1; filter: drop-shadow(0 0 7px var(--frontend-stroke)); }
+    }
+    @keyframes archify-share-cue-enter {
+      from { opacity: 0; transform: translate(-50%, -0.45rem); }
+      to { opacity: 1; transform: translate(-50%, 0); }
+    }
+    @keyframes archify-share-cue-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.48; transform: scale(0.78); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      html[data-preset="signal-flow"] .diagram-container::before {
+        animation: none !important;
+      }
+      .pulse-dot { animation: none !important; }
+      svg[data-animation="trace"] [data-animate] {
+        animation: none !important;
+        stroke-dashoffset: 0;
+      }
+      .guided-view-progress span {
+        animation: none !important;
+        transform: scaleX(1) !important;
+      }
+      .story-trail-flow,
+      .intent-trace-flow,
+      .route-probe-flow,
+      .semantic-lens,
+      .diagram-guide,
+      [data-story-step],
+      .overview-map-live,
+      .guided-view-stop,
+      .share-chapter-cue,
+      .chapter-handoff-anchor,
+      .share-chapter-state::before,
+      .share-chapter-progress span { animation: none !important; }
+      .guided-view-chapter,
+      svg[data-chapter-preview] [data-node-id],
+      svg[data-chapter-preview] [data-edge-from] { transition: none !important; }
+      svg[data-story-playing="true"] .story-trail-flow {
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.55;
+      }
+      .intent-trace-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.72;
+      }
+      .route-probe-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-dashoffset: 0;
+        opacity: 0.78;
+      }
+      .route-journey-overlay,
+      .story-carrier-overlay { display: none !important; }
+      .semantic-lens-flow {
+        animation: none !important;
+        stroke-dasharray: none;
+        stroke-width: 2.2;
+        opacity: 0.34;
+        filter: none;
+      }
+      .relationship-pulse-overlay { display: none !important; }
+      .guided-view-chapter { transition: none !important; }
+      .source-evidence-beacon,
+      svg [data-node-id], svg [data-edge-from], svg [data-detail], svg [data-detail-anchor], svg [data-legend-hit], svg { transition: none !important; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Toolbar: theme, live visual style, trace motion, presentation stage, and export.
+       Motion appears only for trace-enabled artifacts and has no shortcut;
+       Keyboard: T toggles theme, S cycles style, F toggles the stage, E opens export. -->
+  <div class="toolbar" role="toolbar" aria-label="Diagram actions">
+    <button id="btn-theme" type="button"
+            title="Toggle theme (T)"
+            aria-label="Toggle color theme"
+            aria-pressed="false">
+      <span id="theme-icon" class="toolbar-icon" aria-hidden="true"></span>
+      <span id="theme-label">Dark</span>
+    </button>
+    <div class="preset-wrap">
+      <button id="btn-preset" type="button"
+              title="Choose visual style (S cycles)"
+              aria-label="Choose visual style"
+              aria-haspopup="menu"
+              aria-expanded="false"
+              aria-controls="preset-menu"
+              aria-keyshortcuts="S">
+        <span class="preset-control-mark" aria-hidden="true"></span>
+        <span id="preset-label">Style</span>
+        <span class="toolbar-icon toolbar-chevron" aria-hidden="true"></span>
+      </button>
+      <div class="preset-menu" id="preset-menu" role="menu" aria-label="Visual style">
+        <div class="preset-menu-heading" role="presentation"><span>Visual identity</span><span>S cycles</span></div>
+        <button class="preset-option" data-preset-value="classic" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch classic" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Classic</strong><small>Stable technical default</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="signal-flow" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch signal-flow" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Signal Flow</strong><small>Motion-forward presentation</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="blueprint" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch blueprint" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Blueprint</strong><small>Engineering review</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+        <button class="preset-option" data-preset-value="editorial" type="button" role="menuitemradio" aria-checked="false" tabindex="-1">
+          <span class="preset-option-swatch editorial" aria-hidden="true"></span>
+          <span class="preset-option-copy"><strong>Editorial</strong><small>Publication and launch notes</small></span>
+          <span class="preset-option-check" aria-hidden="true"></span>
+        </button>
+      </div>
+    </div>
+    <button id="btn-motion" type="button" hidden
+            title="Pause motion"
+            aria-label="Pause motion"
+            aria-pressed="true">
+      <span class="motion-control-dot" aria-hidden="true"></span>
+      <span id="motion-label">Live</span>
+    </button>
+    <button id="btn-present" type="button"
+            title="Presentation stage (F)"
+            aria-label="Enter presentation stage"
+            aria-pressed="false">
+      <span id="present-icon" class="toolbar-icon" aria-hidden="true"></span>
+      <span id="present-label">Present</span>
+    </button>
+    <div class="export-wrap">
       <button id="btn-export" type="button"
               title="Export diagram (E)"
               aria-label="Export diagram"
               aria-haspopup="menu"
               aria-expanded="false"
               aria-controls="export-menu">
-        Export <span aria-hidden="true">&#9662;</span>
+        Export <span class="toolbar-icon toolbar-chevron" aria-hidden="true"></span>
       </button>
       <div class="export-menu" id="export-menu" role="menu" aria-label="Export">
-        <button data-action="copy"  type="button" role="menuitem" tabindex="-1">Copy to clipboard <span class="hint">PNG</span></button>
-        <hr role="separator">
-        <button data-format="png"   type="button" role="menuitem" tabindex="-1">Download PNG</button>
-        <button data-format="jpeg"  type="button" role="menuitem" tabindex="-1">Download JPEG</button>
-        <button data-format="webp"  type="button" role="menuitem" tabindex="-1">Download WebP</button>
-        <hr role="separator">
-        <button data-format="svg"   type="button" role="menuitem" tabindex="-1">Download SVG <span class="hint">vector</span></button>
+        <div class="export-menu-header" role="presentation">
+          <div><strong>Export diagram</strong><span>Portable, clean outputs</span></div>
+          <kbd>E</kbd>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Share">
+          <span class="export-menu-heading" aria-hidden="true">Share</span>
+          <button data-format="share-card" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="route-share-card" type="button" role="menuitem" tabindex="-1" hidden disabled><span class="export-item-copy"><strong>Route Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="reach-share-card" type="button" role="menuitem" tabindex="-1" hidden disabled><span class="export-item-copy"><strong>Reach Share Card</strong><small class="hint">1200&times;630 PNG</small></span></button>
+          <button data-action="copy-share-card" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Copy Share Card</strong><small class="hint">PNG to clipboard</small></span></button>
+          <button data-action="copy" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>Copy diagram</strong><small class="hint">PNG to clipboard</small></span></button>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Raster images">
+          <span class="export-menu-heading" aria-hidden="true">Image</span>
+          <button data-format="png" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>PNG</strong><small class="hint">Lossless image</small></span></button>
+          <button data-format="jpeg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>JPEG</strong><small class="hint">Compact image</small></span></button>
+          <button data-format="webp" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebP</strong><small class="hint">Modern image</small></span></button>
+        </div>
+        <div class="export-menu-section" role="group" aria-label="Vector and motion">
+          <span class="export-menu-heading" aria-hidden="true">Vector &amp; motion</span>
+          <button data-format="svg" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>SVG</strong><small class="hint">Editable vector</small></span></button>
+          <button data-format="drawio" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io</strong><small class="hint">Editable diagram</small></span></button>
+          <button data-format="drawio-strict" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>draw.io strict</strong><small class="hint">Exact shapes &amp; colors</small></span></button>
+          <button data-format="webm" type="button" role="menuitem" tabindex="-1"><span class="export-item-copy"><strong>WebM</strong><small class="hint">6s motion</small></span></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <!-- Header -->
+    <div class="header">
+      <div class="header-row">
+        <div class="pulse-dot"></div>
+        <h1>Agent Tool Call Workflow</h1>
+      </div>
+    </div>
+
+    <script id="archify-guided-views-data" type="application/json">[{"id":"happy-path","label":"Request to result","focus":["user","chat","planner","router","approval","tool","external","final"],"note":"Follow the successful request from user intent to the final reply."},{"id":"safety-gate","label":"Policy and recovery","focus":["router","approval","blocked","retry"],"note":"See where risky work stops, waits for consent, or returns for revision."},{"id":"evidence-loop","label":"Evidence and memory","focus":["external","store","trace"],"note":"Isolate the durable trace and context path behind the visible answer."}]</script>
+
+    <div class="guided-views no-print" id="guided-views" hidden aria-label="Guided diagram views">
+      <button id="guided-view-prev" type="button" aria-label="Previous guided view" title="Previous guided view ([)">&#8592;</button>
+      <div class="guided-view-copy">
+        <div class="guided-view-meta">
+          <span>Guided views</span>
+          <span id="guided-view-count"></span>
+          <span class="guided-view-progress" aria-hidden="true"><span id="guided-view-progress-bar"></span></span>
+          <span class="guided-view-handoff" id="guided-view-handoff" hidden aria-hidden="true"></span>
+        </div>
+        <strong id="guided-view-label">Explore this system</strong>
+        <small id="guided-view-note" aria-live="polite" aria-atomic="true">Step through curated paths without changing the source diagram.</small>
+        <div class="guided-view-trail" id="guided-view-trail" hidden role="group" aria-label="Story trail"></div>
+        <div class="guided-story-caption" id="guided-story-caption" hidden aria-live="polite" aria-atomic="true">
+          <span class="guided-story-caption-index" id="guided-story-caption-index">Beat</span>
+          <strong id="guided-story-caption-route"></strong>
+          <small id="guided-story-caption-detail"></small>
+          <span class="guided-story-caption-next" id="guided-story-caption-next" hidden aria-hidden="true">
+            <small>Next</small>
+            <strong id="guided-story-caption-next-label"></strong>
+          </span>
+        </div>
+      </div>
+      <button id="guided-view-next" type="button" aria-label="Next guided view" title="Next guided view (])">&#8594;</button>
+      <div class="guided-view-actions">
+        <button class="guided-view-play" id="guided-view-play" type="button" aria-label="Play guided story" aria-pressed="false" title="Play guided story (P)">
+          <span id="guided-view-play-icon" aria-hidden="true">&#9654;</span>
+          <span id="guided-view-play-label">Play story</span>
+        </button>
+        <button class="guided-view-beat-link" id="guided-view-beat-link" type="button" aria-label="Select a Story Beat to copy its exact link" title="Select a Story Beat to copy its exact link" disabled>
+          <span aria-hidden="true">&#35;</span>
+          <span id="guided-view-beat-link-label">Copy moment</span>
+        </button>
+        <button class="guided-view-all" id="guided-view-all" type="button" aria-label="Show entire diagram">Show all</button>
+      </div>
+      <nav class="guided-view-index" id="guided-view-index" aria-label="Story chapters">
+        <ol class="guided-view-chapters" id="guided-view-chapters"></ol>
+      </nav>
+    </div>
+
+    <!-- Main Diagram -->
+    <div class="diagram-container" data-detail-level="read">
+      <svg viewBox="0 0 720 900" role="img" aria-labelledby="archify-diagram-title archify-diagram-description" data-animation="trace" data-preset="signal-flow" data-quality-profile="showcase">
+        <title id="archify-diagram-title">Agent Tool Call Workflow</title>
+        <desc id="archify-diagram-description">A workflow diagram generated by Archify.</desc>
+        <!-- Definitions -->
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-default" />
+          </marker>
+          <marker id="arrowhead-emphasis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-emphasis" />
+          </marker>
+          <marker id="arrowhead-security" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-security" />
+          </marker>
+          <marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" class="m-dashed" />
+          </marker>
+          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" class="c-grid" stroke-width="0.5"/>
+          </pattern>
+        </defs>
+
+        <!-- Background Grid -->
+        <rect width="100%" height="100%" fill="url(#grid)" />
+
+        <!-- Swimlanes -->
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-0" x="40" y="52" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <text x="54" y="74" class="t-dim" font-size="10" font-weight="600">01 / User Interface</text>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-1" x="40" y="176" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <text x="54" y="198" class="t-dim" font-size="10" font-weight="600">02 / Agent Runtime</text>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-2" x="40" y="300" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <text x="54" y="322" class="t-dim" font-size="10" font-weight="600">03 / Policy Boundary</text>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-3" x="40" y="424" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="exception-lane" data-composition-frame-id="lane-3-exception" x="46" y="430" width="628" height="92" rx="8" class="c-security-group" stroke-width="1"/>
+        <text x="54" y="446" class="t-security" font-size="10" font-weight="600">EX / Exception Handling</text>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-4" x="40" y="548" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <text x="54" y="570" class="t-dim" font-size="10" font-weight="600">05 / Tool Execution</text>
+
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="lane" data-composition-frame-id="lane-5" x="40" y="672" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
+        <text x="54" y="694" class="t-dim" font-size="10" font-weight="600">06 / Observability</text>
+
+        <!-- Phase headers -->
+        <line x1="42" y1="35" x2="266" y2="35" class="a-default" stroke-width="1.1"/>
+        <rect x="42" y="27" width="224" height="16" rx="4" class="c-mask"/>
+        <text x="154" y="39" class="t-muted" font-size="8" font-weight="600" text-anchor="middle">Intake</text>
+        <line x1="254" y1="35" x2="476" y2="35" class="a-emphasis" stroke-width="1.1"/>
+        <rect x="254" y="27" width="222" height="16" rx="4" class="c-mask"/>
+        <text x="365" y="39" class="t-backend" font-size="8" font-weight="600" text-anchor="middle">Plan + route</text>
+        <line x1="454" y1="35" x2="671" y2="35" class="a-dashed" stroke-width="1.1"/>
+        <rect x="454" y="27" width="217" height="16" rx="4" class="c-mask"/>
+        <text x="562.5" y="39" class="t-messagebus" font-size="8" font-weight="600" text-anchor="middle">Execute + report</text>
+
+        <!-- Workflow groups -->
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="group" data-composition-frame-id="group-0" x="250" y="214" width="230" height="58" rx="9" class="c-lane" stroke-width="1"/>
+        <text x="260" y="228" class="t-backend" font-size="7" font-weight="600">Planning loop</text>
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="group" data-composition-frame-id="group-1" x="450" y="586" width="225" height="58" rx="9" class="c-lane" stroke-width="1"/>
+        <text x="460" y="600" class="t-messagebus" font-size="7" font-weight="600">Tool work</text>
+        <rect data-graph-role="structural-frame" data-composition-frame-kind="group" data-composition-frame-id="group-2" x="380" y="462" width="295" height="58" rx="9" class="c-security-group" stroke-width="1"/>
+        <text x="390" y="476" class="t-security" font-size="7" font-weight="600">Human or policy stop</text>
+
+        <!-- Edge paths -->
+        <path data-edge-from="user" data-edge-to="chat" data-edge-key="0" data-edge-id="request-chat" data-composition-points="134,119;174,119" d="M 134 119 L 174 119" class="a-default" data-animate="edge" style="--step:0" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+        <path data-edge-from="chat" data-edge-to="planner" data-edge-label="plan" data-edge-key="1" data-edge-id="plan-request" data-composition-points="220,145;220,166;300,166;300,209" d="M 220 145 L 220 166 L 300 166 L 300 209" class="a-emphasis" data-animate="edge" style="--step:1" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
+        <path data-edge-from="planner" data-edge-to="router" data-edge-key="2" data-edge-id="planner-route" data-composition-points="346,243;384,243" d="M 346 243 L 384 243" class="a-default" data-animate="edge" style="--step:2" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+        <path data-edge-from="router" data-edge-to="approval" data-edge-label="needs approval?" data-edge-key="3" data-edge-id="approval-check" data-composition-points="430,269;430,290;430,290;430,333" d="M 430 269 L 430 290 L 430 290 L 430 333" class="a-security" data-animate="edge" style="--step:3" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
+        <path data-edge-from="approval" data-edge-to="tool" data-edge-key="4" data-edge-id="approved-tool" data-composition-points="384,367;356,367;356,615;454,615" d="M 384 367 L 356 367 L 356 615 L 454 615" class="a-emphasis" data-animate="edge" style="--step:4" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
+        <path data-edge-from="approval" data-edge-to="blocked" data-edge-label="denied" data-edge-key="5" data-edge-id="approval-denied" data-composition-points="430,401;430,414;500,414;500,465" d="M 430 401 L 430 414 L 500 414 L 500 465" class="a-security" data-animate="edge" style="--step:12" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
+        <path data-edge-from="blocked" data-edge-to="retry" data-edge-key="6" data-edge-id="retry-request" data-composition-points="546,491;579,491" d="M 546 491 L 579 491" class="a-dashed" data-animate="edge" style="--step:12" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+        <path data-edge-from="tool" data-edge-to="external" data-edge-key="7" data-edge-id="tool-external-call" data-composition-points="546,615;579,615" d="M 546 615 L 579 615" class="a-default" data-animate="edge" style="--step:5" stroke-width="1.4" marker-end="url(#arrowhead)"/>
+        <path data-edge-from="external" data-edge-to="final" data-edge-key="8" data-edge-id="external-reply" data-composition-points="671,615;692,615;692,119;671,119" d="M 671 615 L 692 615 L 692 119 L 671 119" class="a-emphasis" data-animate="edge" style="--step:6" stroke-width="1.2" marker-end="url(#arrowhead-emphasis)"/>
+        <path data-edge-from="external" data-edge-to="trace" data-edge-label="record result" data-edge-key="9" data-edge-id="record-result" data-composition-points="625,641;625,797;500,797;500,765" d="M 625 641 L 625 797 L 500 797 L 500 765" class="a-dashed" data-animate="edge" style="--step:12" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+        <path data-edge-from="store" data-edge-to="trace" data-edge-label="trace + memory" data-edge-key="10" data-edge-id="write-trace-memory" data-composition-points="266,739;454,739" d="M 266 739 L 454 739" class="a-dashed" data-animate="edge" style="--step:12" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+
+        <!-- Nodes -->
+        <g id="node-user" data-node-id="user" data-node-label="User" tabindex="0" role="button" aria-label="Focus User, asks for work, User Interface › Intake" aria-pressed="false" data-node-kind="external" data-node-sublabel="asks for work" data-node-context="User Interface › Intake">
+          <title>User · asks for work · User Interface › Intake</title>
+          <rect x="42" y="93" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="42" y="93" width="92" height="52" rx="6" class="c-external" data-animate="node" style="--step:0" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="external" class="semantic-sigil s-external" transform="translate(48 99) scale(0.6875)">
+            <rect x="2.5" y="5" width="8.5" height="8" rx="1.5"/>
+            <path d="M8 2.5h5.5V8M13.5 2.5 7.5 8.5"/>
+          </g>
+          <text data-detail-anchor x="88" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">User</text>
+          <text data-detail="context" x="88" y="131" class="t-muted" font-size="8" text-anchor="middle">asks for work</text>
+        </g>
+
+        <g id="node-chat" data-node-id="chat" data-node-label="Chat Surface" tabindex="0" role="button" aria-label="Focus Chat Surface, thread + files, User Interface › Intake" aria-pressed="false" data-node-kind="frontend" data-node-sublabel="thread + files" data-node-context="User Interface › Intake">
+          <title>Chat Surface · thread + files · User Interface › Intake</title>
+          <rect x="174" y="93" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="174" y="93" width="92" height="52" rx="6" class="c-frontend" data-animate="node" style="--step:1" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="frontend" class="semantic-sigil s-frontend" transform="translate(180 99) scale(0.6875)">
+            <rect x="2" y="3" width="12" height="10" rx="2"/>
+            <path d="M2 6.5h12"/>
+            <circle cx="4.1" cy="4.8" r=".7" class="sigil-fill"/>
+            <circle cx="6.3" cy="4.8" r=".7" class="sigil-fill"/>
+          </g>
+          <text data-detail-anchor x="220" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Chat Surface</text>
+          <text data-detail="context" x="220" y="131" class="t-muted" font-size="8" text-anchor="middle">thread + files</text>
+        </g>
+
+        <g id="node-final" data-node-id="final" data-node-label="Final Reply" tabindex="0" role="button" aria-label="Focus Final Reply, answer + changes, User Interface › Execute + report" aria-pressed="false" data-node-kind="backend" data-node-sublabel="answer + changes" data-node-context="User Interface › Execute + report">
+          <title>Final Reply · answer + changes · User Interface › Execute + report</title>
+          <rect x="579" y="93" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="579" y="93" width="92" height="52" rx="6" class="c-backend" data-animate="node" style="--step:7" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="backend" class="semantic-sigil s-backend" transform="translate(585 99) scale(0.6875)">
+            <path d="M6 3 3 8l3 5M10 3l3 5-3 5"/>
+          </g>
+          <text data-detail-anchor x="625" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Final Reply</text>
+          <text data-detail="context" x="625" y="131" class="t-muted" font-size="8" text-anchor="middle">answer + changes</text>
+        </g>
+
+        <g id="node-planner" data-node-id="planner" data-node-label="Agent Planner" tabindex="0" role="button" aria-label="Focus Agent Planner, plan next step, Agent Runtime › Planning loop › Plan + route" aria-pressed="false" data-node-kind="backend" data-node-sublabel="plan next step" data-node-tag="context aware" data-node-context="Agent Runtime › Planning loop › Plan + route">
+          <title>Agent Planner · plan next step · Agent Runtime › Planning loop › Plan + route · context aware</title>
+          <rect x="254" y="209" width="92" height="68" rx="6" class="c-mask"/>
+          <rect x="254" y="209" width="92" height="68" rx="6" class="c-backend" data-animate="node" style="--step:2" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="backend" class="semantic-sigil s-backend" transform="translate(260 215) scale(0.6875)">
+            <path d="M6 3 3 8l3 5M10 3l3 5-3 5"/>
+          </g>
+          <text data-detail-anchor x="300" y="230" class="t-primary" font-size="10.7" font-weight="600" text-anchor="middle">Agent Planner</text>
+          <text data-detail="context" x="300" y="247" class="t-muted" font-size="8" text-anchor="middle">plan next step</text>
+        <text data-detail="fine" x="300" y="265" class="t-backend" font-size="7" text-anchor="middle">context aware</text>
+        </g>
+
+        <g id="node-router" data-node-id="router" data-node-label="Tool Router" tabindex="0" role="button" aria-label="Focus Tool Router, choose capability, Agent Runtime › Planning loop › Plan + route" aria-pressed="false" data-node-kind="backend" data-node-sublabel="choose capability" data-node-context="Agent Runtime › Planning loop › Plan + route">
+          <title>Tool Router · choose capability · Agent Runtime › Planning loop › Plan + route</title>
+          <rect x="384" y="217" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="384" y="217" width="92" height="52" rx="6" class="c-backend" data-animate="node" style="--step:3" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="backend" class="semantic-sigil s-backend" transform="translate(390 223) scale(0.6875)">
+            <path d="M6 3 3 8l3 5M10 3l3 5-3 5"/>
+          </g>
+          <text data-detail-anchor x="430" y="238" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Tool Router</text>
+          <text data-detail="context" x="430" y="255" class="t-muted" font-size="8" text-anchor="middle">choose capability</text>
+        </g>
+
+        <g id="node-approval" data-node-id="approval" data-node-label="Approval Gate" tabindex="0" role="button" aria-label="Focus Approval Gate, scope + consent, Policy Boundary › Plan + route" aria-pressed="false" data-node-kind="security" data-node-sublabel="scope + consent" data-node-tag="block risky ops" data-node-context="Policy Boundary › Plan + route">
+          <title>Approval Gate · scope + consent · Policy Boundary › Plan + route · block risky ops</title>
+          <rect x="384" y="333" width="92" height="68" rx="6" class="c-mask"/>
+          <rect x="384" y="333" width="92" height="68" rx="6" class="c-security" data-animate="node" style="--step:4" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="security" class="semantic-sigil s-security" transform="translate(390 339) scale(0.6875)">
+            <path d="M8 2.2 13 4v3.5c0 3.1-1.8 5.4-5 6.5-3.2-1.1-5-3.4-5-6.5V4Z"/>
+            <path d="m5.8 8 1.5 1.5 3-3"/>
+          </g>
+          <text data-detail-anchor x="430" y="354" class="t-primary" font-size="10.7" font-weight="600" text-anchor="middle">Approval Gate</text>
+          <text data-detail="context" x="430" y="371" class="t-muted" font-size="8" text-anchor="middle">scope + consent</text>
+        <text data-detail="fine" x="430" y="389" class="t-security" font-size="7" text-anchor="middle">block risky ops</text>
+        </g>
+
+        <g id="node-blocked" data-node-id="blocked" data-node-label="Blocked" tabindex="0" role="button" aria-label="Focus Blocked, wait or reject, Exception Handling › Human or policy stop › Execute + report" aria-pressed="false" data-node-kind="security" data-node-sublabel="wait or reject" data-node-context="Exception Handling › Human or policy stop › Execute + report">
+          <title>Blocked · wait or reject · Exception Handling › Human or policy stop › Execute + report</title>
+          <rect x="454" y="465" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="454" y="465" width="92" height="52" rx="6" class="c-security" data-animate="node" style="--step:12" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="security" class="semantic-sigil s-security" transform="translate(460 471) scale(0.6875)">
+            <path d="M8 2.2 13 4v3.5c0 3.1-1.8 5.4-5 6.5-3.2-1.1-5-3.4-5-6.5V4Z"/>
+            <path d="m5.8 8 1.5 1.5 3-3"/>
+          </g>
+          <text data-detail-anchor x="500" y="486" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Blocked</text>
+          <text data-detail="context" x="500" y="503" class="t-muted" font-size="8" text-anchor="middle">wait or reject</text>
+        </g>
+
+        <g id="node-retry" data-node-id="retry" data-node-label="Retry Path" tabindex="0" role="button" aria-label="Focus Retry Path, revise request, Exception Handling › Human or policy stop › Execute + report" aria-pressed="false" data-node-kind="messagebus" data-node-sublabel="revise request" data-node-context="Exception Handling › Human or policy stop › Execute + report">
+          <title>Retry Path · revise request · Exception Handling › Human or policy stop › Execute + report</title>
+          <rect x="579" y="465" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="579" y="465" width="92" height="52" rx="6" class="c-messagebus" data-animate="node" style="--step:12" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="messagebus" class="semantic-sigil s-messagebus" transform="translate(585 471) scale(0.6875)">
+            <path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>
+            <circle cx="5" cy="4.5" r="1" class="sigil-fill"/>
+            <circle cx="10.5" cy="8" r="1" class="sigil-fill"/>
+            <circle cx="7" cy="11.5" r="1" class="sigil-fill"/>
+          </g>
+          <text data-detail-anchor x="625" y="486" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Retry Path</text>
+          <text data-detail="context" x="625" y="503" class="t-muted" font-size="8" text-anchor="middle">revise request</text>
+        </g>
+
+        <g id="node-tool" data-node-id="tool" data-node-label="Tool Call" tabindex="0" role="button" aria-label="Focus Tool Call, shell / browser / MCP, Tool Execution › Tool work › Execute + report" aria-pressed="false" data-node-kind="messagebus" data-node-sublabel="shell / browser / MCP" data-node-tag="structured result" data-node-context="Tool Execution › Tool work › Execute + report">
+          <title>Tool Call · shell / browser / MCP · Tool Execution › Tool work › Execute + report · structured result</title>
+          <rect x="454" y="581" width="92" height="68" rx="6" class="c-mask"/>
+          <rect x="454" y="581" width="92" height="68" rx="6" class="c-messagebus" data-animate="node" style="--step:5" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="messagebus" class="semantic-sigil s-messagebus" transform="translate(460 587) scale(0.6875)">
+            <path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>
+            <circle cx="5" cy="4.5" r="1" class="sigil-fill"/>
+            <circle cx="10.5" cy="8" r="1" class="sigil-fill"/>
+            <circle cx="7" cy="11.5" r="1" class="sigil-fill"/>
+          </g>
+          <text data-detail-anchor x="500" y="602" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Tool Call</text>
+          <text data-detail="context" x="500" y="619" class="t-muted" font-size="6.6" text-anchor="middle">shell / browser / MCP</text>
+        <text data-detail="fine" x="500" y="637" class="t-messagebus" font-size="7" text-anchor="middle">structured result</text>
+        </g>
+
+        <g id="node-external" data-node-id="external" data-node-label="External API" tabindex="0" role="button" aria-label="Focus External API, network service, Tool Execution › Tool work › Execute + report" aria-pressed="false" data-node-kind="cloud" data-node-sublabel="network service" data-node-context="Tool Execution › Tool work › Execute + report">
+          <title>External API · network service · Tool Execution › Tool work › Execute + report</title>
+          <rect x="579" y="589" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="579" y="589" width="92" height="52" rx="6" class="c-cloud" data-animate="node" style="--step:6" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="cloud" class="semantic-sigil s-cloud" transform="translate(585 595) scale(0.6875)">
+            <path d="M4.3 12.5h7.3a2.4 2.4 0 0 0 .2-4.8 4 4 0 0 0-7.5-1.3A3.1 3.1 0 0 0 4.3 12.5Z"/>
+          </g>
+          <text data-detail-anchor x="625" y="610" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">External API</text>
+          <text data-detail="context" x="625" y="627" class="t-muted" font-size="8" text-anchor="middle">network service</text>
+        </g>
+
+        <g id="node-store" data-node-id="store" data-node-label="Context Store" tabindex="0" role="button" aria-label="Focus Context Store, repo + memory, Observability › Intake" aria-pressed="false" data-node-kind="database" data-node-sublabel="repo + memory" data-node-context="Observability › Intake">
+          <title>Context Store · repo + memory · Observability › Intake</title>
+          <rect x="174" y="713" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="174" y="713" width="92" height="52" rx="6" class="c-database" data-animate="node" style="--step:12" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="database" class="semantic-sigil s-database" transform="translate(180 719) scale(0.6875)">
+            <ellipse cx="8" cy="4" rx="5" ry="2"/>
+            <path d="M3 4v8c0 1.1 2.2 2 5 2s5-.9 5-2V4M3 8c0 1.1 2.2 2 5 2s5-.9 5-2"/>
+          </g>
+          <text data-detail-anchor x="220" y="734" class="t-primary" font-size="10.7" font-weight="600" text-anchor="middle">Context Store</text>
+          <text data-detail="context" x="220" y="751" class="t-muted" font-size="8" text-anchor="middle">repo + memory</text>
+        </g>
+
+        <g id="node-trace" data-node-id="trace" data-node-label="Trace Log" tabindex="0" role="button" aria-label="Focus Trace Log, events + output, Observability › Execute + report" aria-pressed="false" data-node-kind="database" data-node-sublabel="events + output" data-node-context="Observability › Execute + report">
+          <title>Trace Log · events + output · Observability › Execute + report</title>
+          <rect x="454" y="713" width="92" height="52" rx="6" class="c-mask"/>
+          <rect x="454" y="713" width="92" height="52" rx="6" class="c-database" data-animate="node" style="--step:12" stroke-width="1.5"/>
+          <g aria-hidden="true" data-semantic-sigil="database" class="semantic-sigil s-database" transform="translate(460 719) scale(0.6875)">
+            <ellipse cx="8" cy="4" rx="5" ry="2"/>
+            <path d="M3 4v8c0 1.1 2.2 2 5 2s5-.9 5-2V4M3 8c0 1.1 2.2 2 5 2s5-.9 5-2"/>
+          </g>
+          <text data-detail-anchor x="500" y="734" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Trace Log</text>
+          <text data-detail="context" x="500" y="751" class="t-muted" font-size="8" text-anchor="middle">events + output</text>
+        </g>
+
+        <!-- Edge labels -->
+
+        <g data-detail="context" data-edge-from="chat" data-edge-to="planner" data-edge-label="plan" data-edge-key="1" data-edge-id="plan-request">
+          <rect x="245" y="146" width="30" height="14" rx="3" class="c-mask"/>
+          <text x="260" y="156" class="t-backend" font-size="8" text-anchor="middle">plan</text>
+        </g>
+
+        <g data-detail="context" data-edge-from="router" data-edge-to="approval" data-edge-label="needs approval?" data-edge-key="3" data-edge-id="approval-check">
+          <rect x="423" y="277.5" width="82" height="14" rx="3" class="c-mask"/>
+          <text x="464" y="287.5" class="t-security" font-size="8" text-anchor="middle">needs approval?</text>
+        </g>
+
+        <g data-detail="context" data-edge-from="approval" data-edge-to="blocked" data-edge-label="denied" data-edge-key="5" data-edge-id="approval-denied">
+          <rect x="445.6" y="406" width="38.8" height="14" rx="3" class="c-mask"/>
+          <text x="465" y="416" class="t-security" font-size="8" text-anchor="middle">denied</text>
+        </g>
+
+
+
+        <g data-detail="context" data-edge-from="external" data-edge-to="trace" data-edge-label="record result" data-edge-key="9" data-edge-id="record-result">
+          <rect x="526.3" y="777" width="72.4" height="14" rx="3" class="c-mask"/>
+          <text x="562.5" y="787" class="t-database" font-size="8" text-anchor="middle">record result</text>
+        </g>
+        <g data-detail="context" data-edge-from="store" data-edge-to="trace" data-edge-label="trace + memory" data-edge-key="10" data-edge-id="write-trace-memory">
+          <rect x="326.4" y="725" width="77.2" height="14" rx="3" class="c-mask"/>
+          <text x="365" y="735" class="t-database" font-size="8" text-anchor="middle">trace + memory</text>
+        </g>
+
+        <!-- Legend -->
+
+      </svg>
+      <p class="intent-trace-status no-print" id="intent-trace-status" role="status" aria-live="polite" aria-atomic="true"></p>
+      <div class="share-chapter-cue no-print" id="share-chapter-cue" hidden role="status" aria-live="polite">
+        <div class="share-chapter-index">
+          <span class="share-chapter-state" id="share-chapter-state">Ready</span>
+          <span class="share-chapter-count" id="share-chapter-count">Chapter 01 / 01</span>
+        </div>
+        <div class="share-chapter-copy">
+          <strong id="share-chapter-label">Guided chapter</strong>
+          <small id="share-chapter-note"></small>
+        </div>
+        <span class="share-chapter-route" id="share-chapter-route"></span>
+        <span class="share-chapter-progress" aria-hidden="true"><span id="share-chapter-progress-bar"></span></span>
+      </div>
+      <div class="diagram-guide no-print" id="diagram-guide" hidden role="dialog" aria-modal="false" aria-labelledby="diagram-guide-title">
+        <div class="diagram-guide-head">
+          <span>
+            <span class="diagram-guide-eyebrow">Diagram guide</span>
+            <strong class="diagram-guide-title" id="diagram-guide-title">Explore this system</strong>
+          </span>
+          <button class="diagram-guide-close" id="diagram-guide-close" type="button" aria-label="Close diagram guide">&#215;</button>
+        </div>
+        <p class="diagram-guide-stats" id="diagram-guide-stats">Inspecting compiled semantics</p>
+        <div class="diagram-guide-actions" id="diagram-guide-actions" role="group" aria-label="Diagram exploration actions">
+          <button class="diagram-guide-action" type="button" data-guide-action="find" aria-label="Find any node">
+            <span class="diagram-guide-index" aria-hidden="true">01</span>
+            <span class="diagram-guide-action-copy"><strong>Find any node</strong><small>Search labels, responsibilities, kinds, and stable IDs.</small></span>
+            <kbd aria-hidden="true">/</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="route" aria-label="Trace a directed route">
+            <span class="diagram-guide-index" aria-hidden="true">02</span>
+            <span class="diagram-guide-action-copy"><strong>Trace a route</strong><small>Ask how two semantic nodes connect in authored direction.</small></span>
+            <kbd aria-hidden="true">R</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="map" aria-label="See the whole system">
+            <span class="diagram-guide-index" aria-hidden="true">03</span>
+            <span class="diagram-guide-action-copy"><strong>See the whole system</strong><small>Open Semantic Radar with a live viewport and stable nodes.</small></span>
+            <kbd aria-hidden="true">M</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="lens" aria-label="Compare semantic kinds">
+            <span class="diagram-guide-index" aria-hidden="true">04</span>
+            <span class="diagram-guide-action-copy"><strong>Compare semantic kinds</strong><small>Count roles, reveal their traffic, and compare direct authored links.</small></span>
+            <kbd aria-hidden="true">L</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="story" aria-label="Play the guided story">
+            <span class="diagram-guide-index" aria-hidden="true">05</span>
+            <span class="diagram-guide-action-copy"><strong>Play the guided story</strong><small id="diagram-guide-story-copy">Walk the authored chapters and real relationships.</small></span>
+            <kbd aria-hidden="true">P</kbd>
+          </button>
+          <button class="diagram-guide-action" type="button" data-guide-action="present" aria-label="Enter presentation stage">
+            <span class="diagram-guide-index" aria-hidden="true">06</span>
+            <span class="diagram-guide-action-copy"><strong>Enter Presentation Stage</strong><small>Give the live diagram the viewport without changing export.</small></span>
+            <kbd aria-hidden="true">F</kbd>
+          </button>
+        </div>
+        <div class="diagram-guide-shortcuts" aria-label="Additional keyboard shortcuts">
+          <span><kbd>E</kbd> Export</span><span><kbd>T</kbd> Theme</span><span><kbd>S</kbd> Style</span><span><kbd>0</kbd> Reset</span><span><kbd>+</kbd> Zoom in</span><span><kbd>-</kbd> Zoom out</span><span><kbd>Esc</kbd> Close</span>
+        </div>
+        <p class="diagram-guide-feedback" id="diagram-guide-feedback" aria-live="polite"></p>
+      </div>
+      <div class="node-finder no-print" id="node-finder" hidden role="dialog" aria-modal="false" aria-labelledby="node-finder-title">
+        <div class="node-finder-head">
+          <strong id="node-finder-title">Find a node</strong>
+          <button class="node-finder-close" id="node-finder-close" type="button" aria-label="Close node finder">&#215;</button>
+        </div>
+        <div class="node-finder-search">
+          <span aria-hidden="true">&#8981;</span>
+          <input class="node-finder-input" id="node-finder-input" type="search" autocomplete="off" spellcheck="false" placeholder="Search labels or IDs" aria-label="Search diagram nodes" aria-describedby="node-finder-status">
+          <kbd aria-hidden="true">/</kbd>
+        </div>
+        <div class="node-finder-results" id="node-finder-results" role="group" aria-label="Diagram nodes"></div>
+        <p class="node-finder-empty" id="node-finder-empty" hidden>No matching nodes</p>
+        <p class="node-finder-status" id="node-finder-status" aria-live="polite"></p>
+      </div>
+      <div class="focus-chip relationship-lens no-print" id="focus-chip" hidden role="region" aria-labelledby="relationship-lens-title">
+        <div class="relationship-lens-head">
+          <div class="relationship-lens-copy">
+            <span class="relationship-lens-eyebrow">Semantic passport</span>
+            <strong class="relationship-lens-title" id="relationship-lens-title"><span id="focus-label"></span></strong>
+            <span class="semantic-passport-detail" id="focus-detail" hidden></span>
+            <div class="semantic-passport-meta" id="focus-passport-meta" aria-label="Node metadata">
+              <span id="focus-kind" data-passport="kind"></span>
+              <span id="focus-context" data-passport="context" hidden></span>
+              <span id="focus-tag" data-passport="tag" hidden></span>
+              <code id="focus-id" data-passport="id"></code>
+            </div>
+            <div class="semantic-passport-evidence" id="focus-evidence" hidden aria-label="Verified source evidence">
+              <div class="semantic-passport-evidence-head">
+                <span class="semantic-passport-evidence-status">Verified source</span>
+                <a class="semantic-passport-repository" id="focus-repository" target="_blank" rel="noopener noreferrer" referrerpolicy="no-referrer"></a>
+              </div>
+              <div class="semantic-passport-evidence-links" id="focus-evidence-links"></div>
+            </div>
+            <span class="relationship-lens-summary" id="focus-summary" aria-live="polite"></span>
+            <div class="semantic-passport-reach" id="focus-reach" hidden>
+              <span class="semantic-passport-reach-label">Authored reach</span>
+              <div class="semantic-passport-reach-actions" role="group" aria-label="Trace authored reachability">
+                <button id="btn-reach-upstream" type="button" aria-label="Trace upstream authored reachability" aria-pressed="false">
+                  <span>Upstream</span><strong id="focus-reach-upstream-count">0</strong>
+                </button>
+                <button id="btn-reach-downstream" type="button" aria-label="Trace downstream authored reachability" aria-pressed="false">
+                  <span>Downstream</span><strong id="focus-reach-downstream-count">0</strong>
+                </button>
+              </div>
+              <small class="semantic-passport-reach-status" id="focus-reach-status" hidden aria-live="polite"></small>
+            </div>
+          </div>
+          <div class="relationship-lens-actions">
+            <button id="btn-focus-clear" type="button" aria-label="Close semantic passport" title="Close">&#215;</button>
+            <button id="btn-focus-copy" type="button" aria-label="Copy link to focused node">Copy link</button>
+            <button id="btn-focus-relations" type="button" aria-label="Show connected relationships" aria-expanded="false" aria-controls="relationship-lens-list">Relations</button>
+          </div>
+        </div>
+        <div class="relationship-lens-list" id="relationship-lens-list" aria-label="Connected relationships"></div>
+      </div>
+      <div class="route-probe no-print" id="route-probe" hidden role="region" aria-labelledby="route-probe-title" data-state="idle">
+        <div class="route-probe-head">
+          <span class="route-probe-copy">
+            <span class="route-probe-eyebrow">Route probe</span>
+            <strong class="route-probe-title" id="route-probe-title">Choose a start node</strong>
+          </span>
+          <span class="route-probe-actions">
+            <button class="route-probe-find" id="route-probe-find" type="button" aria-label="Find a route start" data-node-finder-trigger>Find start</button>
+            <button class="route-probe-copy-link" id="route-probe-copy" type="button" aria-label="Copy link to traced route" hidden>Copy link</button>
+            <button id="route-probe-clear" type="button" aria-label="Clear route probe">Clear</button>
+          </span>
+        </div>
+        <div class="route-probe-path" id="route-probe-path" aria-label="Traced route">
+          <span class="route-probe-placeholder">Pick two semantic nodes on the diagram</span>
+        </div>
+        <div class="route-journey-controls" id="route-journey-controls" hidden role="group" aria-label="Route journey controls" data-playing="false">
+          <button id="route-journey-prev" type="button" aria-label="Previous route position" title="Previous route position">&#8592;</button>
+          <button class="route-journey-play" id="route-journey-play" type="button" aria-label="Play route journey" aria-pressed="false" title="Play route journey">
+            <span id="route-journey-play-icon" aria-hidden="true">&#9654;</span>
+            <span id="route-journey-play-label">Journey</span>
+          </button>
+          <button id="route-journey-next" type="button" aria-label="Next route position" title="Next route position">&#8594;</button>
+          <button class="route-journey-overview" id="route-journey-overview" type="button" aria-label="Show complete route overview" title="Show complete route overview">Overview</button>
+        </div>
+        <small class="route-probe-status" id="route-probe-status" aria-live="polite">Choose the source, then the destination. Direction matters.</small>
+      </div>
+      <div class="semantic-lens no-print" id="semantic-lens" hidden role="dialog" aria-modal="false" aria-labelledby="semantic-lens-title">
+        <div class="semantic-lens-head">
+          <span>
+            <span class="semantic-lens-eyebrow">Semantic lens</span>
+            <strong class="semantic-lens-title" id="semantic-lens-title">Compare system roles</strong>
+          </span>
+          <button class="semantic-lens-close" id="semantic-lens-close" type="button" aria-label="Close semantic lens">&#215;</button>
+        </div>
+        <p class="semantic-lens-instruction">Choose up to two semantic kinds. One reveals its real traffic; two compare only direct authored relationships.</p>
+        <div class="semantic-lens-kinds" id="semantic-lens-kinds" role="group" aria-label="Semantic kinds"></div>
+        <p class="semantic-lens-status" id="semantic-lens-status" aria-live="polite">Choose a kind to inspect its nodes and touching relationships.</p>
+        <div class="semantic-lens-actions">
+          <button id="semantic-lens-copy" type="button" aria-label="Copy link to semantic lens" hidden>Copy link</button>
+          <button id="semantic-lens-clear" type="button" aria-label="Clear semantic lens">Clear</button>
+        </div>
+      </div>
+      <div class="overview-map no-print" id="overview-map" hidden role="region" aria-labelledby="overview-map-title">
+        <div class="overview-map-head">
+          <span class="overview-map-live" aria-hidden="true"></span>
+          <span class="overview-map-copy">
+            <strong id="overview-map-title">Semantic radar</strong>
+            <small id="overview-map-status" aria-live="polite">Building overview</small>
+          </span>
+          <button class="overview-map-close" id="overview-map-close" type="button" aria-label="Close semantic radar">&#215;</button>
+        </div>
+        <div class="overview-map-surface" id="overview-map-surface" tabindex="0" role="group" aria-label="Diagram overview. Click a node to focus it, or use arrow keys to pan."></div>
+        <div class="overview-map-hint" aria-hidden="true"><span>Click node</span><span>Drag to pan</span></div>
+      </div>
+      <div class="diagram-nav no-print" role="toolbar" aria-label="Diagram view controls">
+        <button id="btn-route-probe" type="button" aria-label="Trace a directed route" aria-pressed="false" aria-controls="route-probe" title="Trace route (R)">PATH</button>
+        <button id="btn-overview-map" type="button" aria-label="Open semantic radar" aria-expanded="false" aria-controls="overview-map" title="Semantic radar (M)">MAP</button>
+        <button id="btn-semantic-lens" type="button" aria-label="Open semantic lens" aria-haspopup="dialog" aria-expanded="false" aria-pressed="false" aria-controls="semantic-lens" title="Semantic lens (L)">LENS</button>
+        <button id="btn-node-finder" type="button" aria-label="Find a node" aria-haspopup="dialog" aria-expanded="false" aria-controls="node-finder" title="Find a node (/)" data-node-finder-trigger><span class="diagram-nav-icon find" aria-hidden="true"></span></button>
+        <button id="btn-diagram-guide" type="button" aria-label="Open diagram guide" aria-haspopup="dialog" aria-expanded="false" aria-controls="diagram-guide" title="Diagram guide (?)"><span class="diagram-nav-icon guide" aria-hidden="true"></span></button>
+        <button data-view="out" type="button" aria-label="Zoom out" title="Zoom out (-)"><span class="diagram-nav-icon minus" aria-hidden="true"></span></button>
+        <button data-view="reset" type="button" aria-label="Reset diagram view" title="Reset view (0)"><span class="diagram-nav-detail" data-view-detail hidden>READ</span><span class="diagram-nav-percent" data-view-percent>100%</span></button>
+        <button data-view="in" type="button" aria-label="Zoom in" title="Zoom in (+)"><span class="diagram-nav-icon plus" aria-hidden="true"></span></button>
+      </div>
+    </div>
+
+    <!-- Info Cards -->
+    <div class="cards">
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot cyan"></div>
+          <h3>Renderer Rules</h3>
+        </div>
+        <ul>
+          <li>&bull; Lanes and columns determine node placement</li>
+          <li>&bull; Edges attach to explicit node anchors</li>
+          <li>&bull; Cross-lane paths use orthogonal routing</li>
+          <li>&bull; Short adjacent links stay unlabeled</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot rose"></div>
+          <h3>Workflow Semantics</h3>
+        </div>
+        <ul>
+          <li>&bull; Approval is a first-class policy step</li>
+          <li>&bull; Consent gates are visible in the main path</li>
+          <li>&bull; External calls stay inside the tool lane</li>
+          <li>&bull; Trace writes are separate from the hot path</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot emerald"></div>
+          <h3>Why It Matters</h3>
+        </div>
+        <ul>
+          <li>&bull; This is closer to a diagram_type renderer</li>
+          <li>&bull; The graph can be edited without SVG surgery</li>
+          <li>&bull; Layout rules can be tested and improved</li>
+          <li>&bull; A future IR can reuse this shape directly</li>
+        </ul>
       </div>
     </div>
+
   </div>
 
-  <div class="container">
-    <!-- Header -->
-    <div class="header">
-      <div class="header-row">
-        <div class="pulse-dot"></div>
-        <h1>Agent Tool Call Workflow</h1>
-      </div>
-      <p class="subtitle">Renderer-driven workflow prototype with lanes, anchored nodes, and orthogonal edges</p>
-    </div>
+  <script>
+    var Archify = {};
+
+    function hasDrawableGeometry(element) {
+      if (!element) return false;
+      var geometries = /^(path|line|polyline)$/i.test(element.tagName)
+        ? [element]
+        : Array.prototype.slice.call(element.querySelectorAll('path, line, polyline'));
+      return geometries.some(function (geometry) {
+        var source = geometry.tagName.toLowerCase() === 'path'
+          ? geometry.getAttribute('d')
+          : geometry.tagName.toLowerCase() === 'polyline'
+            ? geometry.getAttribute('points')
+            : [geometry.getAttribute('x1'), geometry.getAttribute('y1'), geometry.getAttribute('x2'), geometry.getAttribute('y2')].join(' ');
+        if (!source || /(?:^|[^a-z])(?:nan|infinity)(?:[^a-z]|$)/i.test(source) || typeof geometry.getTotalLength !== 'function') return false;
+        try {
+          var length = Number(geometry.getTotalLength());
+          return Number.isFinite(length) && length > 0;
+        } catch (_) {
+          return false;
+        }
+      });
+    }
+
+    /* ============================================================
+       Visual style try-on — one topology, four bundled presets.
+       The reader's choice is intentionally session-only: it updates the
+       live page and canonical SVG together, but never rewrites the source,
+       URL, or a later diagram's authored default.
+       ============================================================ */
+    Archify.preset = (function () {
+      var PRESETS = ['classic', 'signal-flow', 'blueprint', 'editorial'];
+      var LABELS = { classic: 'Classic', 'signal-flow': 'Flow', blueprint: 'Blueprint', editorial: 'Editorial' };
+      var html = document.documentElement;
+      var svg = document.querySelector('.diagram-container svg');
+      var btn = document.getElementById('btn-preset');
+      var label = document.getElementById('preset-label');
+      var menu = document.getElementById('preset-menu');
+      var options = function () {
+        return Array.prototype.slice.call(menu.querySelectorAll('[data-preset-value]'));
+      };
+      var authored = PRESETS.indexOf(html.getAttribute('data-preset')) >= 0
+        ? html.getAttribute('data-preset')
+        : 'classic';
+
+      function current() {
+        var value = html.getAttribute('data-preset');
+        return PRESETS.indexOf(value) >= 0 ? value : authored;
+      }
+      function nextAfter(preset) {
+        return PRESETS[(PRESETS.indexOf(preset) + 1) % PRESETS.length];
+      }
+      function apply(preset) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (PRESETS.indexOf(preset) < 0) return false;
+        html.setAttribute('data-preset', preset);
+        svg.setAttribute('data-preset', preset);
+        btn.setAttribute('data-preset-option', preset);
+        label.textContent = LABELS[preset];
+        btn.setAttribute('aria-label', 'Visual style: ' + LABELS[preset] + '. Choose visual style');
+        btn.title = 'Choose visual style (S cycles)';
+        options().forEach(function (option) {
+          var selected = option.getAttribute('data-preset-value') === preset;
+          option.setAttribute('aria-checked', String(selected));
+        });
+        return true;
+      }
+      function cycle() { return apply(nextAfter(current())); }
+
+      function isOpen() { return menu.classList.contains('open'); }
+      function open(focusLast) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        menu.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        var available = options();
+        var selected = available.find(function (option) { return option.getAttribute('aria-checked') === 'true'; });
+        var target = focusLast ? available[available.length - 1] : (selected || available[0]);
+        if (target) target.focus();
+        return true;
+      }
+      function close(focusTrigger) {
+        menu.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+        if (focusTrigger) btn.focus();
+        return false;
+      }
+
+      apply(authored);
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        if (isOpen()) close(false);
+        else open(false);
+      });
+      btn.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!isOpen()) open(e.key === 'ArrowUp');
+        }
+      });
+      document.addEventListener('click', function (e) {
+        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      });
+      menu.addEventListener('click', function (e) {
+        var option = e.target.closest('[data-preset-value]');
+        if (!option || !menu.contains(option)) return;
+        if (apply(option.getAttribute('data-preset-value'))) close(true);
+      });
+      menu.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+        if (e.key === 'Tab') { close(false); return; }
+        var available = options();
+        var active = available.indexOf(document.activeElement);
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (available.length) available[(active + 1 + available.length) % available.length].focus();
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (available.length) available[(active - 1 + available.length) % available.length].focus();
+            break;
+          case 'Home':
+            e.preventDefault();
+            if (available[0]) available[0].focus();
+            break;
+          case 'End':
+            e.preventDefault();
+            if (available.length) available[available.length - 1].focus();
+            break;
+        }
+      });
+      return { cycle: cycle, apply: apply, current: current, authored: authored, open: open, close: close, isOpen: isOpen };
+    })();
+
+    /* ============================================================
+       Theme toggle — persists to localStorage, respects system pref
+       ============================================================ */
+
+    Archify.theme = (function () {
+      var STORAGE_KEY = 'archify-theme';
+      var html = document.documentElement;
+      var btn = document.getElementById('btn-theme');
+      var label = document.getElementById('theme-label');
+
+      // localStorage can throw (blocked cookies, sandboxed iframes); the whole
+      // script element dies on an uncaught error, so guard every access.
+      function readStored() {
+        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+      }
+      function writeStored(value) {
+        try { localStorage.setItem(STORAGE_KEY, value); } catch (_) {}
+      }
+      function urlOverride() {
+        // URL param wins (useful for deterministic screenshots / share links)
+        try {
+          var param = new URLSearchParams(window.location.search).get('theme');
+          if (param === 'light' || param === 'dark') return param;
+        } catch (_) {}
+        return null;
+      }
+
+      function resolveInitial() {
+        var fromUrl = urlOverride();
+        if (fromUrl) return fromUrl;
+        var saved = readStored();
+        if (saved === 'light' || saved === 'dark') return saved;
+        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      }
+
+      function apply(theme) {
+        html.setAttribute('data-theme', theme);
+        label.textContent = theme === 'dark' ? 'Dark' : 'Light';
+        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+      }
+
+      function toggle() {
+        var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        apply(next);
+        writeStored(next);
+      }
+
+      apply(resolveInitial());
+      btn.addEventListener('click', toggle);
+
+      // Follow live OS theme changes while the user has no explicit preference.
+      try {
+        var media = window.matchMedia('(prefers-color-scheme: light)');
+        var onChange = function (e) {
+          var saved = readStored();
+          if (urlOverride() || saved === 'light' || saved === 'dark') return;
+          apply(e.matches ? 'light' : 'dark');
+        };
+        if (media.addEventListener) media.addEventListener('change', onChange);
+        else if (media.addListener) media.addListener(onChange);
+      } catch (_) {}
+
+      return { toggle: toggle };
+    })();
+
+    /* ============================================================
+       Export — Share Card / PNG / JPEG / WebP / SVG / WebM and clipboard
+
+       Raster exports are always rendered at 4x source resolution for
+       maximum sharpness. The trick: we set the serialized SVG's
+       `width`/`height` to viewBox * 4 so the browser rasterizes the
+       vectors at that resolution natively. drawImage then draws at
+       the image's natural size (no upscaling = no blur).
+
+       JPEG/WebP paint the current theme's background explicitly since
+       those formats have no alpha channel.
+       ============================================================ */
+    (function () {
+      var RASTER_SCALE = 4;
+      var MOTION_DURATION = 6000;
+      var MOTION_FPS = 30;
+      var SHARE_CARD_WIDTH = 1200;
+      var SHARE_CARD_HEIGHT = 630;
+      var SHARE_CARD_PADDING = 36;
+      var SHARE_CARD_HEADER = 112;
+
+      function diagramFilename() {
+        var title = (document.title || 'diagram')
+          .replace(/\s+Architecture(\s+Diagram)?$/i, '')
+          .replace(/\s+Diagram$/i, '')
+          .trim();
+        return title.replace(/[^a-z0-9_\-]+/gi, '-')
+                    .toLowerCase()
+                    .replace(/^-+|-+$/g, '') || 'diagram';
+      }
+
+      function currentBg() {
+        return getComputedStyle(document.body).backgroundColor || '#ffffff';
+      }
+
+      /**
+       * Serialize the main SVG into a standalone document.
+       *
+       * Two modes:
+       * - Default (opts.autoTheme=false) — locks the serialized SVG to the
+       *   viewer's current theme. Used by the raster pipeline
+       *   (PNG/JPEG/WebP/clipboard) because canvas rasterization needs
+       *   deterministic colors; a raster cannot react to
+       *   prefers-color-scheme after encoding.
+       * - autoTheme=true — emits BOTH dark and light variable sets plus a
+       *   `@media (prefers-color-scheme)` rule so the resulting SVG
+       *   self-themes when embedded in GitHub READMEs or other hosts that
+       *   expose a color scheme. Used for "Download SVG".
+       */
+      function applyRouteSnapshot(clone, snapshot) {
+        if (!snapshot || !Array.isArray(snapshot.nodeIds) || !Array.isArray(snapshot.edges) ||
+            snapshot.nodeIds.length < 2 || snapshot.edges.length !== snapshot.nodeIds.length - 1 ||
+            snapshot.hops !== snapshot.edges.length ||
+            !snapshot.source || !snapshot.target ||
+            snapshot.source.id !== snapshot.nodeIds[0] ||
+            snapshot.target.id !== snapshot.nodeIds[snapshot.nodeIds.length - 1]) return false;
+
+        clone.removeAttribute('data-animation');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-animate]'), function (element) {
+          element.removeAttribute('data-animate');
+          element.style.removeProperty('--step');
+        });
+
+        var cloneNodes = Array.prototype.slice.call(clone.querySelectorAll('[data-node-id]'));
+        var cloneEdges = Array.prototype.slice.call(clone.querySelectorAll('[data-edge-key]'));
+        var nodeIds = Object.create(null);
+        var edgeKeys = Object.create(null);
+        var nodeMatches = [];
+        var edgeMatches = [];
+
+        for (var nodeIndex = 0; nodeIndex < snapshot.nodeIds.length; nodeIndex++) {
+          var nodeId = snapshot.nodeIds[nodeIndex];
+          if (typeof nodeId !== 'string' || !nodeId || nodeIds[nodeId]) return false;
+          var matchedNodes = cloneNodes.filter(function (candidate) {
+            return candidate.getAttribute('data-node-id') === nodeId;
+          });
+          if (matchedNodes.length !== 1) return false;
+          nodeIds[nodeId] = true;
+          nodeMatches.push(matchedNodes);
+        }
+
+        for (var edgeIndex = 0; edgeIndex < snapshot.edges.length; edgeIndex++) {
+          var edge = snapshot.edges[edgeIndex];
+          var fromId = snapshot.nodeIds[edgeIndex];
+          var toId = snapshot.nodeIds[edgeIndex + 1];
+          if (!edge || typeof edge.key !== 'string' || !edge.key || edgeKeys[edge.key] ||
+              edge.from !== fromId || edge.to !== toId) return false;
+          var matchedEdges = cloneEdges.filter(function (candidate) {
+            return candidate.getAttribute('data-edge-key') === edge.key;
+          });
+          var drawableMatches = matchedEdges.filter(hasDrawableGeometry);
+          if (!matchedEdges.length || drawableMatches.length !== 1 || !matchedEdges.every(function (candidate) {
+            return candidate.getAttribute('data-edge-from') === edge.from &&
+              candidate.getAttribute('data-edge-to') === edge.to &&
+              (candidate.getAttribute('data-edge-id') || '') === (edge.id || '');
+          })) return false;
+          edgeKeys[edge.key] = true;
+          edgeMatches.push(matchedEdges);
+        }
+
+        clone.setAttribute('data-share-route', '');
+        nodeMatches.forEach(function (matches, step) {
+          matches.forEach(function (element) {
+            element.setAttribute('data-share-route-match', '');
+            element.setAttribute('data-share-route-step', String(step));
+            if (step === 0) element.setAttribute('data-share-route-start', '');
+            else if (step === snapshot.nodeIds.length - 1) element.setAttribute('data-share-route-end', '');
+            else element.setAttribute('data-share-route-middle', '');
+          });
+        });
+        edgeMatches.forEach(function (matches, step) {
+          matches.forEach(function (element) {
+            element.setAttribute('data-share-route-match', '');
+            element.setAttribute('data-share-route-step', String(step));
+          });
+        });
+
+        return clone.hasAttribute('data-share-route') &&
+          !clone.hasAttribute('data-animation') &&
+          !clone.hasAttribute('data-route-active') &&
+          !clone.hasAttribute('data-route-journey') &&
+          clone.querySelectorAll('[data-animate], [data-route-match], [data-route-step], [data-route-start], [data-route-end], [data-route-journey-state], [data-route-journey-current], [data-route-journey-overlay]').length === 0 &&
+          clone.querySelectorAll('[data-share-route-match]').length ===
+            nodeMatches.reduce(function (count, matches) { return count + matches.length; }, 0) +
+            edgeMatches.reduce(function (count, matches) { return count + matches.length; }, 0);
+      }
+
+      function applyReachSnapshot(clone, snapshot) {
+        if (!snapshot || (snapshot.direction !== 'upstream' && snapshot.direction !== 'downstream') ||
+            !snapshot.origin || typeof snapshot.origin.id !== 'string' || !snapshot.origin.id ||
+            typeof snapshot.origin.label !== 'string' || !snapshot.origin.label.trim() ||
+            !Array.isArray(snapshot.nodeIds) || snapshot.nodeIds.length < 2 ||
+            !Array.isArray(snapshot.edges) || !snapshot.edges.length ||
+            !snapshot.depths || typeof snapshot.depths !== 'object' ||
+            !Number.isInteger(snapshot.maxDepth) || snapshot.maxDepth < 1 ||
+            snapshot.nodeIds[0] !== snapshot.origin.id) return false;
+
+        clone.removeAttribute('data-animation');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-animate]'), function (element) {
+          element.removeAttribute('data-animate');
+          element.style.removeProperty('--step');
+        });
+
+        var cloneNodes = Array.prototype.slice.call(clone.querySelectorAll('[data-node-id]'));
+        var cloneEdges = Array.prototype.slice.call(clone.querySelectorAll('[data-edge-key]'));
+        var nodeIds = Object.create(null);
+        var edgeKeys = Object.create(null);
+        var nodeMatches = [];
+        var edgeMatches = [];
+        var measuredMaxDepth = 0;
+
+        for (var nodeIndex = 0; nodeIndex < snapshot.nodeIds.length; nodeIndex++) {
+          var nodeId = snapshot.nodeIds[nodeIndex];
+          var depth = snapshot.depths[nodeId];
+          if (typeof nodeId !== 'string' || !nodeId || nodeIds[nodeId] ||
+              !Number.isInteger(depth) || depth < 0 || depth > snapshot.maxDepth ||
+              (nodeId === snapshot.origin.id ? depth !== 0 : depth < 1)) return false;
+          var matchedNodes = cloneNodes.filter(function (candidate) {
+            return candidate.getAttribute('data-node-id') === nodeId;
+          });
+          if (matchedNodes.length !== 1) return false;
+          nodeIds[nodeId] = true;
+          measuredMaxDepth = Math.max(measuredMaxDepth, depth);
+          nodeMatches.push({ elements: matchedNodes, id: nodeId, depth: depth });
+        }
+        if (measuredMaxDepth !== snapshot.maxDepth) return false;
+
+        for (var edgeIndex = 0; edgeIndex < snapshot.edges.length; edgeIndex++) {
+          var edge = snapshot.edges[edgeIndex];
+          if (!edge || typeof edge.key !== 'string' || !edge.key || edgeKeys[edge.key] ||
+              !nodeIds[edge.from] || !nodeIds[edge.to] ||
+              !Number.isInteger(edge.depth) || edge.depth < 1 || edge.depth > snapshot.maxDepth ||
+              edge.depth !== Math.max(snapshot.depths[edge.from], snapshot.depths[edge.to])) return false;
+          var matchedEdges = cloneEdges.filter(function (candidate) {
+            return candidate.getAttribute('data-edge-key') === edge.key;
+          });
+          var drawableMatches = matchedEdges.filter(hasDrawableGeometry);
+          if (!matchedEdges.length || drawableMatches.length !== 1 || !matchedEdges.every(function (candidate) {
+            return candidate.getAttribute('data-edge-from') === edge.from &&
+              candidate.getAttribute('data-edge-to') === edge.to &&
+              (candidate.getAttribute('data-edge-id') || '') === (edge.id || '');
+          })) return false;
+          edgeKeys[edge.key] = true;
+          edgeMatches.push({ elements: matchedEdges, depth: edge.depth });
+        }
+
+        clone.setAttribute('data-share-reach', snapshot.direction);
+        nodeMatches.forEach(function (match) {
+          match.elements.forEach(function (element) {
+            element.setAttribute('data-share-reach-match', '');
+            element.setAttribute('data-share-reach-depth', String(match.depth));
+            if (match.id === snapshot.origin.id) element.setAttribute('data-share-reach-origin', '');
+          });
+        });
+        edgeMatches.forEach(function (match) {
+          match.elements.forEach(function (element) {
+            element.setAttribute('data-share-reach-match', '');
+            element.setAttribute('data-share-reach-depth', String(match.depth));
+          });
+        });
+
+        return clone.getAttribute('data-share-reach') === snapshot.direction &&
+          !clone.hasAttribute('data-animation') &&
+          !clone.hasAttribute('data-reach-active') &&
+          clone.querySelectorAll('[data-animate], [data-reach-match], [data-reach-origin], [data-reach-depth]').length === 0 &&
+          clone.querySelectorAll('[data-share-reach-origin]').length === 1 &&
+          clone.querySelectorAll('[data-share-reach-match]').length ===
+            nodeMatches.reduce(function (count, match) { return count + match.elements.length; }, 0) +
+            edgeMatches.reduce(function (count, match) { return count + match.elements.length; }, 0);
+      }
+
+      function serializeSvg(scale, opts) {
+        // scale: integer multiplier for intrinsic SVG pixel dimensions used by
+        // the raster path. Defaults to 1 (natural size) for SVG download.
+        scale = scale || 1;
+        opts = opts || {};
+        var autoTheme = opts.autoTheme === true;
+        var svg = document.querySelector('.diagram-container svg');
+        var clone = svg.cloneNode(true);
+
+        // View transforms and neighborhood focus are HTML exploration state,
+        // never part of a downloaded full-diagram artifact.
+        clone.style.removeProperty('transform');
+        clone.removeAttribute('data-view-scale');
+        clone.removeAttribute('data-focus-active');
+        clone.removeAttribute('data-reach-active');
+        clone.removeAttribute('data-lens-active');
+        clone.removeAttribute('data-lens-flow-count');
+        clone.removeAttribute('data-lens-flow-density');
+        clone.removeAttribute('data-legend-preview-active');
+        clone.removeAttribute('data-relationship-preview-active');
+        clone.removeAttribute('data-relationship-direct-active');
+        clone.removeAttribute('data-relationship-pin-active');
+        clone.removeAttribute('data-intent-trace-active');
+        clone.removeAttribute('data-route-picking');
+        clone.removeAttribute('data-route-active');
+        clone.removeAttribute('data-route-journey');
+        clone.removeAttribute('data-share-route');
+        clone.removeAttribute('data-share-reach');
+        clone.removeAttribute('data-story-active');
+        clone.removeAttribute('data-story-playing');
+        clone.removeAttribute('data-story-beat');
+        clone.removeAttribute('data-story-next');
+        clone.removeAttribute('data-story-follow');
+        clone.removeAttribute('data-chapter-handoff');
+        clone.removeAttribute('data-chapter-anchor');
+        clone.removeAttribute('data-chapter-preview');
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-handoff-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-role]'), function (el) {
+          el.removeAttribute('data-chapter-role');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-chapter-preview-role]'), function (el) {
+          el.removeAttribute('data-chapter-preview-role');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-story-overlay], [data-story-carrier-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-intent-trace-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-probe-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-journey-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-semantic-lens-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-bridge-runtime]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-kind]'), function (el) {
+          el.removeAttribute('data-legend-kind');
+          el.removeAttribute('data-legend-label');
+          el.removeAttribute('data-legend-count');
+          el.removeAttribute('data-legend-zero');
+          el.removeAttribute('data-legend-selected');
+          el.removeAttribute('role');
+          el.removeAttribute('tabindex');
+          el.removeAttribute('aria-label');
+          el.removeAttribute('aria-pressed');
+          el.removeAttribute('aria-haspopup');
+          el.removeAttribute('aria-controls');
+          el.removeAttribute('aria-expanded');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-bridge]'), function (el) {
+          el.removeAttribute('data-legend-bridge');
+          el.removeAttribute('role');
+          el.removeAttribute('aria-label');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-pulse-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-hit-overlay]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-source-evidence-beacon]'), function (el) {
+          el.remove();
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-source-evidence-count]'), function (el) {
+          var originalLabel = el.getAttribute('data-source-evidence-original-label');
+          if (originalLabel == null || originalLabel === '') el.removeAttribute('aria-label');
+          else el.setAttribute('aria-label', originalLabel);
+          el.removeAttribute('data-source-evidence-count');
+          el.removeAttribute('data-source-evidence-original-label');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-story-step], [data-story-beat-state], [data-story-beat-step]'), function (el) {
+          el.removeAttribute('data-story-step');
+          el.removeAttribute('data-story-beat-state');
+          el.removeAttribute('data-story-beat-step');
+          el.style.removeProperty('--story-step');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-focus-match], [data-focus-selected]'), function (el) {
+          el.removeAttribute('data-focus-match');
+          el.removeAttribute('data-focus-selected');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-reach-match], [data-reach-origin], [data-reach-depth]'), function (el) {
+          el.removeAttribute('data-reach-match');
+          el.removeAttribute('data-reach-origin');
+          el.removeAttribute('data-reach-depth');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-lens-match], [data-lens-selected], [data-lens-peer]'), function (el) {
+          el.removeAttribute('data-lens-match');
+          el.removeAttribute('data-lens-selected');
+          el.removeAttribute('data-lens-peer');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer]'), function (el) {
+          el.removeAttribute('data-legend-preview-match');
+          el.removeAttribute('data-legend-preview-selected');
+          el.removeAttribute('data-legend-preview-peer');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-relationship-preview], [data-relationship-preview-node], [data-relationship-preview-source], [data-relationship-preview-target]'), function (el) {
+          el.removeAttribute('data-relationship-preview');
+          el.removeAttribute('data-relationship-preview-node');
+          el.removeAttribute('data-relationship-preview-source');
+          el.removeAttribute('data-relationship-preview-target');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-intent-trace-match], [data-intent-trace-selected]'), function (el) {
+          el.removeAttribute('data-intent-trace-match');
+          el.removeAttribute('data-intent-trace-selected');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-route-match], [data-route-start], [data-route-end], [data-route-step], [data-route-candidate], [data-route-journey-state], [data-route-journey-current]'), function (el) {
+          el.removeAttribute('data-route-match');
+          el.removeAttribute('data-route-start');
+          el.removeAttribute('data-route-end');
+          el.removeAttribute('data-route-step');
+          el.removeAttribute('data-route-candidate');
+          el.removeAttribute('data-route-journey-state');
+          el.removeAttribute('data-route-journey-current');
+          el.style.removeProperty('--route-step');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-share-route-match], [data-share-route-step], [data-share-route-start], [data-share-route-end], [data-share-route-middle]'), function (el) {
+          el.removeAttribute('data-share-route-match');
+          el.removeAttribute('data-share-route-step');
+          el.removeAttribute('data-share-route-start');
+          el.removeAttribute('data-share-route-end');
+          el.removeAttribute('data-share-route-middle');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-share-reach-match], [data-share-reach-origin], [data-share-reach-depth]'), function (el) {
+          el.removeAttribute('data-share-reach-match');
+          el.removeAttribute('data-share-reach-origin');
+          el.removeAttribute('data-share-reach-depth');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-detail], [data-detail-anchor]'), function (el) {
+          el.removeAttribute('data-detail');
+          el.removeAttribute('data-detail-anchor');
+        });
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-node-id][aria-pressed]'), function (el) {
+          el.setAttribute('aria-pressed', 'false');
+        });
+        var canonicalStateClean = !clone.hasAttribute('data-view-scale') &&
+          !clone.hasAttribute('data-focus-active') &&
+          !clone.hasAttribute('data-reach-active') &&
+          !clone.hasAttribute('data-lens-active') &&
+          !clone.hasAttribute('data-lens-flow-count') &&
+          !clone.hasAttribute('data-lens-flow-density') &&
+          !clone.hasAttribute('data-legend-preview-active') &&
+          !clone.hasAttribute('data-relationship-preview-active') &&
+          !clone.hasAttribute('data-relationship-direct-active') &&
+          !clone.hasAttribute('data-intent-trace-active') &&
+          !clone.hasAttribute('data-route-picking') &&
+          !clone.hasAttribute('data-route-active') &&
+          !clone.hasAttribute('data-route-journey') &&
+          !clone.hasAttribute('data-share-route') &&
+          !clone.hasAttribute('data-share-reach') &&
+          !clone.hasAttribute('data-story-active') &&
+          !clone.hasAttribute('data-story-playing') &&
+          !clone.hasAttribute('data-story-beat') &&
+          !clone.hasAttribute('data-story-next') &&
+          !clone.hasAttribute('data-story-follow') &&
+          !clone.hasAttribute('data-chapter-handoff') &&
+          !clone.hasAttribute('data-chapter-anchor') &&
+          !clone.hasAttribute('data-chapter-preview') &&
+          !clone.style.getPropertyValue('transform') &&
+          clone.querySelectorAll('[data-story-overlay], [data-story-carrier-overlay], [data-story-carrier-token], [data-story-step], [data-story-beat-state], [data-story-beat-step], [data-chapter-handoff-overlay], [data-chapter-role], [data-chapter-preview-role], [data-focus-match], [data-focus-selected], [data-reach-match], [data-reach-origin], [data-reach-depth], [data-semantic-lens-overlay], [data-lens-match], [data-lens-selected], [data-lens-peer], [data-legend-bridge], [data-legend-kind], [data-legend-bridge-runtime], [data-legend-count], [data-legend-zero], [data-legend-selected], [data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer], [data-relationship-hit-overlay], [data-relationship-pulse-overlay], [data-relationship-preview], [data-relationship-preview-node], [data-relationship-preview-source], [data-relationship-preview-target], [data-intent-trace-overlay], [data-intent-trace-match], [data-intent-trace-selected], [data-route-probe-overlay], [data-route-journey-overlay], [data-route-match], [data-route-start], [data-route-end], [data-route-step], [data-route-candidate], [data-route-journey-state], [data-route-journey-current], [data-share-route-match], [data-share-route-step], [data-share-route-start], [data-share-route-end], [data-share-route-middle], [data-share-reach-match], [data-share-reach-origin], [data-share-reach-depth], [data-source-evidence-beacon], [data-source-evidence-count], [data-source-evidence-original-label], [data-detail], [data-detail-anchor]').length === 0;
+
+        var vb = svg.viewBox.baseVal;
+        var finiteSvgDimensions = Number.isFinite(vb.x) && Number.isFinite(vb.y) &&
+          Number.isFinite(vb.width) && Number.isFinite(vb.height) && vb.width > 0 && vb.height > 0;
+        var routeStateClean = opts.routeSnapshot
+          ? canonicalStateClean && finiteSvgDimensions && applyRouteSnapshot(clone, opts.routeSnapshot)
+          : null;
+        var reachStateClean = opts.reachSnapshot
+          ? canonicalStateClean && finiteSvgDimensions && !opts.routeSnapshot && applyReachSnapshot(clone, opts.reachSnapshot)
+          : null;
+        // Scale width/height so the browser rasterizes the vectors at target
+        // resolution directly. viewBox stays unchanged so coordinates don't
+        // shift. This is the key to sharp rasters — do NOT scale later via
+        // canvas upscaling.
+        clone.setAttribute('width', vb.width * scale);
+        clone.setAttribute('height', vb.height * scale);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+        // Only the SVG-relevant rules: semantic classes, markers, and the
+        // theme variable blocks. Toolbar/cards/print CSS can never apply
+        // inside a standalone SVG and would only bloat the export.
+        var hostStyle = (function () {
+          var out = [];
+          Array.prototype.forEach.call(document.styleSheets, function (sheet) {
+            var rules;
+            try { rules = sheet.cssRules; } catch (_) { return; } // cross-origin
+            if (!rules) return;
+            Array.prototype.forEach.call(rules, function (rule) {
+              if (rule.type === 7 && /^archify-/.test(rule.name || '')) {
+                out.push(rule.cssText);
+                return;
+              }
+              if (rule.type !== 1) return; // plain style rules only
+              var sel = rule.selectorText || '';
+              if (/(^|,)\s*(svg|:root|\[data-theme|\[data-preset|\.c-|\.t-|\.a-|\.m-)/.test(sel)) {
+                out.push(rule.cssText);
+              }
+            });
+          });
+          return out.join('\n');
+        })();
+
+        // Derive the variable list from the stylesheet so newly added theme
+        // variables can never be missed by the export pipeline again
+        // (--lane-fill/--lane-stroke once were).
+        var varNames = (function () {
+          var seen = {};
+          var names = [];
+          (hostStyle.match(/--[a-zA-Z0-9-]+(?=\s*:)/g) || []).forEach(function (n) {
+            if (!seen[n]) { seen[n] = true; names.push(n); }
+          });
+          return names;
+        })();
+
+        // Resolve the full variable set for a given data-theme via an
+        // off-DOM probe, independent of what the viewer is currently set to.
+        function resolveVars(themeAttr) {
+          var probe = document.createElement('div');
+          probe.setAttribute('data-theme', themeAttr);
+          probe.setAttribute('data-preset', document.documentElement.getAttribute('data-preset') || 'classic');
+          probe.style.cssText = 'position:absolute;width:0;height:0;visibility:hidden;';
+          document.body.appendChild(probe);
+          try {
+            var c = getComputedStyle(probe);
+            return varNames.map(function (n) {
+              return n + ': ' + c.getPropertyValue(n).trim() + ';';
+            }).join(' ');
+          } finally {
+            document.body.removeChild(probe);
+          }
+        }
+
+        // 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.
+        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'); }";
+        }).join('\n');
+
+        var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+        var bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        bgRect.setAttribute('width', '100%');
+        bgRect.setAttribute('height', '100%');
+
+        if (autoTheme) {
+          // Dual-theme SVG. Dark is the default (so hosts without
+          // prefers-color-scheme still render), light swaps in via media
+          // query, and svg[data-theme="..."] still lets downstream
+          // consumers force a specific theme.
+          var darkVars = resolveVars('dark');
+          var lightVars = resolveVars('light');
+
+          style.textContent =
+            fontFallback + "\n" +
+            "svg { 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" +
+            hostStyle + "\n" +
+            ":root, svg { " + darkVars + " }\n" +
+            "@media (prefers-color-scheme: light) { :root, svg { " + lightVars + " } }\n" +
+            "svg[data-theme=\"light\"] { " + lightVars + " }\n" +
+            "svg[data-theme=\"dark\"] { " + darkVars + " }\n" +
+            "rect.c-bg-rect { fill: var(--bg); }\n";
+
+          // Don't lock the serialized SVG to the viewer's current theme.
+          clone.removeAttribute('data-theme');
+          // Background follows the CSS variable, not a fixed color, so it
+          // swaps with the media query.
+          bgRect.setAttribute('class', 'c-bg-rect');
+        } else {
+          // Raster path: lock to the viewer's current theme.
+          var theme = document.documentElement.getAttribute('data-theme') || 'dark';
+          var themeHost = document.querySelector('[data-theme="' + theme + '"]') || document.documentElement;
+          var computed = getComputedStyle(themeHost);
+          var vars = varNames.map(function (n) {
+            return n + ': ' + computed.getPropertyValue(n).trim() + ';';
+          }).join(' ');
+
+          // IMPORTANT: inject the resolved variables AFTER hostStyle,
+          // otherwise hostStyle's ":root, [data-theme=\"dark\"] { ... }" rule
+          // overrides our chosen theme via later-in-cascade equal-specificity.
+          // Keep this order.
+          style.textContent =
+            fontFallback + "\n" +
+            "svg { 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" +
+            hostStyle + "\n" +
+            ":root, svg { " + vars + " }\n";
+
+          bgRect.setAttribute('fill', computed.getPropertyValue('--bg').trim() || '#ffffff');
+        }
+
+        if (opts.routeSnapshot) {
+          style.textContent += "\nsvg[data-share-route] [data-node-id], svg[data-share-route] [data-edge-from] { opacity: 0.18; }\n" +
+            "svg[data-share-route] [data-share-route-match] { opacity: 1; }\n" +
+            "svg[data-share-route] [data-share-route-start] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 3; stroke-dasharray: 5 3; }\n" +
+            "svg[data-share-route] [data-share-route-middle] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 2.2; }\n" +
+            "svg[data-share-route] [data-share-route-end] > :is(rect, circle, polygon):not(.c-mask) { stroke-width: 3.4; stroke-dasharray: 1 0; }\n";
+        }
+        if (opts.reachSnapshot) {
+          style.textContent += "\nsvg[data-share-reach] [data-node-id], svg[data-share-reach] [data-edge-from] { opacity: 0.14; }\n" +
+            "svg[data-share-reach] [data-share-reach-match] { opacity: 1; }\n" +
+            "svg[data-share-reach] [data-edge-from][data-share-reach-match] { stroke-width: 1.55; }\n" +
+            "svg[data-share-reach=\"upstream\"] [data-share-reach-origin] > :is(rect, circle, polygon):not(.c-mask) { stroke: var(--database-stroke); stroke-width: 3.4; stroke-dasharray: 5 3; }\n" +
+            "svg[data-share-reach=\"downstream\"] [data-share-reach-origin] > :is(rect, circle, polygon):not(.c-mask) { stroke: var(--backend-stroke); stroke-width: 3.4; stroke-dasharray: 1 0; }\n" +
+            "svg[data-preset=\"blueprint\"][data-share-reach] [data-share-reach-origin], svg[data-preset=\"blueprint\"][data-share-reach] [data-edge-from][data-share-reach-match] { filter: none; }\n";
+        }
+
+        clone.insertBefore(style, clone.firstChild);
+        clone.insertBefore(bgRect, style.nextSibling);
+
+        return {
+          svgString: new XMLSerializer().serializeToString(clone),
+          width: vb.width * scale,
+          height: vb.height * scale,
+          canonicalStateClean: canonicalStateClean,
+          routeStateClean: routeStateClean,
+          reachStateClean: reachStateClean
+        };
+      }
+
+      function download(blob, filename) {
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
+      }
+
+      // Conservative upper bound on total canvas pixels. Older Safari on iOS
+      // silently produces a blank canvas above ~16 Mpx; Chrome / Firefox /
+      // desktop Safari are far higher but start failing on memory-constrained
+      // devices. We pick the largest integer scale in {4,3,2,1} whose target
+      // pixel count fits under this cap.
+      var MAX_CANVAS_PIXELS = 16 * 1024 * 1024;
+
+      function pickSafeScale(vbW, vbH) {
+        for (var s = RASTER_SCALE; s >= 1; s--) {
+          if (vbW * s * vbH * s <= MAX_CANVAS_PIXELS) return s;
+        }
+        return 1;
+      }
+
+      function rasterize(format) {
+        // Serialize at a safe scale (RASTER_SCALE=4 by default, reduced if the
+        // resulting canvas would exceed MAX_CANVAS_PIXELS). The SVG itself is
+        // rasterized at target resolution natively; drawImage draws at natural
+        // size — no upsampling blur.
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var scale = pickSafeScale(vb.width, vb.height);
+        var data = serializeSvg(scale);
+        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
+        var svgUrl = URL.createObjectURL(svgBlob);
+
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            try {
+              var canvas = document.createElement('canvas');
+              canvas.width = data.width;
+              canvas.height = data.height;
+              var ctx = canvas2dOrThrow(canvas, format);
+              if (format === 'jpeg') {
+                ctx.fillStyle = currentBg();
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+              }
+              // Draw at natural size — SVG was already rasterized at target res.
+              ctx.drawImage(img, 0, 0);
+              URL.revokeObjectURL(svgUrl);
+              var mime = format === 'jpeg' ? 'image/jpeg' :
+                         format === 'webp' ? 'image/webp' : 'image/png';
+              var quality = format === 'png' ? undefined : 0.95;
+              canvas.toBlob(function (blob) {
+                if (!blob) reject(new Error('toBlob returned null for ' + format));
+                else resolve(blob);
+              }, mime, quality);
+            } catch (error) {
+              URL.revokeObjectURL(svgUrl);
+              reject(error);
+            }
+          };
+          img.onerror = function (e) {
+            URL.revokeObjectURL(svgUrl);
+            reject(e);
+          };
+          img.src = svgUrl;
+        });
+      }
+
+      function fitCanvasText(ctx, text, maxWidth, startSize, minSize, weight) {
+        var value = String(text || '').trim();
+        var size = startSize;
+        var family = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+        while (size > minSize) {
+          ctx.font = (weight || '600') + ' ' + size + 'px ' + family;
+          if (ctx.measureText(value).width <= maxWidth) return value;
+          size -= 1;
+        }
+        ctx.font = (weight || '600') + ' ' + minSize + 'px ' + family;
+        if (ctx.measureText(value).width <= maxWidth) return value;
+        var suffix = '\u2026';
+        while (value.length > 1 && ctx.measureText(value + suffix).width > maxWidth) {
+          value = value.slice(0, -1);
+        }
+        return value + suffix;
+      }
+
+      function canvas2dOrThrow(canvas, label) {
+        if (!canvas || typeof canvas.getContext !== 'function') {
+          throw new Error('Canvas unavailable for ' + label);
+        }
+        var ctx = canvas.getContext('2d');
+        if (!ctx) throw new Error('2D canvas context unavailable for ' + label);
+        if (typeof canvas.toBlob !== 'function') throw new Error('canvas.toBlob unavailable for ' + label);
+        return ctx;
+      }
+
+      function renderShareCard(options) {
+        options = options || {};
+        var routeSnapshot = options.routeSnapshot || null;
+        var reachSnapshot = options.reachSnapshot || null;
+        if (routeSnapshot && reachSnapshot) return Promise.reject(new Error('Share Card variants cannot be combined'));
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var sourceScale = Math.min(2, pickSafeScale(vb.width, vb.height));
+        var data = serializeSvg(sourceScale, { routeSnapshot: routeSnapshot, reachSnapshot: reachSnapshot });
+        if (!data.canonicalStateClean) return Promise.reject(new Error('Share Card export could not remove temporary viewer state'));
+        if (routeSnapshot && !data.routeStateClean) return Promise.reject(new Error('Route Card export could not preserve the resolved route safely'));
+        if (reachSnapshot && !data.reachStateClean) return Promise.reject(new Error('Reach Card export could not preserve authored reach safely'));
+        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
+        var svgUrl = URL.createObjectURL(svgBlob);
+
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            try {
+              var canvas = document.createElement('canvas');
+              canvas.width = SHARE_CARD_WIDTH;
+              canvas.height = SHARE_CARD_HEIGHT;
+              var ctx = canvas2dOrThrow(canvas, 'Share Card');
+              var computed = getComputedStyle(document.documentElement);
+              var bg = computed.getPropertyValue('--bg').trim() || currentBg();
+              var text = computed.getPropertyValue('--text').trim() || '#ffffff';
+              var muted = computed.getPropertyValue('--text-muted').trim() || '#94a3b8';
+              var border = computed.getPropertyValue('--panel-border').trim() || '#334155';
+              var accentProperty = reachSnapshot
+                ? (reachSnapshot.direction === 'upstream' ? '--database-stroke' : '--backend-stroke')
+                : '--frontend-stroke';
+              var accent = computed.getPropertyValue(accentProperty).trim() || '#22d3ee';
+              var titleNode = document.querySelector('.header h1');
+              var subtitleNode = document.querySelector('.header .subtitle');
+              var title = titleNode ? titleNode.textContent : document.title;
+              var subtitle = routeSnapshot
+                ? 'Route: ' + routeSnapshot.source.label + ' → ' + routeSnapshot.target.label + ' · ' + routeSnapshot.hops + ' directed hops'
+                : reachSnapshot
+                  ? 'Authored ' + reachSnapshot.direction + ' from ' + reachSnapshot.origin.label + ' · ' +
+                    (reachSnapshot.nodeIds.length - 1) + ' nodes · ' + reachSnapshot.edges.length +
+                    ' links · max ' + reachSnapshot.maxDepth + ' hops'
+                  : subtitleNode ? subtitleNode.textContent : '';
+              var preset = document.documentElement.getAttribute('data-preset') || 'classic';
+              var theme = document.documentElement.getAttribute('data-theme') || 'dark';
+              var presetLabel = preset === 'signal-flow' ? 'FLOW' : preset.toUpperCase();
+              var cardLabel = routeSnapshot
+                ? 'ARCHIFY · ROUTE · ' + routeSnapshot.hops + ' HOPS'
+                : reachSnapshot
+                  ? 'ARCHIFY · ' + reachSnapshot.direction.toUpperCase() + ' REACH'
+                  : 'ARCHIFY · ' + presetLabel + ' · ' + theme.toUpperCase();
+
+              ctx.fillStyle = bg;
+              ctx.fillRect(0, 0, SHARE_CARD_WIDTH, SHARE_CARD_HEIGHT);
+
+              ctx.fillStyle = accent;
+              ctx.fillRect(SHARE_CARD_PADDING, 27, 42, 3);
+
+              ctx.textBaseline = 'alphabetic';
+              ctx.fillStyle = text;
+              var fittedTitle = fitCanvasText(ctx, title, SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2 - 330, 29, 18, '700');
+              ctx.fillText(fittedTitle, SHARE_CARD_PADDING, 62);
+
+              ctx.fillStyle = muted;
+              var fittedSubtitle = fitCanvasText(ctx, subtitle, SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2 - 280, 13, 11, '500');
+              ctx.fillText(fittedSubtitle, SHARE_CARD_PADDING, 87);
+
+              ctx.font = "600 12px 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+              ctx.textAlign = 'right';
+              ctx.fillStyle = accent;
+              ctx.fillText(cardLabel, SHARE_CARD_WIDTH - SHARE_CARD_PADDING, 50);
+              ctx.textAlign = 'left';
+
+              var availableWidth = SHARE_CARD_WIDTH - SHARE_CARD_PADDING * 2;
+              var availableHeight = SHARE_CARD_HEIGHT - SHARE_CARD_HEADER - SHARE_CARD_PADDING;
+              var fit = Math.min(availableWidth / data.width, availableHeight / data.height);
+              var drawWidth = data.width * fit;
+              var drawHeight = data.height * fit;
+              var drawX = SHARE_CARD_PADDING + (availableWidth - drawWidth) / 2;
+              var drawY = SHARE_CARD_HEADER + (availableHeight - drawHeight) / 2;
+
+              ctx.strokeStyle = border;
+              ctx.lineWidth = 1;
+              ctx.strokeRect(drawX - 0.5, drawY - 0.5, drawWidth + 1, drawHeight + 1);
+              ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+              URL.revokeObjectURL(svgUrl);
+
+              canvas.toBlob(function (blob) {
+                if (!blob) reject(new Error('toBlob returned null for Share Card'));
+                else resolve(blob);
+              }, 'image/png');
+            } catch (error) {
+              URL.revokeObjectURL(svgUrl);
+              reject(error);
+            }
+          };
+          img.onerror = function (e) {
+            URL.revokeObjectURL(svgUrl);
+            reject(e);
+          };
+          img.src = svgUrl;
+        });
+      }
+
+      function rasterizeShareCard(options) {
+        options = options || {};
+        if (!options.variant) return renderShareCard();
+        if (options.variant !== 'route' && options.variant !== 'reach') {
+          return Promise.reject(new Error('Unknown Share Card variant: ' + options.variant));
+        }
+        if (options.variant === 'route') {
+          var routeSnapshot = Archify.routeProbe && Archify.routeProbe.exportSnapshot();
+          if (!routeSnapshot) return Promise.reject(new Error('Trace a route before exporting a Route Share Card'));
+          return renderShareCard({ routeSnapshot: routeSnapshot });
+        }
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        if (!snapshot) return Promise.reject(new Error('Trace authored reach before exporting a Reach Share Card'));
+        return renderShareCard({ reachSnapshot: snapshot });
+      }
+
+      function motionMimeType() {
+        if (typeof MediaRecorder === 'undefined') return '';
+        var candidates = [
+          'video/webm;codecs=vp9',
+          'video/webm;codecs=vp8',
+          'video/webm'
+        ];
+        for (var i = 0; i < candidates.length; i++) {
+          if (!MediaRecorder.isTypeSupported || MediaRecorder.isTypeSupported(candidates[i])) return candidates[i];
+        }
+        return '';
+      }
+
+      function canRecordMotion() {
+        var svg = document.querySelector('.diagram-container svg');
+        return !!(svg && svg.getAttribute('data-animation') === 'trace' &&
+          typeof MediaRecorder !== 'undefined' && motionMimeType() &&
+          typeof HTMLCanvasElement !== 'undefined' &&
+          typeof HTMLCanvasElement.prototype.captureStream === 'function');
+      }
+
+      // Record the live CSS animation without Puppeteer, ffmpeg, or a network
+      // dependency. SVG files loaded through Image are commonly rasterized as
+      // one cached bitmap, so repeatedly drawing that Image does not reliably
+      // advance its CSS animation. Keep one crisp static SVG background, then
+      // render an explicit time-varying signal scene over the real authored
+      // relationship geometry on every captured canvas frame.
+      function recordWebm(options) {
+        options = options || {};
+        if (!canRecordMotion()) {
+          return Promise.reject(new Error('WebM motion export requires a trace animation and browser MediaRecorder support'));
+        }
+        var duration = Math.max(250, Number(options.duration) || MOTION_DURATION);
+        var fps = Math.max(1, Number(options.fps) || MOTION_FPS);
+        var svg = document.querySelector('.diagram-container svg');
+        var vb = svg.viewBox.baseVal;
+        var scale = Math.min(1, 1280 / vb.width);
+        var data = serializeSvg(scale);
+        var sourceUrl = URL.createObjectURL(new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' }));
+
+        function createMotionScene(root) {
+          var rootMatrix = root.getCTM ? root.getCTM() : null;
+
+          function pointInRoot(element, point) {
+            if (!rootMatrix || !element.getCTM || !point.matrixTransform) return { x: point.x, y: point.y };
+            try {
+              var elementMatrix = element.getCTM();
+              if (!elementMatrix) return { x: point.x, y: point.y };
+              var mapped = point.matrixTransform(rootMatrix.inverse().multiply(elementMatrix));
+              return { x: mapped.x, y: mapped.y };
+            } catch (_) {
+              return { x: point.x, y: point.y };
+            }
+          }
+
+          function samplesFor(element) {
+            if (typeof element.getTotalLength !== 'function' || typeof element.getPointAtLength !== 'function') return [];
+            var length;
+            try { length = element.getTotalLength(); } catch (_) { return []; }
+            if (!Number.isFinite(length) || length <= 0) return [];
+            var count = Math.max(12, Math.min(72, Math.ceil(length / 12)));
+            var points = [];
+            for (var i = 0; i <= count; i++) {
+              points.push(pointInRoot(element, element.getPointAtLength(length * i / count)));
+            }
+            return points;
+          }
+
+          function authoredStep(element, fallback) {
+            var raw = element.style.getPropertyValue('--step') || getComputedStyle(element).getPropertyValue('--step');
+            var value = Number(raw);
+            return Number.isFinite(value) ? value : fallback;
+          }
+
+          var edges = Array.prototype.slice.call(root.querySelectorAll('[data-animate="edge"]')).map(function (element, index) {
+            var computed = getComputedStyle(element);
+            return {
+              points: samplesFor(element),
+              color: computed.stroke && computed.stroke !== 'none' ? computed.stroke : '#22d3ee',
+              width: Math.max(1.5, parseFloat(computed.strokeWidth) || 1.5),
+              delay: Math.min(12, authoredStep(element, index)) * 0.16
+            };
+          }).filter(function (edge) { return edge.points.length > 1; });
+
+          var nodes = Array.prototype.slice.call(root.querySelectorAll('[data-node-id][data-animate="node"]')).map(function (element, index) {
+            var box;
+            try { box = element.getBBox(); } catch (_) { return null; }
+            var painted = element.querySelector('[class*="c-"]') || element;
+            var computed = getComputedStyle(painted);
+            return {
+              x: box.x,
+              y: box.y,
+              width: box.width,
+              height: box.height,
+              color: computed.stroke && computed.stroke !== 'none' ? computed.stroke : '#22d3ee',
+              delay: Math.min(12, authoredStep(element, index)) * 0.16
+            };
+          }).filter(Boolean);
+
+          return { edges: edges, nodes: nodes, x: vb.x, y: vb.y, width: vb.width, height: vb.height };
+        }
+
+        function pointAlong(points, progress) {
+          var scaled = Math.max(0, Math.min(1, progress)) * (points.length - 1);
+          var index = Math.min(points.length - 2, Math.floor(scaled));
+          var mix = scaled - index;
+          return {
+            x: points[index].x + (points[index + 1].x - points[index].x) * mix,
+            y: points[index].y + (points[index + 1].y - points[index].y) * mix
+          };
+        }
+
+        function roundedRectPath(ctx, x, y, width, height, radius) {
+          var r = Math.max(0, Math.min(radius, width / 2, height / 2));
+          ctx.beginPath();
+          ctx.moveTo(x + r, y);
+          ctx.lineTo(x + width - r, y);
+          ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+          ctx.lineTo(x + width, y + height - r);
+          ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+          ctx.lineTo(x + r, y + height);
+          ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+          ctx.lineTo(x, y + r);
+          ctx.quadraticCurveTo(x, y, x + r, y);
+          ctx.closePath();
+        }
+
+        function drawMotionFrame(ctx, backgroundImage, motionScene, elapsed) {
+          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+          ctx.drawImage(backgroundImage, 0, 0, ctx.canvas.width, ctx.canvas.height);
+          ctx.save();
+          ctx.scale(ctx.canvas.width / motionScene.width, ctx.canvas.height / motionScene.height);
+          ctx.translate(-motionScene.x, -motionScene.y);
+
+          motionScene.edges.forEach(function (edge) {
+            var duration = 1.75;
+            var progress = (elapsed - edge.delay) / duration;
+            if (progress < 0 || progress > 1) return;
+            var head = Math.max(0, Math.min(1, progress));
+            var tail = Math.max(0, head - 0.24);
+            var opacity = Math.sin(Math.PI * Math.min(1, progress));
+
+            ctx.save();
+            ctx.strokeStyle = edge.color;
+            ctx.fillStyle = edge.color;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.lineWidth = Math.max(3.2, edge.width * 2.2);
+            ctx.globalAlpha = 0.42 + opacity * 0.5;
+            ctx.shadowColor = edge.color;
+            ctx.shadowBlur = 10;
+            ctx.beginPath();
+            for (var i = 0; i <= 14; i++) {
+              var trailPoint = pointAlong(edge.points, tail + (head - tail) * i / 14);
+              if (i === 0) ctx.moveTo(trailPoint.x, trailPoint.y);
+              else ctx.lineTo(trailPoint.x, trailPoint.y);
+            }
+            ctx.stroke();
+
+            var point = pointAlong(edge.points, head);
+            ctx.globalAlpha = 0.95;
+            ctx.beginPath();
+            ctx.arc(point.x, point.y, 4.8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+          });
+
+          motionScene.nodes.forEach(function (node) {
+            var progress = (elapsed - node.delay) / 2.6;
+            if (progress < 0 || progress > 1) return;
+            var pulse = Math.sin(Math.PI * progress);
+            if (pulse <= 0.02) return;
+            ctx.save();
+            ctx.strokeStyle = node.color;
+            ctx.lineWidth = 1.4 + pulse * 1.8;
+            ctx.globalAlpha = pulse * 0.5;
+            ctx.shadowColor = node.color;
+            ctx.shadowBlur = 12 * pulse;
+            var inset = 2 + pulse * 3;
+            roundedRectPath(ctx, node.x - inset, node.y - inset, node.width + inset * 2, node.height + inset * 2, 8);
+            ctx.stroke();
+            ctx.restore();
+          });
+
+          ctx.restore();
+        }
+
+        var motionScene = createMotionScene(svg);
+
+        return new Promise(function (resolve, reject) {
+          var backgroundImage = new Image();
+          backgroundImage.onload = function () {
+            var canvas = document.createElement('canvas');
+            canvas.width = Math.max(2, Math.round(data.width / 2) * 2);
+            canvas.height = Math.max(2, Math.round(data.height / 2) * 2);
+            var ctx = canvas.getContext('2d');
+            var stream = canvas.captureStream(fps);
+            var mime = motionMimeType();
+            var recorder;
+            try {
+              recorder = new MediaRecorder(stream, { mimeType: mime, videoBitsPerSecond: 6000000 });
+            } catch (err) {
+              URL.revokeObjectURL(sourceUrl);
+              stream.getTracks().forEach(function (track) { track.stop(); });
+              reject(err);
+              return;
+            }
+            var chunks = [];
+            var raf = 0;
+            var stopped = false;
+            var startedAt = performance.now();
+            function cleanup() {
+              if (stopped) return;
+              stopped = true;
+              cancelAnimationFrame(raf);
+              URL.revokeObjectURL(sourceUrl);
+              stream.getTracks().forEach(function (track) { track.stop(); });
+            }
+            function draw(now) {
+              var elapsed = Math.max(0, ((Number(now) || performance.now()) - startedAt) / 1000);
+              drawMotionFrame(ctx, backgroundImage, motionScene, elapsed);
+              raf = requestAnimationFrame(draw);
+            }
+            recorder.ondataavailable = function (event) {
+              if (event.data && event.data.size) chunks.push(event.data);
+            };
+            recorder.onerror = function (event) {
+              cleanup();
+              reject(event.error || new Error('MediaRecorder failed'));
+            };
+            recorder.onstop = function () {
+              cleanup();
+              var blob = new Blob(chunks, { type: recorder.mimeType || mime });
+              if (!blob.size) reject(new Error('MediaRecorder produced an empty WebM'));
+              else resolve(blob);
+            };
+            drawMotionFrame(ctx, backgroundImage, motionScene, 0);
+            recorder.start(250);
+            startedAt = performance.now();
+            raf = requestAnimationFrame(draw);
+            setTimeout(function () {
+              if (recorder.state === 'inactive') return;
+              // Chromium normally emits the final chunk during stop(), but
+              // some embedded browser shells need an explicit encoder flush
+              // first. Keep the short grace window bounded and harmless for
+              // browsers that already delivered timeslice chunks.
+              try { recorder.requestData(); } catch (_) {}
+              setTimeout(function () {
+                if (recorder.state !== 'inactive') recorder.stop();
+              }, 120);
+            }, duration);
+          };
+          backgroundImage.onerror = function () {
+            URL.revokeObjectURL(sourceUrl);
+            reject(new Error('SVG background could not be loaded for WebM export'));
+          };
+          backgroundImage.src = sourceUrl;
+        });
+      }
+
+      var menu = document.getElementById('export-menu');
+      var btn = document.getElementById('btn-export');
+      var routeShareItem = menu.querySelector('button[data-action="route-share-card"]');
+      var reachShareItem = menu.querySelector('button[data-action="reach-share-card"]');
+      var items = function () {
+        return Array.prototype.slice.call(menu.querySelectorAll('button[role="menuitem"]'));
+      };
+
+      function syncRouteShareItem() {
+        var snapshot = Archify.routeProbe && typeof Archify.routeProbe.exportSnapshot === 'function'
+          ? Archify.routeProbe.exportSnapshot()
+          : null;
+        routeShareItem.hidden = !snapshot;
+        routeShareItem.disabled = !snapshot;
+        return snapshot;
+      }
+
+      function syncReachShareItem() {
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        reachShareItem.hidden = !snapshot;
+        reachShareItem.disabled = !snapshot;
+        return snapshot;
+      }
+
+      // ---- Clipboard support ----------------------------------------------
+      function canCopyImage() {
+        return typeof ClipboardItem !== 'undefined' &&
+               navigator.clipboard &&
+               typeof navigator.clipboard.write === 'function';
+      }
+
+      // ---- Raster format detection ----------------------------------------
+      // canvas.toBlob('image/webp') silently returns a PNG on browsers without
+      // WebP encoding (older Safari), so detect explicitly.
+      function supports(format) {
+        if (format === 'share-card') return true;
+        if (format === 'svg' || format === 'png' || format === 'drawio' || format === 'drawio-strict') return true;
+        if (format === 'webm') return canRecordMotion();
+        var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+        try {
+          var c = document.createElement('canvas');
+          c.width = c.height = 2;
+          return c.toDataURL(mime).indexOf('data:' + mime) === 0;
+        } catch (_) { return false; }
+      }
+
+      // Gray out unsupported items.
+      items().forEach(function (it) {
+        if (it.dataset.format && !supports(it.dataset.format)) {
+          it.disabled = true;
+          it.title = 'Not supported by this browser';
+        }
+        if ((it.dataset.action === 'copy' || it.dataset.action === 'copy-share-card') && !canCopyImage()) {
+          it.disabled = true;
+          it.title = 'Clipboard image write not supported by this browser';
+        }
+      });
+
+      // ---- Toast ----------------------------------------------------------
+      // A live region only announces CHANGES to an existing node, so the toast
+      // element is created once up front and updated in place.
+      var toastEl = document.createElement('div');
+      toastEl.className = 'archify-toast';
+      toastEl.setAttribute('role', 'status');
+      document.body.appendChild(toastEl);
+      var toastTimer = null;
+
+      function toast(msg) {
+        toastEl.textContent = '';
+        requestAnimationFrame(function () {
+          toastEl.textContent = msg;
+          toastEl.classList.add('show');
+        });
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, 1500);
+      }
+
+      function open(focusLast) {
+        if (Archify.preset && Archify.preset.isOpen()) Archify.preset.close(false);
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        syncRouteShareItem();
+        syncReachShareItem();
+        menu.classList.add('open');
+        btn.setAttribute('aria-expanded', 'true');
+        var available = items().filter(function (i) { return !i.hidden && !i.disabled; });
+        var target = focusLast ? available[available.length - 1] : available[0];
+        if (target) target.focus();
+      }
+      function close(focusTrigger) {
+        menu.classList.remove('open');
+        btn.setAttribute('aria-expanded', 'false');
+        if (focusTrigger) btn.focus();
+      }
+      function isOpen() { return menu.classList.contains('open'); }
+
+      btn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        if (isOpen()) close(false);
+        else open();
+      });
+      // APG menu-button pattern: ArrowDown/ArrowUp on the trigger opens the menu.
+      btn.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          if (!isOpen()) open(e.key === 'ArrowUp');
+        }
+      });
+      document.addEventListener('click', function (e) {
+        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      });
+
+      // Keyboard navigation inside the menu.
+      //   Menu items: Up/Down, Home/End.
+      //   Esc closes + returns focus to trigger; Tab closes.
+      menu.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+        if (e.key === 'Tab')    { close(false); return; }
+
+        var available = items().filter(function (i) { return !i.hidden && !i.disabled; });
+        var current = available.indexOf(document.activeElement);
+        switch (e.key) {
+          case 'ArrowDown':
+            e.preventDefault();
+            if (available.length) available[(current + 1 + available.length) % available.length].focus();
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (available.length) available[(current - 1 + available.length) % available.length].focus();
+            break;
+          case 'Home':
+            e.preventDefault();
+            if (available[0]) available[0].focus();
+            break;
+          case 'End':
+            e.preventDefault();
+            if (available.length) available[available.length - 1].focus();
+            break;
+        }
+      });
+
+      // ---- draw.io export -------------------------------------------------
+      // Converts the canonical SVG into a draw.io mxGraphModel XML so the
+      // diagram can be opened and further edited in draw.io. Every edge is
+      // bound to its source/target vertex cell (dragging a box keeps its
+      // connections), and interior route waypoints are preserved. Mirrors
+      // the Node-side converter in renderers/shared/svg-to-drawio.mjs.
+      var DRAWIO_KIND_STYLE = {
+        frontend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        backend: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        database: 'shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;',
+        cloud: 'ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        security: 'shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        messagebus: 'shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_STATE_STYLE = {
+        start: 'ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;',
+        active: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;',
+        waiting: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;',
+        decision: 'rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;',
+        success: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;strokeWidth=2;',
+        failure: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;strokeWidth=2;',
+        neutral: 'rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;',
+        external: 'shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;'
+      };
+      var DRAWIO_FRAME_STYLE = {
+        region: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#9673a6;dashed=0;verticalAlign=top;fontStyle=1;',
+        'security-group': 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#d79b00;dashed=1;verticalAlign=top;fontStyle=1;',
+        lane: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;',
+        'exception-lane': 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;',
+        stage: 'rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=center;fontStyle=1;',
+        group: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;',
+        segment: 'rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;'
+      };
+      function drawioEscapeAttr(v) {
+        return String(v == null ? '' : v).replace(/[&"<>']/g, function (ch) {
+          return ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : '&#39;';
+        });
+      }
+      function drawioAttr(tag, name) {
+        var m = tag.match(new RegExp('\\s' + name + '="([^"]*)"'));
+        return m ? m[1] : null;
+      }
+      function drawioParsePoints(value) {
+        if (!value) return [];
+        return value.split(';').filter(Boolean).map(function (pair) {
+          var c = pair.split(',').map(Number);
+          return [c[0], c[1]];
+        });
+      }
+      function drawioFindGroupClose(svg, openIndex) {
+        var depth = 1, i = openIndex;
+        while (depth > 0 && i < svg.length) {
+          var no = svg.indexOf('<g', i + 1), nc = svg.indexOf('</g>', i + 1);
+          if (nc === -1) return -1;
+          if (no !== -1 && no < nc) { depth += 1; i = no; }
+          else { depth -= 1; i = nc; }
+        }
+        return i;
+      }
+      // Parse the self-describing SVG into {viewBox, nodes, edges, boundaries, lifelines}.
+      function drawioParseSvg(svg) {
+        var vb = svg.match(new RegExp('<' + 'svg[^>]*\\bviewBox="0 0 (\\d+\\.?\\d*) (\\d+\\.?\\d*)"'));
+        var viewBox = vb ? [parseFloat(vb[1]), parseFloat(vb[2])] : [1000, 700];
+        // Nodes: <g id="node-..." data-node-id=...> with first inner <rect>.
+        var nodes = [];
+        var nodeMatches = Array.from(svg.matchAll(/<g\s+id="node-[^"]*"[^>]*\bdata-node-id="([^"]*)"[^>]*>/g));
+        nodeMatches.forEach(function (m) {
+          var open = m[0];
+          var ci = drawioFindGroupClose(svg, m.index);
+          var inner = svg.slice(m.index + open.length, ci);
+          var rm = inner.match(/<rect\b[^>]*>/);
+          if (!rm) return;
+          var box = rm[0];
+          nodes.push({
+            id: m[1],
+            kind: drawioAttr(open, 'data-node-kind') || 'backend',
+            label: drawioAttr(open, 'data-node-label') || '',
+            sublabel: drawioAttr(open, 'data-node-sublabel'),
+            tag: drawioAttr(open, 'data-node-tag'),
+            x: parseFloat(drawioAttr(box, 'x') || '0'),
+            y: parseFloat(drawioAttr(box, 'y') || '0'),
+            width: parseFloat(drawioAttr(box, 'width') || '0'),
+            height: parseFloat(drawioAttr(box, 'height') || '0')
+          });
+        });
+        // Edges: <path> with data-composition-points.
+        var edges = [];
+        var edgeMatches = Array.from(svg.matchAll(/<path\b[^>]*\bdata-composition-points="([^"]*)"[^>]*>/g));
+        edgeMatches.forEach(function (m) {
+          var tag = m[0];
+          var points = drawioParsePoints(m[1]);
+          if (points.length < 2) return;
+          var from = drawioAttr(tag, 'data-edge-from') || drawioAttr(tag, 'data-composition-edge-from');
+          var to = drawioAttr(tag, 'data-edge-to') || drawioAttr(tag, 'data-composition-edge-to');
+          if (!from || !to) return;
+          edges.push({
+            from: from, to: to,
+            label: drawioAttr(tag, 'data-edge-label') || drawioAttr(tag, 'data-composition-edge-label'),
+            id: drawioAttr(tag, 'data-edge-id') || drawioAttr(tag, 'data-composition-edge-id'),
+            points: points
+          });
+        });
+        // Boundaries: <rect data-graph-role="structural-frame">.
+        var boundaries = [];
+        var bMatches = Array.from(svg.matchAll(/<rect\b[^>]*\bdata-graph-role="structural-frame"[^>]*>/g));
+        bMatches.forEach(function (m) {
+          var tag = m[0];
+          var w = parseFloat(drawioAttr(tag, 'width') || '0');
+          var h = parseFloat(drawioAttr(tag, 'height') || '0');
+          if (w <= 0 || h <= 0) return;
+          var after = svg.slice(m.index + tag.length, m.index + tag.length + 300);
+          var tm = after.match(/<text\b[^>]*>([^<]*)<\/text>/);
+          boundaries.push({
+            kind: drawioAttr(tag, 'data-composition-frame-kind') || 'boundary',
+            label: tm ? tm[1].trim() : '',
+            x: parseFloat(drawioAttr(tag, 'x') || '0'),
+            y: parseFloat(drawioAttr(tag, 'y') || '0'),
+            width: w, height: h
+          });
+        });
+        // Sequence lifelines: vertical dashed paths.
+        var lifelines = [];
+        var llMatches = Array.from(svg.matchAll(/<path\b[^>]*\bd="M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)"[^>]*stroke-dasharray/g));
+        llMatches.forEach(function (m) {
+          lifelines.push({ x: parseFloat(m[1]), y1: parseFloat(m[2]), y2: parseFloat(m[3]) });
+        });
+        return { viewBox: viewBox, nodes: nodes, edges: edges, boundaries: boundaries, lifelines: lifelines };
+      }
+      function drawioNodeStyle(node) {
+        // Lifecycle states carry their own type enum.
+        var diagramType = document.documentElement.getAttribute('data-diagram-type') || '';
+        if (diagramType === 'lifecycle' && DRAWIO_STATE_STYLE[node.kind]) return DRAWIO_STATE_STYLE[node.kind];
+        return DRAWIO_KIND_STYLE[node.kind] || DRAWIO_KIND_STYLE.backend;
+      }
+      function drawioBuildXml(parsed) {
+        var vw = parsed.viewBox[0], vh = parsed.viewBox[1];
+        // Resolve container parents: smallest boundary containing node center.
+        // Returns parentId + the boundary's origin (draw.io child coords are
+        // RELATIVE to their parent, so we must subtract the parent origin).
+        var parents = {};
+        var sorted = parsed.boundaries.map(function (b, i) {
+          return Object.assign({}, b, { drawioId: 'boundary-' + i });
+        }).sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+        parsed.nodes.forEach(function (n) {
+          var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+          for (var i = 0; i < sorted.length; i++) {
+            var b = sorted[i];
+            if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) {
+              parents[n.id] = { drawioId: b.drawioId, ox: b.x, oy: b.y }; break;
+            }
+          }
+        });
+        var vertexIds = {};
+        parsed.nodes.forEach(function (n) { vertexIds[n.id] = true; });
+        var lines = [];
+        lines.push('<?xml version="1.0" encoding="UTF-8"?>');
+        lines.push('<' + 'mxGraphModel dx="' + Math.round(vw) + '" dy="' + Math.round(vh) + '" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + Math.round(vw) + '" pageHeight="' + Math.round(vh) + '" math="0" shadow="0">');
+        lines.push('  <root>');
+        lines.push('    <mxCell id="0"/>');
+        lines.push('    <mxCell id="1" parent="0"/>');
+        // Boundaries first (containers).
+        parsed.boundaries.forEach(function (b, i) {
+          var style = DRAWIO_FRAME_STYLE[b.kind] || DRAWIO_FRAME_STYLE.region;
+          lines.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.label || b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          lines.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Nodes.
+        parsed.nodes.forEach(function (n) {
+          var style = drawioNodeStyle(n);
+          var pinfo = parents[n.id];
+          var parentId = pinfo ? pinfo.drawioId : '1';
+          var relX = n.x - (pinfo ? pinfo.ox : 0);
+          var relY = n.y - (pinfo ? pinfo.oy : 0);
+          var parts = [n.label, n.sublabel, n.tag].filter(Boolean);
+          var htmlVal = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:9px">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          lines.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(htmlVal) + '" style="' + style + '" vertex="1" parent="' + parentId + '">');
+          lines.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          lines.push('    </mxCell>');
+        });
+        // Sequence lifelines.
+        parsed.lifelines.forEach(function (ll) {
+          var id = 'lifeline-' + Math.round(ll.x) + '-' + Math.round(ll.y1);
+          lines.push('    <mxCell id="' + id + '" value="" style="endArrow=none;html=1;strokeColor=#999999;dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          lines.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        // Edges: real source/target binding + fixed interior waypoints.
+        parsed.edges.forEach(function (edge, i) {
+          if (!vertexIds[edge.from] || !vertexIds[edge.to]) return;
+          var id = edge.id ? 'edge-' + edge.id : 'edge-' + i;
+          var value = edge.label ? drawioEscapeAttr(edge.label) : '';
+          lines.push('    <mxCell id="' + id + '" value="' + value + '" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-' + edge.from + '" target="node-' + edge.to + '">');
+          lines.push('      <mxGeometry relative="1" as="geometry">');
+          // Interior waypoints only (draw.io computes endpoints from vertices).
+          if (edge.points.length > 2) {
+            lines.push('        <Array as="points">');
+            for (var p = 1; p < edge.points.length - 1; p++) {
+              lines.push('          <mxPoint x="' + Math.round(edge.points[p][0]) + '" y="' + Math.round(edge.points[p][1]) + '"/>');
+            }
+            lines.push('        </Array>');
+          }
+          lines.push('      </mxGeometry>');
+          lines.push('    </mxCell>');
+        });
+        lines.push('  </root>');
+        lines.push('</mxGraphModel>');
+        return lines.join('\n');
+      }
+      function archifySvgToDrawio(svgString) {
+        return drawioBuildXml(drawioParseSvg(svgString));
+      }
+
+      // ---- draw.io strict export -----------------------------------------
+      // 1:1 fidelity variant: reads the LIVE SVG computed styles (exact
+      // composited fill/stroke colors, same corner radii — arcSize = 2 ×
+      // radius on edges — same dash patterns) but always force-resolves the
+      // artifact's LIGHT theme, so the exported file never depends on the
+      // reader's current theme or the browser preference behind it.
+      function drawioParseColor(v) {
+        var s = String(v || '').trim();
+        var m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+        if (m) return { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] };
+        // Theme variables come back as their authored tokens (hex), while
+        // computed fill/stroke values arrive as rgb()/rgba().
+        var h = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (h) {
+          var hex = h[1].length === 3 ? h[1].split('').map(function (c) { return c + c; }).join('') : h[1];
+          return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), a: 1 };
+        }
+        return null;
+      }
+      function drawioHex(c) {
+        var h = function (n) { var s = Math.round(Math.max(0, Math.min(255, n))).toString(16); return s.length < 2 ? '0' + s : s; };
+        return '#' + h(c.r) + h(c.g) + h(c.b);
+      }
+      function drawioBlend(fg, base) {
+        return { r: fg.r * fg.a + base.r * (1 - fg.a), g: fg.g * fg.a + base.g * (1 - fg.a), b: fg.b * fg.a + base.b * (1 - fg.a), a: 1 };
+      }
+      function drawioCssColor(v, base) {
+        var c = drawioParseColor(v);
+        if (!c) return null;
+        return drawioHex(c.a >= 1 ? c : drawioBlend(c, base));
+      }
+      function drawioRadiusFromD(d) {
+        var m = String(d || '').match(/L\s*(-?[\d.]+)\s+(-?[\d.]+)\s+Q\s*(-?[\d.]+)\s+(-?[\d.]+)/);
+        return m ? Math.round(Math.hypot(+m[3] - +m[1], +m[4] - +m[2])) : 0;
+      }
+      // Run `fn` with the artifact forced to its light theme and restore the
+      // reader's theme afterwards. The swap and restore happen inside one
+      // synchronous task, so the page never repaints in between; it only
+      // affects how the style reads below resolve.
+      function withLightTheme(fn) {
+        var root = document.documentElement;
+        var prev = root.getAttribute('data-theme');
+        root.setAttribute('data-theme', 'light');
+        try {
+          return fn();
+        } finally {
+          if (prev === null) root.removeAttribute('data-theme');
+          else root.setAttribute('data-theme', prev);
+        }
+      }
+      function drawioStrictPalette(svgEl) {
+        var cs = getComputedStyle(svgEl);
+        // Fallbacks are the light-theme values: the export is always light.
+        var mask = drawioParseColor(cs.getPropertyValue('--mask').trim()) || { r: 255, g: 255, b: 255, a: 1 };
+        var bg = drawioParseColor(cs.getPropertyValue('--bg').trim()) || { r: 248, g: 250, b: 252, a: 1 };
+        var text = drawioHex(drawioParseColor(cs.getPropertyValue('--text').trim()) || { r: 15, g: 23, b: 42, a: 1 });
+        var muted = drawioHex(drawioParseColor(cs.getPropertyValue('--text-muted').trim()) || { r: 100, g: 116, b: 139, a: 1 });
+        return {
+          mask: drawioHex(mask), maskC: mask, bg: drawioHex(bg), bgC: bg, text: text, textMuted: muted,
+          of: function (el, base) {
+            var s = getComputedStyle(el);
+            var b = base === 'mask' ? mask : bg;
+            var out = {};
+            var f = drawioCssColor(s.fill, b);
+            if (f) out.fill = f;
+            var st = drawioCssColor(s.stroke, b);
+            if (st) out.stroke = st;
+            var dash = s.strokeDasharray;
+            if (dash && dash !== 'none') {
+              var parts = dash.split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+              if (parts.length) out.dash = parts.join(' ');
+            }
+            return out;
+          }
+        };
+      }
+      function buildStrictXmlLight() {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- nodes -----------------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+            else if (fillRect && cls !== 'c-mask' && +r.getAttribute('width') > +fillRect.getAttribute('width')) fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            tag: g.getAttribute('data-node-tag'),
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- boundaries ------------------------------------------------------
+        var boundaries = [];
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          boundaries.push({
+            kind: r.getAttribute('data-composition-frame-kind') || 'boundary',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r, textEl: null
+          });
+        });
+        // Boundary labels: the first <text> sibling following each frame rect.
+        boundaries.forEach(function (b) {
+          var t = b.el.nextElementSibling;
+          if (t && t.tagName.toLowerCase() === 'text') b.textEl = t;
+        });
+        // -- edges -----------------------------------------------------------
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          edges.push({
+            from: from, to: to,
+            label: p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label'),
+            el: p, pts: pts,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            radius: drawioRadiusFromD(p.getAttribute('d'))
+          });
+        });
+        // -- edge labels (positioned <text> in data-detail groups) -----------
+        var edgeLabels = [];
+        svgEl.querySelectorAll('g[data-detail="context"][data-edge-from]').forEach(function (g) {
+          var t = g.querySelector('text');
+          if (!t) return;
+          edgeLabels.push({
+            from: g.getAttribute('data-edge-from'), to: g.getAttribute('data-edge-to'),
+            x: +t.getAttribute('x'), y: +t.getAttribute('y') - 4, el: t
+          });
+        });
+        // -- lifelines -------------------------------------------------------
+        var lifelines = [];
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (!m) return;
+          if (getComputedStyle(p).strokeDasharray === 'none') return;
+          lifelines.push({ x: +m[1], y1: +m[2], y2: +m[3], el: p, sw: +p.getAttribute('stroke-width') || 0.8 });
+        });
+        // -- helpers ---------------------------------------------------------
+        function parents() {
+          var sorted = boundaries.map(function (b, i) { return Object.assign({}, b, { id: 'boundary-' + i }); })
+            .sort(function (a, b) { return a.width * a.height - b.width * b.height; });
+          var map = {};
+          nodes.forEach(function (n) {
+            var cx = n.x + n.width / 2, cy = n.y + n.height / 2;
+            for (var i = 0; i < sorted.length; i++) {
+              var b = sorted[i];
+              if (cx >= b.x && cx <= b.x + b.width && cy >= b.y && cy <= b.y + b.height) { map[n.id] = b; break; }
+            }
+          });
+          return map;
+        }
+        var pm = parents();
+        function fractionAlong(pts, target) {
+          var total = 0, segs = [];
+          for (var i = 0; i < pts.length - 1; i++) {
+            var len = Math.hypot(pts[i + 1][0] - pts[i][0], pts[i + 1][1] - pts[i][1]) || 1;
+            segs.push({ ax: pts[i][0], ay: pts[i][1], dx: pts[i + 1][0] - pts[i][0], dy: pts[i + 1][1] - pts[i][1], len: len, start: total });
+            total += len;
+          }
+          var best = 1e30, result = 0.5;
+          segs.forEach(function (s) {
+            var t = Math.max(0, Math.min(1, ((target[0] - s.ax) * s.dx + (target[1] - s.ay) * s.dy) / (s.len * s.len)));
+            var dist = Math.hypot(target[0] - (s.ax + t * s.dx), target[1] - (s.ay + t * s.dy));
+            if (dist < best) { best = dist; result = (s.start + t * s.len) / (total || 1); }
+          });
+          return Math.max(0, Math.min(1, result));
+        }
+        function borderFrac(pt, node) {
+          if (!node) return null;
+          var f = function (v) { return v < 0.04 ? 0 : v > 0.96 ? 1 : Math.round(v * 100) / 100; };
+          return [f((pt[0] - node.x) / node.width), f((pt[1] - node.y) / node.height)];
+        }
+        // -- emit ------------------------------------------------------------
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0" background="' + P.bg + '">');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        boundaries.forEach(function (b, i) {
+          var c = P.of(b.el, 'bg');
+          var tc = b.textEl ? P.of(b.textEl, 'bg') : null;
+          var left = b.kind === 'lane' || b.kind === 'exception-lane' || b.kind === 'segment';
+          var style = ['rounded=' + (b.rx > 0 ? 1 : 0), b.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(b.rx) : '',
+            'fillColor=' + (c.fill || 'none'), 'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + b.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (tc && tc.fill ? tc.fill : P.textMuted), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', left ? 'align=left;spacingLeft=8' : ''].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(b.textEl ? b.textEl.textContent : b.kind) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(b.x) + '" y="' + Math.round(b.y) + '" width="' + Math.round(b.width) + '" height="' + Math.round(b.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = P.of(n.fillRect, 'mask');
+          var p = pm[n.id];
+          var relX = n.x - (p ? p.x : 0), relY = n.y - (p ? p.y : 0);
+          var html = n.label;
+          if (n.sublabel || n.tag) {
+            html = '<b>' + n.label + '</b><br/>'
+              + (n.sublabel ? '<font style="font-size:8px" color="' + P.textMuted + '">' + n.sublabel + '</font>' : '')
+              + (n.sublabel && n.tag ? '<br/>' : '')
+              + (n.tag ? '<font style="font-size:7px" color="' + (c.stroke || P.text) + '">' + n.tag + '</font>' : '');
+          }
+          var style = ['rounded=' + (n.rx > 0 ? 1 : 0), n.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(n.rx) : '',
+            'fillColor=' + (c.fill || '#d5e8d4'), 'strokeColor=' + (c.stroke || '#82b366'), 'strokeWidth=' + n.sw,
+            'fontColor=' + P.text, 'fontSize=11', 'fontFamily=' + FONT, 'whiteSpace=wrap', 'html=1', 'verticalAlign=middle']
+            .filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="' + (p ? p.id : '1') + '">');
+          L.push('      <mxGeometry x="' + Math.round(relX) + '" y="' + Math.round(relY) + '" width="' + Math.round(n.width) + '" height="' + Math.round(n.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        lifelines.forEach(function (ll, i) {
+          var c = P.of(ll.el, 'bg');
+          L.push('    <mxCell id="lifeline-' + i + '" value="" style="endArrow=none;html=1;strokeColor=' + (c.stroke || '#999999') + ';strokeWidth=' + ll.sw + ';dashed=1;dashPattern=3 7;" edge="1" parent="1">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y1) + '" as="sourcePoint"/>');
+          L.push('        <mxPoint x="' + Math.round(ll.x) + '" y="' + Math.round(ll.y2) + '" as="targetPoint"/>');
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = P.of(e.el, 'bg');
+          var lbl = edgeLabels.find(function (l) { return l.from === e.from && l.to === e.to; });
+          var lc = lbl ? P.of(lbl.el, 'bg') : null;
+          var style = ['edgeStyle=none', e.radius > 0 ? 'rounded=1;arcSize=' + e.radius * 2 : 'rounded=0',
+            'strokeColor=' + (c.stroke || '#666666'), 'strokeWidth=' + e.sw,
+            c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (lc && lc.fill ? lc.fill : P.textMuted), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + P.mask, 'html=1'].filter(Boolean).join(';');
+          var exit = borderFrac(e.pts[0], src), entry = borderFrac(e.pts[e.pts.length - 1], tgt);
+          if (exit) style += ';exitX=' + exit[0] + ';exitY=' + exit[1] + ';exitDx=0;exitDy=0';
+          if (entry) style += ';entryX=' + entry[0] + ';entryY=' + entry[1] + ';entryDx=0;entryDy=0';
+          L.push('    <mxCell id="edge-' + i + '" value="' + (e.label ? drawioEscapeAttr(e.label) : '') + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          L.push('      <mxGeometry relative="1" as="geometry">');
+          if (lbl && e.label) {
+            var t = fractionAlong(e.pts, [lbl.x, lbl.y]);
+            L.push('        <mxGeometry x="' + (2 * t - 1).toFixed(3) + '" y="0" relative="1" as="geometry"/>');
+          }
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+
+      // ---- draw.io sequence export ----------------------------------------
+      // Sequence geometry is a timeline, not a node graph: participants are
+      // exported as draw.io UML lifelines spanning the full timeline so each
+      // message's authored y survives as an exit/entry fraction, activation
+      // bars become lifeline children, and segment bands keep their labels.
+      // Mirrors buildDrawioXmlSequence in renderers/shared/svg-to-drawio.mjs.
+      function drawioKindPair(kind) {
+        var style = DRAWIO_KIND_STYLE[kind] || DRAWIO_KIND_STYLE.backend;
+        var fill = style.match(/fillColor=(#[0-9a-f]{6})/i);
+        var stroke = style.match(/strokeColor=(#[0-9a-f]{6})/i);
+        return { fill: fill ? fill[1] : null, stroke: stroke ? stroke[1] : null };
+      }
+      function drawioBuildSequenceXml(strict) {
+        var svgEl = document.querySelector('.diagram-container svg');
+        if (!svgEl) throw new Error('No diagram SVG found.');
+        var P = drawioStrictPalette(svgEl);
+        var FONT = 'JetBrains Mono,ui-monospace,Menlo,monospace';
+        var vb = (svgEl.getAttribute('viewBox') || '0 0 1000 700').split(/\s+/);
+        var vw = Math.round(+vb[2]), vh = Math.round(+vb[3]);
+        // -- participants ---------------------------------------------------
+        var nodes = [], nodeById = {};
+        svgEl.querySelectorAll('g[id^="node-"]').forEach(function (g) {
+          var fillRect = null;
+          g.querySelectorAll('rect').forEach(function (r) {
+            var cls = r.getAttribute('class') || '';
+            if (!fillRect && cls.indexOf('c-') === 0 && cls !== 'c-mask') fillRect = r;
+          });
+          var geom = fillRect || g.querySelector('rect');
+          if (!geom) return;
+          var n = {
+            id: g.getAttribute('data-node-id'),
+            label: g.getAttribute('data-node-label') || '',
+            sublabel: g.getAttribute('data-node-sublabel'),
+            kind: g.getAttribute('data-node-kind') || 'backend',
+            x: +geom.x.baseVal.value, y: +geom.y.baseVal.value,
+            width: +geom.width.baseVal.value, height: +geom.height.baseVal.value,
+            rx: +(fillRect ? fillRect.getAttribute('rx') : 0) || 0,
+            sw: +(fillRect ? fillRect.getAttribute('stroke-width') : 1.5) || 1.5,
+            fillRect: fillRect || geom
+          };
+          nodes.push(n); nodeById[n.id] = n;
+        });
+        // -- timeline span: deepest dashed lifeline foot ---------------------
+        var footY = 0;
+        svgEl.querySelectorAll('path').forEach(function (p) {
+          if (p.hasAttribute('data-composition-points')) return;
+          var d = p.getAttribute('d') || '';
+          var m = d.match(/^M\s*(\d+\.?\d*)\s+(\d+\.?\d*)\s+L\s*\1\s+(\d+\.?\d*)$/);
+          if (m && getComputedStyle(p).strokeDasharray !== 'none') footY = Math.max(footY, +m[3]);
+        });
+        if (!footY) {
+          nodes.forEach(function (n) { footY = Math.max(footY, n.y + n.height + 60); });
+          if (!footY) footY = 400;
+        }
+        // -- segment bands + labels (labels dodge messages, live elsewhere) --
+        var segments = [];
+        var segLabels = {};
+        svgEl.querySelectorAll('g[data-graph-role="segment-label"]').forEach(function (g) {
+          segLabels[g.getAttribute('data-segment-id')] = (g.textContent || '').trim();
+        });
+        svgEl.querySelectorAll('rect[data-graph-role="structural-frame"]').forEach(function (r) {
+          var sid = r.getAttribute('data-composition-frame-id');
+          segments.push({
+            label: sid != null && segLabels[sid] ? segLabels[sid] : '',
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- activation bars -------------------------------------------------
+        var activations = [];
+        svgEl.querySelectorAll('rect[data-graph-role="activation"]').forEach(function (r) {
+          var cls = r.getAttribute('class') || '';
+          if (!cls || cls === 'c-mask') return;
+          activations.push({
+            participant: r.getAttribute('data-activation-participant'),
+            x: +r.x.baseVal.value, y: +r.y.baseVal.value,
+            width: +r.width.baseVal.value, height: +r.height.baseVal.value,
+            rx: +r.getAttribute('rx') || 0, sw: +r.getAttribute('stroke-width') || 1,
+            el: r
+          });
+        });
+        // -- messages: label on the focus group, dash via computed style ----
+        var edges = [];
+        svgEl.querySelectorAll('path[data-composition-points]').forEach(function (p) {
+          var from = p.getAttribute('data-edge-from') || p.getAttribute('data-composition-edge-from');
+          var to = p.getAttribute('data-edge-to') || p.getAttribute('data-composition-edge-to');
+          if (!from || !to) return;
+          var pts = (p.getAttribute('data-composition-points') || '').split(';').filter(Boolean).map(function (pair) {
+            var c = pair.split(',');
+            return [+c[0], +c[1]];
+          });
+          if (pts.length < 2) return;
+          var label = p.getAttribute('data-edge-label') || p.getAttribute('data-composition-edge-label');
+          var owner = p.parentElement;
+          if (!label && owner && owner.tagName.toLowerCase() === 'g') label = owner.getAttribute('data-edge-label');
+          var dashParts = (getComputedStyle(p).strokeDasharray || '').split(/[\s,]+/).map(Number).filter(function (n) { return n > 0; });
+          edges.push({
+            from: from, to: to, id: p.getAttribute('data-edge-id') || p.getAttribute('data-composition-edge-id'),
+            label: label || '', pts: pts, el: p,
+            sw: +p.getAttribute('stroke-width') || 1.5,
+            dash: dashParts.length ? dashParts.join(' ') : ''
+          });
+        });
+        // -- emit ------------------------------------------------------------
+        var colorsOf = function (el, base) { return strict ? P.of(el, base) : null; };
+        var L = [];
+        L.push('<?xml version="1.0" encoding="UTF-8"?>');
+        L.push('<' + 'mxGraphModel dx="' + vw + '" dy="' + vh + '" grid="' + (strict ? 0 : 1) + '" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="' + vw + '" pageHeight="' + vh + '" math="0" shadow="0"' + (strict ? ' background="' + P.bg + '"' : '') + '>');
+        L.push('  <root>');
+        L.push('    <mxCell id="0"/>');
+        L.push('    <mxCell id="1" parent="0"/>');
+        segments.forEach(function (s, i) {
+          var c = colorsOf(s.el, 'bg');
+          var style = ['rounded=' + (s.rx > 0 ? 1 : 0), s.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(s.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : 'none'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#b0b0b0'), 'strokeWidth=' + s.sw,
+            c && c.dash ? 'dashed=1;dashPattern=' + c.dash : '',
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=9', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1', 'verticalAlign=top', 'align=left', 'spacingLeft=8'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="boundary-' + i + '" value="' + drawioEscapeAttr(s.label) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(s.x) + '" y="' + Math.round(s.y) + '" width="' + Math.round(s.width) + '" height="' + Math.round(s.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        nodes.forEach(function (n) {
+          var c = colorsOf(n.fillRect, 'mask') || (strict ? null : drawioKindPair(n.kind));
+          var parts = [n.label, n.sublabel].filter(Boolean);
+          var html = parts.length > 1
+            ? '<b>' + parts[0] + '</b><br/><font style="font-size:8px" color="' + (strict ? P.textMuted : '#666666') + '">' + parts.slice(1).join(' · ') + '</font>'
+            : n.label;
+          var style = ['shape=umlLifeline', 'perimeter=lifelinePerimeter', 'size=' + Math.round(n.height),
+            'container=1', 'collapsible=0', 'recursiveResize=0', 'outlineConnect=0',
+            c && c.fill ? 'fillColor=' + c.fill : '',
+            c && c.stroke ? 'strokeColor=' + c.stroke : '',
+            'strokeWidth=' + n.sw,
+            'fontColor=' + (strict ? P.text : '#000000'), 'fontSize=11', 'fontFamily=' + FONT,
+            'whiteSpace=wrap', 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="node-' + n.id + '" value="' + drawioEscapeAttr(html) + '" style="' + style + '" vertex="1" parent="1">');
+          L.push('      <mxGeometry x="' + Math.round(n.x) + '" y="' + Math.round(n.y) + '" width="' + Math.round(n.width) + '" height="' + Math.round(footY - n.y) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        activations.forEach(function (a, i) {
+          var participant = nodeById[a.participant];
+          if (!participant) return;
+          var c = colorsOf(a.el, 'mask') || (strict ? null : drawioKindPair(participant.kind));
+          var style = ['rounded=' + (a.rx > 0 ? 1 : 0), a.rx > 0 ? 'absoluteArcSize=1;arcSize=' + Math.round(a.rx) : '',
+            'fillColor=' + (c && c.fill ? c.fill : '#ffffff'), 'strokeColor=' + (c && c.stroke ? c.stroke : '#999999'),
+            'strokeWidth=' + a.sw, 'html=1'].filter(Boolean).join(';') + ';';
+          L.push('    <mxCell id="activation-' + i + '" value="" style="' + style + '" vertex="1" parent="node-' + participant.id + '">');
+          L.push('      <mxGeometry x="' + Math.round(a.x - participant.x) + '" y="' + Math.round(a.y - participant.y) + '" width="' + Math.round(a.width) + '" height="' + Math.round(a.height) + '" as="geometry"/>');
+          L.push('    </mxCell>');
+        });
+        edges.forEach(function (e, i) {
+          var src = nodeById[e.from], tgt = nodeById[e.to];
+          if (!src || !tgt) return;
+          var c = colorsOf(e.el, 'bg');
+          var frac = function (y, cell) { return Math.max(0, Math.min(1, (y - cell.y) / (footY - cell.y))).toFixed(3); };
+          var exitY = frac(e.pts[0][1], src), entryY = frac(e.pts[e.pts.length - 1][1], tgt);
+          var style = ['edgeStyle=none', 'rounded=0',
+            'strokeColor=' + (c && c.stroke ? c.stroke : '#666666'), 'strokeWidth=' + e.sw,
+            e.dash ? 'dashed=1;dashPattern=' + e.dash : '',
+            'endArrow=block', 'endFill=1', 'endSize=' + Math.max(4, Math.round(10 * e.sw)),
+            'fontColor=' + (strict ? P.textMuted : '#666666'), 'fontSize=8', 'fontFamily=' + FONT,
+            'labelBackgroundColor=' + (strict ? P.mask : '#ffffff'), 'html=1']
+            .filter(Boolean).join(';')
+            + ';exitX=0.5;exitY=' + exitY + ';exitDx=0;exitDy=0'
+            + ';entryX=0.5;entryY=' + entryY + ';entryDx=0;entryDy=0;';
+          L.push('    <mxCell id="edge-' + (e.id || i) + '" value="' + drawioEscapeAttr(e.label) + '" style="' + style + '" edge="1" parent="1" source="node-' + e.from + '" target="node-' + e.to + '">');
+          // Label geometry y=-1 lifts the label one label-height above the
+          // line, matching the Archify artifact.
+          L.push('      <mxGeometry x="0" y="-1" relative="1" as="geometry">');
+          if (e.pts.length > 2) {
+            L.push('        <Array as="points">');
+            for (var p = 1; p < e.pts.length - 1; p++) L.push('          <mxPoint x="' + Math.round(e.pts[p][0]) + '" y="' + Math.round(e.pts[p][1]) + '"/>');
+            L.push('        </Array>');
+          }
+          L.push('      </mxGeometry>');
+          L.push('    </mxCell>');
+        });
+        L.push('  </root>');
+        L.push('</' + 'mxGraphModel>');
+        return L.join('\n');
+      }
+      // Public entry: always a light-themed .drawio file, independent of the
+      // viewer's current theme (and the browser preference behind it).
+      // Sequence artifacts carry timeline geometry and route through the
+      // dedicated sequence builder instead.
+      function drawioBuildStrictXml() {
+        var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+        return withLightTheme(function () {
+          return isSequence ? drawioBuildSequenceXml(true) : buildStrictXmlLight();
+        });
+      }
+
+      function runExport(format) {
+        var base = diagramFilename();
+        close(true);
+        clearExportReceipt();
+        if (format === 'webm') toast('Recording 6 seconds of motion…');
+        return (format === 'share-card'
+          ? rasterizeShareCard().then(function (blob) {
+              recordExportReceipt('share-card', blob, true, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT });
+              download(blob, base + '-share-card.png');
+              toast('Downloaded Share Card');
+            })
+          : format === 'svg'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              var blob = new Blob([d.svgString], { type: 'image/svg+xml;charset=utf-8' });
+              recordExportReceipt('svg', blob, d.canonicalStateClean);
+              download(blob, base + '.svg');
+            })
+          : format === 'drawio'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Sequence artifacts need live computed styles (timeline
+              // geometry), so they read the live SVG instead of the
+              // serialized string.
+              var isSequence = document.documentElement.getAttribute('data-diagram-type') === 'sequence';
+              var xml = isSequence ? drawioBuildSequenceXml(false) : archifySvgToDrawio(d.svgString);
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio', blob, d.canonicalStateClean);
+              download(blob, base + '.drawio');
+              toast('Downloaded draw.io');
+            })
+          : format === 'drawio-strict'
+          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
+              // Strict reads the live SVG but force-resolves the light
+              // theme, so the file never follows the reader's current
+              // theme; serializeSvg only supplies the canonical-state
+              // receipt.
+              var xml = drawioBuildStrictXml();
+              var blob = new Blob([xml], { type: 'application/xml;charset=utf-8' });
+              recordExportReceipt('drawio-strict', blob, d.canonicalStateClean);
+              download(blob, base + '-strict.drawio');
+              toast('Downloaded draw.io (strict)');
+            })
+          : format === 'webm'
+            ? recordWebm().then(function (blob) {
+                document.documentElement.setAttribute('data-last-motion-bytes', String(blob.size));
+                recordExportReceipt('webm', blob, true);
+                download(blob, base + '.webm');
+                toast('Downloaded WebM');
+              })
+          : rasterize(format).then(function (blob) {
+              recordExportReceipt(format, blob, true);
+              download(blob, base + '.' + format);
+            })
+        ).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : format;
+          document.documentElement.setAttribute('data-last-export-error-format', format);
+          document.documentElement.setAttribute('data-last-export-error', message);
+          if (format === 'webm' && /MediaRecorder|WebM motion export|empty WebM/i.test(message)) {
+            var motionItem = menu.querySelector('button[data-format="webm"]');
+            if (motionItem) {
+              motionItem.disabled = true;
+              motionItem.title = 'Motion capture unavailable in this browser';
+              motionItem.style.opacity = '0.5';
+            }
+            toast('WebM unavailable in this browser');
+            return;
+          }
+          alert('Export failed: ' + message);
+        });
+      }
+
+      function runRouteShareCard() {
+        close(false);
+        clearExportReceipt();
+        var snapshot = Archify.routeProbe && Archify.routeProbe.exportSnapshot();
+        var blobPromise = snapshot
+          ? renderShareCard({ routeSnapshot: snapshot })
+          : Promise.reject(new Error('Trace a route before exporting a Route Share Card'));
+        return blobPromise.then(function (blob) {
+          recordExportReceipt('share-card', blob, false, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT }, 'route', true);
+          download(blob, diagramFilename() + '-route-share-card.png');
+          toast('Downloaded Route Share Card');
+          return blob;
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'share-card';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Route Share Card export failed: ' + message);
+        });
+      }
+
+      function runReachShareCard() {
+        close(false);
+        clearExportReceipt();
+        var snapshot = Archify.focus && typeof Archify.focus.reachabilitySnapshot === 'function'
+          ? Archify.focus.reachabilitySnapshot()
+          : null;
+        var blobPromise = snapshot
+          ? renderShareCard({ reachSnapshot: snapshot })
+          : Promise.reject(new Error('Trace authored reach before exporting a Reach Share Card'));
+        return blobPromise.then(function (blob) {
+          recordExportReceipt('share-card', blob, false, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT }, 'reach', false, true);
+          download(blob, diagramFilename() + '-' + snapshot.direction + '-reach-share-card.png');
+          toast('Downloaded Reach Share Card');
+          return blob;
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'share-card';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Reach Share Card export failed: ' + message);
+        });
+      }
+
+      // A compact, machine-readable receipt for local QA and generated proof
+      // galleries. It exposes no diagram contents, only the completed format,
+      // byte count, and whether temporary viewer state was excluded.
+      function recordExportReceipt(format, blob, canonical, dimensions, variant, routeStateClean, reachStateClean) {
+        document.documentElement.setAttribute('data-last-export-format', format);
+        document.documentElement.setAttribute('data-last-export-bytes', String(blob.size));
+        document.documentElement.setAttribute('data-last-export-canonical', canonical ? 'true' : 'false');
+        if (variant) {
+          document.documentElement.setAttribute('data-last-export-variant', variant);
+        } else {
+          document.documentElement.removeAttribute('data-last-export-variant');
+        }
+        if (routeStateClean === true) {
+          document.documentElement.setAttribute('data-last-export-route-state-clean', 'true');
+        } else {
+          document.documentElement.removeAttribute('data-last-export-route-state-clean');
+        }
+        if (reachStateClean === true) {
+          document.documentElement.setAttribute('data-last-export-reach-state-clean', 'true');
+        } else {
+          document.documentElement.removeAttribute('data-last-export-reach-state-clean');
+        }
+        if (dimensions) {
+          document.documentElement.setAttribute('data-last-export-width', String(dimensions.width));
+          document.documentElement.setAttribute('data-last-export-height', String(dimensions.height));
+        } else {
+          document.documentElement.removeAttribute('data-last-export-width');
+          document.documentElement.removeAttribute('data-last-export-height');
+        }
+      }
+
+      function clearExportReceipt() {
+        document.documentElement.removeAttribute('data-last-export-format');
+        document.documentElement.removeAttribute('data-last-export-bytes');
+        document.documentElement.removeAttribute('data-last-export-canonical');
+        document.documentElement.removeAttribute('data-last-export-width');
+        document.documentElement.removeAttribute('data-last-export-height');
+        document.documentElement.removeAttribute('data-last-export-variant');
+        document.documentElement.removeAttribute('data-last-export-route-state-clean');
+        document.documentElement.removeAttribute('data-last-export-reach-state-clean');
+        document.documentElement.removeAttribute('data-last-export-error-format');
+        document.documentElement.removeAttribute('data-last-export-error');
+      }
+
+      function writePngToClipboard(blobPromise) {
+        // WebKit requires ClipboardItem to be constructed synchronously inside
+        // the user gesture. Chromium accepts the same pending Promise<Blob>;
+        // engines that reject promise values fall back to an awaited Blob.
+        try {
+          return navigator.clipboard.write([new ClipboardItem({ 'image/png': blobPromise })]);
+        } catch (_) {
+          return blobPromise.then(function (blob) {
+            return navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+          });
+        }
+      }
+
+      function runCopyShareCard() {
+        close(true);
+        clearExportReceipt();
+        if (!canCopyImage()) {
+          alert('Clipboard image write not supported by this browser.');
+          return;
+        }
+        var blobPromise = rasterizeShareCard();
+        return writePngToClipboard(blobPromise).then(function () {
+          return blobPromise.then(function (blob) {
+            recordExportReceipt('share-card', blob, true, { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT });
+            toast('Copied Share Card');
+          });
+        }).catch(function (err) {
+          console.error(err);
+          var message = err && err.message ? err.message : 'unknown';
+          document.documentElement.setAttribute('data-last-export-error-format', 'share-card');
+          document.documentElement.setAttribute('data-last-export-error', message);
+          alert('Copy failed: ' + message);
+        });
+      }
+
+      function runCopy() {
+        close(true);
+        clearExportReceipt();
+        if (!canCopyImage()) {
+          alert('Clipboard image write not supported in this browser.');
+          return;
+        }
+        var blobPromise = rasterize('png');
+        return writePngToClipboard(blobPromise).then(function () {
+          toast('Copied PNG to clipboard');
+        }).catch(function (err) {
+          console.error(err);
+          alert('Copy failed: ' + (err && err.message ? err.message : 'unknown'));
+        });
+      }
+
+      menu.addEventListener('click', function (e) {
+        var routeShareCardBtn = e.target.closest('button[data-action="route-share-card"]');
+        if (routeShareCardBtn && !routeShareCardBtn.disabled && !routeShareCardBtn.hidden) { runRouteShareCard(); return; }
+
+        var reachShareCardBtn = e.target.closest('button[data-action="reach-share-card"]');
+        if (reachShareCardBtn && !reachShareCardBtn.disabled && !reachShareCardBtn.hidden) { runReachShareCard(); return; }
+
+        var copyShareCardBtn = e.target.closest('button[data-action="copy-share-card"]');
+        if (copyShareCardBtn && !copyShareCardBtn.disabled) { runCopyShareCard(); return; }
+
+        var copyBtn = e.target.closest('button[data-action="copy"]');
+        if (copyBtn && !copyBtn.disabled) { runCopy(); return; }
+
+        var formatBtn = e.target.closest('button[data-format]');
+        if (formatBtn && !formatBtn.disabled) { runExport(formatBtn.dataset.format); }
+      });
+
+      Archify.motion = { canRecord: canRecordMotion, recordWebm: recordWebm };
+      Archify.exportMenu = {
+        open: open,
+        close: close,
+        isOpen: isOpen,
+        run: runExport,
+        shareCard: rasterizeShareCard,
+        downloadRouteShareCard: runRouteShareCard,
+        downloadReachShareCard: runReachShareCard,
+        syncRouteShare: syncRouteShareItem,
+        syncReachShare: syncReachShareItem,
+        copyShareCard: runCopyShareCard
+      };
+
+      // Auto-open on page load for demo/screenshot purposes: ?openExport=1
+      // Wait for fonts (so the menu doesn't flash before typography lands)
+      // and paint before opening. Fallback timeout for browsers without the
+      // Font Loading API.
+      try {
+        if (new URLSearchParams(window.location.search).get('openExport') === '1') {
+          var openWhenReady = function () {
+            requestAnimationFrame(function () { requestAnimationFrame(open); });
+          };
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(openWhenReady);
+          } else {
+            setTimeout(openWhenReady, 200);
+          }
+        }
+      } catch (_) {}
+    })();
+
+    /* ============================================================
+       Motion Governor — one reader switch and one motion budget. Ambient
+       trace yields to the strongest semantic owner; Still also parks bounded
+       viewer signals without discarding their static meaning.
+       ============================================================ */
+    Archify.motionGovernor = (function () {
+      var STORAGE_KEY = 'archify-motion';
+      var html = document.documentElement;
+      var svg = document.querySelector('.diagram-container svg');
+      var btn = document.getElementById('btn-motion');
+      var label = document.getElementById('motion-label');
+      var motionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+      var capable = !!(svg && svg.getAttribute('data-animation') === 'trace');
+      var readerPaused = false;
+      var suspensions = Object.create(null);
+      var explicitOwner = '';
+      var owner = '';
+      var ownerToken = 0;
+      var ownerCleanup = null;
+      var lastEffectivePaused = null;
+      var ambientStarted = false;
+      var ambientPending = new Set();
+
+      function detachAmbientBoundary() {
+        if (!svg) return;
+        svg.removeEventListener('animationend', onAmbientBoundary, true);
+        svg.removeEventListener('animationcancel', onAmbientBoundary, true);
+      }
+      function settleAmbient(reason) {
+        if (!capable) return false;
+        ambientStarted = true;
+        ambientPending.clear();
+        detachAmbientBoundary();
+        html.setAttribute('data-ambient-motion', 'settled');
+        html.setAttribute('data-ambient-settle-reason', reason || 'complete');
+        return true;
+      }
+      function onAmbientBoundary(event) {
+        if (!ambientPending.has(event.target)) return;
+        ambientPending.delete(event.target);
+        if (!ambientPending.size) settleAmbient('complete');
+      }
+      function startAmbient() {
+        if (ambientStarted || !capable) return false;
+        ambientStarted = true;
+        ambientPending = new Set(Array.prototype.slice.call(svg.querySelectorAll('[data-animate="edge"], [data-animate="node"]')));
+        if (!ambientPending.size) return settleAmbient('empty');
+        svg.addEventListener('animationend', onAmbientBoundary, true);
+        svg.addEventListener('animationcancel', onAmbientBoundary, true);
+        html.setAttribute('data-ambient-motion', 'running');
+        html.removeAttribute('data-ambient-settle-reason');
+        return true;
+      }
+
+      function readStored() {
+        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+      }
+      function writeStored() {
+        try {
+          if (readerPaused) localStorage.setItem(STORAGE_KEY, 'still');
+          else localStorage.removeItem(STORAGE_KEY);
+        } catch (_) {}
+      }
+      function reducedMotion() {
+        return !!(motionQuery && motionQuery.matches);
+      }
+      function hasSuspension() {
+        return Object.keys(suspensions).length > 0;
+      }
+      function effectivePaused() {
+        return readerPaused || reducedMotion() || hasSuspension();
+      }
+      function ownerLabel(value) {
+        if (value === 'story') return 'the guided story';
+        if (value === 'chapter') return 'the active chapter';
+        if (value === 'chapter-preview') return 'the chapter delta preview';
+        if (value === 'handoff') return 'the chapter handoff';
+        if (value === 'route') return 'Route Probe';
+        if (value === 'lens') return 'Semantic Lens';
+        if (value === 'relationship') return 'Relationship Preview';
+        if (value === 'intent') return 'Intent Trace';
+        if (value === 'focus') return 'semantic focus';
+        if (value === 'legend') return 'legend preview';
+        return 'reader interaction';
+      }
+      function render() {
+        if (!capable) return;
+        var systemPaused = reducedMotion();
+        var paused = effectivePaused();
+        html.setAttribute('data-motion', paused ? 'still' : 'live');
+        if (paused || owner || html.hasAttribute('data-embed') || html.hasAttribute('data-share-playback') || html.hasAttribute('data-document-hidden')) {
+          settleAmbient('suppressed');
+        } else if (!ambientStarted) {
+          startAmbient();
+        }
+        btn.setAttribute('aria-pressed', paused ? 'false' : 'true');
+        btn.disabled = systemPaused;
+        label.textContent = paused ? 'Still' : 'Live';
+        if (paused && lastEffectivePaused !== true && Archify.guidedViews && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
+        }
+        if (paused && lastEffectivePaused !== true && Archify.guidedViews && Archify.guidedViews.settleHandoff) {
+          Archify.guidedViews.settleHandoff(systemPaused ? 'reduced-motion' : (hasSuspension() ? 'hidden' : 'still'));
+        }
+        if (paused && lastEffectivePaused !== true && Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: systemPaused ? 'reduced-motion' : (hasSuspension() ? 'hidden' : 'still') });
+        }
+        lastEffectivePaused = paused;
+        if (Archify.routeProbe && typeof Archify.routeProbe.syncMotion === 'function') Archify.routeProbe.syncMotion();
+        if (systemPaused) {
+          btn.setAttribute('aria-label', 'Motion paused by reduced-motion preference');
+          btn.title = 'Motion paused by reduced-motion preference';
+        } else if (hasSuspension()) {
+          btn.setAttribute('aria-label', 'Motion paused while this page is hidden');
+          btn.title = 'Motion paused while this page is hidden';
+        } else if (paused) {
+          btn.setAttribute('aria-label', 'Resume motion');
+          btn.title = 'Resume motion';
+        } else if (owner) {
+          btn.setAttribute('aria-label', 'Pause motion; currently yielding to ' + ownerLabel(owner));
+          btn.title = 'Live preview enabled · yielding to ' + ownerLabel(owner);
+        } else {
+          btn.setAttribute('aria-label', 'Pause motion');
+          btn.title = 'Pause motion';
+        }
+      }
+      function setPaused(next, options) {
+        options = options || {};
+        readerPaused = !!next;
+        if (options.persist !== false) writeStored();
+        render();
+        return readerPaused;
+      }
+      function publishOwner() {
+        owner = explicitOwner || deriveOwner();
+        if (owner) html.setAttribute('data-motion-owner', owner);
+        else html.removeAttribute('data-motion-owner');
+        render();
+        return owner;
+      }
+      function deriveOwner() {
+        if (!svg) return '';
+        if (svg.hasAttribute('data-story-playing') || svg.hasAttribute('data-story-follow')) return 'story';
+        if (svg.hasAttribute('data-story-active')) return 'chapter';
+        if (svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active')) return 'route';
+        if (svg.hasAttribute('data-lens-active')) return 'lens';
+        if (svg.hasAttribute('data-relationship-preview-active')) return 'relationship';
+        if (svg.hasAttribute('data-intent-trace-active')) return 'intent';
+        if (svg.hasAttribute('data-focus-active')) return 'focus';
+        if (svg.hasAttribute('data-legend-preview-active')) return 'legend';
+        return '';
+      }
+      function clearClaim(preempted) {
+        var cleanup = ownerCleanup;
+        ownerCleanup = null;
+        explicitOwner = '';
+        if (preempted && cleanup) {
+          try { cleanup(); } catch (_) {}
+        }
+      }
+      function claim(next, cleanup) {
+        if (!capable || !next) return 0;
+        clearClaim(true);
+        ownerToken += 1;
+        explicitOwner = next;
+        ownerCleanup = typeof cleanup === 'function' ? cleanup : null;
+        publishOwner();
+        return ownerToken;
+      }
+      function release(token) {
+        if (!capable || token !== ownerToken || !explicitOwner) return false;
+        clearClaim(false);
+        ownerToken += 1;
+        publishOwner();
+        return true;
+      }
+      function suspend(reason) {
+        var key = String(reason || 'runtime');
+        var active = true;
+        suspensions[key] = (suspensions[key] || 0) + 1;
+        render();
+        return function () {
+          if (!active) return false;
+          active = false;
+          if (suspensions[key] > 1) suspensions[key] -= 1;
+          else delete suspensions[key];
+          render();
+          return true;
+        };
+      }
+      function syncVisibility() {
+        if (document.hidden) {
+          suspensions.visibility = true;
+          html.setAttribute('data-document-hidden', 'true');
+        } else {
+          delete suspensions.visibility;
+          html.removeAttribute('data-document-hidden');
+        }
+        render();
+      }
+
+      if (!capable) {
+        btn.hidden = true;
+        html.removeAttribute('data-motion-capable');
+        html.removeAttribute('data-motion');
+        html.removeAttribute('data-motion-owner');
+        html.removeAttribute('data-ambient-motion');
+        html.removeAttribute('data-ambient-settle-reason');
+        return {
+          capable: false,
+          pause: function () { return false; },
+          resume: function () { return false; },
+          toggle: function () { return false; },
+          setMode: function () { return 'still'; },
+          mode: function () { return 'still'; },
+          claim: function () { return 0; },
+          release: function () { return false; },
+          suspend: function () { return function () { return false; }; },
+          isPaused: function () { return true; },
+          owner: function () { return ''; }
+        };
+      }
+
+      html.setAttribute('data-motion-capable', 'true');
+      btn.hidden = false;
+      readerPaused = readStored() === 'still';
+      btn.addEventListener('click', function () { setPaused(!readerPaused); });
+      if (motionQuery) {
+        if (typeof motionQuery.addEventListener === 'function') motionQuery.addEventListener('change', render);
+        else if (typeof motionQuery.addListener === 'function') motionQuery.addListener(render);
+      }
+      document.addEventListener('visibilitychange', syncVisibility);
+      if (document.documentElement.getAttribute('data-embed') !== 'true' && typeof MutationObserver !== 'undefined' && typeof Node !== 'undefined' && svg instanceof Node) {
+        var ownerObserver = new MutationObserver(function () { publishOwner(); });
+        ownerObserver.observe(svg, {
+          attributes: true,
+          attributeFilter: [
+            'data-story-playing', 'data-story-follow', 'data-story-active', 'data-route-picking', 'data-route-active',
+            'data-lens-active', 'data-relationship-preview-active', 'data-intent-trace-active',
+            'data-focus-active', 'data-legend-preview-active'
+          ]
+        });
+      }
+      syncVisibility();
+      publishOwner();
+      render();
+
+      return {
+        capable: true,
+        pause: function () { return setPaused(true); },
+        resume: function () { return setPaused(false); },
+        toggle: function () { return setPaused(!readerPaused); },
+        setMode: function (next, options) {
+          setPaused(next === 'still', options);
+          return effectivePaused() ? 'still' : 'live';
+        },
+        mode: function () { return effectivePaused() ? 'still' : 'live'; },
+        claim: claim,
+        release: release,
+        suspend: suspend,
+        isPaused: effectivePaused,
+        owner: function () { return owner; }
+      };
+    })();
+
+    /* Verified repository evidence is emitted only after the renderer checks
+       the authored GitHub revision, source blobs, and optional line ranges
+       against the explicit --repo-root. It remains outside the SVG so every
+       canonical visual export stays free of repository paths. */
+    Archify.sourceEvidence = (function () {
+      var element = document.getElementById('archify-source-evidence-data');
+      var payload = null;
+      var svgNamespace = 'http://www.w3.org/2000/svg';
+      if (element) {
+        try {
+          var parsed = JSON.parse(element.textContent || 'null');
+          if (parsed && parsed.verified === true && parsed.repository && parsed.nodes) payload = parsed;
+        } catch (_) {}
+      }
+      function installBeacons() {
+        if (!payload) return 0;
+        var svg = document.querySelector('.diagram-container svg');
+        if (!svg) return 0;
+        var installed = 0;
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          var sources = payload.nodes[id];
+          if (!Array.isArray(sources) || !sources.length || node.querySelector('[data-source-evidence-beacon]')) return;
+          var shape = node.querySelector('[data-animate="node"]') || node.querySelector('[class*="c-"]');
+          var box;
+          try { box = (shape || node).getBBox(); } catch (_) { return; }
+          if (!box || !Number.isFinite(box.x) || !Number.isFinite(box.y) || !Number.isFinite(box.width) || box.width < 36) return;
+
+          var count = sources.length;
+          var label = count + ' verified source' + (count === 1 ? '' : 's') + '; focus this node to inspect';
+          var beacon = document.createElementNS(svgNamespace, 'g');
+          beacon.classList.add('source-evidence-beacon');
+          beacon.setAttribute('data-source-evidence-beacon', '');
+          beacon.setAttribute('aria-hidden', 'true');
+          beacon.setAttribute('transform', 'translate(' + (box.x + box.width - 35) + ' ' + (box.y + 5) + ')');
+          var title = document.createElementNS(svgNamespace, 'title');
+          title.textContent = label;
+          var plate = document.createElementNS(svgNamespace, 'rect');
+          plate.setAttribute('width', '30');
+          plate.setAttribute('height', '12');
+          plate.setAttribute('rx', '6');
+          var text = document.createElementNS(svgNamespace, 'text');
+          text.setAttribute('x', '15');
+          text.setAttribute('y', '8.25');
+          text.textContent = 'SRC ' + count;
+          beacon.appendChild(title);
+          beacon.appendChild(plate);
+          beacon.appendChild(text);
+          node.appendChild(beacon);
+
+          var originalLabel = node.getAttribute('aria-label') || '';
+          node.setAttribute('data-source-evidence-count', String(count));
+          node.setAttribute('data-source-evidence-original-label', originalLabel);
+          node.setAttribute('aria-label', (originalLabel ? originalLabel + ', ' : '') + count + ' verified source reference' + (count === 1 ? '' : 's'));
+          installed += 1;
+        });
+        return installed;
+      }
+      return {
+        available: function () { return Boolean(payload); },
+        repository: function () { return payload ? payload.repository : null; },
+        node: function (id) {
+          var sources = payload && payload.nodes ? payload.nodes[id] : null;
+          return Array.isArray(sources) ? sources.slice() : [];
+        },
+        installBeacons: installBeacons
+      };
+    })();
+    Archify.sourceEvidence.installBeacons();
+
+    /* ============================================================
+       Explore — stable-ID neighborhood focus + dependency-free pan/zoom.
+       Renderer IDs become deep-linkable semantic hooks without turning the
+       standalone artifact into a canvas editor.
+       ============================================================ */
+    Archify.focus = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var chip = document.getElementById('focus-chip');
+      var label = document.getElementById('focus-label');
+      var detail = document.getElementById('focus-detail');
+      var kind = document.getElementById('focus-kind');
+      var context = document.getElementById('focus-context');
+      var tag = document.getElementById('focus-tag');
+      var semanticId = document.getElementById('focus-id');
+      var evidence = document.getElementById('focus-evidence');
+      var repositoryLink = document.getElementById('focus-repository');
+      var evidenceLinks = document.getElementById('focus-evidence-links');
+      var summary = document.getElementById('focus-summary');
+      var reachSection = document.getElementById('focus-reach');
+      var reachStatus = document.getElementById('focus-reach-status');
+      var upstreamBtn = document.getElementById('btn-reach-upstream');
+      var downstreamBtn = document.getElementById('btn-reach-downstream');
+      var upstreamCount = document.getElementById('focus-reach-upstream-count');
+      var downstreamCount = document.getElementById('focus-reach-downstream-count');
+      var relationshipList = document.getElementById('relationship-lens-list');
+      var copyBtn = document.getElementById('btn-focus-copy');
+      var relationsBtn = document.getElementById('btn-focus-relations');
+      var clearBtn = document.getElementById('btn-focus-clear');
+      var activeIds = [];
+      var hoveredRelationship = null;
+      var focusedRelationship = null;
+      var pinnedRelationship = null;
+      var pinnedRelationshipKey = null;
+      var activeRelationshipPreview = null;
+      var relationshipHitOverlay = null;
+      var relationshipHitTargets = [];
+      var directPreviewTimer = null;
+      var reachabilityMode = null;
+      var activeReachability = null;
+      var svgNamespace = 'http://www.w3.org/2000/svg';
+      var reducedMotionQuery = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
+      var finePointerQuery = window.matchMedia ? window.matchMedia('(hover: hover) and (pointer: fine)') : null;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') || (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '');
+      }
+      function reachabilityRelationships() {
+        var seen = Object.create(null);
+        var relationships = [];
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!from || !to || seen[key]) return;
+          seen[key] = true;
+          relationships.push({ key: key, from: from, to: to });
+        });
+        return relationships;
+      }
+      function computeReachability(originId, direction, relationships) {
+        if (typeof originId !== 'string' || !originId ||
+            (direction !== 'upstream' && direction !== 'downstream') ||
+            !Array.isArray(relationships)) return null;
+        var records = [];
+        var seenKeys = Object.create(null);
+        relationships.forEach(function (relationship, index) {
+          if (!relationship || typeof relationship.from !== 'string' || !relationship.from ||
+              typeof relationship.to !== 'string' || !relationship.to) return;
+          var key = typeof relationship.key === 'string' && relationship.key
+            ? relationship.key : String(index);
+          if (seenKeys[key]) return;
+          seenKeys[key] = true;
+          records.push({ key: key, from: relationship.from, to: relationship.to });
+        });
+
+        var depths = Object.create(null);
+        var order = [];
+        var queue = [originId];
+        depths[originId] = 0;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var current = queue[cursor];
+          records.forEach(function (relationship) {
+            var next = null;
+            if (direction === 'downstream' && relationship.from === current) next = relationship.to;
+            else if (direction === 'upstream' && relationship.to === current) next = relationship.from;
+            if (next == null || Object.prototype.hasOwnProperty.call(depths, next)) return;
+            depths[next] = depths[current] + 1;
+            queue.push(next);
+          });
+        }
+        queue.forEach(function (id) { order.push(id); });
+
+        var edgeKeys = [];
+        records.forEach(function (relationship) {
+          if (Object.prototype.hasOwnProperty.call(depths, relationship.from) &&
+              Object.prototype.hasOwnProperty.call(depths, relationship.to)) edgeKeys.push(relationship.key);
+        });
+        var maxDepth = order.reduce(function (maximum, id) {
+          return Math.max(maximum, depths[id]);
+        }, 0);
+        return {
+          direction: direction,
+          originId: originId,
+          nodeIds: order,
+          edgeKeys: edgeKeys,
+          depths: depths,
+          maxDepth: maxDepth
+        };
+      }
+      function reachabilityFor(id, direction) {
+        return computeReachability(id, direction, reachabilityRelationships());
+      }
+      function resetReachabilityButtons() {
+        upstreamBtn.setAttribute('aria-pressed', 'false');
+        downstreamBtn.setAttribute('aria-pressed', 'false');
+      }
+      function clearReachability(options) {
+        options = options || {};
+        reachabilityMode = null;
+        activeReachability = null;
+        svg.removeAttribute('data-reach-active');
+        chip.removeAttribute('data-reach-mode');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-reach-match');
+          node.removeAttribute('data-reach-origin');
+          node.removeAttribute('data-reach-depth');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-reach-match');
+          edge.removeAttribute('data-reach-depth');
+        });
+        resetReachabilityButtons();
+        reachStatus.textContent = '';
+        reachStatus.hidden = true;
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncReachShare === 'function') {
+          Archify.exportMenu.syncReachShare();
+        }
+        if (options.updateUrl === true && activeIds.length === 1) {
+          try {
+            history.replaceState(null, '', location.pathname + location.search + '#focus=' + encodeURIComponent(activeIds[0]));
+          } catch (_) {}
+        }
+      }
+      function renderReachabilityControls(id) {
+        var upstream = reachabilityFor(id, 'upstream');
+        var downstream = reachabilityFor(id, 'downstream');
+        var upstreamReach = upstream ? Math.max(0, upstream.nodeIds.length - 1) : 0;
+        var downstreamReach = downstream ? Math.max(0, downstream.nodeIds.length - 1) : 0;
+        upstreamCount.textContent = String(upstreamReach);
+        downstreamCount.textContent = String(downstreamReach);
+        upstreamBtn.disabled = upstreamReach === 0;
+        downstreamBtn.disabled = downstreamReach === 0;
+        upstreamBtn.setAttribute('aria-label', upstreamReach
+          ? 'Trace ' + upstreamReach + ' upstream authored node' + (upstreamReach === 1 ? '' : 's')
+          : 'No upstream authored nodes');
+        downstreamBtn.setAttribute('aria-label', downstreamReach
+          ? 'Trace ' + downstreamReach + ' downstream authored node' + (downstreamReach === 1 ? '' : 's')
+          : 'No downstream authored nodes');
+        reachSection.hidden = false;
+      }
+      function applyReachability(direction, options) {
+        options = options || {};
+        if (activeIds.length !== 1 || (direction !== 'upstream' && direction !== 'downstream')) return false;
+        if (reachabilityMode === direction && options.toggle !== false) {
+          clearReachability({ updateUrl: options.updateUrl !== false });
+          return true;
+        }
+        var result = reachabilityFor(activeIds[0], direction);
+        if (!result || result.nodeIds.length <= 1) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false, resetView: false });
+        }
+        clearRelationshipPreview({ clearPin: true });
+        clearReachability({ updateUrl: false });
+        reachabilityMode = direction;
+        activeReachability = result;
+        var edgeKeySet = Object.create(null);
+        result.edgeKeys.forEach(function (key) { edgeKeySet[key] = true; });
+        svg.setAttribute('data-reach-active', direction);
+        chip.setAttribute('data-reach-mode', direction);
+        nodes().forEach(function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (!Object.prototype.hasOwnProperty.call(result.depths, id)) return;
+          node.setAttribute('data-reach-match', '');
+          node.setAttribute('data-reach-depth', String(result.depths[id]));
+          if (id === result.originId) node.setAttribute('data-reach-origin', '');
+        });
+        edges().forEach(function (edge) {
+          var key = edge.getAttribute('data-edge-key') || (
+            edge.getAttribute('data-edge-from') + '\u0000' +
+            edge.getAttribute('data-edge-to') + '\u0000' +
+            (edge.getAttribute('data-edge-label') || '')
+          );
+          if (!edgeKeySet[key]) return;
+          edge.setAttribute('data-reach-match', '');
+          var fromDepth = result.depths[edge.getAttribute('data-edge-from')];
+          var toDepth = result.depths[edge.getAttribute('data-edge-to')];
+          edge.setAttribute('data-reach-depth', String(Math.max(fromDepth || 0, toDepth || 0)));
+        });
+        resetReachabilityButtons();
+        var activeButton = direction === 'upstream' ? upstreamBtn : downstreamBtn;
+        activeButton.setAttribute('aria-pressed', 'true');
+        var reachableCount = result.nodeIds.length - 1;
+        var directionLabel = direction === 'upstream' ? 'Upstream' : 'Downstream';
+        reachStatus.textContent = directionLabel + ' · ' + reachableCount + ' node' +
+          (reachableCount === 1 ? '' : 's') + ' · ' + result.edgeKeys.length + ' link' +
+          (result.edgeKeys.length === 1 ? '' : 's') + ' · max ' + result.maxDepth + ' hop' +
+          (result.maxDepth === 1 ? '' : 's');
+        reachStatus.hidden = false;
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncReachShare === 'function') {
+          Archify.exportMenu.syncReachShare();
+        }
+        if (options.updateUrl !== false) {
+          try {
+            history.replaceState(null, '', location.pathname + location.search + '#focus=' +
+              encodeURIComponent(activeIds[0]) + '&reach=' + direction);
+          } catch (_) {}
+        }
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(result.nodeIds, { includeNeighbors: false, reason: 'reachability' });
+        }
+        requestLensPlacement();
+        return true;
+      }
+      function reachabilitySnapshot() {
+        if (!activeReachability || activeIds.length !== 1 ||
+            (reachabilityMode !== 'upstream' && reachabilityMode !== 'downstream') ||
+            activeReachability.direction !== reachabilityMode ||
+            activeReachability.originId !== activeIds[0] ||
+            svg.getAttribute('data-reach-active') !== reachabilityMode) return null;
+
+        var originId = activeReachability.originId;
+        var nodeIds = activeReachability.nodeIds.slice();
+        var edgeKeys = activeReachability.edgeKeys.slice();
+        if (nodeIds.length < 2 || nodeIds[0] !== originId || !edgeKeys.length ||
+            !activeReachability.depths || !Number.isInteger(activeReachability.maxDepth) ||
+            activeReachability.maxDepth < 1) return null;
+
+        var allNodes = nodes();
+        var allEdges = edges();
+        var seenNodeIds = Object.create(null);
+        var seenEdgeKeys = Object.create(null);
+        var nodeIdSet = Object.create(null);
+        var depths = Object.create(null);
+        var originNode = null;
+        var measuredMaxDepth = 0;
+
+        if (nodeIds.some(function (id) {
+          var depth = activeReachability.depths[id];
+          var matches = allNodes.filter(function (node) {
+            return node.getAttribute('data-node-id') === id;
+          });
+          if (typeof id !== 'string' || !id || seenNodeIds[id] || matches.length !== 1 ||
+              !matches[0].hasAttribute('data-reach-match') ||
+              !Number.isInteger(depth) || depth < 0 || depth > activeReachability.maxDepth ||
+              (id === originId
+                ? (!matches[0].hasAttribute('data-reach-origin') || depth !== 0)
+                : depth < 1)) return true;
+          seenNodeIds[id] = true;
+          nodeIdSet[id] = true;
+          depths[id] = depth;
+          measuredMaxDepth = Math.max(measuredMaxDepth, depth);
+          if (id === originId) originNode = matches[0];
+          return false;
+        }) || !originNode || measuredMaxDepth !== activeReachability.maxDepth ||
+            allNodes.filter(function (node) { return node.hasAttribute('data-reach-match'); }).length !== nodeIds.length) return null;
+
+        var edgeRecords = [];
+        if (edgeKeys.some(function (key) {
+          if (typeof key !== 'string' || !key || seenEdgeKeys[key]) return true;
+          var fragments = allEdges.filter(function (edge) {
+            return edge.getAttribute('data-edge-key') === key;
+          });
+          var drawableFragments = fragments.filter(hasDrawableGeometry);
+          if (!fragments.length || drawableFragments.length !== 1 ||
+              !fragments.every(function (fragment) { return fragment.hasAttribute('data-reach-match'); })) return true;
+          var first = fragments[0];
+          var from = first.getAttribute('data-edge-from');
+          var to = first.getAttribute('data-edge-to');
+          var id = first.getAttribute('data-edge-id') || '';
+          var labelValue = first.getAttribute('data-edge-label') || '';
+          if (!nodeIdSet[from] || !nodeIdSet[to] || !fragments.every(function (fragment) {
+            return fragment.getAttribute('data-edge-from') === from &&
+              fragment.getAttribute('data-edge-to') === to &&
+              (fragment.getAttribute('data-edge-id') || '') === id;
+          })) return true;
+          seenEdgeKeys[key] = true;
+          edgeRecords.push({
+            key: key,
+            id: id,
+            from: from,
+            to: to,
+            label: labelValue,
+            depth: Math.max(depths[from], depths[to])
+          });
+          return false;
+        })) return null;
+
+        var liveEdgeKeys = Object.create(null);
+        if (allEdges.some(function (edge) {
+          if (!edge.hasAttribute('data-reach-match')) return false;
+          var key = edge.getAttribute('data-edge-key');
+          if (!key || !seenEdgeKeys[key]) return true;
+          liveEdgeKeys[key] = true;
+          return false;
+        }) || Object.keys(liveEdgeKeys).length !== edgeKeys.length) return null;
+
+        return {
+          direction: reachabilityMode,
+          origin: { id: originId, label: nodeLabel(originNode, originId) },
+          nodeIds: nodeIds,
+          depths: depths,
+          maxDepth: activeReachability.maxDepth,
+          edges: edgeRecords
+        };
+      }
+      function setPassportValue(element, value) {
+        var normalized = value == null ? '' : String(value).trim();
+        element.textContent = normalized;
+        element.hidden = !normalized;
+      }
+      function renderSourceEvidence(id) {
+        evidenceLinks.textContent = '';
+        repositoryLink.removeAttribute('href');
+        repositoryLink.textContent = '';
+        var sources = Archify.sourceEvidence.node(id);
+        var repository = Archify.sourceEvidence.repository();
+        if (!repository || !sources.length) {
+          evidence.hidden = true;
+          return;
+        }
+        var slug = repository.url.replace(/^https:\/\/github\.com\//, '').replace(/\/$/, '');
+        repositoryLink.href = repository.url + '/tree/' + repository.revision;
+        repositoryLink.textContent = slug + ' @ ' + repository.shortRevision;
+        repositoryLink.setAttribute('aria-label', 'Open verified repository revision ' + repository.revision);
+        sources.forEach(function (source) {
+          var link = document.createElement('a');
+          link.className = 'semantic-passport-source';
+          link.href = source.href;
+          link.target = '_blank';
+          link.rel = 'noopener noreferrer';
+          link.referrerPolicy = 'no-referrer';
+          link.setAttribute('aria-label', 'Open verified source ' + source.path + ' at revision ' + repository.shortRevision);
+          var name = document.createElement('strong');
+          name.textContent = source.label || source.path.split('/').pop() || source.path;
+          var location = document.createElement('code');
+          location.textContent = source.line
+            ? 'L' + source.line + (source.endLine && source.endLine !== source.line ? '–' + source.endLine : '') + ' ↗'
+            : 'Open ↗';
+          var sourcePath = document.createElement('small');
+          sourcePath.textContent = source.path;
+          link.appendChild(name);
+          link.appendChild(location);
+          link.appendChild(sourcePath);
+          evidenceLinks.appendChild(link);
+        });
+        evidence.hidden = false;
+      }
+      function renderPassport(id, node) {
+        setPassportValue(detail, node.getAttribute('data-node-sublabel'));
+        setPassportValue(kind, node.getAttribute('data-node-kind') || 'node');
+        setPassportValue(context, node.getAttribute('data-node-context'));
+        setPassportValue(tag, node.getAttribute('data-node-tag'));
+        semanticId.textContent = id;
+        semanticId.hidden = false;
+        renderSourceEvidence(id);
+      }
+      function relationshipsFor(id, byId) {
+        var seen = {};
+        var relationships = [];
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (from !== id && to !== id) return;
+          var edgeLabel = edge.getAttribute('data-edge-label') || '';
+          var edgeKey = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + edgeLabel);
+          var edgeId = edge.getAttribute('data-edge-id') || '';
+          if (seen[edgeKey]) return;
+          seen[edgeKey] = true;
+          var direction = from === id && to === id ? 'loop' : (from === id ? 'out' : 'in');
+          var neighborId = direction === 'in' ? from : to;
+          var neighbor = byId[neighborId];
+          relationships.push({
+            key: edgeKey,
+            id: edgeId,
+            from: from,
+            to: to,
+            direction: direction,
+            neighborId: neighborId,
+            neighborLabel: neighbor ? nodeLabel(neighbor, neighborId) : neighborId,
+            label: edgeLabel || (direction === 'loop' ? 'loops back' : direction === 'out' ? 'connects to' : 'connects from')
+          });
+        });
+        return relationships;
+      }
+      function relationshipEdgeShapes(edge) {
+        if (!edge) return [];
+        if (/^(path|line|polyline)$/i.test(edge.tagName || '')) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function relationshipHitRecords() {
+        var recordsByKey = {};
+        var recordsById = {};
+        var byId = {};
+        nodes().forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var records = [];
+        edges().forEach(function (edge) {
+          var shapes = relationshipEdgeShapes(edge);
+          if (!shapes.length) return;
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var labelValue = edge.getAttribute('data-edge-label') || '';
+          var edgeId = edge.getAttribute('data-edge-id') || '';
+          var key = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + labelValue);
+          var existing = recordsByKey[key];
+          if (existing) {
+            if (existing.from !== from || existing.to !== to || existing.labelValue !== labelValue || existing.id !== edgeId) {
+              existing.invalid = true;
+              return;
+            }
+            shapes.forEach(function (shape) {
+              if (existing.shapes.indexOf(shape) === -1) existing.shapes.push(shape);
+            });
+            return;
+          }
+          var record = {
+            key: key,
+            id: edgeId,
+            from: from,
+            to: to,
+            fromLabel: byId[from] ? nodeLabel(byId[from], from) : from,
+            toLabel: byId[to] ? nodeLabel(byId[to], to) : to,
+            labelValue: labelValue,
+            label: labelValue || (from === to ? 'loops back' : 'connects to'),
+            edge: edge,
+            shapes: shapes,
+            invalid: false
+          };
+          recordsByKey[key] = record;
+          if (edgeId) {
+            if (recordsById[edgeId]) {
+              recordsById[edgeId].invalid = true;
+              record.invalid = true;
+            } else {
+              recordsById[edgeId] = record;
+            }
+          }
+          records.push(record);
+        });
+        return records.filter(function (record) { return !record.invalid && record.from && record.to; });
+      }
+      function relationshipRecordForKey(key) {
+        return relationshipHitRecords().find(function (record) { return record.key === key; }) || null;
+      }
+      function pinnedRelationshipRecord() {
+        return pinnedRelationshipKey ? relationshipRecordForKey(pinnedRelationshipKey) : null;
+      }
+      function renderRelationshipCopyAction() {
+        var record = pinnedRelationshipRecord();
+        if (record && record.id) {
+          copyBtn.textContent = 'Copy relation';
+          copyBtn.setAttribute('aria-label', 'Copy link to pinned relationship');
+        } else if (pinnedRelationshipKey) {
+          copyBtn.textContent = 'Copy node';
+          copyBtn.setAttribute('aria-label', 'Copy link to source node');
+        } else {
+          copyBtn.textContent = 'Copy link';
+          copyBtn.setAttribute('aria-label', 'Copy link to focused node');
+        }
+      }
+      function relationshipHitGeometry(shape, className) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('filter');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('tabindex');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.setAttribute('class', className || 'relationship-hit-rail');
+        return clone;
+      }
+      function removeRelationshipPulse() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-relationship-pulse-overlay]'), function (element) {
+          element.remove();
+        });
+      }
+      function relationshipPulseGeometry(shape) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('transform');
+        clone.removeAttribute('filter');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('tabindex');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-focus-match');
+        clone.removeAttribute('data-relationship-preview');
+        clone.setAttribute('class', 'relationship-flow-pulse');
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function relationshipTokenKind(edge) {
+        var shapes = relationshipEdgeShapes(edge);
+        var classEvidence = [edge.getAttribute('class') || ''].concat(shapes.map(function (shape) {
+          return shape.getAttribute('class') || '';
+        })).join(' ');
+        var from = edge.getAttribute('data-edge-from') || '';
+        var to = edge.getAttribute('data-edge-to') || '';
+        var source = nodes().find(function (node) { return node.getAttribute('data-node-id') === from; });
+        var target = nodes().find(function (node) { return node.getAttribute('data-node-id') === to; });
+        var sourceKind = source ? source.getAttribute('data-node-kind') || 'neutral' : 'neutral';
+        var targetKind = target ? target.getAttribute('data-node-kind') || 'neutral' : 'neutral';
+        if (/\ba-security\b/.test(classEvidence) || sourceKind === 'security' || targetKind === 'security' || targetKind === 'failure') return 'security';
+        if (/\ba-dashed\b/.test(classEvidence) || sourceKind === 'messagebus' || targetKind === 'messagebus') return 'event';
+        if (sourceKind === 'database' || targetKind === 'database') return 'data';
+        if (targetKind === 'waiting' || targetKind === 'success') return 'state';
+        return 'call';
+      }
+      function relationshipTokenPath(shape) {
+        if (!shape) return '';
+        var tagName = String(shape.tagName || '').toLowerCase();
+        if (tagName === 'path') return shape.getAttribute('d') || '';
+        if (tagName === 'line') {
+          return 'M ' + shape.getAttribute('x1') + ' ' + shape.getAttribute('y1') +
+            ' L ' + shape.getAttribute('x2') + ' ' + shape.getAttribute('y2');
+        }
+        if (tagName === 'polyline' && shape.points && shape.points.numberOfItems > 1) {
+          var commands = [];
+          for (var i = 0; i < shape.points.numberOfItems; i += 1) {
+            var point = shape.points.getItem(i);
+            commands.push((i === 0 ? 'M ' : 'L ') + point.x + ' ' + point.y);
+          }
+          return commands.join(' ');
+        }
+        return '';
+      }
+      function relationshipTokenPart(tagName, className, attrs) {
+        var part = document.createElementNS(svgNamespace, tagName);
+        part.setAttribute('class', className);
+        Object.keys(attrs || {}).forEach(function (name) { part.setAttribute(name, attrs[name]); });
+        return part;
+      }
+      function relationshipTokenGeometry(shape, kind, key, options) {
+        options = options || {};
+        var pathData = relationshipTokenPath(shape);
+        if (!pathData) return null;
+        var token = document.createElementNS(svgNamespace, 'g');
+        token.setAttribute('class', 'semantic-flow-token ' + (options.className || 'relationship-flow-token'));
+        token.setAttribute('data-token-kind', kind);
+        token.setAttribute('data-token-edge-key', key);
+        token.setAttribute('aria-hidden', 'true');
+        token.appendChild(relationshipTokenPart('circle', 'semantic-flow-token-halo', { cx: '0', cy: '0', r: '7' }));
+        if (kind === 'data') {
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-5', y: '-4', width: '10', height: '8', rx: '2' }));
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'M -2.8 -1.2 h 5.6 M -2.8 1.4 h 3.8' }));
+        } else if (kind === 'event') {
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-7', y: '-3', width: '4', height: '6', rx: '1' }));
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '-2', y: '-3', width: '4', height: '6', rx: '1' }));
+          token.appendChild(relationshipTokenPart('rect', 'relationship-flow-token-shape', { x: '3', y: '-3', width: '4', height: '6', rx: '1' }));
+        } else if (kind === 'security') {
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-shape', { d: 'M 0 -5 L 4 -3.4 V 0 c 0 3 -1.6 4.5 -4 5.5 C -2.4 4.5 -4 3 -4 0 v -3.4 Z' }));
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'm -2 .2 1.4 1.4 L 2 -1.4' }));
+        } else if (kind === 'state') {
+          token.appendChild(relationshipTokenPart('circle', 'relationship-flow-token-shape', { cx: '0', cy: '0', r: '5' }));
+          token.appendChild(relationshipTokenPart('circle', 'relationship-flow-token-dot', { cx: '0', cy: '0', r: '1.35' }));
+        } else {
+          token.appendChild(relationshipTokenPart('path', 'relationship-flow-token-ink', { d: 'M -5 -3 L -1 0 L -5 3 M 0 -3 L 4 0 L 0 3' }));
+        }
+        var motion = document.createElementNS(svgNamespace, 'animateMotion');
+        motion.setAttribute('path', pathData);
+        motion.setAttribute('dur', options.duration || '1.2s');
+        motion.setAttribute('begin', '0s');
+        motion.setAttribute('fill', 'freeze');
+        motion.setAttribute('rotate', 'auto');
+        motion.setAttribute('calcMode', 'spline');
+        motion.setAttribute('keyTimes', '0;1');
+        motion.setAttribute('keySplines', '.2 0 .2 1');
+        token.appendChild(motion);
+        return token;
+      }
+      function createSemanticFlowToken(edge, shape, options) {
+        if (!edge || !shape) return null;
+        var key = edge.getAttribute('data-edge-key') || (
+          edge.getAttribute('data-edge-from') + '\u0000' +
+          edge.getAttribute('data-edge-to') + '\u0000' +
+          (edge.getAttribute('data-edge-label') || '')
+        );
+        return relationshipTokenGeometry(shape, relationshipTokenKind(edge), key, options);
+      }
+      Archify.flowTokens = {
+        create: createSemanticFlowToken,
+        kind: function (edge) { return relationshipTokenKind(edge); },
+        path: relationshipTokenPath
+      };
+      function renderRelationshipPulse(key) {
+        removeRelationshipPulse();
+        if (!key || document.documentElement.getAttribute('data-embed') === 'true') return false;
+        if (document.hidden || (Archify.motionGovernor && Archify.motionGovernor.isPaused())) return false;
+        if (reducedMotionQuery && reducedMotionQuery.matches) return false;
+        var matchingEdges = edges().filter(function (edge) {
+          return edge.getAttribute('data-edge-key') === key;
+        });
+        if (!matchingEdges.length) return false;
+        var overlay = document.createElementNS(svgNamespace, 'g');
+        overlay.setAttribute('class', 'relationship-pulse-overlay');
+        overlay.setAttribute('data-relationship-pulse-overlay', '');
+        overlay.setAttribute('data-relationship-pulse-key', key);
+        overlay.setAttribute('aria-hidden', 'true');
+        var tokenAdded = false;
+        matchingEdges.forEach(function (edge) {
+          var wrapper = document.createElementNS(svgNamespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          var shapes = relationshipEdgeShapes(edge);
+          shapes.forEach(function (shape) {
+            wrapper.appendChild(relationshipPulseGeometry(shape));
+          });
+          if (!tokenAdded && shapes.length) {
+            var tokenKind = relationshipTokenKind(edge);
+            var token = relationshipTokenGeometry(shapes[0], tokenKind, key);
+            if (token) {
+              wrapper.appendChild(token);
+              overlay.setAttribute('data-relationship-token-kind', tokenKind);
+              tokenAdded = true;
+            }
+          }
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        if (!overlay.childNodes.length) return false;
+        var finishPulse = function () {
+          if (overlay.parentNode) overlay.remove();
+        };
+        overlay.addEventListener('animationend', finishPulse, { once: true });
+        overlay.addEventListener('animationcancel', finishPulse, { once: true });
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        return true;
+      }
+      function clearRelationshipPreview(options) {
+        options = options || {};
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        directPreviewTimer = null;
+        removeRelationshipPulse();
+        activeRelationshipPreview = null;
+        svg.removeAttribute('data-relationship-preview-active');
+        svg.removeAttribute('data-relationship-direct-active');
+        if (options.clearPin === true) {
+          pinnedRelationship = null;
+          pinnedRelationshipKey = null;
+          svg.removeAttribute('data-relationship-pin-active');
+        }
+        chip.removeAttribute('data-relationship-previewing');
+        edges().forEach(function (edge) { edge.removeAttribute('data-relationship-preview'); });
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-relationship-preview-node');
+          node.removeAttribute('data-relationship-preview-source');
+          node.removeAttribute('data-relationship-preview-target');
+        });
+        Array.prototype.forEach.call(relationshipList.querySelectorAll('[data-preview-active]'), function (button) {
+          button.removeAttribute('data-preview-active');
+        });
+        relationshipHitTargets.forEach(function (target) {
+          target.setAttribute('aria-pressed', pinnedRelationshipKey && target.getAttribute('data-relationship-key') === pinnedRelationshipKey ? 'true' : 'false');
+          target.removeAttribute('data-preview-active');
+        });
+        renderRelationshipCopyAction();
+        requestLensPlacement();
+      }
+      function previewRelationship(button, options) {
+        options = options || {};
+        if (pinnedRelationshipKey && pinnedRelationship && button !== pinnedRelationship) return;
+        clearRelationshipPreview();
+        if (!button) return;
+        var key = button.getAttribute('data-relationship-key');
+        var from = button.getAttribute('data-relationship-from');
+        var to = button.getAttribute('data-relationship-to');
+        if (!key || !from || !to) return;
+        svg.setAttribute('data-relationship-preview-active', key);
+        if (options.direct === true) svg.setAttribute('data-relationship-direct-active', key);
+        edges().forEach(function (edge) {
+          if (edge.getAttribute('data-edge-key') === key) edge.setAttribute('data-relationship-preview', '');
+        });
+        nodes().forEach(function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (id !== from && id !== to) return;
+          node.setAttribute('data-relationship-preview-node', '');
+          if (id === from) node.setAttribute('data-relationship-preview-source', '');
+          if (id === to) node.setAttribute('data-relationship-preview-target', '');
+        });
+        button.setAttribute('data-preview-active', 'true');
+        if (!chip.hidden && options.direct !== true) chip.setAttribute('data-relationship-previewing', 'true');
+        activeRelationshipPreview = button;
+        renderRelationshipPulse(key);
+        requestLensPlacement();
+      }
+      function syncRelationshipPreview() {
+        var next = pinnedRelationship || focusedRelationship || hoveredRelationship;
+        if (next === activeRelationshipPreview) return;
+        previewRelationship(next, { direct: !!(next && next.hasAttribute('data-relationship-hit-key')) });
+      }
+      function directRelationshipBlocked() {
+        return html.getAttribute('data-embed') === 'true' ||
+          html.getAttribute('data-guide-open') === 'true' ||
+          container.classList.contains('is-panning') ||
+          (activeIds.length > 0 && !pinnedRelationshipKey) ||
+          svg.hasAttribute('data-story-active') ||
+          svg.hasAttribute('data-route-picking') ||
+          svg.hasAttribute('data-route-active') ||
+          svg.hasAttribute('data-lens-active') ||
+          svg.hasAttribute('data-chapter-preview');
+      }
+      function scheduleDirectRelationshipPreview(target) {
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        if (pinnedRelationshipKey) return;
+        directPreviewTimer = window.setTimeout(function () {
+          directPreviewTimer = null;
+          if (pinnedRelationshipKey || hoveredRelationship !== target || directRelationshipBlocked()) return;
+          previewRelationship(target, { direct: true });
+        }, reducedMotionQuery && reducedMotionQuery.matches ? 0 : 90);
+      }
+      function relationshipHitTarget(key) {
+        return relationshipHitTargets.find(function (target) {
+          return target.getAttribute('data-relationship-key') === key;
+        }) || null;
+      }
+      function revealPinnedRelationship(record) {
+        function reveal() {
+          if (!record || pinnedRelationshipKey !== record.key) return true;
+          if (!Archify.view || typeof Archify.view.reveal !== 'function') return false;
+          Archify.view.reveal([record.from, record.to], { reason: 'relationship-direct' });
+          return true;
+        }
+        if (!reveal()) requestAnimationFrame(reveal);
+      }
+      function inspectRelationship(key, options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (directPreviewTimer) window.clearTimeout(directPreviewTimer);
+        directPreviewTimer = null;
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        if (pinnedRelationshipKey === key) {
+          if (options.toggle === false) return true;
+          clear({ updateUrl: options.updateUrl !== false });
+          return true;
+        }
+        var record = relationshipRecordForKey(key);
+        if (!record) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        set(record.from, { toggle: false, updateUrl: false });
+        var row = Array.prototype.slice.call(relationshipList.querySelectorAll('[data-relationship-key]')).find(function (candidate) {
+          return candidate.getAttribute('data-relationship-key') === key;
+        });
+        if (!row) return false;
+        previewRelationship(row);
+        pinnedRelationship = row;
+        pinnedRelationshipKey = key;
+        svg.setAttribute('data-relationship-pin-active', key);
+        var target = relationshipHitTarget(key);
+        if (target) target.setAttribute('aria-pressed', 'true');
+        renderRelationshipCopyAction();
+        summary.textContent = 'Pinned relationship · ' + record.fromLabel + ' → ' + record.toLabel + ' · ' + record.label;
+        revealPinnedRelationship(record);
+        if (options.updateUrl !== false && record.id) {
+          try { history.replaceState(null, '', location.pathname + location.search + '#relation=' + encodeURIComponent(record.id)); } catch (_) {}
+        }
+        return true;
+      }
+      function inspectRelationshipById(id, options) {
+        var record = relationshipHitRecords().find(function (item) { return item.id === id; });
+        return record ? inspectRelationship(record.key, options) : false;
+      }
+      function installRelationshipHitTargets() {
+        if (html.getAttribute('data-embed') === 'true') return 0;
+        var records = relationshipHitRecords();
+        if (!records.length) return 0;
+        relationshipHitOverlay = document.createElementNS(svgNamespace, 'g');
+        relationshipHitOverlay.setAttribute('class', 'relationship-hit-overlay');
+        relationshipHitOverlay.setAttribute('data-relationship-hit-overlay', '');
+        relationshipHitOverlay.setAttribute('role', 'group');
+        relationshipHitOverlay.setAttribute('aria-label', 'Direct relationship explorer');
+        var relationshipHelp = document.createElementNS(svgNamespace, 'desc');
+        relationshipHelp.id = 'archify-relationship-help';
+        relationshipHelp.textContent = 'Use arrow keys to explore relationships. Press Enter or Space to pin details; Escape clears.';
+        relationshipHitOverlay.appendChild(relationshipHelp);
+        records.forEach(function (record, index) {
+          var target = document.createElementNS(svgNamespace, 'g');
+          target.setAttribute('class', 'relationship-hit-target');
+          target.setAttribute('data-relationship-hit-key', record.key);
+          target.setAttribute('data-relationship-key', record.key);
+          target.setAttribute('data-relationship-from', record.from);
+          target.setAttribute('data-relationship-to', record.to);
+          if (record.id) target.setAttribute('data-relationship-id', record.id);
+          target.setAttribute('role', 'button');
+          target.setAttribute('tabindex', index === 0 ? '0' : '-1');
+          target.setAttribute('aria-pressed', 'false');
+          target.setAttribute('aria-describedby', relationshipHelp.id);
+          var description = 'Inspect relationship ' + (index + 1) + ' of ' + records.length + ': ' + record.fromLabel + ' to ' + record.toLabel + ', ' + record.label + '. Press Enter for details.';
+          target.setAttribute('aria-label', description);
+          var title = document.createElementNS(svgNamespace, 'title');
+          title.textContent = record.fromLabel + ' \u2192 ' + record.toLabel + ' \u00b7 ' + record.label;
+          target.appendChild(title);
+          record.shapes.forEach(function (shape) {
+            target.appendChild(relationshipHitGeometry(shape));
+            target.appendChild(relationshipHitGeometry(shape, 'relationship-focus-rail'));
+          });
+          if (target.childNodes.length > 1) {
+            relationshipHitTargets.push(target);
+            relationshipHitOverlay.appendChild(target);
+          }
+        });
+        if (!relationshipHitTargets.length) return 0;
+        var firstNode = svg.querySelector('[data-node-id]');
+        var nodeLayer = firstNode;
+        while (nodeLayer && nodeLayer.parentNode && nodeLayer.parentNode !== svg) nodeLayer = nodeLayer.parentNode;
+        if (nodeLayer && nodeLayer.parentNode === svg) svg.insertBefore(relationshipHitOverlay, nodeLayer);
+        else svg.appendChild(relationshipHitOverlay);
+
+        relationshipHitOverlay.addEventListener('pointerdown', function (event) {
+          if (event.target.closest('[data-relationship-hit-key]')) event.stopPropagation();
+        });
+        relationshipHitOverlay.addEventListener('pointerover', function (event) {
+          if (event.pointerType === 'touch') return;
+          if (finePointerQuery && !finePointerQuery.matches) return;
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked() || pinnedRelationshipKey) return;
+          if (event.relatedTarget && target.contains(event.relatedTarget)) return;
+          hoveredRelationship = target;
+          scheduleDirectRelationshipPreview(target);
+        });
+        relationshipHitOverlay.addEventListener('pointerout', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || (event.relatedTarget && target.contains(event.relatedTarget))) return;
+          if (hoveredRelationship === target) hoveredRelationship = null;
+          syncRelationshipPreview();
+        });
+        relationshipHitOverlay.addEventListener('focusin', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked()) return;
+          focusedRelationship = target;
+          if (!pinnedRelationshipKey) previewRelationship(target, { direct: true });
+        });
+        relationshipHitOverlay.addEventListener('focusout', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || (event.relatedTarget && target.contains(event.relatedTarget))) return;
+          if (focusedRelationship === target) focusedRelationship = null;
+          syncRelationshipPreview();
+        });
+        relationshipHitOverlay.addEventListener('click', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target || directRelationshipBlocked()) return;
+          event.preventDefault();
+          event.stopPropagation();
+          focusedRelationship = null;
+          hoveredRelationship = null;
+          inspectRelationship(target.getAttribute('data-relationship-key'));
+        });
+        relationshipHitOverlay.addEventListener('keydown', function (event) {
+          var target = event.target.closest('[data-relationship-hit-key]');
+          if (!target) return;
+          if (event.key === 'Escape' && pinnedRelationshipKey) {
+            event.preventDefault();
+            clear({ updateUrl: false });
+            return;
+          }
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            focusedRelationship = null;
+            hoveredRelationship = null;
+            inspectRelationship(target.getAttribute('data-relationship-key'));
+            return;
+          }
+          if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return;
+          var index = relationshipHitTargets.indexOf(target);
+          if (event.key === 'Home') index = 0;
+          else if (event.key === 'End') index = relationshipHitTargets.length - 1;
+          else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') index = (index + 1) % relationshipHitTargets.length;
+          else index = (index - 1 + relationshipHitTargets.length) % relationshipHitTargets.length;
+          event.preventDefault();
+          relationshipHitTargets.forEach(function (item, itemIndex) { item.setAttribute('tabindex', itemIndex === index ? '0' : '-1'); });
+          try { relationshipHitTargets[index].focus({ preventScroll: true }); }
+          catch (_) { try { relationshipHitTargets[index].focus(); } catch (_) {} }
+        });
+        return relationshipHitTargets.length;
+      }
+      function renderRelationshipLens(id, byId) {
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        clearRelationshipPreview({ clearPin: true });
+        renderPassport(id, byId[id]);
+        var relationships = relationshipsFor(id, byId);
+        chip.removeAttribute('data-relations-expanded');
+        relationsBtn.setAttribute('aria-expanded', 'false');
+        relationsBtn.textContent = relationships.length + ' relation' + (relationships.length === 1 ? '' : 's');
+        relationsBtn.setAttribute('aria-label', 'Show ' + relationships.length + ' connected relationship' + (relationships.length === 1 ? '' : 's'));
+        var counts = { out: 0, in: 0, loop: 0 };
+        relationships.forEach(function (relationship) { counts[relationship.direction] += 1; });
+        summary.textContent = counts.out + ' outgoing · ' + counts.in + ' incoming' + (counts.loop ? ' · ' + counts.loop + ' loop' : '');
+        renderReachabilityControls(id);
+        relationshipList.textContent = '';
+        if (!relationships.length) {
+          var empty = document.createElement('p');
+          empty.className = 'relationship-lens-empty';
+          empty.textContent = 'No connected relationships';
+          relationshipList.appendChild(empty);
+          return;
+        }
+
+        [
+          { id: 'out', label: 'Outgoing' },
+          { id: 'in', label: 'Incoming' },
+          { id: 'loop', label: 'Self loops' }
+        ].forEach(function (group) {
+          var items = relationships.filter(function (relationship) { return relationship.direction === group.id; });
+          if (!items.length) return;
+          var section = document.createElement('div');
+          section.className = 'relationship-lens-group';
+          var heading = document.createElement('span');
+          heading.className = 'relationship-lens-group-title';
+          heading.textContent = group.label + ' · ' + items.length;
+          section.appendChild(heading);
+          items.forEach(function (relationship) {
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'relationship-lens-row';
+            button.setAttribute('data-direction', relationship.direction);
+            button.setAttribute('data-relationship-target', relationship.neighborId);
+            button.setAttribute('data-relationship-key', relationship.key);
+            button.setAttribute('data-relationship-from', relationship.from);
+            button.setAttribute('data-relationship-to', relationship.to);
+            if (relationship.id) button.setAttribute('data-relationship-id', relationship.id);
+            button.setAttribute('aria-label', group.label + ': ' + relationship.label + ', ' + relationship.neighborLabel);
+            var direction = document.createElement('span');
+            direction.className = 'relationship-lens-direction';
+            direction.setAttribute('aria-hidden', 'true');
+            direction.textContent = relationship.direction === 'out' ? 'OUT →' : relationship.direction === 'in' ? '← IN' : 'LOOP';
+            var target = document.createElement('strong');
+            target.textContent = relationship.neighborLabel;
+            var relation = document.createElement('small');
+            relation.textContent = relationship.label;
+            button.appendChild(direction);
+            button.appendChild(target);
+            button.appendChild(relation);
+            section.appendChild(button);
+          });
+          relationshipList.appendChild(section);
+        });
+      }
+      var lensFrame = 0;
+      function placeRelationshipLens() {
+        lensFrame = 0;
+        if (chip.hidden || activeIds.length !== 1) return;
+        var node = svg.querySelector('[data-node-id="' + activeIds[0] + '"]');
+        if (!node) return;
+        var containerRect = container.getBoundingClientRect();
+        var nodeRect = node.getBoundingClientRect();
+        if (containerRect.bottom <= 0 || containerRect.top >= window.innerHeight) return;
+        var padding = window.innerWidth <= 720 ? 8 : 16;
+        var visibleTop = Math.max(padding, -containerRect.top + padding);
+        var visibleBottom = Math.min(containerRect.height - padding, window.innerHeight - containerRect.top - padding);
+        var maxTop = Math.max(padding, visibleBottom - chip.offsetHeight);
+        var minTop = Math.min(visibleTop, maxTop);
+        var nodeCenter = nodeRect.top - containerRect.top + nodeRect.height / 2;
+        var mobile = window.innerWidth <= 720;
+        var previewingOnMobile = mobile && chip.getAttribute('data-relationship-previewing') === 'true';
+        var compactOnMobile = mobile && chip.getAttribute('data-relations-expanded') !== 'true';
+        var preferred;
+        if (compactOnMobile) {
+          var nodeTop = nodeRect.top - containerRect.top;
+          var nodeBottom = nodeRect.bottom - containerRect.top;
+          var gap = 10;
+          var above = nodeTop - chip.offsetHeight - gap;
+          var below = nodeBottom + gap;
+          if (above >= visibleTop) preferred = above;
+          else if (below + chip.offsetHeight <= visibleBottom - 56) preferred = below;
+          else preferred = nodeCenter < (visibleTop + visibleBottom) / 2
+            ? Math.max(minTop, visibleBottom - chip.offsetHeight - 56)
+            : visibleTop;
+        } else if (previewingOnMobile) {
+          var pinnedTop = visibleTop;
+          var pinnedBottom = Math.max(minTop, visibleBottom - chip.offsetHeight - 56);
+          preferred = nodeCenter < (visibleTop + visibleBottom) / 2 ? pinnedBottom : pinnedTop;
+        } else {
+          preferred = nodeCenter - chip.offsetHeight / 2;
+        }
+        var top = Math.max(minTop, Math.min(maxTop, preferred));
+        chip.style.top = Math.round(top) + 'px';
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+      }
+      function requestLensPlacement() {
+        if (lensFrame) return;
+        lensFrame = requestAnimationFrame(placeRelationshipLens);
+      }
+      function clear(options) {
+        options = options || {};
+        var restoreNode = options.restoreFocus === true && activeIds.length === 1
+          ? svg.querySelector('[data-node-id="' + activeIds[0] + '"]')
+          : null;
+        clearReachability({ updateUrl: false });
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') {
+          Archify.intentTrace.clear({ announce: false });
+        }
+        hoveredRelationship = null;
+        focusedRelationship = null;
+        clearRelationshipPreview({ clearPin: true });
+        activeIds = [];
+        svg.removeAttribute('data-focus-active');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-focus-match');
+          node.removeAttribute('data-focus-selected');
+          node.setAttribute('aria-pressed', 'false');
+        });
+        edges().forEach(function (edge) { edge.removeAttribute('data-focus-match'); });
+        chip.hidden = true;
+        label.textContent = '';
+        detail.textContent = '';
+        detail.hidden = true;
+        kind.textContent = '';
+        kind.hidden = true;
+        context.textContent = '';
+        context.hidden = true;
+        tag.textContent = '';
+        tag.hidden = true;
+        semanticId.textContent = '';
+        semanticId.hidden = true;
+        evidence.hidden = true;
+        evidenceLinks.textContent = '';
+        repositoryLink.removeAttribute('href');
+        repositoryLink.textContent = '';
+        summary.textContent = '';
+        reachSection.hidden = true;
+        upstreamCount.textContent = '0';
+        downstreamCount.textContent = '0';
+        upstreamBtn.disabled = true;
+        downstreamBtn.disabled = true;
+        relationshipList.textContent = '';
+        copyBtn.textContent = 'Copy link';
+        copyBtn.setAttribute('aria-label', 'Copy link to focused node');
+        relationsBtn.textContent = 'Relations';
+        relationsBtn.setAttribute('aria-label', 'Show connected relationships');
+        relationsBtn.setAttribute('aria-expanded', 'false');
+        chip.removeAttribute('data-relations-expanded');
+        chip.style.removeProperty('top');
+        if (options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.updateUrl !== false) {
+          try { history.replaceState(null, '', location.pathname + location.search); } catch (_) {}
+        }
+        if (restoreNode) {
+          try { restoreNode.focus({ preventScroll: true }); }
+          catch (_) { try { restoreNode.focus(); } catch (_) {} }
+        }
+      }
+
+      function setMany(ids, options) {
+        options = options || {};
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.active()) {
+          Archify.semanticLens.clear({ updateUrl: false, preserveView: true, closePanel: true });
+        }
+        if (options.preserveRoute !== true && Archify.routeProbe && typeof Archify.routeProbe.clear === 'function') {
+          Archify.routeProbe.clear({ updateUrl: false, restoreFocus: false });
+        }
+        var nodeList = nodes();
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var normalized = [];
+        (ids || []).forEach(function (id) {
+          if (byId[id] && normalized.indexOf(id) === -1) normalized.push(id);
+        });
+        if (!normalized.length) return false;
+        if (normalized.length === activeIds.length && normalized.every(function (id, index) { return activeIds[index] === id; }) && options.toggle !== false) {
+          clear();
+          return true;
+        }
+
+        clear({ updateUrl: false, preserveView: true });
+        activeIds = normalized;
+        var selected = {};
+        var related = {};
+        var seenEdges = {};
+        var matchedEdges = 0;
+        normalized.forEach(function (id) { selected[id] = true; related[id] = true; });
+        var selectionMode = options.mode === 'selection' || normalized.length > 1;
+
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var match = selectionMode ? selected[from] && selected[to] : selected[from] || selected[to];
+          if (!match) return;
+          edge.setAttribute('data-focus-match', '');
+          if (!selectionMode) { related[from] = true; related[to] = true; }
+          var edgeKey = edge.getAttribute('data-edge-key') || (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!seenEdges[edgeKey]) { seenEdges[edgeKey] = true; matchedEdges += 1; }
+        });
+        nodeList.forEach(function (node) {
+          var nodeId = node.getAttribute('data-node-id');
+          if (related[nodeId]) node.setAttribute('data-focus-match', '');
+          if (selected[nodeId]) {
+            node.setAttribute('data-focus-selected', '');
+            node.setAttribute('aria-pressed', 'true');
+          }
+        });
+        svg.setAttribute('data-focus-active', normalized.join(' '));
+        var defaultLabel = normalized.length === 1
+          ? nodeLabel(byId[normalized[0]], normalized[0])
+          : normalized.length + ' selected nodes';
+        label.textContent = options.label || defaultLabel;
+        chip.hidden = options.hideChip === true || normalized.length !== 1 || selectionMode;
+        if (!chip.hidden) {
+          renderRelationshipLens(normalized[0], byId);
+          requestLensPlacement();
+        }
+        if (options.updateUrl !== false) {
+          var key = options.urlKey || 'focus';
+          var value = options.urlValue || normalized[0];
+          try { history.replaceState(null, '', location.pathname + location.search + '#' + key + '=' + encodeURIComponent(value)); } catch (_) {}
+        }
+        return true;
+      }
+
+      function set(id, options) {
+        options = options || {};
+        options.mode = 'neighborhood';
+        return setMany([id], options);
+      }
+
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+
+      function copyFocusLink() {
+        if (activeIds.length !== 1) return Promise.resolve(false);
+        var record = pinnedRelationshipRecord();
+        var relationId = record && record.id;
+        var value = location.href.replace(/#.*$/, '') + (relationId
+          ? '#relation=' + encodeURIComponent(relationId)
+          : '#focus=' + encodeURIComponent(activeIds[0]) + (reachabilityMode ? '&reach=' + reachabilityMode : ''));
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          copyBtn.setAttribute('aria-label', copied
+            ? (relationId ? 'Pinned relationship link copied' : 'Focused node link copied')
+            : (relationId ? 'Could not copy pinned relationship link' : 'Could not copy focused node link'));
+          window.setTimeout(function () {
+            renderRelationshipCopyAction();
+          }, 1600);
+          return copied;
+        });
+      }
+
+      svg.addEventListener('click', function (event) {
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        var node = event.target.closest('[data-node-id]');
+        if (node) {
+          var id = node.getAttribute('data-node-id');
+          set(id);
+          if (activeIds.indexOf(id) !== -1 && Archify.view && typeof Archify.view.reveal === 'function') {
+            Archify.view.reveal([id], { includeNeighbors: true, reason: 'focus' });
+          }
+        }
+        else if (activeIds.length) clear();
+      });
+      svg.addEventListener('keydown', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.key !== 'Enter' && event.key !== ' ')) return;
+        event.preventDefault();
+        var id = node.getAttribute('data-node-id');
+        set(id);
+        if (activeIds.indexOf(id) !== -1 && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'focus' });
+        }
+      });
+      clearBtn.addEventListener('click', function () { clear({ restoreFocus: true }); });
+      copyBtn.addEventListener('click', copyFocusLink);
+      upstreamBtn.addEventListener('click', function () { applyReachability('upstream'); });
+      downstreamBtn.addEventListener('click', function () { applyReachability('downstream'); });
+      relationsBtn.addEventListener('click', function () {
+        var expanded = chip.getAttribute('data-relations-expanded') === 'true';
+        if (expanded) chip.removeAttribute('data-relations-expanded');
+        else chip.setAttribute('data-relations-expanded', 'true');
+        relationsBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        relationsBtn.setAttribute('aria-label', expanded ? 'Show connected relationships' : 'Hide connected relationships');
+        requestLensPlacement();
+      });
+      relationshipList.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-relationship-target]');
+        if (!button) return;
+        var id = button.getAttribute('data-relationship-target');
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        set(id, { toggle: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'relationship' });
+        }
+        var node = svg.querySelector('[data-node-id="' + id + '"]');
+        if (node) {
+          try { node.focus({ preventScroll: true }); } catch (_) { try { node.focus(); } catch (_) {} }
+        }
+      });
+      relationshipList.addEventListener('pointerover', function (event) {
+        if (event.pointerType === 'touch') return;
+        if (finePointerQuery && !finePointerQuery.matches) return;
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || !relationshipList.contains(button)) return;
+        if (event.relatedTarget && button.contains(event.relatedTarget)) return;
+        hoveredRelationship = button;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('pointerout', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        if (hoveredRelationship === button) hoveredRelationship = null;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('focusin', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button) return;
+        focusedRelationship = button;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('focusout', function (event) {
+        var button = event.target.closest('[data-relationship-key]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        if (focusedRelationship === button) focusedRelationship = null;
+        syncRelationshipPreview();
+      });
+      relationshipList.addEventListener('keydown', function (event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') return;
+        var buttons = Array.prototype.slice.call(relationshipList.querySelectorAll('[data-relationship-target]'));
+        if (!buttons.length) return;
+        var index = buttons.indexOf(document.activeElement);
+        if (event.key === 'Home') index = 0;
+        else if (event.key === 'End') index = buttons.length - 1;
+        else if (event.key === 'ArrowDown') index = Math.min(buttons.length - 1, Math.max(0, index + 1));
+        else index = Math.max(0, index < 0 ? 0 : index - 1);
+        event.preventDefault();
+        buttons[index].focus();
+      });
+      document.addEventListener('click', function (event) {
+        var target = event.target;
+        if (chip.hidden || !target || typeof target.closest !== 'function' || chip.contains(target)) return;
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        if (target.closest('[data-node-id], [data-relationship-hit-key]')) return;
+        clear();
+      }, true);
+      window.addEventListener('scroll', requestLensPlacement, { passive: true });
+      window.addEventListener('resize', requestLensPlacement);
+      container.addEventListener('scroll', requestLensPlacement, { passive: true });
+      document.addEventListener('visibilitychange', function () {
+        if (document.hidden) removeRelationshipPulse();
+      });
+      function syncRelationshipMotionPreference(event) {
+        if (event.matches) removeRelationshipPulse();
+      }
+      if (reducedMotionQuery) {
+        if (typeof reducedMotionQuery.addEventListener === 'function') {
+          reducedMotionQuery.addEventListener('change', syncRelationshipMotionPreference);
+        } else if (typeof reducedMotionQuery.addListener === 'function') {
+          reducedMotionQuery.addListener(syncRelationshipMotionPreference);
+        }
+      }
+
+      installRelationshipHitTargets();
+
+      function syncFocusFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var relation = params.get('relation');
+          var initial = params.get('focus');
+          var reach = params.get('reach');
+          if (relation) {
+            if (html.getAttribute('data-embed') === 'true' ||
+                !inspectRelationshipById(relation, { updateUrl: false, toggle: false })) clear({ updateUrl: false });
+          }
+          else if (initial) {
+            if (set(initial, { updateUrl: false, toggle: false }) &&
+                (reach === 'upstream' || reach === 'downstream')) {
+              applyReachability(reach, { updateUrl: false, toggle: false, reveal: false });
+            }
+          }
+          else if (!params.get('view')) clear({ updateUrl: false });
+        } catch (_) {}
+      }
+
+      window.addEventListener('hashchange', syncFocusFromHash);
+      syncFocusFromHash();
+
+      return {
+        set: set,
+        setMany: setMany,
+        clear: clear,
+        copyLink: copyFocusLink,
+        reach: applyReachability,
+        clearReach: clearReachability,
+        reachabilitySnapshot: reachabilitySnapshot,
+        inspectRelationship: inspectRelationship,
+        inspectRelationshipById: inspectRelationshipById,
+        reposition: requestLensPlacement,
+        relationship: function () {
+          var record = pinnedRelationshipRecord();
+          return record ? { id: record.id || null, key: record.key, from: record.from, to: record.to, label: record.label } : null;
+        },
+        reachability: function () {
+          return activeReachability ? {
+            direction: activeReachability.direction,
+            originId: activeReachability.originId,
+            nodeIds: activeReachability.nodeIds.slice(),
+            edgeKeys: activeReachability.edgeKeys.slice(),
+            maxDepth: activeReachability.maxDepth
+          } : null;
+        },
+        active: function () { return activeIds.length === 0 ? null : (activeIds.length === 1 ? activeIds[0] : activeIds.slice()); }
+      };
+    })();
+
+    /* ============================================================
+       Intent Trace — temporary one-hop topology before durable focus.
+       Fine-pointer hover and keyboard focus share the same stable-ID preview;
+       touch continues directly to the existing click-to-focus contract.
+       ============================================================ */
+    Archify.intentTrace = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var status = document.getElementById('intent-trace-status');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var activeId = null;
+      var hoveredNode = null;
+      var focusedNode = null;
+      var enterTimer = null;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
+      }
+      function finePointer() {
+        return !window.matchMedia || window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+      }
+      function reducedMotion() {
+        return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+      }
+      function blocked() {
+        return html.getAttribute('data-embed') === 'true' ||
+          html.getAttribute('data-guide-open') === 'true' ||
+          container.classList.contains('is-panning') ||
+          svg.hasAttribute('data-lens-active') ||
+          svg.hasAttribute('data-story-active') ||
+          svg.hasAttribute('data-relationship-preview-active') ||
+          !!(Archify.routeProbe && typeof Archify.routeProbe.active === 'function' && Archify.routeProbe.active()) ||
+          !!(Archify.focus && typeof Archify.focus.active === 'function' && Archify.focus.active());
+      }
+      function edgeShapes(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function removeOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-intent-trace-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+      }
+      function clear(options) {
+        options = options || {};
+        if (enterTimer) window.clearTimeout(enterTimer);
+        enterTimer = null;
+        activeId = null;
+        svg.removeAttribute('data-intent-trace-active');
+        removeOverlay();
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-intent-trace-match');
+          node.removeAttribute('data-intent-trace-selected');
+        });
+        edges().forEach(function (edge) { edge.removeAttribute('data-intent-trace-match'); });
+        if (options.announce !== false) status.textContent = '';
+      }
+      function traceGeometry(shape, direction) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-intent-trace-match');
+        clone.removeAttribute('data-intent-trace-selected');
+        clone.setAttribute('class', 'intent-trace-flow');
+        clone.setAttribute('data-direction', direction);
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function show(id, options) {
+        options = options || {};
+        if (!id || blocked()) {
+          clear({ announce: false });
+          return false;
+        }
+        if (activeId === id) return true;
+        clear({ announce: false });
+        var nodeList = nodes();
+        var edgeList = edges();
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        var selected = byId[id];
+        if (!selected) return false;
+
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'intent-trace-overlay');
+        overlay.setAttribute('data-intent-trace-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var related = {};
+        var seen = {};
+        var counts = { out: 0, in: 0, loop: 0 };
+        related[id] = true;
+
+        edgeList.forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (from !== id && to !== id) return;
+          var direction = from === id && to === id ? 'loop' : (from === id ? 'out' : 'in');
+          var key = edge.getAttribute('data-edge-key') ||
+            (from + '\u0000' + to + '\u0000' + (edge.getAttribute('data-edge-label') || ''));
+          if (!seen[key]) {
+            seen[key] = true;
+            counts[direction] += 1;
+          }
+          related[from] = true;
+          related[to] = true;
+          edge.setAttribute('data-intent-trace-match', '');
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          edgeShapes(edge).forEach(function (shape) {
+            wrapper.appendChild(traceGeometry(shape, direction));
+          });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+
+        nodeList.forEach(function (node) {
+          var nodeId = node.getAttribute('data-node-id');
+          if (related[nodeId]) node.setAttribute('data-intent-trace-match', '');
+          if (nodeId === id) node.setAttribute('data-intent-trace-selected', '');
+        });
+        if (overlay.childNodes.length) {
+          var firstEdge = edgeList[0];
+          var firstNode = svg.querySelector('[data-node-id]');
+          if (firstEdge && firstEdge.parentNode) firstEdge.parentNode.insertBefore(overlay, firstEdge);
+          else if (firstNode) svg.insertBefore(overlay, firstNode);
+          else svg.appendChild(overlay);
+        }
+        activeId = id;
+        svg.setAttribute('data-intent-trace-active', id);
+        if (options.announce === true) {
+          var total = counts.out + counts.in + counts.loop;
+          status.textContent = nodeLabel(selected, id) + '. ' + counts.out + ' outgoing, ' +
+            counts.in + ' incoming' + (counts.loop ? ', ' + counts.loop + ' self loop' : '') +
+            '. ' + total + ' connection' + (total === 1 ? '' : 's') + '. Press Enter for details.';
+        }
+        return true;
+      }
+      function schedule(node) {
+        if (enterTimer) window.clearTimeout(enterTimer);
+        enterTimer = window.setTimeout(function () {
+          enterTimer = null;
+          if (hoveredNode === node) show(node.getAttribute('data-node-id'), { announce: false });
+        }, reducedMotion() ? 0 : 90);
+      }
+      function sync() {
+        var candidate = focusedNode || hoveredNode;
+        if (!candidate) {
+          clear();
+          return;
+        }
+        show(candidate.getAttribute('data-node-id'), { announce: candidate === focusedNode });
+      }
+
+      svg.addEventListener('pointerover', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || !finePointer() || event.pointerType === 'touch') return;
+        if (event.relatedTarget && node.contains(event.relatedTarget)) return;
+        hoveredNode = node;
+        schedule(node);
+      });
+      svg.addEventListener('pointerout', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.relatedTarget && node.contains(event.relatedTarget))) return;
+        if (hoveredNode === node) hoveredNode = null;
+        sync();
+      });
+      svg.addEventListener('focusin', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node) return;
+        focusedNode = node;
+        show(node.getAttribute('data-node-id'), { announce: true });
+      });
+      svg.addEventListener('focusout', function (event) {
+        var node = event.target.closest('[data-node-id]');
+        if (!node || (event.relatedTarget && node.contains(event.relatedTarget))) return;
+        if (focusedNode === node) focusedNode = null;
+        sync();
+      });
+      container.addEventListener('pointerdown', function (event) {
+        if (!event.target.closest('[data-node-id]')) clear({ announce: false });
+      });
+      window.addEventListener('blur', function () { clear({ announce: false }); });
+
+      return {
+        show: show,
+        clear: clear,
+        active: function () { return activeId; }
+      };
+    })();
+
+    Archify.guidedViews = (function () {
+      var data = document.getElementById('archify-guided-views-data');
+      var panel = document.getElementById('guided-views');
+      var prev = document.getElementById('guided-view-prev');
+      var next = document.getElementById('guided-view-next');
+      var all = document.getElementById('guided-view-all');
+      var play = document.getElementById('guided-view-play');
+      var playIcon = document.getElementById('guided-view-play-icon');
+      var playLabel = document.getElementById('guided-view-play-label');
+      var beatLink = document.getElementById('guided-view-beat-link');
+      var beatLinkLabel = document.getElementById('guided-view-beat-link-label');
+      var progressBar = document.getElementById('guided-view-progress-bar');
+      var count = document.getElementById('guided-view-count');
+      var handoffReceipt = document.getElementById('guided-view-handoff');
+      var label = document.getElementById('guided-view-label');
+      var note = document.getElementById('guided-view-note');
+      var trail = document.getElementById('guided-view-trail');
+      var storyCaption = document.getElementById('guided-story-caption');
+      var storyCaptionIndex = document.getElementById('guided-story-caption-index');
+      var storyCaptionRoute = document.getElementById('guided-story-caption-route');
+      var storyCaptionDetail = document.getElementById('guided-story-caption-detail');
+      var storyCaptionNext = document.getElementById('guided-story-caption-next');
+      var storyCaptionNextLabel = document.getElementById('guided-story-caption-next-label');
+      var chapterIndex = document.getElementById('guided-view-index');
+      var chapterList = document.getElementById('guided-view-chapters');
+      var shareCue = document.getElementById('share-chapter-cue');
+      var shareCueState = document.getElementById('share-chapter-state');
+      var shareCueCount = document.getElementById('share-chapter-count');
+      var shareCueLabel = document.getElementById('share-chapter-label');
+      var shareCueNote = document.getElementById('share-chapter-note');
+      var shareCueRoute = document.getElementById('share-chapter-route');
+      var shareCueProgress = document.getElementById('share-chapter-progress-bar');
+      var svg = document.querySelector('.diagram-container svg');
+      var views = [];
+      var activeIndex = -1;
+      var playing = false;
+      var storyBeatTimer = null;
+      var storyBeatIndex = -1;
+      var storyBeatStartedAt = 0;
+      var storyBeatElapsedMs = 0;
+      var storyBeatDwellMs = 0;
+      var storyPlaybackGeneration = 0;
+      var storyFollowGeneration = 0;
+      var storyPlaybackScope = 'story';
+      var storyPlaybackComplete = false;
+      var beatLinkFeedbackTimer = null;
+      var momentRestoreGeneration = 0;
+      var storySteps = [];
+      var storyPulseOwnerToken = 0;
+      var storyPulseGeneration = 0;
+      var autoplayPending = false;
+      var VIEW_INTERVAL_MS = 3200;
+      var STORY_FOLLOW_MIN_DWELL_MS = 1100;
+      var STORY_FOLLOW_DURATION_MS = 320;
+      var chapterButtons = [];
+      var handoffGeneration = 0;
+      var currentHandoff = null;
+      var previewGeneration = 0;
+      var pointerPreviewIntent = null;
+      var focusPreviewIntent = null;
+      var activePreviewIndex = -1;
+      var previewOwnerToken = 0;
+
+      try { views = JSON.parse(data.textContent || '[]'); } catch (_) { views = []; }
+      if (!views.length) return { count: 0, active: function () { return null; } };
+      var canonicalNodeIds = {};
+      Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+        canonicalNodeIds[node.getAttribute('data-node-id')] = true;
+      });
+      views.forEach(function (view) {
+        var seen = {};
+        view.focus = (view.focus || []).filter(function (id) {
+          if (!canonicalNodeIds[id] || seen[id]) return false;
+          seen[id] = true;
+          return true;
+        });
+      });
+      // Establish the compact cold state before exposing the panel so the
+      // full Director cannot flash during first paint. Hash restoration runs
+      // in the same task and replaces this state before paint when valid.
+      panel.setAttribute('data-active-view', 'all');
+      panel.hidden = false;
+      panel.setAttribute('data-view-interval-ms', String(VIEW_INTERVAL_MS));
+      panel.setAttribute('data-story-follow-min-dwell-ms', String(STORY_FOLLOW_MIN_DWELL_MS));
+      buildChapterIndex();
+
+      function reducedMotion() {
+        return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+      }
+
+      function findNode(id) {
+        return Array.prototype.find.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          return node.getAttribute('data-node-id') === id;
+        }) || null;
+      }
+
+      function chapterDelta(previous, destination) {
+        var previousFocus = previous ? previous.focus : [];
+        var destinationFocus = destination ? destination.focus : [];
+        var previousIds = {};
+        var destinationIds = {};
+        previousFocus.forEach(function (id) { previousIds[id] = true; });
+        destinationFocus.forEach(function (id) { destinationIds[id] = true; });
+        return {
+          stay: previousFocus.filter(function (id) { return destinationIds[id]; }),
+          enter: destinationFocus.filter(function (id) { return !previousIds[id]; }),
+          leave: previousFocus.filter(function (id) { return !destinationIds[id]; })
+        };
+      }
+
+      function chapterAnchor(previous, destination, outgoingBeatIndex, delta) {
+        if (!previous || !destination) return '';
+        var stayIds = {};
+        delta.stay.forEach(function (id) { stayIds[id] = true; });
+        var activeBeat = outgoingBeatIndex >= 0 ? previous.focus[outgoingBeatIndex] : '';
+        if (activeBeat && stayIds[activeBeat]) return activeBeat;
+        for (var index = previous.focus.length - 1; index >= 0; index -= 1) {
+          if (stayIds[previous.focus[index]]) return previous.focus[index];
+        }
+        return '';
+      }
+
+      function handoffMotionAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (document.documentElement.getAttribute('data-embed') === 'true') return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        return !(Archify.motionGovernor && Archify.motionGovernor.capable && Archify.motionGovernor.isPaused());
+      }
+
+      function classifyHandoff(delta, anchor) {
+        var roles = {};
+        delta.stay.forEach(function (id) { roles[id] = 'stay'; });
+        delta.enter.forEach(function (id) { roles[id] = 'enter'; });
+        delta.leave.forEach(function (id) { roles[id] = 'leave'; });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          var role = roles[id] || '';
+          if (role) node.setAttribute('data-chapter-role', role);
+          else node.removeAttribute('data-chapter-role');
+        });
+        svg.setAttribute('data-chapter-handoff', anchor ? 'anchor' : 'no-anchor');
+        if (anchor) svg.setAttribute('data-chapter-anchor', anchor);
+        else svg.removeAttribute('data-chapter-anchor');
+      }
+
+      function drawHandoffAnchor(id) {
+        var node = findNode(id);
+        if (!node) return null;
+        var box;
+        try { box = node.getBBox(); } catch (_) { return null; }
+        var overlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        var ring = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        overlay.setAttribute('class', 'chapter-handoff-overlay');
+        overlay.setAttribute('data-chapter-handoff-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        ring.setAttribute('class', 'chapter-handoff-anchor');
+        ring.setAttribute('x', String(box.x - 8));
+        ring.setAttribute('y', String(box.y - 8));
+        ring.setAttribute('width', String(box.width + 16));
+        ring.setAttribute('height', String(box.height + 16));
+        ring.setAttribute('rx', '10');
+        overlay.appendChild(ring);
+        svg.appendChild(overlay);
+        return overlay;
+      }
+
+      function clearHandoffPresentation() {
+        svg.removeAttribute('data-chapter-handoff');
+        svg.removeAttribute('data-chapter-anchor');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-handoff-overlay]'), function (overlay) { overlay.remove(); });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-role]'), function (node) { node.removeAttribute('data-chapter-role'); });
+        if (handoffReceipt) {
+          handoffReceipt.hidden = true;
+          handoffReceipt.textContent = '';
+        }
+      }
+
+      function completeHandoff(handoff, outcome) {
+        if (!handoff || currentHandoff !== handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        currentHandoff = null;
+        clearHandoffPresentation();
+        if (handoff.ownerToken && Archify.motionGovernor) Archify.motionGovernor.release(handoff.ownerToken);
+        handoff.resolve({ id: handoff.id, state: outcome || 'complete', anchor: handoff.anchor || null });
+        syncStoryControlsDisabled();
+        syncChapterPreview();
+        return true;
+      }
+
+      function settleHandoff(reason) {
+        var handoff = currentHandoff;
+        if (!handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        if (handoff.camera && handoff.camera.cancel) handoff.camera.cancel(reason || 'settled', true);
+        else if (Archify.view && Archify.view.reveal) Archify.view.reveal(handoff.focus, { instant: true, reason: reason || 'settled' });
+        completeHandoff(handoff, reason || 'settled');
+        return true;
+      }
+
+      function cancelHandoff(reason) {
+        var handoff = currentHandoff;
+        if (!handoff) return false;
+        if (handoff.holdTimer) clearTimeout(handoff.holdTimer);
+        handoff.holdTimer = null;
+        if (handoff.camera && handoff.camera.cancel) handoff.camera.cancel(reason || 'manual', false);
+        completeHandoff(handoff, reason || 'manual');
+        return true;
+      }
+
+      function afterHandoff(callback) {
+        if (!currentHandoff) { callback(); return; }
+        currentHandoff.finished.then(callback);
+      }
+
+      function beginHandoff(previousIndex, nextIndex, previous, destination, outgoingBeatIndex, reason) {
+        if (!Archify.view || !Archify.view.reveal) return null;
+        if (!previous || previousIndex === nextIndex) {
+          Archify.view.reveal(destination.focus, { reason: reason });
+          return null;
+        }
+        var delta = chapterDelta(previous, destination);
+        var anchor = chapterAnchor(previous, destination, outgoingBeatIndex, delta);
+        if (!handoffMotionAllowed()) {
+          Archify.view.reveal(destination.focus, { instant: true, reason: reason });
+          return null;
+        }
+        var resolver;
+        var handoff = {
+          id: ++handoffGeneration,
+          mode: anchor ? 'holding' : 'no-anchor',
+          anchor: anchor,
+          focus: destination.focus.slice(),
+          holdTimer: null,
+          camera: null,
+          ownerToken: 0,
+          finished: new Promise(function (resolve) { resolver = resolve; }),
+          resolve: resolver
+        };
+        currentHandoff = handoff;
+        classifyHandoff(delta, anchor);
+        if (anchor) {
+          drawHandoffAnchor(anchor);
+          var node = findNode(anchor);
+          var nodeLabel = node ? (node.getAttribute('data-node-label') || anchor) : anchor;
+          handoffReceipt.textContent = (previousIndex + 1 < 10 ? '0' : '') + (previousIndex + 1) +
+            ' \u2192 ' + (nextIndex + 1 < 10 ? '0' : '') + (nextIndex + 1) + ' \u00b7 via ' + nodeLabel;
+          handoffReceipt.hidden = false;
+        }
+        if (Archify.motionGovernor) {
+          handoff.ownerToken = Archify.motionGovernor.claim('handoff', function () {
+            if (currentHandoff === handoff) settleHandoff('preempted');
+          });
+        }
+        var startCamera = function () {
+          if (currentHandoff !== handoff) return;
+          handoff.holdTimer = null;
+          handoff.mode = 'settling';
+          svg.setAttribute('data-chapter-handoff', anchor ? 'settling' : 'no-anchor');
+          handoff.camera = Archify.view.reveal(destination.focus, { reason: reason, duration: 420 });
+          if (handoff.camera && handoff.camera.finished) {
+            handoff.camera.finished.then(function (outcome) {
+              if (currentHandoff === handoff) completeHandoff(handoff, outcome && outcome.state || 'complete');
+            });
+          } else {
+            completeHandoff(handoff, 'complete');
+          }
+        };
+        if (anchor) handoff.holdTimer = setTimeout(startCamera, 110);
+        else startCamera();
+        return handoff;
+      }
+
+      function centerChapterButton(button) {
+        if (!button || !chapterList) return false;
+        var target = Math.max(0, button.offsetLeft - (chapterList.clientWidth - button.offsetWidth) / 2);
+        if (typeof chapterList.scrollTo === 'function') chapterList.scrollTo({ left: target, behavior: 'auto' });
+        else chapterList.scrollLeft = target;
+        return true;
+      }
+
+      function focusChapterButton(index) {
+        if (!chapterButtons.length) return false;
+        index = Math.max(0, Math.min(chapterButtons.length - 1, index));
+        chapterButtons.forEach(function (button, buttonIndex) {
+          button.setAttribute('tabindex', buttonIndex === index ? '0' : '-1');
+        });
+        chapterButtons[index].focus();
+        centerChapterButton(chapterButtons[index]);
+        return true;
+      }
+
+      function buildChapterIndex() {
+        chapterButtons = [];
+        chapterList.textContent = '';
+        views.forEach(function (view, index) {
+          var item = document.createElement('li');
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'guided-view-chapter';
+          button.setAttribute('data-guided-view-id', view.id);
+          button.setAttribute('aria-pressed', 'false');
+          button.setAttribute('tabindex', index === 0 ? '0' : '-1');
+          button.setAttribute('aria-label', 'Open chapter ' + (index + 1) + ' of ' + views.length + ': ' + view.label + ', ' + view.focus.length + ' stops');
+          button.title = view.label + ' — ' + (view.note || view.focus.length + ' selected nodes');
+          var position = document.createElement('span');
+          position.className = 'guided-view-chapter-index';
+          position.setAttribute('aria-hidden', 'true');
+          position.textContent = (index + 1 < 10 ? '0' : '') + (index + 1);
+          var title = document.createElement('span');
+          title.className = 'guided-view-chapter-title';
+          title.textContent = view.label;
+          var stops = document.createElement('em');
+          stops.className = 'guided-view-chapter-count';
+          stops.textContent = view.focus.length + ' stop' + (view.focus.length === 1 ? '' : 's');
+          var delta = document.createElement('span');
+          delta.className = 'guided-view-chapter-delta';
+          delta.hidden = true;
+          delta.setAttribute('aria-hidden', 'true');
+          ['stay', 'enter', 'leave'].forEach(function (kind) {
+            var value = document.createElement('span');
+            value.setAttribute('data-delta-kind', kind);
+            delta.appendChild(value);
+          });
+          button.appendChild(position);
+          button.appendChild(title);
+          button.appendChild(stops);
+          button.appendChild(delta);
+          item.appendChild(button);
+          chapterList.appendChild(item);
+          chapterButtons.push(button);
+        });
+      }
+
+      function syncChapterIndex() {
+        chapterButtons.forEach(function (button, index) {
+          var current = index === activeIndex;
+          var stops = button.querySelector('.guided-view-chapter-count');
+          var deltaLabel = button.querySelector('.guided-view-chapter-delta');
+          var position = activeIndex < 0 ? 'available' : (current ? 'current' : (index < activeIndex ? 'before' : 'after'));
+          button.setAttribute('data-chapter-position', position);
+          button.setAttribute('aria-pressed', current ? 'true' : 'false');
+          button.setAttribute('tabindex', current || (activeIndex < 0 && index === 0) ? '0' : '-1');
+          if (current) {
+            stops.hidden = false;
+            deltaLabel.hidden = true;
+            button.removeAttribute('data-chapter-delta');
+            button.setAttribute('aria-label', 'Current chapter ' + (index + 1) + ' of ' + views.length + ': ' + views[index].label + ', ' + views[index].focus.length + ' stops');
+            button.title = views[index].label + ' — current chapter, ' + views[index].focus.length + ' stops';
+          } else {
+            var delta = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+            var compact = '=' + delta.stay.length + ' +' + delta.enter.length + ' \u2212' + delta.leave.length;
+            var expanded = delta.stay.length + ' stay, ' + delta.enter.length + ' enter, ' + delta.leave.length + ' leave';
+            stops.hidden = true;
+            deltaLabel.hidden = false;
+            deltaLabel.querySelector('[data-delta-kind="stay"]').textContent = '=' + delta.stay.length;
+            deltaLabel.querySelector('[data-delta-kind="enter"]').textContent = '+' + delta.enter.length;
+            deltaLabel.querySelector('[data-delta-kind="leave"]').textContent = '\u2212' + delta.leave.length;
+            button.setAttribute('data-chapter-delta', compact);
+            button.setAttribute('aria-label', 'Open chapter ' + (index + 1) + ' of ' + views.length + ': ' + views[index].label + '. Chapter focus delta: ' + expanded);
+            button.title = views[index].label + ' — ' + compact + ' chapter focus';
+          }
+          if (current) button.setAttribute('aria-current', 'step');
+          else button.removeAttribute('aria-current');
+          if (button.parentElement) button.parentElement.setAttribute('data-chapter-position', position);
+        });
+        if (activeIndex >= 0) centerChapterButton(chapterButtons[activeIndex]);
+      }
+
+      function chapterPreviewBlocked() {
+        if (document.hidden || playing || currentHandoff) return true;
+        if (document.documentElement.getAttribute('data-embed') === 'true') return true;
+        if (window.matchMedia && window.matchMedia('print').matches) return true;
+        if (svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active')) return true;
+        if (svg.hasAttribute('data-lens-active') || svg.hasAttribute('data-legend-preview-active')) return true;
+        if (svg.hasAttribute('data-relationship-preview-active') || svg.hasAttribute('data-intent-trace-active')) return true;
+        return activeIndex < 0 && svg.hasAttribute('data-focus-active');
+      }
+
+      function clearChapterPreviewPresentation() {
+        svg.removeAttribute('data-chapter-preview');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-chapter-preview-role]'), function (node) {
+          node.removeAttribute('data-chapter-preview-role');
+        });
+        chapterButtons.forEach(function (button) { button.removeAttribute('data-preview-active'); });
+        activePreviewIndex = -1;
+        if (previewOwnerToken && Archify.motionGovernor) {
+          var token = previewOwnerToken;
+          previewOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        }
+      }
+
+      function clearChapterPreview(options) {
+        options = options || {};
+        previewGeneration += 1;
+        if (options.clearIntents !== false) {
+          pointerPreviewIntent = null;
+          focusPreviewIntent = null;
+        }
+        clearChapterPreviewPresentation();
+        return true;
+      }
+
+      function winningChapterPreviewIntent() {
+        return [pointerPreviewIntent, focusPreviewIntent].filter(function (intent) {
+          return intent && intent.index >= 0 && intent.index < views.length && intent.index !== activeIndex;
+        }).sort(function (left, right) { return right.generation - left.generation; })[0] || null;
+      }
+
+      function showChapterPreview(index) {
+        if (index < 0 || index >= views.length || index === activeIndex || chapterPreviewBlocked()) {
+          clearChapterPreviewPresentation();
+          return false;
+        }
+        if (activePreviewIndex === index && svg.getAttribute('data-chapter-preview') === views[index].id) return true;
+        clearChapterPreviewPresentation();
+        var delta = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+        var roles = {};
+        delta.stay.forEach(function (id) { roles[id] = 'stay'; });
+        delta.enter.forEach(function (id) { roles[id] = 'enter'; });
+        delta.leave.forEach(function (id) { roles[id] = 'leave'; });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+          var role = roles[node.getAttribute('data-node-id')];
+          if (role) node.setAttribute('data-chapter-preview-role', role);
+        });
+        svg.setAttribute('data-chapter-preview', views[index].id);
+        chapterButtons[index].setAttribute('data-preview-active', 'true');
+        activePreviewIndex = index;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          previewOwnerToken = Archify.motionGovernor.claim('chapter-preview', function () {
+            previewOwnerToken = 0;
+            clearChapterPreviewPresentation();
+          });
+        }
+        return true;
+      }
+
+      function syncChapterPreview() {
+        var intent = winningChapterPreviewIntent();
+        if (!intent || chapterPreviewBlocked()) {
+          clearChapterPreviewPresentation();
+          return false;
+        }
+        return showChapterPreview(intent.index);
+      }
+
+      function setChapterPreviewIntent(source, index) {
+        var intent = { index: index, generation: ++previewGeneration };
+        if (source === 'pointer') pointerPreviewIntent = intent;
+        else focusPreviewIntent = intent;
+        if (playing) pausePlayback();
+        return syncChapterPreview();
+      }
+
+      function clearChapterPreviewIntent(source, index) {
+        var intent = source === 'pointer' ? pointerPreviewIntent : focusPreviewIntent;
+        if (intent && (typeof index !== 'number' || intent.index === index)) {
+          if (source === 'pointer') pointerPreviewIntent = null;
+          else focusPreviewIntent = null;
+          previewGeneration += 1;
+        }
+        return syncChapterPreview();
+      }
+
+      function hoverCapable() {
+        return !!(window.matchMedia && window.matchMedia('(hover: hover)').matches);
+      }
+
+      function sharePlaybackRequested() {
+        try { return new URLSearchParams(location.search).get('play') === '1'; }
+        catch (_) { return false; }
+      }
+
+      autoplayPending = sharePlaybackRequested();
+      if (autoplayPending) {
+        document.documentElement.setAttribute('data-share-playback', 'true');
+        setAutoplayState('pending');
+      }
+
+      function setAutoplayState(state) {
+        if (state) panel.setAttribute('data-autoplay', state);
+        else panel.removeAttribute('data-autoplay');
+        renderShareCue();
+      }
+
+      function shareCueStatus(state) {
+        return {
+          pending: 'Ready',
+          playing: 'Playing',
+          complete: 'Settled',
+          interrupted: 'Paused',
+          pinned: 'Pinned',
+          'reduced-motion': 'Still'
+        }[state] || 'Ready';
+      }
+
+      function shareCueBeatCopy(state, view, stops) {
+        var total = stops.length;
+        var activeStop = storyBeatIndex >= 0 ? stops[storyBeatIndex] : null;
+        if ((state === 'playing' || state === 'interrupted') && activeStop) {
+          return 'Step ' + (storyBeatIndex + 1 < 10 ? '0' : '') + (storyBeatIndex + 1) + ' / ' +
+            (total < 10 ? '0' : '') + total + ' · ' + activeStop.textContent;
+        }
+        if (state === 'pinned' && activeStop) {
+          return storyBeatCopy(storySteps[storyBeatIndex], total);
+        }
+        if (state === 'reduced-motion' && activeStop && hashBeatMatchesCurrent()) {
+          return 'Step ' + (storyBeatIndex + 1 < 10 ? '0' : '') + (storyBeatIndex + 1) + ' / ' +
+            (total < 10 ? '0' : '') + total + ' · ' + activeStop.textContent + ' · Static moment';
+        }
+        if (state === 'complete') return total + ' steps complete · ' + (view.note || 'Path settled for reading.');
+        if (state === 'reduced-motion') return total + ' steps · Static path';
+        if (state === 'pending') return total + ' steps · Ready';
+        return view.note || view.focus.length + ' selected nodes';
+      }
+
+      function renderShareCue() {
+        if (!shareCue) return;
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var shareMode = document.documentElement.getAttribute('data-share-playback') === 'true';
+        var embedMode = document.documentElement.getAttribute('data-embed') === 'true';
+        var pinnedMode = !shareMode && embedMode && hashBeatMatchesCurrent();
+        if (pinnedMode) document.documentElement.setAttribute('data-share-moment', 'true');
+        else document.documentElement.removeAttribute('data-share-moment');
+        shareCue.hidden = !(embedMode && view && (shareMode || pinnedMode));
+        if (shareCue.hidden) return;
+        var state = pinnedMode ? 'pinned' : (panel.getAttribute('data-autoplay') || 'pending');
+        var stops = Array.prototype.slice.call(trail.querySelectorAll('[data-story-node]'));
+        var route = stops.map(function (stop, index) {
+          if (index === 0) return stop.textContent;
+          var kind = stop.getAttribute('data-story-link');
+          var separator = kind === 'forward' ? '\u2192' : (kind === 'reverse' ? '\u2190' : (kind === 'multiple' ? '\u21c4' : '\u00b7'));
+          return separator + ' ' + stop.textContent;
+        }).join(' ');
+        var beatCopy = shareCueBeatCopy(state, view, stops);
+        shareCue.setAttribute('data-state', state);
+        shareCue.setAttribute('aria-live', state === 'playing' ? 'off' : 'polite');
+        shareCueState.textContent = shareCueStatus(state);
+        shareCueCount.textContent = 'Chapter ' + (activeIndex + 1 < 10 ? '0' : '') + (activeIndex + 1) + ' / ' + (views.length < 10 ? '0' : '') + views.length;
+        shareCueLabel.textContent = view.label;
+        shareCueNote.textContent = beatCopy;
+        shareCueRoute.textContent = route;
+        shareCue.setAttribute('aria-label', shareCueStatus(state) + ' chapter ' + (activeIndex + 1) + ' of ' + views.length + ': ' + view.label + '. ' + beatCopy + '. ' + route);
+      }
+
+      function setShareCueProgress(fraction) {
+        if (!shareCueProgress) return;
+        shareCueProgress.style.animation = 'none';
+        shareCueProgress.style.setProperty('--guided-progress-start', String(Math.max(0, Math.min(1, fraction))));
+        shareCueProgress.style.transform = 'scaleX(' + Math.max(0, Math.min(1, fraction)) + ')';
+      }
+
+      function startShareCueProgress(fraction, duration) {
+        if (!shareCueProgress) return;
+        setShareCueProgress(fraction || 0);
+        void shareCueProgress.offsetWidth;
+        shareCueProgress.style.animation = 'archify-guided-progress ' + Math.max(1, duration || VIEW_INTERVAL_MS) + 'ms linear forwards';
+      }
+
+      function storyNodeLabel(node, fallback) {
+        if (!node) return fallback;
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '');
+      }
+
+      function storyEdgeKey(edge) {
+        return edge.getAttribute('data-edge-key') || (
+          edge.getAttribute('data-edge-from') + '\u0000' +
+          edge.getAttribute('data-edge-to') + '\u0000' +
+          (edge.getAttribute('data-edge-label') || '')
+        );
+      }
+
+      function uniqueStoryEdges(edgeList) {
+        var positions = {};
+        var unique = [];
+        edgeList.forEach(function (edge) {
+          var key = storyEdgeKey(edge);
+          if (!Object.prototype.hasOwnProperty.call(positions, key)) {
+            positions[key] = unique.length;
+            unique.push(edge);
+            return;
+          }
+          var index = positions[key];
+          if (!storyGeometry(unique[index]).length && storyGeometry(edge).length) unique[index] = edge;
+        });
+        return unique;
+      }
+
+      function storyStep(view, index, edgeList, byId) {
+        var id = view.focus[index];
+        var node = byId[id];
+        var previousId = index > 0 ? view.focus[index - 1] : '';
+        var forward = [];
+        var reverse = [];
+        if (previousId) {
+          edgeList.forEach(function (edge) {
+            var from = edge.getAttribute('data-edge-from');
+            var to = edge.getAttribute('data-edge-to');
+            if (from === previousId && to === id) forward.push(edge);
+            else if (from === id && to === previousId) reverse.push(edge);
+          });
+        }
+        forward = uniqueStoryEdges(forward);
+        reverse = uniqueStoryEdges(reverse);
+        var edges = forward.concat(reverse).sort(function (left, right) {
+          return edgeList.indexOf(left) - edgeList.indexOf(right);
+        });
+        var relation = index === 0 ? 'start' : (!edges.length ? 'group' : (
+          edges.length === 1 && forward.length === 1 ? 'forward' :
+          (edges.length === 1 && reverse.length === 1 ? 'reverse' : 'multiple')
+        ));
+        return {
+          index: index,
+          nodeId: id,
+          nodeLabel: storyNodeLabel(byId[id], id),
+          previousId: previousId,
+          previousLabel: previousId ? storyNodeLabel(byId[previousId], previousId) : '',
+          relation: relation,
+          edges: edges,
+          edgeKeys: edges.map(storyEdgeKey),
+          edgeLabels: edges.map(function (edge) { return edge.getAttribute('data-edge-label') || ''; }).filter(function (value, edgeIndex, values) {
+            return value && values.indexOf(value) === edgeIndex;
+          }),
+          responsibility: node ? (node.getAttribute('data-node-sublabel') || '') : '',
+          context: node ? (node.getAttribute('data-node-context') || '') : ''
+        };
+      }
+
+      function storyBeatCopy(step, total) {
+        if (!step) return '';
+        var position = (step.index + 1 < 10 ? '0' : '') + (step.index + 1);
+        var countValue = (total < 10 ? '0' : '') + total;
+        if (step.relation === 'start') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.nodeLabel + ' \u00b7 starting point';
+        if (step.relation === 'forward') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u2192 ' + step.nodeLabel;
+        if (step.relation === 'reverse') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.nodeLabel + ' \u2192 ' + step.previousLabel + ' \u00b7 reverse authored link';
+        if (step.relation === 'multiple') return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u21c4 ' + step.nodeLabel + ' \u00b7 ' + step.edges.length + ' authored links';
+        return 'Beat ' + position + ' / ' + countValue + ' \u00b7 ' + step.previousLabel + ' \u00b7 ' + step.nodeLabel + ' \u00b7 grouped \u00b7 no direct link';
+      }
+
+      function storyBeatAria(step, total) {
+        var prefix = 'Story beat ' + (step.index + 1) + ' of ' + total + ': ' + step.nodeLabel + '. ';
+        if (step.relation === 'start') return prefix + 'Starting point.';
+        if (step.relation === 'forward') return prefix + 'From ' + step.previousLabel + ' through one authored forward relationship.';
+        if (step.relation === 'reverse') return prefix + 'From ' + step.previousLabel + '; the authored relationship points from ' + step.nodeLabel + ' to ' + step.previousLabel + '.';
+        if (step.relation === 'multiple') return prefix + 'From ' + step.previousLabel + ' through ' + step.edges.length + ' authored relationships; shown without arbitrary motion.';
+        return prefix + 'Grouped from ' + step.previousLabel + ' with no direct authored relationship.';
+      }
+
+      function storyCaptionRouteCopy(step) {
+        if (step.relation === 'start') return step.nodeLabel + ' · Starting point';
+        if (step.relation === 'reverse') return step.previousLabel + ' ← ' + step.nodeLabel;
+        if (step.relation === 'multiple') return step.previousLabel + ' ⇄ ' + step.nodeLabel;
+        if (step.relation === 'group') return step.previousLabel + ' · ' + step.nodeLabel;
+        return step.previousLabel + ' → ' + step.nodeLabel;
+      }
+
+      function storyCaptionDetailCopy(step) {
+        var facts = [];
+        if (step.relation === 'group') facts.push('Grouped transition · no direct authored link');
+        else if (step.edgeLabels.length) facts.push(step.edgeLabels.slice(0, 3).join(' + ') + (step.edgeLabels.length > 3 ? ' +' + (step.edgeLabels.length - 3) + ' more' : ''));
+        else if (step.relation === 'reverse') facts.push('Reverse authored relationship');
+        else if (step.relation === 'multiple') facts.push(step.edges.length + ' authored relationships');
+        else if (step.relation !== 'start') facts.push('Authored relationship');
+        if (step.relation === 'reverse') facts.push('authored direction: ' + step.nodeLabel + ' → ' + step.previousLabel);
+        if (step.responsibility) facts.push(step.responsibility);
+        if (step.context) facts.push(step.context);
+        if (!facts.length) facts.push('Authored starting point');
+        return facts.join(' · ');
+      }
+
+      function renderStoryCaption(step, total, nextStep) {
+        if (!storyCaption) return;
+        if (!step) {
+          storyCaption.hidden = true;
+          storyCaption.removeAttribute('data-story-caption');
+          storyCaptionNext.hidden = true;
+          storyCaptionNextLabel.textContent = '';
+          return;
+        }
+        storyCaption.hidden = false;
+        storyCaption.setAttribute('data-story-caption', step.relation);
+        storyCaption.setAttribute('aria-live', playing ? 'off' : 'polite');
+        storyCaptionIndex.textContent = (step.index + 1 < 10 ? '0' : '') + (step.index + 1) + ' / ' + (total < 10 ? '0' : '') + total;
+        storyCaptionRoute.textContent = storyCaptionRouteCopy(step);
+        storyCaptionDetail.textContent = storyCaptionDetailCopy(step);
+        storyCaptionNext.hidden = !nextStep;
+        storyCaptionNextLabel.textContent = nextStep
+          ? ((nextStep.index + 1 < 10 ? '0' : '') + (nextStep.index + 1) + ' · ' + nextStep.nodeLabel)
+          : '';
+        storyCaption.style.animation = 'none';
+        void storyCaption.offsetWidth;
+        storyCaption.style.removeProperty('animation');
+      }
+
+      function storyMomentLink() {
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        if (!view || !step) return '';
+        var url = new URL(location.href);
+        url.searchParams.delete('play');
+        url.hash = 'view=' + encodeURIComponent(view.id) + '&beat=' + encodeURIComponent(step.nodeId);
+        return url.href;
+      }
+
+      function fallbackCopyStoryMoment(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+
+      function resetBeatLinkFeedback() {
+        if (beatLinkFeedbackTimer) clearTimeout(beatLinkFeedbackTimer);
+        beatLinkFeedbackTimer = null;
+        beatLink.removeAttribute('data-copy-state');
+        beatLinkLabel.textContent = 'Copy moment';
+      }
+
+      function syncBeatLink() {
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        var available = !!(activeIndex >= 0 && step && !currentHandoff);
+        beatLink.disabled = !available;
+        if (!beatLink.hasAttribute('data-copy-state')) beatLinkLabel.textContent = 'Copy moment';
+        var description = available
+          ? 'Copy link to current story moment: Beat ' + (step.index + 1) + ' of ' + storySteps.length + ': ' + step.nodeLabel
+          : 'Select a Story Beat to copy its exact link';
+        beatLink.setAttribute('aria-label', description);
+        beatLink.title = description;
+      }
+
+      function setBeatLinkFeedback(copied) {
+        resetBeatLinkFeedback();
+        beatLink.setAttribute('data-copy-state', copied ? 'copied' : 'failed');
+        beatLinkLabel.textContent = copied ? 'Copied' : 'Copy failed';
+        beatLink.setAttribute('aria-label', copied ? 'Moment link copied' : 'Could not copy story moment link');
+        beatLinkFeedbackTimer = setTimeout(function () {
+          resetBeatLinkFeedback();
+          syncBeatLink();
+        }, 1600);
+      }
+
+      function copyStoryMomentLink() {
+        if (playing) pausePlayback();
+        var value = storyMomentLink();
+        if (!value) return Promise.resolve(false);
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopyStoryMoment(value); })
+          : Promise.resolve(fallbackCopyStoryMoment(value));
+        return copy.then(function (copied) {
+          setBeatLinkFeedback(copied);
+          return copied;
+        });
+      }
+
+      function hashBeatMatchesCurrent() {
+        var view = activeIndex >= 0 ? views[activeIndex] : null;
+        var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+        if (!view || !step) return false;
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          return params.get('view') === view.id && params.get('beat') === step.nodeId;
+        } catch (_) { return false; }
+      }
+
+      function storyMotionAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (document.documentElement.getAttribute('data-motion') !== 'live') return false;
+        if (document.documentElement.getAttribute('data-embed') === 'true' &&
+            document.documentElement.getAttribute('data-share-playback') !== 'true') return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        return !(Archify.motionGovernor && Archify.motionGovernor.isPaused());
+      }
+
+      function storyAutomaticPlaybackAllowed() {
+        if (document.hidden || reducedMotion()) return false;
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) return !Archify.motionGovernor.isPaused();
+        return true;
+      }
+
+      function clearStoryPulse(options) {
+        options = options || {};
+        storyPulseGeneration += 1;
+        Array.prototype.forEach.call(svg.querySelectorAll('.story-trail-flow[data-story-pulse]'), function (flow) {
+          flow.removeAttribute('data-story-pulse');
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-carrier-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        if (storyPulseOwnerToken && options.release !== false && Archify.motionGovernor) {
+          var token = storyPulseOwnerToken;
+          storyPulseOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        } else if (options.release === false) storyPulseOwnerToken = 0;
+      }
+
+      function pulseStoryStep(step) {
+        clearStoryPulse();
+        if (!step || (step.relation !== 'forward' && step.relation !== 'reverse') || step.edges.length !== 1 || !storyMotionAllowed()) return false;
+        var flows = Array.prototype.slice.call(svg.querySelectorAll('.story-trail-flow[data-story-beat-step="' + step.index + '"]'));
+        if (!flows.length) return false;
+        var pulseGeneration = storyPulseGeneration;
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          storyPulseOwnerToken = Archify.motionGovernor.claim('story', function () {
+            clearStoryPulse({ release: false });
+          });
+        }
+        flows.forEach(function (flow) { flow.setAttribute('data-story-pulse', 'true'); });
+        if (Archify.flowTokens && typeof Archify.flowTokens.create === 'function') {
+          var edge = step.edges[0];
+          var shapes = storyGeometry(edge);
+          var carrier = shapes.length ? Archify.flowTokens.create(edge, shapes[0], {
+            className: 'story-flow-token',
+            duration: '0.78s'
+          }) : null;
+          if (carrier) {
+            var carrierOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            var carrierWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            carrierOverlay.setAttribute('class', 'story-carrier-overlay');
+            carrierOverlay.setAttribute('data-story-carrier-overlay', '');
+            carrierOverlay.setAttribute('aria-hidden', 'true');
+            if (edge.hasAttribute('transform')) carrierWrapper.setAttribute('transform', edge.getAttribute('transform'));
+            carrier.setAttribute('data-story-carrier-token', '');
+            carrier.setAttribute('data-story-beat-step', String(step.index));
+            carrierWrapper.appendChild(carrier);
+            carrierOverlay.appendChild(carrierWrapper);
+            var firstNode = svg.querySelector('[data-node-id]');
+            while (firstNode && firstNode.parentNode !== svg) firstNode = firstNode.parentNode;
+            if (firstNode) svg.insertBefore(carrierOverlay, firstNode);
+            else svg.appendChild(carrierOverlay);
+          }
+        }
+        void flows[0].getBoundingClientRect();
+        flows[0].addEventListener('animationend', function () {
+          if (pulseGeneration === storyPulseGeneration) clearStoryPulse();
+        }, { once: true });
+        return true;
+      }
+
+      function stopStoryBeatTimer(options) {
+        options = options || {};
+        storyPlaybackGeneration += 1;
+        if (storyBeatTimer && options.preserveElapsed === true && storyBeatStartedAt) {
+          storyBeatElapsedMs = Math.min(storyBeatDwellMs, storyBeatElapsedMs + Math.max(0, Date.now() - storyBeatStartedAt));
+        }
+        if (storyBeatTimer) clearTimeout(storyBeatTimer);
+        storyBeatTimer = null;
+        storyBeatStartedAt = 0;
+      }
+
+      function centerStoryStop(stop) {
+        if (!stop || !trail) return false;
+        var target = Math.max(0, stop.offsetLeft - (trail.clientWidth - stop.offsetWidth) / 2);
+        trail.scrollLeft = target;
+        return true;
+      }
+
+      function storyBeatDwell(total) {
+        return Math.max(STORY_FOLLOW_MIN_DWELL_MS, VIEW_INTERVAL_MS / Math.max(1, total));
+      }
+
+      function clearStoryFollow() {
+        storyFollowGeneration += 1;
+        svg.removeAttribute('data-story-follow');
+        panel.removeAttribute('data-story-follow');
+        panel.removeAttribute('data-story-follow-node');
+      }
+
+      function storyFrameIds(step) {
+        if (!step) return [];
+        var ids = [];
+        if (step.index > 0 && storySteps[step.index - 1]) ids.push(storySteps[step.index - 1].nodeId);
+        ids.push(step.nodeId);
+        if (step.index + 1 < storySteps.length) ids.push(storySteps[step.index + 1].nodeId);
+        return ids;
+      }
+
+      function followStoryStep(step, options) {
+        options = options || {};
+        if (!step || document.hidden) return false;
+        if (!Archify.view || typeof Archify.view.reveal !== 'function') {
+          var deferredIndex = step.index;
+          var deferredGeneration = ++storyFollowGeneration;
+          requestAnimationFrame(function () {
+            if (deferredGeneration !== storyFollowGeneration || storyBeatIndex !== deferredIndex) return;
+            if (Archify.view && typeof Archify.view.reveal === 'function') followStoryStep(step, options);
+          });
+          return true;
+        }
+        if (window.matchMedia && window.matchMedia('print').matches) return false;
+        var embed = document.documentElement.getAttribute('data-embed') === 'true';
+        var explicitEmbedPlayback = document.documentElement.getAttribute('data-share-playback') === 'true';
+        if (embed && !explicitEmbedPlayback && options.linked !== true) return false;
+        var ids = storyFrameIds(step);
+        var generation = ++storyFollowGeneration;
+        svg.setAttribute('data-story-follow', step.nodeId);
+        panel.setAttribute('data-story-follow', 'moving');
+        panel.setAttribute('data-story-follow-node', step.nodeId);
+        var receipt = Archify.view.reveal(ids, {
+          reason: options.manual === true ? 'story-beat' : 'story-follow',
+          padding: 64,
+          maxScale: 1.65,
+          duration: STORY_FOLLOW_DURATION_MS,
+          instant: options.instant === true || reducedMotion() || document.documentElement.getAttribute('data-motion') !== 'live'
+        });
+        if (receipt && receipt.finished && typeof receipt.finished.then === 'function') {
+          receipt.finished.then(function (result) {
+            if (generation !== storyFollowGeneration || storyBeatIndex !== step.index) return;
+            svg.removeAttribute('data-story-follow');
+            panel.setAttribute('data-story-follow', result && result.state === 'complete' ? 'settled' : 'interrupted');
+          });
+        } else if (generation === storyFollowGeneration) {
+          panel.setAttribute('data-story-follow', 'settled');
+        }
+        return receipt;
+      }
+
+      function setStoryBeat(index, options) {
+        options = options || {};
+        var stops = Array.prototype.slice.call(trail.querySelectorAll('[data-story-node]'));
+        if (!stops.length) return false;
+        resetBeatLinkFeedback();
+        storyBeatIndex = Math.max(0, Math.min(stops.length - 1, index));
+        var nextStep = storyBeatIndex + 1 < storySteps.length ? storySteps[storyBeatIndex + 1] : null;
+        svg.setAttribute('data-story-beat', (storyBeatIndex + 1) + '/' + stops.length);
+        panel.setAttribute('data-story-beat', (storyBeatIndex + 1) + '/' + stops.length);
+        if (nextStep) {
+          svg.setAttribute('data-story-next', nextStep.nodeId);
+          panel.setAttribute('data-story-next', nextStep.nodeId);
+        } else {
+          svg.removeAttribute('data-story-next');
+          panel.removeAttribute('data-story-next');
+        }
+        function storyBeatState(step) {
+          if (step < storyBeatIndex) return 'past';
+          if (step === storyBeatIndex) return 'active';
+          if (step === storyBeatIndex + 1) return 'next';
+          return 'pending';
+        }
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-step]'), function (node) {
+          var step = Number(node.getAttribute('data-story-step'));
+          node.setAttribute('data-story-beat-state', storyBeatState(step));
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-beat-step]'), function (edge) {
+          var step = Number(edge.getAttribute('data-story-beat-step'));
+          edge.setAttribute('data-story-beat-state', storyBeatState(step));
+        });
+        stops.forEach(function (stop, step) {
+          stop.setAttribute('data-story-beat-state', storyBeatState(step));
+          if (step === storyBeatIndex) stop.setAttribute('aria-current', 'step');
+          else stop.removeAttribute('aria-current');
+        });
+        note.setAttribute('aria-live', 'off');
+        note.textContent = storyBeatCopy(storySteps[storyBeatIndex], stops.length);
+        renderStoryCaption(storySteps[storyBeatIndex], stops.length, nextStep);
+        if (options.center === true) centerStoryStop(stops[storyBeatIndex]);
+        if (options.pulse === true) pulseStoryStep(storySteps[storyBeatIndex]);
+        else clearStoryPulse();
+        if (options.follow === true) followStoryStep(storySteps[storyBeatIndex], {
+          manual: options.manual === true,
+          linked: options.linked === true,
+          instant: options.followInstant === true
+        });
+        renderShareCue();
+        syncBeatLink();
+        return true;
+      }
+
+      function settleStoryBeats() {
+        stopStoryBeatTimer();
+        clearStoryPulse();
+        clearStoryFollow();
+        resetBeatLinkFeedback();
+        storyBeatIndex = -1;
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = 0;
+        svg.removeAttribute('data-story-beat');
+        svg.removeAttribute('data-story-next');
+        panel.removeAttribute('data-story-beat');
+        panel.removeAttribute('data-story-next');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-beat-state]'), function (el) {
+          el.removeAttribute('data-story-beat-state');
+        });
+        Array.prototype.forEach.call(trail.querySelectorAll('[data-story-beat-state]'), function (stop) {
+          stop.removeAttribute('data-story-beat-state');
+          stop.removeAttribute('aria-current');
+        });
+        note.setAttribute('aria-live', 'polite');
+        if (activeIndex >= 0) note.textContent = views[activeIndex].note || views[activeIndex].focus.length + ' selected nodes';
+        renderStoryCaption(null, 0);
+        renderShareCue();
+        syncBeatLink();
+      }
+
+      function clearStoryTrail() {
+        stopStoryBeatTimer();
+        clearStoryPulse();
+        clearStoryFollow();
+        resetBeatLinkFeedback();
+        storyBeatIndex = -1;
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = 0;
+        storySteps = [];
+        svg.removeAttribute('data-story-active');
+        svg.removeAttribute('data-story-playing');
+        svg.removeAttribute('data-story-beat');
+        svg.removeAttribute('data-story-next');
+        panel.removeAttribute('data-story-beat');
+        panel.removeAttribute('data-story-next');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-story-step], [data-story-beat-state]'), function (node) {
+          node.removeAttribute('data-story-step');
+          node.removeAttribute('data-story-beat-state');
+          node.style.removeProperty('--story-step');
+        });
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-story-beat-step]'), function (edge) {
+          edge.removeAttribute('data-story-beat-step');
+          edge.removeAttribute('data-story-beat-state');
+        });
+        trail.textContent = '';
+        trail.hidden = true;
+        trail.removeAttribute('aria-label');
+        renderStoryCaption(null, 0);
+        syncBeatLink();
+      }
+
+      function storyGeometry(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
 
-    <!-- Main Diagram -->
-    <div class="diagram-container">
-      <svg viewBox="0 0 720 900" role="img" aria-label="Agent Tool Call Workflow — Renderer-driven workflow prototype with lanes, anchored nodes, and orthogonal edges (workflow diagram)">
-        <!-- Definitions -->
-        <defs>
-          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-default" />
-          </marker>
-          <marker id="arrowhead-emphasis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-emphasis" />
-          </marker>
-          <marker id="arrowhead-security" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-security" />
-          </marker>
-          <marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" class="m-dashed" />
-          </marker>
-          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-            <path d="M 40 0 L 0 0 0 40" class="c-grid" stroke-width="0.5"/>
-          </pattern>
-        </defs>
+      function renderStoryTrail(view) {
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        clearStoryTrail();
+        if (!view) return;
+
+        var nodeList = Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+        var edgeList = Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+        var byId = {};
+        nodeList.forEach(function (node) { byId[node.getAttribute('data-node-id')] = node; });
+        storySteps = view.focus.map(function (_, index) { return storyStep(view, index, edgeList, byId); });
+        var labels = [];
+        storySteps.forEach(function (step, index) {
+          var id = step.nodeId;
+          var node = byId[id];
+          if (!node) return;
+          node.setAttribute('data-story-step', String(index));
+          node.style.setProperty('--story-step', String(index));
+          var nodeLabel = step.nodeLabel;
+          labels.push(nodeLabel);
+          var stop = document.createElement('button');
+          stop.type = 'button';
+          stop.className = 'guided-view-stop';
+          stop.setAttribute('data-story-node', id);
+          stop.setAttribute('data-story-index', String(index));
+          stop.setAttribute('data-story-relation', step.relation);
+          stop.setAttribute('data-story-number', (index + 1 < 10 ? '0' : '') + (index + 1));
+          if (index > 0) stop.setAttribute('data-story-link', step.relation);
+          stop.style.setProperty('--story-step', String(index));
+          stop.setAttribute('aria-label', storyBeatAria(step, storySteps.length));
+          stop.title = storyBeatCopy(step, storySteps.length);
+          stop.textContent = nodeLabel;
+          trail.appendChild(stop);
+        });
+        trail.hidden = labels.length === 0;
+        trail.setAttribute('aria-label', 'Story trail for ' + view.label + ': ' + labels.length + ' beats');
+        trail.scrollLeft = 0;
+        svg.setAttribute('data-story-active', view.id);
+
+        var overlay = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        overlay.setAttribute('class', 'story-trail-overlay');
+        overlay.setAttribute('data-story-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var copied = 0;
+        storySteps.forEach(function (step) {
+          step.edges.forEach(function (edge) {
+            var edgeBeat = step.index;
+            edge.setAttribute('data-story-beat-step', String(edgeBeat));
+            var wrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+            if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+            storyGeometry(edge).forEach(function (shape) {
+              var clone = shape.cloneNode(false);
+              clone.removeAttribute('id');
+              clone.removeAttribute('marker-start');
+              clone.removeAttribute('marker-mid');
+              clone.removeAttribute('marker-end');
+              clone.removeAttribute('aria-label');
+              clone.removeAttribute('role');
+              clone.removeAttribute('data-animate');
+              clone.removeAttribute('data-edge-from');
+              clone.removeAttribute('data-edge-to');
+              clone.removeAttribute('data-edge-key');
+              clone.removeAttribute('data-edge-id');
+              clone.removeAttribute('data-edge-label');
+              clone.setAttribute('class', 'story-trail-flow');
+              clone.setAttribute('data-story-beat-step', String(edgeBeat));
+              clone.style.setProperty('--story-step', String(edgeBeat));
+              wrapper.appendChild(clone);
+              copied += 1;
+            });
+            if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+          });
+        });
+        if (copied) {
+          var firstEdge = edgeList[0];
+          if (firstEdge && firstEdge.parentNode) firstEdge.parentNode.insertBefore(overlay, firstEdge);
+          else svg.insertBefore(overlay, svg.firstChild);
+        }
+      }
 
-        <!-- Background Grid -->
-        <rect width="100%" height="100%" fill="url(#grid)" />
+      function syncStoryPlayback() {
+        var shouldPlay = playing && activeIndex >= 0;
+        if (shouldPlay && svg.getAttribute('data-story-playing') !== 'true') svg.setAttribute('data-story-playing', 'true');
+        else if (!shouldPlay && svg.hasAttribute('data-story-playing')) svg.removeAttribute('data-story-playing');
+      }
 
-        <!-- Swimlanes -->
-        <rect x="40" y="52" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="54" y="74" class="t-dim" font-size="10" font-weight="600">01 / User Interface</text>
+      function resetProgress(fraction) {
+        fraction = Math.max(0, Math.min(1, Number(fraction) || 0));
+        progressBar.style.animation = 'none';
+        progressBar.style.setProperty('--guided-progress-start', String(fraction));
+        progressBar.style.transform = 'scaleX(' + fraction + ')';
+      }
 
-        <rect x="40" y="176" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="54" y="198" class="t-dim" font-size="10" font-weight="600">02 / Agent Runtime</text>
+      function startProgress(fraction, duration) {
+        resetProgress(fraction);
+        void progressBar.offsetWidth;
+        progressBar.style.animation = 'archify-guided-progress ' + Math.max(1, duration || VIEW_INTERVAL_MS) + 'ms linear forwards';
+      }
 
-        <rect x="40" y="300" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="54" y="322" class="t-dim" font-size="10" font-weight="600">03 / Policy Boundary</text>
+      function currentStoryProgress() {
+        var total = storySteps.length;
+        if (!total || storyBeatIndex < 0) return 0;
+        var elapsed = storyBeatElapsedMs;
+        if (playing && storyBeatTimer && storyBeatStartedAt) elapsed += Math.max(0, Date.now() - storyBeatStartedAt);
+        var dwell = storyBeatDwellMs || storyBeatDwell(total);
+        return Math.max(0, Math.min(1, (storyBeatIndex + Math.min(1, elapsed / dwell)) / total));
+      }
 
-        <rect x="40" y="424" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <rect x="46" y="430" width="628" height="92" rx="8" class="c-security-group" stroke-width="1"/>
-        <text x="54" y="446" class="t-security" font-size="10" font-weight="600">EX / Exception Handling</text>
+      function renderPlayback() {
+        var automaticPlaybackAllowed = storyAutomaticPlaybackAllowed();
+        panel.setAttribute('data-playing', playing ? 'true' : 'false');
+        syncStoryPlayback();
+        play.disabled = !playing && !automaticPlaybackAllowed;
+        play.setAttribute('aria-pressed', playing ? 'true' : 'false');
+        play.setAttribute('aria-label', playing ? 'Pause guided story' : (!automaticPlaybackAllowed ? 'Story playback unavailable while motion is Still' : (storyPlaybackComplete ? 'Replay guided story' : 'Play guided story')));
+        play.title = playing ? 'Pause guided story (P)' : (!automaticPlaybackAllowed ? 'Switch motion to Live to play the guided story' : (storyPlaybackComplete ? 'Replay guided story (P)' : 'Play guided story (P)'));
+        playIcon.textContent = playing ? '\u2016' : '\u25b6';
+        playLabel.textContent = playing ? 'Pause' : (storyPlaybackComplete ? 'Replay story' : 'Play story');
+        if (storyCaption && !storyCaption.hidden) storyCaption.setAttribute('aria-live', playing ? 'off' : 'polite');
+      }
 
-        <rect x="40" y="548" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="54" y="570" class="t-dim" font-size="10" font-weight="600">05 / Tool Execution</text>
+      function render() {
+        var view = views[activeIndex];
+        count.textContent = activeIndex < 0 ? '0 / ' + views.length : (activeIndex + 1) + ' / ' + views.length;
+        label.textContent = view ? view.label : 'Explore this system';
+        note.setAttribute('aria-live', storyBeatIndex >= 0 ? 'off' : 'polite');
+        note.textContent = storyBeatIndex >= 0
+          ? storyBeatCopy(storySteps[storyBeatIndex], storySteps.length)
+          : (view ? (view.note || view.focus.length + ' selected nodes') : 'Step through curated paths without changing the source diagram.');
+        prev.disabled = activeIndex < 0;
+        next.disabled = activeIndex >= views.length - 1;
+        all.disabled = activeIndex < 0;
+        panel.setAttribute('data-active-view', view ? view.id : 'all');
+        syncChapterIndex();
+        renderShareCue();
+        renderPlayback();
+        syncBeatLink();
+      }
 
-        <rect x="40" y="672" width="640" height="104" rx="10" class="c-lane" stroke-width="1"/>
-        <text x="54" y="694" class="t-dim" font-size="10" font-weight="600">06 / Observability</text>
+      function pausePlayback(options) {
+        options = options || {};
+        var progress = options.complete === true ? 1 : currentStoryProgress();
+        if (panel.getAttribute('data-autoplay') === 'playing') {
+          setShareCueProgress(progress);
+          setAutoplayState(options.complete === true ? 'complete' : 'interrupted');
+        }
+        stopStoryBeatTimer({ preserveElapsed: options.complete !== true });
+        clearStoryPulse();
+        clearStoryFollow();
+        playing = false;
+        storyPlaybackComplete = options.complete === true;
+        resetProgress(progress);
+        renderPlayback();
+        renderShareCue();
+      }
 
-        <!-- Phase headers -->
-        <line x1="42" y1="35" x2="266" y2="35" class="a-default" stroke-width="1.1"/>
-        <rect x="42" y="27" width="224" height="16" rx="4" class="c-mask"/>
-        <text x="154" y="39" class="t-muted" font-size="8" font-weight="600" text-anchor="middle">Intake</text>
-        <line x1="254" y1="35" x2="476" y2="35" class="a-emphasis" stroke-width="1.1"/>
-        <rect x="254" y="27" width="222" height="16" rx="4" class="c-mask"/>
-        <text x="365" y="39" class="t-backend" font-size="8" font-weight="600" text-anchor="middle">Plan + route</text>
-        <line x1="454" y1="35" x2="671" y2="35" class="a-dashed" stroke-width="1.1"/>
-        <rect x="454" y="27" width="217" height="16" rx="4" class="c-mask"/>
-        <text x="562.5" y="39" class="t-messagebus" font-size="8" font-weight="600" text-anchor="middle">Execute + report</text>
+      function finishStoryChapter() {
+        if (!playing) return false;
+        if (storyPlaybackScope === 'chapter') {
+          pausePlayback({ complete: true });
+          return true;
+        }
+        if (activeIndex < views.length - 1) {
+          var destinationIndex = activeIndex + 1;
+          activate(destinationIndex, { playback: true });
+          afterHandoff(function () {
+            if (!playing || activeIndex !== destinationIndex) return;
+            storyBeatElapsedMs = 0;
+            setStoryBeat(0, { pulse: true, follow: true });
+            scheduleStoryPlayback();
+          });
+          return true;
+        }
+        pausePlayback({ complete: true });
+        return true;
+      }
 
-        <!-- Workflow groups -->
-        <rect x="250" y="214" width="230" height="58" rx="9" class="c-lane" stroke-width="1"/>
-        <text x="260" y="228" class="t-backend" font-size="7" font-weight="600">Planning loop</text>
-        <rect x="450" y="586" width="225" height="58" rx="9" class="c-lane" stroke-width="1"/>
-        <text x="460" y="600" class="t-messagebus" font-size="7" font-weight="600">Tool work</text>
-        <rect x="380" y="462" width="295" height="58" rx="9" class="c-security-group" stroke-width="1"/>
-        <text x="390" y="476" class="t-security" font-size="7" font-weight="600">Human or policy stop</text>
+      function scheduleStoryPlayback() {
+        var total = storySteps.length;
+        if (!playing || !total || reducedMotion()) {
+          if (playing) pausePlayback();
+          return false;
+        }
+        storyBeatDwellMs = storyBeatDwell(total);
+        if (storyBeatIndex < 0) {
+          storyBeatElapsedMs = 0;
+          setStoryBeat(0, { pulse: true, follow: true });
+        }
+        storyBeatElapsedMs = Math.max(0, Math.min(storyBeatDwellMs, storyBeatElapsedMs));
+        var remainingDwell = Math.max(1, storyBeatDwellMs - storyBeatElapsedMs);
+        var progress = (storyBeatIndex + storyBeatElapsedMs / storyBeatDwellMs) / total;
+        var remainingChapter = remainingDwell + Math.max(0, total - storyBeatIndex - 1) * storyBeatDwellMs;
+        startProgress(progress, remainingChapter);
+        if (panel.getAttribute('data-autoplay') === 'playing') startShareCueProgress(progress, remainingChapter);
+        var generation = ++storyPlaybackGeneration;
+        storyBeatStartedAt = Date.now();
+        storyBeatTimer = setTimeout(function () {
+          if (!playing || generation !== storyPlaybackGeneration) return;
+          storyBeatTimer = null;
+          storyBeatStartedAt = 0;
+          storyBeatElapsedMs = 0;
+          if (storyBeatIndex < total - 1) {
+            setStoryBeat(storyBeatIndex + 1, { pulse: true, follow: true });
+            scheduleStoryPlayback();
+          } else finishStoryChapter();
+        }, remainingDwell);
+        return true;
+      }
 
-        <!-- Edge paths -->
-        <path d="M 134 119 L 174 119" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
-        <path d="M 220 145 L 220 166 L 300 166 L 300 209" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
-        <path d="M 346 243 L 384 243" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
-        <path d="M 430 269 L 430 290 L 430 290 L 430 333" class="a-security" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
-        <path d="M 384 367 L 356 367 L 356 615 L 454 615" class="a-emphasis" stroke-width="1.8" marker-end="url(#arrowhead-emphasis)"/>
-        <path d="M 430 401 L 430 414 L 500 414 L 500 465" class="a-security" stroke-width="1.4" marker-end="url(#arrowhead-security)"/>
-        <path d="M 546 491 L 579 491" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
-        <path d="M 546 615 L 579 615" class="a-default" stroke-width="1.4" marker-end="url(#arrowhead)"/>
-        <path d="M 671 615 L 692 615 L 692 119 L 671 119" class="a-emphasis" stroke-width="1.2" marker-end="url(#arrowhead-emphasis)"/>
-        <path d="M 625 641 L 625 797 L 500 797 L 500 765" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
-        <path d="M 266 739 L 454 739" class="a-dashed" stroke-width="1.4" marker-end="url(#arrowhead-dashed)"/>
+      function startPlayback() {
+        if (!storyAutomaticPlaybackAllowed()) {
+          renderPlayback();
+          return false;
+        }
+        autoplayPending = false;
+        setAutoplayState(null);
+        setShareCueProgress(0);
+        document.documentElement.removeAttribute('data-share-playback');
+        storyPlaybackScope = 'story';
+        if (storyPlaybackComplete) showAll({ updateUrl: false });
+        storyPlaybackComplete = false;
+        if (activeIndex < 0) activate(0, { playback: true });
+        playing = true;
+        renderPlayback();
+        afterHandoff(function () {
+          if (!playing) return;
+          if (storyBeatIndex >= 0) followStoryStep(storySteps[storyBeatIndex]);
+          scheduleStoryPlayback();
+        });
+        return true;
+      }
 
-        <!-- Nodes -->
-        <rect x="42" y="93" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="42" y="93" width="92" height="52" rx="6" class="c-external" stroke-width="1.5"/>
-        <text x="88" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">User</text>
-        <text x="88" y="131" class="t-muted" font-size="8" text-anchor="middle">asks for work</text>
-
-        <rect x="174" y="93" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="174" y="93" width="92" height="52" rx="6" class="c-frontend" stroke-width="1.5"/>
-        <text x="220" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Chat Surface</text>
-        <text x="220" y="131" class="t-muted" font-size="8" text-anchor="middle">thread + files</text>
-
-        <rect x="579" y="93" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="579" y="93" width="92" height="52" rx="6" class="c-backend" stroke-width="1.5"/>
-        <text x="625" y="114" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Final Reply</text>
-        <text x="625" y="131" class="t-muted" font-size="8" text-anchor="middle">answer + changes</text>
-
-        <rect x="254" y="209" width="92" height="68" rx="6" class="c-mask"/>
-        <rect x="254" y="209" width="92" height="68" rx="6" class="c-backend" stroke-width="1.5"/>
-        <text x="300" y="230" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Agent Planner</text>
-        <text x="300" y="247" class="t-muted" font-size="8" text-anchor="middle">plan next step</text>
-        <text x="300" y="265" class="t-backend" font-size="7" text-anchor="middle">context aware</text>
-
-        <rect x="384" y="217" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="384" y="217" width="92" height="52" rx="6" class="c-backend" stroke-width="1.5"/>
-        <text x="430" y="238" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Tool Router</text>
-        <text x="430" y="255" class="t-muted" font-size="8" text-anchor="middle">choose capability</text>
-
-        <rect x="384" y="333" width="92" height="68" rx="6" class="c-mask"/>
-        <rect x="384" y="333" width="92" height="68" rx="6" class="c-security" stroke-width="1.5"/>
-        <text x="430" y="354" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Approval Gate</text>
-        <text x="430" y="371" class="t-muted" font-size="8" text-anchor="middle">scope + consent</text>
-        <text x="430" y="389" class="t-security" font-size="7" text-anchor="middle">block risky ops</text>
-
-        <rect x="454" y="465" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="454" y="465" width="92" height="52" rx="6" class="c-security" stroke-width="1.5"/>
-        <text x="500" y="486" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Blocked</text>
-        <text x="500" y="503" class="t-muted" font-size="8" text-anchor="middle">wait or reject</text>
-
-        <rect x="579" y="465" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="579" y="465" width="92" height="52" rx="6" class="c-messagebus" stroke-width="1.5"/>
-        <text x="625" y="486" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Retry Path</text>
-        <text x="625" y="503" class="t-muted" font-size="8" text-anchor="middle">revise request</text>
-
-        <rect x="454" y="581" width="92" height="68" rx="6" class="c-mask"/>
-        <rect x="454" y="581" width="92" height="68" rx="6" class="c-messagebus" stroke-width="1.5"/>
-        <text x="500" y="602" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Tool Call</text>
-        <text x="500" y="619" class="t-muted" font-size="8" text-anchor="middle">shell / browser / MCP</text>
-        <text x="500" y="637" class="t-messagebus" font-size="7" text-anchor="middle">structured result</text>
-
-        <rect x="579" y="589" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="579" y="589" width="92" height="52" rx="6" class="c-cloud" stroke-width="1.5"/>
-        <text x="625" y="610" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">External API</text>
-        <text x="625" y="627" class="t-muted" font-size="8" text-anchor="middle">network service</text>
-
-        <rect x="174" y="713" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="174" y="713" width="92" height="52" rx="6" class="c-database" stroke-width="1.5"/>
-        <text x="220" y="734" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Context Store</text>
-        <text x="220" y="751" class="t-muted" font-size="8" text-anchor="middle">repo + memory</text>
-
-        <rect x="454" y="713" width="92" height="52" rx="6" class="c-mask"/>
-        <rect x="454" y="713" width="92" height="52" rx="6" class="c-database" stroke-width="1.5"/>
-        <text x="500" y="734" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">Trace Log</text>
-        <text x="500" y="751" class="t-muted" font-size="8" text-anchor="middle">events + output</text>
+      function startCurrentViewPlayback() {
+        if (document.hidden) return false;
+        autoplayPending = false;
+        document.documentElement.setAttribute('data-share-playback', 'true');
+        storyPlaybackScope = 'chapter';
+        storyPlaybackComplete = false;
+        if (activeIndex < 0) activate(0, { playback: true, updateUrl: false });
+        if (!storyAutomaticPlaybackAllowed()) {
+          var preserveMoment = hashBeatMatchesCurrent();
+          setShareCueProgress(preserveMoment && storySteps.length ? (storyBeatIndex + 1) / storySteps.length : 1);
+          setAutoplayState('reduced-motion');
+          playing = false;
+          if (preserveMoment) {
+            clearStoryPulse();
+            renderShareCue();
+          } else settleStoryBeats();
+          renderPlayback();
+          return false;
+        }
+        playing = true;
+        setAutoplayState('playing');
+        renderPlayback();
+        afterHandoff(function () {
+          if (!playing) return;
+          if (storyBeatIndex >= 0) followStoryStep(storySteps[storyBeatIndex]);
+          scheduleStoryPlayback();
+        });
+        return true;
+      }
 
-        <!-- Edge labels -->
+      function maybeStartSharePlayback() {
+        if (!autoplayPending || document.hidden) return false;
+        return startCurrentViewPlayback();
+      }
 
-        <rect x="245" y="146" width="30" height="14" rx="3" class="c-mask"/>
-        <text x="260" y="156" class="t-backend" font-size="8" text-anchor="middle">plan</text>
+      function togglePlayback() {
+        return playing ? (pausePlayback(), false) : startPlayback();
+      }
 
-        <rect x="423" y="277.5" width="82" height="14" rx="3" class="c-mask"/>
-        <text x="464" y="287.5" class="t-security" font-size="8" text-anchor="middle">needs approval?</text>
+      function syncStoryControlsDisabled() {
+        Array.prototype.forEach.call(trail.querySelectorAll('[data-story-node]'), function (stop) {
+          stop.disabled = !!currentHandoff;
+        });
+        syncBeatLink();
+      }
 
-        <rect x="445.6" y="406" width="38.8" height="14" rx="3" class="c-mask"/>
-        <text x="465" y="416" class="t-security" font-size="8" text-anchor="middle">denied</text>
+      function selectStoryBeat(index) {
+        if (currentHandoff || activeIndex < 0 || index < 0 || index >= storySteps.length) return false;
+        momentRestoreGeneration += 1;
+        clearChapterPreview({ clearIntents: true });
+        if (playing) pausePlayback();
+        else {
+          stopStoryBeatTimer();
+          clearStoryPulse();
+        }
+        storyPlaybackComplete = false;
+        storyPlaybackScope = 'story';
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = storyBeatDwell(storySteps.length);
+        var view = views[activeIndex];
+        Archify.focus.setMany(view.focus, {
+          toggle: false,
+          updateUrl: false,
+          mode: 'selection',
+          label: view.label,
+          hideChip: true
+        });
+        setStoryBeat(index, { manual: true, center: true, pulse: true, follow: true });
+        resetProgress(index / storySteps.length);
+        renderPlayback();
+        return true;
+      }
 
+      function selectStoryBeatById(id, options) {
+        options = options || {};
+        var index = storySteps.findIndex(function (step) { return step.nodeId === id; });
+        if (index < 0) return false;
+        if (playing) pausePlayback();
+        else {
+          stopStoryBeatTimer();
+          clearStoryPulse();
+        }
+        storyPlaybackComplete = false;
+        storyPlaybackScope = 'story';
+        storyBeatElapsedMs = 0;
+        storyBeatDwellMs = storyBeatDwell(storySteps.length);
+        setStoryBeat(index, {
+          manual: false,
+          center: true,
+          pulse: false,
+          follow: options.follow === true,
+          linked: options.linked === true,
+          followInstant: options.followInstant === true
+        });
+        resetProgress(index / storySteps.length);
+        renderPlayback();
+        return true;
+      }
 
+      function updateUrl(view) {
+        try {
+          history.replaceState(null, '', location.pathname + location.search + (view ? '#view=' + encodeURIComponent(view.id) : ''));
+        } catch (_) {}
+      }
 
-        <rect x="526.3" y="777" width="72.4" height="14" rx="3" class="c-mask"/>
-        <text x="562.5" y="787" class="t-database" font-size="8" text-anchor="middle">record result</text>
-        <rect x="326.4" y="725" width="77.2" height="14" rx="3" class="c-mask"/>
-        <text x="365" y="735" class="t-database" font-size="8" text-anchor="middle">trace + memory</text>
+      function showAll(options) {
+        options = options || {};
+        if (options.restore !== true) momentRestoreGeneration += 1;
+        clearChapterPreview({ clearIntents: true });
+        if (playing && options.playback !== true) pausePlayback();
+        if (options.playback !== true) storyPlaybackComplete = false;
+        cancelHandoff('overview');
+        activeIndex = -1;
+        renderStoryTrail(null);
+        if (options.clearFocus !== false) Archify.focus.clear({ updateUrl: false });
+        if (options.resetView !== false && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        render();
+        if (options.updateUrl !== false) updateUrl(null);
+      }
 
-        <!-- Legend -->
-        <text x="175" y="800" class="t-primary" font-size="10" font-weight="600">Legend</text>
-        <rect x="175" y="812" width="14" height="9" rx="2" class="c-frontend" stroke-width="1"/>
-        <text x="195" y="820" class="t-muted" font-size="7">User UI</text>
-        <rect x="260" y="812" width="14" height="9" rx="2" class="c-backend" stroke-width="1"/>
-        <text x="280" y="820" class="t-muted" font-size="7">Agent logic</text>
-        <rect x="370" y="812" width="14" height="9" rx="2" class="c-security" stroke-width="1"/>
-        <text x="390" y="820" class="t-muted" font-size="7">Policy</text>
-        <rect x="455" y="812" width="14" height="9" rx="2" class="c-messagebus" stroke-width="1"/>
-        <text x="475" y="820" class="t-muted" font-size="7">Tool action</text>
-        <rect x="565" y="812" width="14" height="9" rx="2" class="c-database" stroke-width="1"/>
-        <text x="585" y="820" class="t-muted" font-size="7">Context / trace</text>
-      </svg>
-    </div>
+      function activate(index, options) {
+        options = options || {};
+        if (options.restore !== true) momentRestoreGeneration += 1;
+        if (playing && options.playback !== true) pausePlayback();
+        if (options.playback !== true) storyPlaybackComplete = false;
+        if (index < 0) { showAll(options); return true; }
+        if (index >= views.length) return false;
+        clearChapterPreview({ clearIntents: true });
+        var previousIndex = activeIndex;
+        var previous = previousIndex >= 0 ? views[previousIndex] : null;
+        var outgoingBeatIndex = storyBeatIndex;
+        cancelHandoff('replaced');
+        activeIndex = index;
+        var view = views[index];
+        Archify.focus.setMany(view.focus, {
+          toggle: false,
+          updateUrl: false,
+          mode: 'selection',
+          label: view.label,
+          hideChip: true
+        });
+        renderStoryTrail(view);
+        beginHandoff(previousIndex, index, previous, view, outgoingBeatIndex, options.playback === true ? 'playback' : 'guided');
+        syncStoryControlsDisabled();
+        render();
+        if (options.updateUrl !== false) updateUrl(view);
+        return true;
+      }
 
-    <!-- Info Cards -->
-    <div class="cards">
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot cyan"></div>
-          <h3>Renderer Rules</h3>
-        </div>
-        <ul>
-          <li>&bull; Lanes and columns determine node placement</li>
-          <li>&bull; Edges attach to explicit node anchors</li>
-          <li>&bull; Cross-lane paths use orthogonal routing</li>
-          <li>&bull; Short adjacent links stay unlabeled</li>
-        </ul>
-      </div>
+      function activateById(id, options) {
+        var index = views.findIndex(function (view) { return view.id === id; });
+        return index >= 0 && activate(index, options);
+      }
 
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot rose"></div>
-          <h3>Workflow Semantics</h3>
-        </div>
-        <ul>
-          <li>&bull; Approval is a first-class policy step</li>
-          <li>&bull; Consent gates are visible in the main path</li>
-          <li>&bull; External calls stay inside the tool lane</li>
-          <li>&bull; Trace writes are separate from the hot path</li>
-        </ul>
-      </div>
+      prev.addEventListener('click', function () { activate(activeIndex - 1); });
+      next.addEventListener('click', function () { activate(activeIndex + 1); });
+      all.addEventListener('click', function () { showAll(); });
+      play.addEventListener('click', togglePlayback);
+      beatLink.addEventListener('click', copyStoryMomentLink);
+      trail.addEventListener('focusin', function (event) {
+        if (!event.target.closest('[data-story-node]')) return;
+        if (playing) pausePlayback();
+      });
+      trail.addEventListener('click', function (event) {
+        var stop = event.target.closest('[data-story-node]');
+        if (!stop || stop.disabled) return;
+        selectStoryBeat(Number(stop.getAttribute('data-story-index')));
+      });
+      trail.addEventListener('keydown', function (event) {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        var stop = event.target.closest('[data-story-node]');
+        if (!stop || stop.disabled) return;
+        event.preventDefault();
+        selectStoryBeat(Number(stop.getAttribute('data-story-index')));
+      });
+      chapterList.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button) return;
+        activateById(button.getAttribute('data-guided-view-id'));
+      });
+      chapterList.addEventListener('pointerover', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || !hoverCapable() || event.pointerType === 'touch') return;
+        if (event.relatedTarget && button.contains(event.relatedTarget)) return;
+        setChapterPreviewIntent('pointer', chapterButtons.indexOf(button));
+      });
+      chapterList.addEventListener('pointerout', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        clearChapterPreviewIntent('pointer', chapterButtons.indexOf(button));
+      });
+      chapterIndex.addEventListener('focusin', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button) return;
+        setChapterPreviewIntent('focus', chapterButtons.indexOf(button));
+      });
+      chapterIndex.addEventListener('focusout', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        if (!button || (event.relatedTarget && button.contains(event.relatedTarget))) return;
+        clearChapterPreviewIntent('focus', chapterButtons.indexOf(button));
+      });
+      chapterList.addEventListener('keydown', function (event) {
+        var button = event.target.closest('[data-guided-view-id]');
+        var index = chapterButtons.indexOf(button);
+        if (index < 0) return;
+        var target = null;
+        if (event.key === 'ArrowRight') target = Math.min(chapterButtons.length - 1, index + 1);
+        else if (event.key === 'ArrowLeft') target = Math.max(0, index - 1);
+        else if (event.key === 'Home') target = 0;
+        else if (event.key === 'End') target = chapterButtons.length - 1;
+        if (target === null) return;
+        event.preventDefault();
+        focusChapterButton(target);
+      });
 
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot emerald"></div>
-          <h3>Why It Matters</h3>
-        </div>
-        <ul>
-          <li>&bull; This is closer to a diagram_type renderer</li>
-          <li>&bull; The graph can be edited without SVG surgery</li>
-          <li>&bull; Layout rules can be tested and improved</li>
-          <li>&bull; A future IR can reuse this shape directly</li>
-        </ul>
-      </div>
-    </div>
+      // A direct node exploration supersedes the curated view. Capture phase
+      // releases the view before the focus explorer writes its own deep link.
+      function releaseForNode(event) {
+        if (activeIndex >= 0 && event.target.closest('[data-node-id]')) {
+          pausePlayback();
+          showAll({ clearFocus: false, updateUrl: false });
+        }
+      }
+      svg.addEventListener('click', releaseForNode, true);
+      svg.addEventListener('keydown', function (event) {
+        if (event.key === 'Enter' || event.key === ' ') releaseForNode(event);
+      }, true);
+
+      document.addEventListener('keydown', function (event) {
+        if (event.metaKey || event.ctrlKey || event.altKey) return;
+        if (document.documentElement.getAttribute('data-guide-open') === 'true') return;
+        var target = event.target;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;
+        if (event.key === ']') {
+          event.preventDefault();
+          if (activeIndex < views.length - 1) activate(activeIndex + 1);
+        } else if (event.key === '[') {
+          event.preventDefault();
+          if (activeIndex >= 0) activate(activeIndex - 1);
+        } else if (event.key.toLowerCase() === 'p') {
+          event.preventDefault();
+          togglePlayback();
+        } else if (event.key === 'Escape' && activePreviewIndex >= 0) {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          clearChapterPreview({ clearIntents: true });
+        } else if (event.key === 'Escape' && activeIndex >= 0) {
+          event.preventDefault();
+          showAll();
+        }
+      }, true);
+
+      function syncViewFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var initial = params.get('view');
+          var requestedBeat = params.get('beat');
+          var restoreGeneration = ++momentRestoreGeneration;
+          if (initial) {
+            var activated = activateById(initial, { updateUrl: false, restore: true });
+            if (!activated) {
+              showAll({ updateUrl: false, restore: true });
+              return;
+            }
+            if (requestedBeat) afterHandoff(function () {
+              if (restoreGeneration !== momentRestoreGeneration) return;
+              var latest = new URLSearchParams(location.hash.replace(/^#/, ''));
+              if (latest.get('view') !== initial || latest.get('beat') !== requestedBeat) return;
+              if (activeIndex < 0 || views[activeIndex].id !== initial) return;
+              selectStoryBeatById(requestedBeat, { linked: true, follow: true, followInstant: true });
+            });
+          } else if (params.get('focus') || params.get('relation')) {
+            activeIndex = -1;
+            render();
+          } else {
+            showAll({ updateUrl: false, restore: true });
+          }
+        } catch (_) { showAll({ updateUrl: false, restore: true }); }
+      }
+
+      window.addEventListener('hashchange', syncViewFromHash);
+      document.addEventListener('visibilitychange', function () {
+        if (document.hidden) {
+          clearChapterPreview({ clearIntents: true });
+          if (playing) pausePlayback();
+          else clearStoryPulse();
+          settleHandoff('hidden');
+        }
+        else if (!document.hidden) maybeStartSharePlayback();
+      });
+      if (window.matchMedia) {
+        var guidedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        var onGuidedMotionChange = function () {
+          if (guidedMotionQuery.matches) {
+            if (playing) pausePlayback();
+            else clearStoryPulse();
+            settleHandoff('reduced-motion');
+          }
+        };
+        if (typeof guidedMotionQuery.addEventListener === 'function') guidedMotionQuery.addEventListener('change', onGuidedMotionChange);
+        else if (typeof guidedMotionQuery.addListener === 'function') guidedMotionQuery.addListener(onGuidedMotionChange);
+      }
+      if (document.documentElement.getAttribute('data-embed') !== 'true' && typeof MutationObserver !== 'undefined' && typeof Node !== 'undefined' && svg instanceof Node && document.documentElement instanceof Node) {
+        var chapterPreviewOwnerObserver = new MutationObserver(syncChapterPreview);
+        chapterPreviewOwnerObserver.observe(svg, {
+          attributes: true,
+          attributeFilter: [
+            'data-route-picking', 'data-route-active', 'data-lens-active',
+            'data-legend-preview-active', 'data-relationship-preview-active',
+            'data-intent-trace-active', 'data-focus-active'
+          ]
+        });
+        var storyMotionObserver = new MutationObserver(function () {
+          if (document.documentElement.getAttribute('data-motion') !== 'live') clearStoryPulse();
+          renderPlayback();
+        });
+        storyMotionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-motion'] });
+      }
+      window.addEventListener('beforeprint', function () {
+        clearChapterPreview({ clearIntents: true });
+        if (playing) pausePlayback();
+        else clearStoryPulse();
+        settleHandoff('print');
+      });
+      syncViewFromHash();
+      if (autoplayPending) {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(maybeStartSharePlayback);
+        });
+      }
+
+      return {
+        count: views.length,
+        activate: activateById,
+        showAll: showAll,
+        play: startPlayback,
+        playCurrent: startCurrentViewPlayback,
+        pause: pausePlayback,
+        beatLink: storyMomentLink,
+        copyBeatLink: copyStoryMomentLink,
+        cancelHandoff: cancelHandoff,
+        settleHandoff: settleHandoff,
+        clearPreview: function () { return clearChapterPreview({ clearIntents: true }); },
+        isPlaying: function () { return playing; },
+        handoff: function () {
+          return currentHandoff ? { id: currentHandoff.id, mode: currentHandoff.mode, anchor: currentHandoff.anchor || null } : null;
+        },
+        active: function () { return activeIndex < 0 ? null : views[activeIndex].id; },
+        preview: function () { return activePreviewIndex < 0 ? null : views[activePreviewIndex].id; },
+        delta: function (id) {
+          var index = views.findIndex(function (view) { return view.id === id; });
+          if (index < 0) return null;
+          var value = chapterDelta(activeIndex >= 0 ? views[activeIndex] : null, views[index]);
+          return { stay: value.stay.slice(), enter: value.enter.slice(), leave: value.leave.slice() };
+        },
+        beat: function () {
+          var step = storyBeatIndex >= 0 ? storySteps[storyBeatIndex] : null;
+          return step ? {
+            index: step.index,
+            position: step.index + 1,
+            total: storySteps.length,
+            nodeId: step.nodeId,
+            relation: step.relation,
+            edgeKeys: step.edgeKeys.slice()
+          } : null;
+        },
+        focus: function () { return activeIndex < 0 ? [] : views[activeIndex].focus.slice(); }
+      };
+    })();
+
+    /* ============================================================
+       Adaptive Reader Shell — one diagram across laptop and monitor.
+       The canonical SVG and viewBox never change. On ordinary desktop pages,
+       wide diagrams receive only enough outer width to use the available
+       height without pushing summary cards below the viewport. Mobile,
+       embed, presentation, print, and non-wide diagrams retain their own
+       established layout contracts.
+       ============================================================ */
+    Archify.readerLayout = (function () {
+      var html = document.documentElement;
+      var body = document.body;
+      var shell = document.querySelector('.container');
+      var diagram = document.querySelector('.diagram-container');
+      var svg = diagram && diagram.querySelector(':scope > svg');
+      var header = shell && shell.querySelector('.header');
+      var guided = shell && shell.querySelector('.guided-views');
+      var cards = shell && shell.querySelector('.cards');
+      var viewBox = svg && svg.viewBox && svg.viewBox.baseVal;
+      var ratio = viewBox && viewBox.height > 0 ? viewBox.width / viewBox.height : 0;
+      var frame = 0;
+      var settleFrame = 0;
+      var lastWidth = 0;
+      var WIDE_RATIO = 1.55;
+      var MIN_DESKTOP_WIDTH = 1024;
+      var MIN_READER_WIDTH = 960;
+      var MAX_READER_WIDTH = 1920;
+      var SAFE_BOTTOM_GAP = 12;
+
+      if (diagram && ratio >= WIDE_RATIO) {
+        diagram.setAttribute('data-wide-diagram', 'true');
+        html.setAttribute('data-diagram-shape', 'wide');
+      }
+
+      function number(value) {
+        var parsed = parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+      }
+      function visible(element) {
+        return Boolean(element && !element.hidden && window.getComputedStyle(element).display !== 'none');
+      }
+      function outerHeight(element) {
+        if (!visible(element)) return 0;
+        var style = window.getComputedStyle(element);
+        return element.getBoundingClientRect().height + number(style.marginTop) + number(style.marginBottom);
+      }
+      function eligible() {
+        return Boolean(
+          shell && diagram && svg && ratio >= WIDE_RATIO &&
+          window.innerWidth >= MIN_DESKTOP_WIDTH &&
+          html.getAttribute('data-embed') !== 'true' &&
+          html.getAttribute('data-present') !== 'true' &&
+          (!window.matchMedia || !window.matchMedia('print').matches)
+        );
+      }
+      function clear() {
+        html.style.removeProperty('--archify-reader-width');
+        html.removeAttribute('data-reader-layout');
+        html.removeAttribute('data-reader-overflow');
+        lastWidth = 0;
+      }
+      function chromeMetrics() {
+        var bodyStyle = window.getComputedStyle(body);
+        var diagramStyle = window.getComputedStyle(diagram);
+        return {
+          bodyX: number(bodyStyle.paddingLeft) + number(bodyStyle.paddingRight),
+          bodyY: number(bodyStyle.paddingTop) + number(bodyStyle.paddingBottom),
+          diagramX: number(diagramStyle.paddingLeft) + number(diagramStyle.paddingRight) +
+            number(diagramStyle.borderLeftWidth) + number(diagramStyle.borderRightWidth),
+          diagramY: number(diagramStyle.paddingTop) + number(diagramStyle.paddingBottom) +
+            number(diagramStyle.borderTopWidth) + number(diagramStyle.borderBottomWidth)
+        };
+      }
+      function applyWidth(width) {
+        var rounded = Math.round(width);
+        if (Math.abs(rounded - lastWidth) < 1) return false;
+        lastWidth = rounded;
+        html.style.setProperty('--archify-reader-width', rounded + 'px');
+        html.setAttribute('data-reader-layout', 'adaptive');
+        return true;
+      }
+      function settleOverflow(minWidth) {
+        if (settleFrame) cancelAnimationFrame(settleFrame);
+        settleFrame = requestAnimationFrame(function () {
+          settleFrame = 0;
+          if (!eligible() || !lastWidth) return;
+          var overflow = Math.max(
+            document.documentElement.scrollHeight,
+            document.body.scrollHeight
+          ) - window.innerHeight;
+          if (overflow > 1 && lastWidth > minWidth) {
+            applyWidth(Math.max(minWidth, lastWidth - overflow * ratio - 4));
+            html.setAttribute('data-reader-overflow', 'reduced');
+          } else if (overflow > 1) {
+            html.setAttribute('data-reader-overflow', 'authored');
+          } else {
+            html.removeAttribute('data-reader-overflow');
+          }
+        });
+      }
+      function measure() {
+        frame = 0;
+        if (!eligible()) {
+          clear();
+          return null;
+        }
+        var chrome = chromeMetrics();
+        var viewportCap = Math.max(0, window.innerWidth - chrome.bodyX);
+        var minWidth = Math.min(MIN_READER_WIDTH, viewportCap);
+        var maxWidth = Math.min(MAX_READER_WIDTH, viewportCap);
+        var fixedHeight = chrome.bodyY + chrome.diagramY + SAFE_BOTTOM_GAP +
+          outerHeight(header) + outerHeight(guided) + outerHeight(cards);
+        var availableSvgHeight = Math.max(1, window.innerHeight - fixedHeight);
+        var desiredWidth = availableSvgHeight * ratio + chrome.diagramX;
+        var width = Math.max(minWidth, Math.min(maxWidth, desiredWidth));
+        applyWidth(width);
+        settleOverflow(minWidth);
+        return {
+          ratio: ratio,
+          width: Math.round(width),
+          availableSvgHeight: Math.round(availableSvgHeight),
+          fixedHeight: Math.round(fixedHeight)
+        };
+      }
+      function schedule() {
+        if (frame) return;
+        frame = requestAnimationFrame(measure);
+      }
+
+      window.addEventListener('resize', schedule, { passive: true });
+      window.addEventListener('load', schedule, { once: true });
+      if (document.fonts && document.fonts.ready) document.fonts.ready.then(schedule).catch(function () {});
+      if (typeof ResizeObserver === 'function') {
+        var resizeObserver = new ResizeObserver(schedule);
+        [header, guided, cards].forEach(function (element) { if (element) resizeObserver.observe(element); });
+      }
+      if (typeof MutationObserver === 'function') {
+        var contentObserver = new MutationObserver(schedule);
+        if (guided) contentObserver.observe(guided, { attributes: true, childList: true, subtree: true });
+        if (cards) contentObserver.observe(cards, { attributes: true, childList: true, subtree: true });
+        contentObserver.observe(html, { attributes: true, attributeFilter: ['data-embed', 'data-present'] });
+      }
+      schedule();
+
+      return {
+        measure: measure,
+        schedule: schedule,
+        active: function () { return html.getAttribute('data-reader-layout') === 'adaptive'; },
+        receipt: function () { return { ratio: ratio, width: lastWidth }; }
+      };
+    })();
+
+    Archify.view = (function () {
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var outBtn = container.querySelector('[data-view="out"]');
+      var resetBtn = container.querySelector('[data-view="reset"]');
+      var resetDetailLabel = resetBtn.querySelector('[data-view-detail]');
+      var resetPercentLabel = resetBtn.querySelector('[data-view-percent]');
+      var inBtn = container.querySelector('[data-view="in"]');
+      var state = { scale: 1, x: 0, y: 0, mode: 'overview' };
+      var drag = null;
+      var cameraTimer = null;
+      var cameraFrame = null;
+      var cameraGeneration = 0;
+      var cameraTransaction = null;
+      var resizeFrame = 0;
+      var autoScrollUntil = 0;
+
+      var viewBox = svg.viewBox && svg.viewBox.baseVal;
+
+      function clamp() {
+        var width = svg.clientWidth || 1;
+        var height = svg.clientHeight || 1;
+        state.x = Math.min(0, Math.max(width - width * state.scale, state.x));
+        state.y = Math.min(0, Math.max(height - height * state.scale, state.y));
+      }
+      function reducedMotion() {
+        return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      }
+      function contentMetrics() {
+        if (!viewBox || viewBox.width <= 0 || viewBox.height <= 0) return null;
+        var width = svg.clientWidth || 1;
+        var height = svg.clientHeight || 1;
+        var scale = Math.min(width / viewBox.width, height / viewBox.height);
+        return {
+          width: width,
+          height: height,
+          scale: scale,
+          offsetX: (width - viewBox.width * scale) / 2,
+          offsetY: (height - viewBox.height * scale) / 2
+        };
+      }
+      function logicalViewport() {
+        var metrics = contentMetrics();
+        if (!metrics) return null;
+        var x;
+        var y;
+        var width;
+        var height;
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram')) {
+          x = viewBox.x + container.scrollLeft / metrics.scale;
+          y = viewBox.y;
+          width = Math.min(viewBox.width, Math.max(1, container.clientWidth / metrics.scale));
+          height = viewBox.height;
+        } else {
+          x = viewBox.x + ((-state.x / state.scale) - metrics.offsetX) / metrics.scale;
+          y = viewBox.y + ((-state.y / state.scale) - metrics.offsetY) / metrics.scale;
+          width = Math.min(viewBox.width, metrics.width / state.scale / metrics.scale);
+          height = Math.min(viewBox.height, metrics.height / state.scale / metrics.scale);
+        }
+        width = Math.max(1, Math.min(viewBox.width, width));
+        height = Math.max(1, Math.min(viewBox.height, height));
+        x = Math.max(viewBox.x, Math.min(viewBox.x + viewBox.width - width, x));
+        y = Math.max(viewBox.y, Math.min(viewBox.y + viewBox.height - height, y));
+        return { x: x, y: y, width: width, height: height, scale: state.scale };
+      }
+      function detailLevel() {
+        if (state.mode === 'semantic') return 'full';
+        if (state.scale >= 1.75) return 'full';
+        if (state.scale >= 1) return 'read';
+        return 'map';
+      }
+      function renderControls() {
+        var semantic = state.mode === 'semantic' && state.scale > 1.01;
+        var detail = detailLevel();
+        var percent = Math.round(state.scale * 100) + '%';
+        var levelLabel = detail === 'map' ? 'MAP ' : detail === 'read' ? 'READ ' : 'FULL ';
+        var detailHint = detail === 'map'
+          ? 'Zoom in to reveal relationship labels and node context'
+          : detail === 'read'
+            ? 'Zoom in again to reveal tags and annotations'
+            : 'Full diagram detail';
+        var resolvedLevel = (semantic ? 'AUTO ' : levelLabel).trim();
+        var showDetailLevel = resolvedLevel !== 'READ';
+        if (resetDetailLabel) {
+          resetDetailLabel.textContent = resolvedLevel;
+          resetDetailLabel.hidden = !showDetailLevel;
+        }
+        if (resetPercentLabel) resetPercentLabel.textContent = percent;
+        resetBtn.toggleAttribute('data-detail-visible', showDetailLevel);
+        resetBtn.title = (semantic ? 'Semantic camera active · ' : '') + detailHint + ' · reset view (0)';
+        resetBtn.setAttribute('aria-label', detailHint + '. Reset diagram view');
+        resetBtn.setAttribute('data-detail-level', detail);
+        container.setAttribute('data-detail-level', detail);
+        container.setAttribute('data-camera-mode', state.mode);
+        container.setAttribute('data-camera-indicator', semantic ? 'true' : 'false');
+      }
+      function apply() {
+        clamp();
+        svg.style.transform = 'translate(' + state.x + 'px,' + state.y + 'px) scale(' + state.scale + ')';
+        renderControls();
+        outBtn.disabled = state.scale <= 1;
+        inBtn.disabled = state.scale >= 3;
+        container.classList.toggle('is-pannable', state.scale > 1);
+        svg.setAttribute('data-view-scale', String(state.scale));
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+      }
+      function sampleRenderedState() {
+        var transform = '';
+        try { transform = getComputedStyle(svg).transform || ''; } catch (_) {}
+        var match = transform.match(/^matrix\(([^)]+)\)$/);
+        if (!match) return { scale: state.scale, x: state.x, y: state.y, mode: state.mode };
+        var values = match[1].split(',').map(Number);
+        if (values.length !== 6 || !values.every(Number.isFinite)) {
+          return { scale: state.scale, x: state.x, y: state.y, mode: state.mode };
+        }
+        return { scale: values[0], x: values[4], y: values[5], mode: state.mode };
+      }
+      function finishCameraTransaction(transaction, outcome) {
+        if (!transaction || transaction.settled) return false;
+        transaction.settled = true;
+        transaction.state = outcome || 'complete';
+        if (transaction.frame) cancelAnimationFrame(transaction.frame);
+        if (transaction.timer) clearTimeout(transaction.timer);
+        transaction.frame = null;
+        transaction.timer = null;
+        if (cameraTransaction === transaction) cameraTransaction = null;
+        cameraFrame = null;
+        cameraTimer = null;
+        container.classList.remove('is-camera-moving');
+        container.classList.remove('is-camera-transaction');
+        container.removeAttribute('data-camera-transaction');
+        if (Archify.focus && Archify.focus.reposition) Archify.focus.reposition();
+        transaction.resolve({ id: transaction.id, state: transaction.state });
+        return true;
+      }
+      function cameraReceipt(target, options) {
+        var resolver;
+        var transaction = {
+          id: ++cameraGeneration,
+          state: 'running',
+          target: target,
+          settled: false,
+          frame: null,
+          timer: null,
+          finished: new Promise(function (resolve) { resolver = resolve; }),
+          resolve: resolver,
+          cancel: function (reason, commitTarget) {
+            if (transaction.settled) return false;
+            if (commitTarget && transaction.target) {
+              if (Object.prototype.hasOwnProperty.call(transaction.target, 'scrollLeft')) {
+                container.scrollLeft = transaction.target.scrollLeft;
+              } else {
+                state = {
+                  scale: transaction.target.scale,
+                  x: transaction.target.x,
+                  y: transaction.target.y,
+                  mode: transaction.target.mode
+                };
+                apply();
+              }
+            }
+            return finishCameraTransaction(transaction, reason || 'cancelled');
+          }
+        };
+        return transaction;
+      }
+      function stopCameraMotion(reason, commitTarget) {
+        if (cameraTransaction && !cameraTransaction.settled) {
+          cameraTransaction.cancel(reason || 'cancelled', commitTarget === true);
+          return;
+        }
+        if (cameraTimer) clearTimeout(cameraTimer);
+        if (cameraFrame) cancelAnimationFrame(cameraFrame);
+        cameraTimer = null;
+        cameraFrame = null;
+        container.classList.remove('is-camera-moving');
+        container.classList.remove('is-camera-transaction');
+        container.removeAttribute('data-camera-transaction');
+      }
+      function interruptCamera(reason) {
+        if (Archify.guidedViews && Archify.guidedViews.cancelHandoff) {
+          Archify.guidedViews.cancelHandoff(reason || 'manual');
+        }
+        var rendered = sampleRenderedState();
+        stopCameraMotion(reason || 'manual', false);
+        state = rendered;
+        state.mode = 'manual';
+        apply();
+        renderControls();
+        if (Archify.guidedViews && Archify.guidedViews.isPlaying && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
+        }
+        if (Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: reason || 'manual' });
+        }
+      }
+      function zoom(next, options) {
+        options = options || {};
+        if (options.manual !== false) interruptCamera();
+        var previous = state.scale;
+        next = Math.max(1, Math.min(3, Math.round(next * 4) / 4));
+        if (next === previous) return;
+        var centerX = (svg.clientWidth || 1) / 2;
+        var centerY = (svg.clientHeight || 1) / 2;
+        var contentX = (centerX - state.x) / previous;
+        var contentY = (centerY - state.y) / previous;
+        state.scale = next;
+        state.x = centerX - contentX * next;
+        state.y = centerY - contentY * next;
+        apply();
+      }
+      function reset(options) {
+        options = options || {};
+        if (options.automatic !== true) interruptCamera();
+        else stopCameraMotion('reset', false);
+        state = { scale: 1, x: 0, y: 0, mode: 'overview' };
+        apply();
+      }
+      function centerAt(logicalX, logicalY, options) {
+        options = options || {};
+        logicalX = Number(logicalX);
+        logicalY = Number(logicalY);
+        var metrics = contentMetrics();
+        if (!metrics || !Number.isFinite(logicalX) || !Number.isFinite(logicalY)) return false;
+        interruptCamera();
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram')) {
+          state.scale = 1;
+          state.x = 0;
+          state.y = 0;
+          state.mode = 'manual';
+          apply();
+          var mobileTarget = (logicalX - viewBox.x) * metrics.scale - container.clientWidth / 2;
+          mobileTarget = Math.max(0, Math.min(svg.clientWidth - container.clientWidth, mobileTarget));
+          autoScrollUntil = Date.now() + 80;
+          try { container.scrollTo({ left: mobileTarget, behavior: options.instant ? 'auto' : 'smooth' }); }
+          catch (_) { container.scrollLeft = mobileTarget; }
+          return true;
+        }
+        var minimumScale = Math.max(1, Math.min(3, Number(options.minimumScale) || 1));
+        var requestedScale = Number(options.scale);
+        state.scale = Math.max(minimumScale, Math.min(3, Number.isFinite(requestedScale) ? requestedScale : state.scale));
+        var contentX = metrics.offsetX + (logicalX - viewBox.x) * metrics.scale;
+        var contentY = metrics.offsetY + (logicalY - viewBox.y) * metrics.scale;
+        state.x = metrics.width / 2 - contentX * state.scale;
+        state.y = metrics.height / 2 - contentY * state.scale;
+        state.mode = 'manual';
+        apply();
+        if (Archify.focus && Archify.focus.reposition) Archify.focus.reposition();
+        return true;
+      }
+      function semanticIds(ids, includeNeighbors) {
+        var seeds = {};
+        var wanted = {};
+        (ids || []).forEach(function (id) { seeds[id] = true; wanted[id] = true; });
+        if (includeNeighbors) {
+          Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+            var from = edge.getAttribute('data-edge-from');
+            var to = edge.getAttribute('data-edge-to');
+            if (seeds[from] || seeds[to]) { wanted[from] = true; wanted[to] = true; }
+          });
+        }
+        return wanted;
+      }
+      function boxesFor(ids, includeNeighbors) {
+        var wanted = semanticIds(ids, includeNeighbors);
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'))
+          .filter(function (node) { return wanted[node.getAttribute('data-node-id')]; })
+          .map(function (node) {
+            try { return node.getBBox(); } catch (_) { return null; }
+          })
+          .filter(Boolean);
+      }
+      function frameDesktop(ids, options) {
+        options = options || {};
+        var boxes = boxesFor(ids, options.includeNeighbors === true);
+        if (!boxes.length || !viewBox || viewBox.width <= 0 || viewBox.height <= 0) return false;
+        var svgWidth = svg.clientWidth || 1;
+        var svgHeight = svg.clientHeight || 1;
+        var contentScale = Math.min(svgWidth / viewBox.width, svgHeight / viewBox.height);
+        var contentOffsetX = (svgWidth - viewBox.width * contentScale) / 2;
+        var contentOffsetY = (svgHeight - viewBox.height * contentScale) / 2;
+        var minX = Math.min.apply(Math, boxes.map(function (box) { return box.x; }));
+        var minY = Math.min.apply(Math, boxes.map(function (box) { return box.y; }));
+        var maxX = Math.max.apply(Math, boxes.map(function (box) { return box.x + box.width; }));
+        var maxY = Math.max.apply(Math, boxes.map(function (box) { return box.y + box.height; }));
+        var bounds = {
+          x: contentOffsetX + minX * contentScale,
+          y: contentOffsetY + minY * contentScale,
+          width: Math.max(1, (maxX - minX) * contentScale),
+          height: Math.max(1, (maxY - minY) * contentScale)
+        };
+        var padding = options.padding || 48;
+        var left = padding;
+        var right = svgWidth - padding;
+        var top = padding;
+        var bottom = svgHeight - Math.max(padding, 72);
+        var containerRect = container.getBoundingClientRect();
+        var visibleTop = Math.max(0, -containerRect.top);
+        var visibleBottom = Math.min(svgHeight, window.innerHeight - containerRect.top);
+        if (visibleBottom - visibleTop >= 240) {
+          top = Math.max(top, visibleTop + padding);
+          bottom = Math.min(bottom, visibleBottom - Math.max(padding, 72));
+        }
+        var chip = document.getElementById('focus-chip');
+        if (chip && !chip.hidden) {
+          var lensEnd = chip.offsetLeft + chip.offsetWidth + 24 - (svg.offsetLeft || 0);
+          left = Math.max(left, Math.min(svgWidth * 0.42, lensEnd));
+        }
+        var routeReceipt = document.getElementById('route-probe');
+        if (routeReceipt && !routeReceipt.hidden && routeReceipt.hasAttribute('data-route-journey')) {
+          var receiptTop = routeReceipt.offsetTop;
+          var receiptBottom = receiptTop + routeReceipt.offsetHeight;
+          if (receiptTop < svgHeight / 2) top = Math.max(top, receiptBottom + 24);
+          else bottom = Math.min(bottom, receiptTop - 24);
+        }
+        if (right <= left || bottom <= top) return false;
+        var maxScale = options.maxScale || (options.includeNeighbors ? 1.9 : 2.15);
+        var targetScale = Math.min((right - left) / bounds.width, (bottom - top) / bounds.height) * 0.9;
+        targetScale = Math.max(1, Math.min(maxScale, targetScale));
+        if (targetScale < 1.08) targetScale = 1;
+        var target = {
+          scale: Math.round(targetScale * 100) / 100,
+          x: 0,
+          y: 0,
+          mode: 'semantic'
+        };
+        target.x = (left + right) / 2 - (bounds.x + bounds.width / 2) * target.scale;
+        target.y = (top + bottom) / 2 - (bounds.y + bounds.height / 2) * target.scale;
+        var start = sampleRenderedState();
+        stopCameraMotion('replaced', false);
+        var transaction = cameraReceipt(target, options);
+        cameraTransaction = transaction;
+        var instant = options.instant === true || reducedMotion() || document.hidden;
+        if (instant) {
+          state = target;
+          apply();
+          finishCameraTransaction(transaction, reducedMotion() ? 'reduced-motion' : (document.hidden ? 'hidden' : 'complete'));
+          return transaction;
+        }
+        var duration = Math.max(180, Math.min(520, Number(options.duration) || 420));
+        var startedAt = 0;
+        state = start;
+        state.mode = 'semantic';
+        apply();
+        container.classList.add('is-camera-moving');
+        container.classList.add('is-camera-transaction');
+        container.setAttribute('data-camera-transaction', String(transaction.id));
+        var step = function (timestamp) {
+          if (cameraTransaction !== transaction || transaction.settled) return;
+          if (!startedAt) startedAt = timestamp;
+          var fraction = Math.max(0, Math.min(1, (timestamp - startedAt) / duration));
+          var eased = 1 - Math.pow(1 - fraction, 3);
+          state = {
+            scale: start.scale + (target.scale - start.scale) * eased,
+            x: start.x + (target.x - start.x) * eased,
+            y: start.y + (target.y - start.y) * eased,
+            mode: 'semantic'
+          };
+          apply();
+          if (fraction < 1) {
+            transaction.frame = requestAnimationFrame(step);
+            cameraFrame = transaction.frame;
+          } else {
+            state = target;
+            apply();
+            finishCameraTransaction(transaction, 'complete');
+          }
+        };
+        transaction.frame = requestAnimationFrame(step);
+        cameraFrame = transaction.frame;
+        return transaction;
+      }
+      function reveal(ids, options) {
+        options = options || {};
+        if (window.innerWidth > 720) return frameDesktop(ids, options);
+        stopCameraMotion('replaced', false);
+        state.scale = 1;
+        state.x = 0;
+        state.y = 0;
+        state.mode = 'semantic';
+        apply();
+        if (!container.hasAttribute('data-wide-diagram')) {
+          var contained = cameraReceipt({ scale: 1, x: 0, y: 0, mode: 'semantic' }, options);
+          cameraTransaction = contained;
+          finishCameraTransaction(contained, 'complete');
+          return contained;
+        }
+        var boxes = boxesFor(ids, options.includeNeighbors === true);
+        if (!boxes.length || !viewBox || viewBox.width <= 0) return false;
+        var minX = Math.min.apply(Math, boxes.map(function (box) { return box.x; }));
+        var maxX = Math.max.apply(Math, boxes.map(function (box) { return box.x + box.width; }));
+        var center = ((minX + maxX) / 2 / viewBox.width) * (svg.clientWidth || 1);
+        var target = Math.max(0, Math.min(svg.clientWidth - container.clientWidth, center - container.clientWidth / 2));
+        var transaction = cameraReceipt({ scrollLeft: target }, options);
+        cameraTransaction = transaction;
+        var instant = options.instant === true || reducedMotion() || document.hidden;
+        autoScrollUntil = Date.now() + (instant ? 50 : 470);
+        try { container.scrollTo({ left: target, behavior: instant ? 'auto' : 'smooth' }); }
+        catch (_) { container.scrollLeft = target; }
+        if (instant) finishCameraTransaction(transaction, reducedMotion() ? 'reduced-motion' : (document.hidden ? 'hidden' : 'complete'));
+        else {
+          transaction.timer = setTimeout(function () { finishCameraTransaction(transaction, 'complete'); }, 460);
+          cameraTimer = transaction.timer;
+          container.classList.add('is-camera-moving');
+          container.setAttribute('data-camera-transaction', String(transaction.id));
+        }
+        return transaction;
+      }
+      function syncSemantic() {
+        var guided = Archify.guidedViews && typeof Archify.guidedViews.focus === 'function'
+          ? Archify.guidedViews.focus() : [];
+        if (guided && guided.length) return reveal(guided, { reason: 'guided-sync' });
+        var active = Archify.focus && typeof Archify.focus.active === 'function' ? Archify.focus.active() : null;
+        if (typeof active === 'string') return reveal([active], { includeNeighbors: true, reason: 'focus-sync' });
+        if (Array.isArray(active) && active.length) return reveal(active, { reason: 'selection-sync' });
+        return false;
+      }
+      function pinControls() {
+        container.style.setProperty('--archify-scroll-x', container.scrollLeft + 'px');
+      }
+      function onScroll() {
+        pinControls();
+        if (Archify.radar && typeof Archify.radar.sync === 'function') Archify.radar.sync();
+        if (window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram') && Date.now() > autoScrollUntil) {
+          interruptCamera();
+        }
+      }
+      function onPointerEnd(event) {
+        if (!drag) return;
+        var moved = drag.moved;
+        drag = null;
+        container.classList.remove('is-panning');
+        try { container.releasePointerCapture(event.pointerId); } catch (_) {}
+        if (moved) {
+          container.setAttribute('data-just-panned', 'true');
+          setTimeout(function () { container.removeAttribute('data-just-panned'); }, 80);
+        }
+      }
 
-  </div>
+      inBtn.addEventListener('click', function () { zoom(state.scale + 0.25); });
+      outBtn.addEventListener('click', function () { zoom(state.scale - 0.25); });
+      resetBtn.addEventListener('click', reset);
+      container.addEventListener('pointerdown', function (event) {
+        if (state.scale <= 1 || event.button !== 0 || event.target.closest('.diagram-nav, .focus-chip, .node-finder, .diagram-guide, .overview-map, .route-probe, .semantic-lens') || event.target.closest('[data-node-id]') || event.target.closest('[data-relationship-hit-key]')) return;
+        interruptCamera();
+        drag = { startX: event.clientX, startY: event.clientY, x: state.x, y: state.y, moved: false };
+        container.classList.add('is-panning');
+        try { container.setPointerCapture(event.pointerId); } catch (_) {}
+      });
+      container.addEventListener('pointermove', function (event) {
+        if (!drag) return;
+        var dx = event.clientX - drag.startX;
+        var dy = event.clientY - drag.startY;
+        if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
+        state.x = drag.x + dx;
+        state.y = drag.y + dy;
+        apply();
+      });
+      container.addEventListener('pointerup', onPointerEnd);
+      container.addEventListener('pointercancel', onPointerEnd);
+      container.addEventListener('scroll', onScroll, { passive: true });
+      window.addEventListener('resize', function () {
+        if (resizeFrame) cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(function () {
+          resizeFrame = 0;
+          if (state.mode === 'semantic') syncSemantic();
+          else apply();
+        });
+      });
+      window.addEventListener('hashchange', function () { requestAnimationFrame(syncSemantic); });
+      apply();
+      pinControls();
+      requestAnimationFrame(syncSemantic);
+
+      return {
+        zoomIn: function () { zoom(state.scale + 0.25); },
+        zoomOut: function () { zoom(state.scale - 0.25); },
+        reset: reset,
+        reveal: reveal,
+        centerAt: centerAt,
+        logicalViewport: logicalViewport,
+        sync: syncSemantic,
+        state: function () { return { scale: state.scale, x: state.x, y: state.y, mode: state.mode }; }
+      };
+    })();
 
-  <script>
     /* ============================================================
-       Theme toggle — persists to localStorage, respects system pref
+       Semantic Radar — simplified semantic bounds + live viewport.
+       The radar is built at runtime so the checked artifact still contains
+       one canonical SVG block, and export serialization remains untouched.
        ============================================================ */
-    var Archify = {};
-
-    Archify.theme = (function () {
-      var STORAGE_KEY = 'archify-theme';
-      var html = document.documentElement;
-      var btn = document.getElementById('btn-theme');
-      var icon = document.getElementById('theme-icon');
-      var label = document.getElementById('theme-label');
-
-      // localStorage can throw (blocked cookies, sandboxed iframes); the whole
-      // script element dies on an uncaught error, so guard every access.
-      function readStored() {
-        try { return localStorage.getItem(STORAGE_KEY); } catch (_) { return null; }
+    Archify.radar = (function () {
+      var container = document.querySelector('.diagram-container');
+      var diagram = container.querySelector(':scope > svg');
+      var panel = document.getElementById('overview-map');
+      var surface = document.getElementById('overview-map-surface');
+      var status = document.getElementById('overview-map-status');
+      var trigger = document.getElementById('btn-overview-map');
+      var closeBtn = document.getElementById('overview-map-close');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var viewBox = diagram.viewBox && diagram.viewBox.baseVal;
+      var mapSvg = document.createElementNS(namespace, 'svg');
+      var nodeLayer = document.createElementNS(namespace, 'g');
+      var viewport = document.createElementNS(namespace, 'rect');
+      var nodes = [];
+      var drag = null;
+      var syncFrame = 0;
+
+      mapSvg.setAttribute('role', 'group');
+      mapSvg.setAttribute('aria-label', 'Semantic diagram radar nodes');
+      mapSvg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+      nodeLayer.setAttribute('class', 'overview-map-nodes');
+      viewport.setAttribute('class', 'overview-map-viewport');
+      viewport.setAttribute('rx', '3');
+      viewport.setAttribute('ry', '3');
+      mapSvg.appendChild(nodeLayer);
+      mapSvg.appendChild(viewport);
+      surface.appendChild(mapSvg);
+
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
       }
-      function writeStored(value) {
-        try { localStorage.setItem(STORAGE_KEY, value); } catch (_) {}
+      function build() {
+        if (!viewBox || viewBox.width <= 0 || viewBox.height <= 0) return false;
+        mapSvg.setAttribute('viewBox', [viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' '));
+        nodeLayer.textContent = '';
+        nodes = [];
+        Array.prototype.forEach.call(diagram.querySelectorAll('[data-node-id]'), function (node) {
+          var box;
+          try { box = node.getBBox(); } catch (_) { box = null; }
+          if (!box || box.width <= 0 || box.height <= 0) return;
+          var id = node.getAttribute('data-node-id');
+          var rect = document.createElementNS(namespace, 'rect');
+          rect.setAttribute('class', 'overview-map-node');
+          rect.setAttribute('x', String(box.x));
+          rect.setAttribute('y', String(box.y));
+          rect.setAttribute('width', String(Math.max(3, box.width)));
+          rect.setAttribute('height', String(Math.max(3, box.height)));
+          rect.setAttribute('rx', String(Math.max(2, Math.min(8, Math.min(box.width, box.height) * 0.1))));
+          rect.setAttribute('data-radar-node-id', id);
+          rect.setAttribute('data-kind', node.getAttribute('data-node-kind') || 'neutral');
+          rect.setAttribute('tabindex', '0');
+          rect.setAttribute('role', 'button');
+          rect.setAttribute('aria-label', 'Focus ' + nodeLabel(node, id) + ' from Semantic Radar');
+          nodeLayer.appendChild(rect);
+          nodes.push({ id: id, node: node, rect: rect });
+        });
+        status.textContent = nodes.length + ' nodes · full map';
+        return true;
       }
-      function urlOverride() {
-        // URL param wins (useful for deterministic screenshots / share links)
-        try {
-          var param = new URLSearchParams(window.location.search).get('theme');
-          if (param === 'light' || param === 'dark') return param;
-        } catch (_) {}
-        return null;
+      function updateDocking() {
+        if (panel.hidden) return;
+        var containerRect = container.getBoundingClientRect();
+        var intersectsWindow = containerRect.bottom > 12 && containerRect.top < window.innerHeight - 12;
+        if (!intersectsWindow) {
+          panel.removeAttribute('data-docked');
+          panel.removeAttribute('data-dock-side');
+          panel.style.removeProperty('--archify-radar-right');
+          panel.style.removeProperty('--archify-radar-left');
+          panel.style.removeProperty('--archify-radar-top');
+          return;
+        }
+        var active = diagram.querySelector('[data-focus-selected]');
+        var activeRect = active ? active.getBoundingClientRect() : null;
+        var dockLeft = !!(activeRect && activeRect.left + activeRect.width / 2 > window.innerWidth / 2);
+        var right = Math.max(16, window.innerWidth - Math.min(containerRect.right - 16, window.innerWidth - 16));
+        var left = Math.max(16, Math.min(containerRect.left + 16, window.innerWidth - panel.offsetWidth - 16));
+        var topLimit = Math.max(16, containerRect.top + 16);
+        var bottomLimit = Math.min(window.innerHeight - 16, containerRect.bottom - 16);
+        var panelLeft = dockLeft ? left : window.innerWidth - right - panel.offsetWidth;
+        var panelRight = panelLeft + panel.offsetWidth;
+        var lens = document.getElementById('focus-chip');
+        var lensRect = lens && !lens.hidden ? lens.getBoundingClientRect() : null;
+        var blockers = [activeRect, lensRect].filter(function (rect) {
+          return rect && rect.right > panelLeft && rect.left < panelRight;
+        });
+        var desiredTop = bottomLimit - panel.offsetHeight;
+        var candidates = [desiredTop, topLimit];
+        blockers.forEach(function (rect) {
+          candidates.push(rect.top - 10 - panel.offsetHeight, rect.bottom + 10);
+        });
+        var valid = candidates.filter(function (candidate) {
+          if (candidate < topLimit || candidate + panel.offsetHeight > bottomLimit) return false;
+          return blockers.every(function (rect) {
+            return candidate + panel.offsetHeight <= rect.top - 10 || candidate >= rect.bottom + 10;
+          });
+        });
+        valid.sort(function (a, b) { return Math.abs(a - desiredTop) - Math.abs(b - desiredTop); });
+        var top = valid.length ? valid[0] : Math.max(topLimit, desiredTop);
+        top = Math.min(window.innerHeight - panel.offsetHeight - 16, top);
+        panel.setAttribute('data-docked', 'true');
+        panel.setAttribute('data-dock-side', dockLeft ? 'left' : 'right');
+        panel.style.setProperty('--archify-radar-right', Math.round(right) + 'px');
+        panel.style.setProperty('--archify-radar-left', Math.round(left) + 'px');
+        panel.style.setProperty('--archify-radar-top', Math.round(Math.max(16, top)) + 'px');
       }
-
-      function resolveInitial() {
-        var fromUrl = urlOverride();
-        if (fromUrl) return fromUrl;
-        var saved = readStored();
-        if (saved === 'light' || saved === 'dark') return saved;
-        return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      function syncNow() {
+        syncFrame = 0;
+        if (panel.hidden || !Archify.view || typeof Archify.view.logicalViewport !== 'function') return;
+        updateDocking();
+        var visible = Archify.view.logicalViewport();
+        if (!visible) return;
+        viewport.setAttribute('x', String(visible.x));
+        viewport.setAttribute('y', String(visible.y));
+        viewport.setAttribute('width', String(visible.width));
+        viewport.setAttribute('height', String(visible.height));
+        var full = visible.width >= viewBox.width * 0.98 && visible.height >= viewBox.height * 0.98;
+        var mobileWide = window.innerWidth <= 720 && container.hasAttribute('data-wide-diagram');
+        var viewportCopy = full
+          ? 'full map'
+          : (mobileWide ? Math.round(visible.width / viewBox.width * 100) + '% width' : Math.round(visible.scale * 100) + '% viewport');
+        status.textContent = nodes.length + ' nodes · ' + viewportCopy;
+        nodes.forEach(function (item) {
+          var active = item.node.hasAttribute('data-focus-selected') ||
+            item.node.getAttribute('data-story-beat-state') === 'active';
+          if (active) item.rect.setAttribute('data-radar-active', 'true');
+          else item.rect.removeAttribute('data-radar-active');
+        });
       }
-
-      function apply(theme) {
-        html.setAttribute('data-theme', theme);
-        icon.textContent = theme === 'dark' ? '\u263E' : '\u263C';
-        label.textContent = theme === 'dark' ? 'Dark' : 'Light';
-        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+      function sync() {
+        if (syncFrame) return;
+        syncFrame = requestAnimationFrame(syncNow);
       }
-
-      function toggle() {
-        var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-        apply(next);
-        writeStored(next);
+      function setOpen(next, options) {
+        options = options || {};
+        next = Boolean(next);
+        if (next && Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (next && Archify.semanticLens && Archify.semanticLens.isOpen()) {
+          Archify.semanticLens.close({ restoreFocus: false });
+        }
+        panel.hidden = !next;
+        trigger.setAttribute('aria-expanded', next ? 'true' : 'false');
+        trigger.setAttribute('aria-label', next ? 'Close semantic radar' : 'Open semantic radar');
+        if (next) {
+          build();
+          updateDocking();
+          sync();
+          if (options.focus === true) surface.focus();
+        } else {
+          panel.removeAttribute('data-docked');
+          panel.removeAttribute('data-dock-side');
+          panel.style.removeProperty('--archify-radar-right');
+          panel.style.removeProperty('--archify-radar-left');
+          panel.style.removeProperty('--archify-radar-top');
+          if (options.restoreFocus === true) trigger.focus();
+        }
+        return next;
+      }
+      function toggle() { return setOpen(panel.hidden, { focus: false }); }
+      function close(options) { return setOpen(false, options); }
+      function bringNodeIntoWindow(node) {
+        var delay = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 540;
+        window.setTimeout(function () {
+          var rect = node.getBoundingClientRect();
+          var safeTop = 64;
+          var safeBottom = window.innerHeight - 64;
+          if (rect.top >= safeTop && rect.bottom <= safeBottom) return;
+          var top = Math.max(0, window.scrollY + rect.top + rect.height / 2 - window.innerHeight / 2);
+          try { window.scrollTo({ top: top, behavior: delay ? 'smooth' : 'auto' }); }
+          catch (_) { window.scrollTo(0, top); }
+        }, delay);
+      }
+      function focusNode(id) {
+        var main = diagram.querySelector('[data-node-id="' + id + '"]');
+        if (!main) return false;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.focus && typeof Archify.focus.set === 'function') {
+          Archify.focus.set(id, { toggle: false });
+        }
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'radar' });
+        }
+        bringNodeIntoWindow(main);
+        try { main.focus({ preventScroll: true }); } catch (_) { try { main.focus(); } catch (_) {} }
+        sync();
+        return true;
+      }
+      function diagramPoint(event) {
+        var matrix = mapSvg.getScreenCTM();
+        if (!matrix) return null;
+        var point = mapSvg.createSVGPoint();
+        point.x = event.clientX;
+        point.y = event.clientY;
+        return point.matrixTransform(matrix.inverse());
+      }
+      function navigate(event) {
+        var point = diagramPoint(event);
+        if (!point || !Archify.view || typeof Archify.view.centerAt !== 'function') return;
+        Archify.view.centerAt(point.x, point.y, { minimumScale: 1.5, instant: true });
+        sync();
+      }
+      function endDrag(event) {
+        if (!drag) return;
+        drag = null;
+        panel.removeAttribute('data-dragging');
+        container.classList.remove('is-panning');
+        try { surface.releasePointerCapture(event.pointerId); } catch (_) {}
       }
 
-      apply(resolveInitial());
-      btn.addEventListener('click', toggle);
-
-      // Follow live OS theme changes while the user has no explicit preference.
-      try {
-        var media = window.matchMedia('(prefers-color-scheme: light)');
-        var onChange = function (e) {
-          var saved = readStored();
-          if (urlOverride() || saved === 'light' || saved === 'dark') return;
-          apply(e.matches ? 'light' : 'dark');
-        };
-        if (media.addEventListener) media.addEventListener('change', onChange);
-        else if (media.addListener) media.addListener(onChange);
-      } catch (_) {}
-
-      return { toggle: toggle };
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close({ restoreFocus: true }); });
+      surface.addEventListener('pointerdown', function (event) {
+        if (event.button !== 0 || event.target.closest('[data-radar-node-id]')) return;
+        event.preventDefault();
+        drag = { pointerId: event.pointerId };
+        panel.setAttribute('data-dragging', 'true');
+        container.classList.add('is-panning');
+        try { surface.setPointerCapture(event.pointerId); } catch (_) {}
+        navigate(event);
+      });
+      surface.addEventListener('pointermove', function (event) {
+        if (!drag || drag.pointerId !== event.pointerId) return;
+        navigate(event);
+      });
+      surface.addEventListener('pointerup', endDrag);
+      surface.addEventListener('pointercancel', endDrag);
+      surface.addEventListener('click', function (event) {
+        var node = event.target.closest('[data-radar-node-id]');
+        if (node) focusNode(node.getAttribute('data-radar-node-id'));
+      });
+      surface.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          close({ restoreFocus: true });
+          return;
+        }
+        var node = event.target.closest('[data-radar-node-id]');
+        if (node && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          focusNode(node.getAttribute('data-radar-node-id'));
+          return;
+        }
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+        var visible = Archify.view && Archify.view.logicalViewport ? Archify.view.logicalViewport() : null;
+        if (!visible) return;
+        event.preventDefault();
+        var x = visible.x + visible.width / 2;
+        var y = visible.y + visible.height / 2;
+        var stepX = Math.max(12, visible.width * 0.24);
+        var stepY = Math.max(12, visible.height * 0.24);
+        if (event.key === 'ArrowLeft') x -= stepX;
+        else if (event.key === 'ArrowRight') x += stepX;
+        else if (event.key === 'ArrowUp') y -= stepY;
+        else y += stepY;
+        Archify.view.centerAt(x, y, { minimumScale: 1.5, instant: true });
+        sync();
+      });
+      window.addEventListener('resize', sync);
+      window.addEventListener('scroll', function () { updateDocking(); sync(); }, { passive: true });
+      requestAnimationFrame(build);
+
+      return {
+        open: function () { return setOpen(true); },
+        close: close,
+        toggle: toggle,
+        sync: sync,
+        focus: focusNode,
+        isOpen: function () { return !panel.hidden; },
+        count: function () { return nodes.length; }
+      };
     })();
 
     /* ============================================================
-       Export — PNG / JPEG / WebP / SVG (download) and Copy PNG (clipboard)
-
-       Raster exports are always rendered at 4x source resolution for
-       maximum sharpness. The trick: we set the serialized SVG's
-       `width`/`height` to viewBox * 4 so the browser rasterizes the
-       vectors at that resolution natively. drawImage then draws at
-       the image's natural size (no upscaling = no blur).
-
-       JPEG/WebP paint the current theme's background explicitly since
-       those formats have no alpha channel.
+       Presentation Stage — a shareable, viewport-filling live view.
+       It changes only HTML layout and URL state; SVG semantics and export
+       serialization remain untouched. Escape first clears an active guided
+       view/focus, then exits the stage.
        ============================================================ */
-    (function () {
-      var RASTER_SCALE = 4;
+    Archify.presentation = (function () {
+      var html = document.documentElement;
+      var btn = document.getElementById('btn-present');
+      var label = document.getElementById('present-label');
+      var previousScrollY = 0;
 
-      function diagramFilename() {
-        var title = (document.title || 'diagram')
-          .replace(/\s+Architecture(\s+Diagram)?$/i, '')
-          .replace(/\s+Diagram$/i, '')
-          .trim();
-        return title.replace(/[^a-z0-9_\-]+/gi, '-')
-                    .toLowerCase()
-                    .replace(/^-+|-+$/g, '') || 'diagram';
-      }
+      function active() { return html.getAttribute('data-present') === 'true'; }
 
-      function currentBg() {
-        return getComputedStyle(document.body).backgroundColor || '#ffffff';
+      function updateUrl(next) {
+        try {
+          var url = new URL(window.location.href);
+          if (next) url.searchParams.set('present', '1');
+          else url.searchParams.delete('present');
+          history.replaceState(null, '', url.pathname + url.search + url.hash);
+        } catch (_) {}
       }
 
-      /**
-       * Serialize the main SVG into a standalone document.
-       *
-       * Two modes:
-       * - Default (opts.autoTheme=false) — locks the serialized SVG to the
-       *   viewer's current theme. Used by the raster pipeline
-       *   (PNG/JPEG/WebP/clipboard) because canvas rasterization needs
-       *   deterministic colors; a raster cannot react to
-       *   prefers-color-scheme after encoding.
-       * - autoTheme=true — emits BOTH dark and light variable sets plus a
-       *   `@media (prefers-color-scheme)` rule so the resulting SVG
-       *   self-themes when embedded in GitHub READMEs or other hosts that
-       *   expose a color scheme. Used for "Download SVG".
-       */
-      function serializeSvg(scale, opts) {
-        // scale: integer multiplier for intrinsic SVG pixel dimensions used by
-        // the raster path. Defaults to 1 (natural size) for SVG download.
-        scale = scale || 1;
-        opts = opts || {};
-        var autoTheme = opts.autoTheme === true;
-
-        var svg = document.querySelector('.diagram-container svg');
-        var clone = svg.cloneNode(true);
-
-        var vb = svg.viewBox.baseVal;
-        // Scale width/height so the browser rasterizes the vectors at target
-        // resolution directly. viewBox stays unchanged so coordinates don't
-        // shift. This is the key to sharp rasters — do NOT scale later via
-        // canvas upscaling.
-        clone.setAttribute('width', vb.width * scale);
-        clone.setAttribute('height', vb.height * scale);
-        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+      function render(next) {
+        btn.setAttribute('aria-pressed', next ? 'true' : 'false');
+        btn.setAttribute('aria-label', next ? 'Exit presentation stage' : 'Enter presentation stage');
+        btn.title = next ? 'Exit presentation stage (F or Escape)' : 'Presentation stage (F)';
+        label.textContent = next ? 'Exit' : 'Present';
+      }
 
-        // Only the SVG-relevant rules: semantic classes, markers, and the
-        // theme variable blocks. Toolbar/cards/print CSS can never apply
-        // inside a standalone SVG and would only bloat the export.
-        var hostStyle = (function () {
-          var out = [];
-          Array.prototype.forEach.call(document.styleSheets, function (sheet) {
-            var rules;
-            try { rules = sheet.cssRules; } catch (_) { return; } // cross-origin
-            if (!rules) return;
-            Array.prototype.forEach.call(rules, function (rule) {
-              if (rule.type !== 1) return; // plain style rules only
-              var sel = rule.selectorText || '';
-              if (/(^|,)\s*(svg|:root|\[data-theme|\.c-|\.t-|\.a-|\.m-)/.test(sel)) {
-                out.push(rule.cssText);
-              }
+      function setActive(next, options) {
+        options = options || {};
+        next = Boolean(next);
+        if (next === active()) {
+          render(next);
+          return next;
+        }
+        if (next) {
+          if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+          previousScrollY = window.scrollY || 0;
+          html.setAttribute('data-present', 'true');
+          try { window.scrollTo(0, 0); } catch (_) {}
+        } else {
+          html.removeAttribute('data-present');
+        }
+        render(next);
+        if (options.updateUrl !== false) updateUrl(next);
+        requestAnimationFrame(function () {
+          if (Archify.view && typeof Archify.view.reset === 'function') {
+            Archify.view.reset({ automatic: true });
+            requestAnimationFrame(function () {
+              if (Archify.view && typeof Archify.view.sync === 'function') Archify.view.sync();
             });
-          });
-          return out.join('\n');
-        })();
-
-        // Derive the variable list from the stylesheet so newly added theme
-        // variables can never be missed by the export pipeline again
-        // (--lane-fill/--lane-stroke once were).
-        var varNames = (function () {
-          var seen = {};
-          var names = [];
-          (hostStyle.match(/--[a-zA-Z0-9-]+(?=\s*:)/g) || []).forEach(function (n) {
-            if (!seen[n]) { seen[n] = true; names.push(n); }
-          });
-          return names;
-        })();
-
-        // Resolve the full variable set for a given data-theme via an
-        // off-DOM probe, independent of what the viewer is currently set to.
-        function resolveVars(themeAttr) {
-          var probe = document.createElement('div');
-          probe.setAttribute('data-theme', themeAttr);
-          probe.style.cssText = 'position:absolute;width:0;height:0;visibility:hidden;';
-          document.body.appendChild(probe);
-          try {
-            var c = getComputedStyle(probe);
-            return varNames.map(function (n) {
-              return n + ': ' + c.getPropertyValue(n).trim() + ';';
-            }).join(' ');
-          } finally {
-            document.body.removeChild(probe);
           }
-        }
-
-        // 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.
-        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'); }";
-        }).join('\n');
-
-        var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-        var bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        bgRect.setAttribute('width', '100%');
-        bgRect.setAttribute('height', '100%');
-
-        if (autoTheme) {
-          // Dual-theme SVG. Dark is the default (so hosts without
-          // prefers-color-scheme still render), light swaps in via media
-          // query, and svg[data-theme="..."] still lets downstream
-          // consumers force a specific theme.
-          var darkVars = resolveVars('dark');
-          var lightVars = resolveVars('light');
+          if (!next && previousScrollY) {
+            try { window.scrollTo(0, previousScrollY); } catch (_) {}
+          }
+        });
+        return next;
+      }
 
-          style.textContent =
-            fontFallback + "\n" +
-            "svg { 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" +
-            hostStyle + "\n" +
-            ":root, svg { " + darkVars + " }\n" +
-            "@media (prefers-color-scheme: light) { :root, svg { " + lightVars + " } }\n" +
-            "svg[data-theme=\"light\"] { " + lightVars + " }\n" +
-            "svg[data-theme=\"dark\"] { " + darkVars + " }\n" +
-            "rect.c-bg-rect { fill: var(--bg); }\n";
+      function toggle() { return setActive(!active()); }
 
-          // Don't lock the serialized SVG to the viewer's current theme.
-          clone.removeAttribute('data-theme');
-          // Background follows the CSS variable, not a fixed color, so it
-          // swaps with the media query.
-          bgRect.setAttribute('class', 'c-bg-rect');
-        } else {
-          // Raster path: lock to the viewer's current theme.
-          var theme = document.documentElement.getAttribute('data-theme') || 'dark';
-          var themeHost = document.querySelector('[data-theme="' + theme + '"]') || document.documentElement;
-          var computed = getComputedStyle(themeHost);
-          var vars = varNames.map(function (n) {
-            return n + ': ' + computed.getPropertyValue(n).trim() + ';';
-          }).join(' ');
+      render(active());
+      btn.addEventListener('click', toggle);
 
-          // IMPORTANT: inject the resolved variables AFTER hostStyle,
-          // otherwise hostStyle's ":root, [data-theme=\"dark\"] { ... }" rule
-          // overrides our chosen theme via later-in-cascade equal-specificity.
-          // Keep this order.
-          style.textContent =
-            fontFallback + "\n" +
-            "svg { 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" +
-            hostStyle + "\n" +
-            ":root, svg { " + vars + " }\n";
+      return {
+        enter: function () { return setActive(true); },
+        exit: function () { return setActive(false); },
+        toggle: toggle,
+        active: active
+      };
+    })();
 
-          bgRect.setAttribute('fill', computed.getPropertyValue('--bg').trim() || '#ffffff');
-        }
+    /* ============================================================
+       Node Finder — stable-ID search over the existing semantic SVG.
+       Search never changes the IR or SVG geometry: selecting a result resets
+       the viewport, releases a guided view, and delegates to semantic focus.
+       ============================================================ */
+    Archify.finder = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector('svg');
+      var trigger = document.getElementById('btn-node-finder');
+      var panel = document.getElementById('node-finder');
+      var heading = document.getElementById('node-finder-title');
+      var closeBtn = document.getElementById('node-finder-close');
+      var input = document.getElementById('node-finder-input');
+      var results = document.getElementById('node-finder-results');
+      var empty = document.getElementById('node-finder-empty');
+      var status = document.getElementById('node-finder-status');
+      var visibleItems = [];
+
+      function defaultContext() {
+        return {
+          kind: 'focus',
+          title: 'Find a node',
+          placeholder: 'Search labels or IDs',
+          empty: 'No matching nodes',
+          resultsLabel: 'Diagram nodes',
+          availableNoun: 'nodes',
+          allowedIds: null,
+          badges: null
+        };
+      }
 
-        clone.insertBefore(style, clone.firstChild);
-        clone.insertBefore(bgRect, style.nextSibling);
+      var context = defaultContext();
+
+      function semanticType(node) {
+        var authored = node.getAttribute('data-node-kind');
+        if (authored) return authored;
+        var types = ['frontend', 'backend', 'database', 'cloud', 'security', 'messagebus', 'external'];
+        return types.find(function (type) { return node.querySelector('.c-' + type); }) || 'node';
+      }
+
+      function connectionsFor(id) {
+        var count = 0;
+        var seen = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = from + '\u0000' + to;
+          if ((from === id || to === id) && !seen[key]) {
+            seen[key] = true;
+            count += 1;
+          }
+        });
+        return count;
+      }
 
+      var items = Array.prototype.map.call(svg.querySelectorAll('[data-node-id]'), function (node) {
+        var id = node.getAttribute('data-node-id');
+        var label = node.getAttribute('data-node-label') || (node.getAttribute('aria-label') || id).replace(/^Focus\s+/, '');
+        var text = (node.textContent || '').replace(/\s+/g, ' ').trim();
+        var sublabel = node.getAttribute('data-node-sublabel') || '';
+        var context = node.getAttribute('data-node-context') || '';
+        var tag = node.getAttribute('data-node-tag') || '';
+        var type = semanticType(node);
+        var sources = Archify.sourceEvidence.node(id);
+        var sourceSearch = sources.map(function (source) {
+          return [source.path, source.label, source.line, source.endLine].filter(Boolean).join(' ');
+        }).join(' ');
         return {
-          svgString: new XMLSerializer().serializeToString(clone),
-          width: vb.width * scale,
-          height: vb.height * scale
+          id: id,
+          label: label,
+          type: type,
+          sublabel: sublabel,
+          context: context,
+          tag: tag,
+          sources: sources,
+          links: connectionsFor(id),
+          search: (id + ' ' + label + ' ' + type + ' ' + sublabel + ' ' + context + ' ' + tag + ' ' + sourceSearch + ' ' + text).toLowerCase(),
+          node: node
         };
+      });
+
+      function resultButtons() {
+        return Array.prototype.slice.call(results.querySelectorAll('.node-finder-result'));
       }
 
-      function download(blob, filename) {
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
+      function resolveContext(options) {
+        var requested = options && options.context ? options.context : null;
+        if (!requested && Archify.routeProbe && typeof Archify.routeProbe.finderContext === 'function') {
+          requested = Archify.routeProbe.finderContext();
+        }
+        if (!requested) return defaultContext();
+        var resolved = defaultContext();
+        Object.keys(requested).forEach(function (key) { resolved[key] = requested[key]; });
+        return resolved;
       }
 
-      // Conservative upper bound on total canvas pixels. Older Safari on iOS
-      // silently produces a blank canvas above ~16 Mpx; Chrome / Firefox /
-      // desktop Safari are far higher but start failing on memory-constrained
-      // devices. We pick the largest integer scale in {4,3,2,1} whose target
-      // pixel count fits under this cap.
-      var MAX_CANVAS_PIXELS = 16 * 1024 * 1024;
+      function availableItems() {
+        if (!context.allowedIds) return items.slice();
+        return items.filter(function (item) { return context.allowedIds.indexOf(item.id) !== -1; });
+      }
 
-      function pickSafeScale(vbW, vbH) {
-        for (var s = RASTER_SCALE; s >= 1; s--) {
-          if (vbW * s * vbH * s <= MAX_CANVAS_PIXELS) return s;
+      function applyContext() {
+        panel.setAttribute('data-context', context.kind);
+        heading.textContent = context.title;
+        input.placeholder = context.placeholder;
+        empty.textContent = context.empty;
+        results.setAttribute('aria-label', context.resultsLabel);
+      }
+
+      function select(id) {
+        var item = items.find(function (candidate) { return candidate.id === id; });
+        if (!item) return false;
+        var routeSelection = context.kind === 'route-source' || context.kind === 'route-target';
+        if (routeSelection) {
+          if (!Archify.routeProbe || typeof Archify.routeProbe.choose !== 'function' || !Archify.routeProbe.choose(id)) return false;
+          if (Archify.routeProbe.active() === 'target' && Archify.view && typeof Archify.view.reveal === 'function') {
+            Archify.view.reveal([id], { includeNeighbors: true, reason: 'route-pick' });
+          }
+          close({ restoreFocus: false });
+          try { item.node.focus({ preventScroll: true }); } catch (_) { try { item.node.focus(); } catch (_) {} }
+          return true;
         }
-        return 1;
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.view && typeof Archify.view.reset === 'function') Archify.view.reset({ automatic: true });
+        Archify.focus.set(id, { toggle: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal([id], { includeNeighbors: true, reason: 'finder' });
+        }
+        close({ restoreFocus: false });
+        try { item.node.focus({ preventScroll: true }); } catch (_) { try { item.node.focus(); } catch (_) {} }
+        return true;
       }
 
-      function rasterize(format) {
-        // Serialize at a safe scale (RASTER_SCALE=4 by default, reduced if the
-        // resulting canvas would exceed MAX_CANVAS_PIXELS). The SVG itself is
-        // rasterized at target resolution natively; drawImage draws at natural
-        // size — no upsampling blur.
-        var svg = document.querySelector('.diagram-container svg');
-        var vb = svg.viewBox.baseVal;
-        var scale = pickSafeScale(vb.width, vb.height);
-        var data = serializeSvg(scale);
-        var svgBlob = new Blob([data.svgString], { type: 'image/svg+xml;charset=utf-8' });
-        var svgUrl = URL.createObjectURL(svgBlob);
+      function render(query) {
+        query = (query || '').trim().toLowerCase();
+        var available = availableItems();
+        visibleItems = available.filter(function (item) { return !query || item.search.indexOf(query) !== -1; });
+        results.textContent = '';
+        visibleItems.forEach(function (item) {
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'node-finder-result';
+          button.setAttribute('data-node-id', item.id);
+          var badge = context.badges && context.badges[item.id]
+            ? context.badges[item.id]
+            : context.kind === 'focus'
+              ? item.links + (item.links === 1 ? ' link' : ' links')
+              : String(item.links);
+          var action = context.kind === 'route-source'
+            ? 'Choose ' + item.label + ' as route start'
+            : context.kind === 'route-target'
+              ? 'Choose ' + item.label + ' as route destination, ' + badge
+              : 'Focus ' + item.label + ', ' + item.links + ' related connection' + (item.links === 1 ? '' : 's');
+          button.setAttribute('aria-label', action);
+
+          var name = document.createElement('strong');
+          name.textContent = item.label;
+          var links = document.createElement('em');
+          links.textContent = badge;
+          links.title = context.kind === 'focus' ? badge : action;
+          var meta = document.createElement('small');
+          meta.textContent = [item.type, item.id, item.sublabel, item.tag].filter(Boolean).join(' \u00b7 ');
+          meta.title = [item.type, item.id, item.context, item.sublabel, item.tag].filter(Boolean).join(' \u00b7 ');
+          button.appendChild(name);
+          button.appendChild(links);
+          button.appendChild(meta);
+          button.addEventListener('click', function () { select(item.id); });
+          results.appendChild(button);
+        });
+        empty.hidden = visibleItems.length !== 0;
+        status.textContent = query
+          ? visibleItems.length + ' of ' + available.length + ' ' + context.availableNoun
+          : available.length + ' ' + context.availableNoun;
+      }
 
-        return new Promise(function (resolve, reject) {
-          var img = new Image();
-          img.onload = function () {
-            var canvas = document.createElement('canvas');
-            canvas.width = data.width;
-            canvas.height = data.height;
-            var ctx = canvas.getContext('2d');
-            if (format === 'jpeg') {
-              ctx.fillStyle = currentBg();
-              ctx.fillRect(0, 0, canvas.width, canvas.height);
-            }
-            // Draw at natural size — SVG was already rasterized at target res.
-            ctx.drawImage(img, 0, 0);
-            URL.revokeObjectURL(svgUrl);
-            var mime = format === 'jpeg' ? 'image/jpeg' :
-                       format === 'webp' ? 'image/webp' : 'image/png';
-            var quality = format === 'png' ? undefined : 0.95;
-            canvas.toBlob(function (blob) {
-              if (!blob) reject(new Error('toBlob returned null for ' + format));
-              else resolve(blob);
-            }, mime, quality);
+      function open(options) {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        context = resolveContext(options || {});
+        applyContext();
+        panel.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        if (context.kind.indexOf('route-') === 0 && Archify.routeProbe && typeof Archify.routeProbe.finderOpening === 'function') {
+          Archify.routeProbe.finderOpening();
+        }
+        input.value = '';
+        render('');
+        requestAnimationFrame(function () { input.focus(); });
+        return true;
+      }
+
+      function close(options) {
+        options = options || {};
+        var routeContext = context.kind.indexOf('route-') === 0;
+        panel.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        input.value = '';
+        if (routeContext && Archify.routeProbe && typeof Archify.routeProbe.finderClosed === 'function') {
+          Archify.routeProbe.finderClosed({ restoreFocus: options.restoreFocus !== false });
+        } else if (options.restoreFocus !== false) {
+          trigger.focus();
+        }
+      }
+
+      function toggle() { return panel.hidden ? open() : (close(), false); }
+
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close(); });
+      input.addEventListener('input', function () { render(input.value); });
+      input.addEventListener('keydown', function (event) {
+        var buttons = resultButtons();
+        if (event.key === 'ArrowDown' && buttons.length) {
+          event.preventDefault();
+          buttons[0].focus();
+        } else if (event.key === 'Enter' && visibleItems.length) {
+          event.preventDefault();
+          select(visibleItems[0].id);
+        }
+      });
+      results.addEventListener('keydown', function (event) {
+        var buttons = resultButtons();
+        var index = buttons.indexOf(document.activeElement);
+        if (index < 0 || !buttons.length) return;
+        var next = null;
+        if (event.key === 'ArrowDown') next = (index + 1) % buttons.length;
+        else if (event.key === 'ArrowUp') next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = buttons.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          buttons[next].focus();
+        }
+      });
+      panel.addEventListener('keydown', function (event) {
+        if (event.key !== 'Escape') return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+      });
+      document.addEventListener('click', function (event) {
+        if (!panel.hidden && !panel.contains(event.target) && !event.target.closest('[data-node-finder-trigger]')) close({ restoreFocus: false });
+      });
+
+      render('');
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        select: select,
+        isOpen: function () { return !panel.hidden; },
+        context: function () { return context.kind; },
+        count: items.length
+      };
+    })();
+
+    /* ============================================================
+       Route Probe — shortest directed path over compiled semantics.
+       The graph is read from renderer-owned stable IDs and relationship
+       endpoints. BFS order follows authored DOM edge order, so equal-length
+       choices are deterministic without adding weights or a graph runtime.
+       ============================================================ */
+    Archify.routeProbe = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-route-probe');
+      var panel = document.getElementById('route-probe');
+      var title = document.getElementById('route-probe-title');
+      var path = document.getElementById('route-probe-path');
+      var status = document.getElementById('route-probe-status');
+      var findBtn = document.getElementById('route-probe-find');
+      var copyBtn = document.getElementById('route-probe-copy');
+      var clearBtn = document.getElementById('route-probe-clear');
+      var journeyControls = document.getElementById('route-journey-controls');
+      var journeyPrevBtn = document.getElementById('route-journey-prev');
+      var journeyPlayBtn = document.getElementById('route-journey-play');
+      var journeyPlayIcon = document.getElementById('route-journey-play-icon');
+      var journeyPlayLabel = document.getElementById('route-journey-play-label');
+      var journeyNextBtn = document.getElementById('route-journey-next');
+      var journeyOverviewBtn = document.getElementById('route-journey-overview');
+      var namespace = 'http://www.w3.org/2000/svg';
+      var mode = 'idle';
+      var startId = null;
+      var endId = null;
+      var activeNodeIds = [];
+      var activeEdges = [];
+      var journeyIndex = -1;
+      var journeyPlaying = false;
+      var journeyComplete = false;
+      var journeyGeneration = 0;
+      var journeyTimer = null;
+      var journeyStartedAt = 0;
+      var journeyElapsedMs = 0;
+      var journeyOwnerToken = 0;
+      var JOURNEY_DWELL_MS = 1100;
+
+      function nodes() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-node-id]'));
+      }
+      function edges() {
+        return Array.prototype.slice.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'));
+      }
+      function nodesById() {
+        var out = Object.create(null);
+        nodes().forEach(function (node) { out[node.getAttribute('data-node-id')] = node; });
+        return out;
+      }
+      function nodeLabel(node, fallback) {
+        return node.getAttribute('data-node-label') ||
+          (node.getAttribute('aria-label') || fallback).replace(/^Focus\s+/, '').split(',')[0];
+      }
+      function exportSnapshot() {
+        if (mode !== 'result' || activeNodeIds.length < 2 || activeEdges.length !== activeNodeIds.length - 1) return null;
+        var allNodes = nodes();
+        var byId = nodesById();
+        var seenNodeIds = Object.create(null);
+        var seenEdgeKeys = Object.create(null);
+        if (startId !== activeNodeIds[0] || endId !== activeNodeIds[activeNodeIds.length - 1] ||
+            activeNodeIds.some(function (id) {
+              if (seenNodeIds[id] || allNodes.filter(function (node) {
+                return node.getAttribute('data-node-id') === id;
+              }).length !== 1) return true;
+              seenNodeIds[id] = true;
+              return !byId[id];
+            }) ||
+            activeEdges.some(function (edge, index) {
+              if (!edge || !svg.contains(edge)) return true;
+              var edgeKey = edge.getAttribute('data-edge-key');
+              var edgeId = edge.getAttribute('data-edge-id') || '';
+              if (!edgeKey || seenEdgeKeys[edgeKey]) return true;
+              seenEdgeKeys[edgeKey] = true;
+              var fragments = Array.prototype.slice.call(svg.querySelectorAll('[data-edge-key]')).filter(function (candidate) {
+                return candidate.getAttribute('data-edge-key') === edgeKey;
+              });
+              var drawableFragments = fragments.filter(hasDrawableGeometry);
+              return !fragments.length || !fragments.every(function (fragment) {
+                return fragment.getAttribute('data-edge-from') === activeNodeIds[index] &&
+                  fragment.getAttribute('data-edge-to') === activeNodeIds[index + 1] &&
+                  (fragment.getAttribute('data-edge-id') || '') === edgeId;
+              }) || drawableFragments.length !== 1 || drawableFragments[0] !== edge ||
+                edge.getAttribute('data-edge-from') !== activeNodeIds[index] ||
+                edge.getAttribute('data-edge-to') !== activeNodeIds[index + 1];
+            })) return null;
+        return {
+          source: { id: startId, label: nodeLabel(byId[startId], startId) },
+          target: { id: endId, label: nodeLabel(byId[endId], endId) },
+          nodeIds: activeNodeIds.slice(),
+          hops: activeEdges.length,
+          edges: activeEdges.map(function (edge) {
+            return {
+              key: edge.getAttribute('data-edge-key'),
+              id: edge.getAttribute('data-edge-id') || '',
+              from: edge.getAttribute('data-edge-from'),
+              to: edge.getAttribute('data-edge-to'),
+              label: edge.getAttribute('data-edge-label') || ''
+            };
+          })
+        };
+      }
+      function edgeShapes(edge) {
+        if (/^(path|line|polyline)$/i.test(edge.tagName)) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function removeOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-route-probe-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+      }
+      function removeJourneyPulse(options) {
+        options = options || {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-route-journey-overlay]'), function (overlay) {
+          overlay.remove();
+        });
+        if (journeyOwnerToken && options.release !== false && Archify.motionGovernor) {
+          var token = journeyOwnerToken;
+          journeyOwnerToken = 0;
+          Archify.motionGovernor.release(token);
+        }
+      }
+      function stopJourneyTimer(options) {
+        options = options || {};
+        journeyGeneration += 1;
+        if (journeyTimer) {
+          if (options.preserveElapsed === true && journeyStartedAt) {
+            journeyElapsedMs = Math.min(JOURNEY_DWELL_MS, journeyElapsedMs + Math.max(0, Date.now() - journeyStartedAt));
+          }
+          window.clearTimeout(journeyTimer);
+        }
+        journeyTimer = null;
+        journeyStartedAt = 0;
+        if (options.preserveElapsed !== true) journeyElapsedMs = 0;
+      }
+      function clearJourneyPresentation(options) {
+        options = options || {};
+        removeJourneyPulse();
+        svg.removeAttribute('data-route-journey');
+        panel.removeAttribute('data-route-journey');
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-route-journey-state');
+          node.removeAttribute('data-route-journey-current');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-route-journey-state');
+          edge.removeAttribute('data-route-journey-current');
+        });
+        Array.prototype.forEach.call(path.querySelectorAll('[data-route-journey-index]'), function (button, index) {
+          button.removeAttribute('data-route-journey-state');
+          button.removeAttribute('aria-current');
+          button.setAttribute('tabindex', index === 0 ? '0' : '-1');
+        });
+        if (options.keepControls !== true) journeyControls.hidden = true;
+        journeyControls.setAttribute('data-playing', 'false');
+      }
+      function resetJourneyState() {
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        journeyIndex = -1;
+        clearJourneyPresentation();
+      }
+      function cleanSvgState() {
+        resetJourneyState();
+        svg.removeAttribute('data-route-picking');
+        svg.removeAttribute('data-route-active');
+        removeOverlay();
+        nodes().forEach(function (node) {
+          node.removeAttribute('data-route-match');
+          node.removeAttribute('data-route-start');
+          node.removeAttribute('data-route-end');
+          node.removeAttribute('data-route-step');
+          node.removeAttribute('data-route-candidate');
+          node.style.removeProperty('--route-step');
+        });
+        edges().forEach(function (edge) {
+          edge.removeAttribute('data-route-match');
+          edge.removeAttribute('data-route-step');
+          edge.style.removeProperty('--route-step');
+        });
+        panel.removeAttribute('data-route-dock');
+      }
+      function replaceRouteHash(value) {
+        try {
+          history.replaceState(null, '', location.pathname + location.search + (value ? '#route=' + value : ''));
+        } catch (_) {}
+      }
+      function renderPlaceholder(copy) {
+        path.textContent = '';
+        var placeholder = document.createElement('span');
+        placeholder.className = 'route-probe-placeholder';
+        placeholder.textContent = copy;
+        path.appendChild(placeholder);
+      }
+      function renderPath(ids, options) {
+        options = options || {};
+        var byId = nodesById();
+        path.textContent = '';
+        ids.forEach(function (id, index) {
+          if (index) {
+            var arrow = document.createElement('span');
+            arrow.className = 'route-probe-arrow';
+            arrow.setAttribute('aria-hidden', 'true');
+            arrow.textContent = '\u2192';
+            path.appendChild(arrow);
+          }
+          var item = document.createElement(options.interactive === true ? 'button' : 'span');
+          if (options.interactive === true) {
+            item.type = 'button';
+            item.setAttribute('data-route-journey-index', String(index));
+            item.setAttribute('data-route-node-id', id);
+            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+            item.setAttribute('aria-label', 'Route position ' + (index + 1) + ' of ' + ids.length + ': ' + nodeLabel(byId[id], id));
+          }
+          item.className = 'route-probe-node';
+          item.textContent = nodeLabel(byId[id], id);
+          item.title = nodeLabel(byId[id], id) + ' · ' + id;
+          if (index === 0) item.setAttribute('data-endpoint', 'start');
+          if (index === ids.length - 1 && ids.length > 1) item.setAttribute('data-endpoint', 'end');
+          path.appendChild(item);
+        });
+      }
+      function setTrigger(active) {
+        trigger.setAttribute('aria-pressed', active ? 'true' : 'false');
+        trigger.setAttribute('aria-label', active ? 'Clear traced route' : 'Trace a directed route');
+      }
+      function clear(options) {
+        options = options || {};
+        var wasActive = mode !== 'idle';
+        if (Archify.finder && Archify.finder.isOpen() && typeof Archify.finder.context === 'function' && Archify.finder.context().indexOf('route-') === 0) {
+          Archify.finder.close({ restoreFocus: false });
+        }
+        mode = 'idle';
+        startId = null;
+        endId = null;
+        activeNodeIds = [];
+        activeEdges = [];
+        cleanSvgState();
+        panel.hidden = true;
+        panel.setAttribute('data-state', 'idle');
+        panel.removeAttribute('data-finder-open');
+        title.textContent = 'Choose a start node';
+        renderPlaceholder('Pick two semantic nodes on the diagram');
+        status.textContent = 'Choose the source, then the destination. Direction matters.';
+        findBtn.hidden = true;
+        findBtn.textContent = 'Find start';
+        findBtn.setAttribute('aria-label', 'Find a route start');
+        copyBtn.hidden = true;
+        copyBtn.textContent = 'Copy link';
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncRouteShare === 'function') Archify.exportMenu.syncRouteShare();
+        setTrigger(false);
+        if (wasActive && options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.updateUrl !== false) replaceRouteHash('');
+        if (options.restoreFocus === true) trigger.focus();
+      }
+      function outgoingByNode() {
+        var byId = nodesById();
+        var outgoing = {};
+        edges().forEach(function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          if (!byId[from] || !byId[to] || from === to) return;
+          if (!outgoing[from]) outgoing[from] = [];
+          outgoing[from].push({ edge: edge, to: to });
+        });
+        return outgoing;
+      }
+      function reachableFrom(source) {
+        var outgoing = outgoingByNode();
+        var reached = {};
+        var queue = [source];
+        reached[source] = true;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.forEach(function (link) {
+            if (reached[link.to]) return;
+            reached[link.to] = true;
+            queue.push(link.to);
+          });
+        }
+        return reached;
+      }
+      function hopDistancesFrom(source) {
+        var outgoing = outgoingByNode();
+        var distances = {};
+        var queue = [source];
+        distances[source] = 0;
+        for (var cursor = 0; cursor < queue.length; cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.forEach(function (link) {
+            if (Object.prototype.hasOwnProperty.call(distances, link.to)) return;
+            distances[link.to] = distances[queue[cursor]] + 1;
+            queue.push(link.to);
+          });
+        }
+        return distances;
+      }
+      function shortestDirectedPath(source, target) {
+        if (source === target) return null;
+        var outgoing = outgoingByNode();
+        var previous = {};
+        var queue = [source];
+        previous[source] = null;
+        for (var cursor = 0; cursor < queue.length && !Object.prototype.hasOwnProperty.call(previous, target); cursor += 1) {
+          var links = outgoing[queue[cursor]] || [];
+          links.some(function (link) {
+            if (Object.prototype.hasOwnProperty.call(previous, link.to)) return false;
+            previous[link.to] = { from: queue[cursor], edge: link.edge };
+            queue.push(link.to);
+            return link.to === target;
+          });
+        }
+        if (!Object.prototype.hasOwnProperty.call(previous, target)) return null;
+        var nodeIds = [target];
+        var routeEdges = [];
+        var current = target;
+        while (current !== source) {
+          var step = previous[current];
+          if (!step) return null;
+          routeEdges.unshift(step.edge);
+          nodeIds.unshift(step.from);
+          current = step.from;
+        }
+        return { nodes: nodeIds, edges: routeEdges };
+      }
+      function traceGeometry(shape, step) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-route-match');
+        clone.removeAttribute('data-route-step');
+        clone.setAttribute('class', 'route-probe-flow');
+        clone.setAttribute('pathLength', '1');
+        clone.style.setProperty('--route-step', String(step));
+        return clone;
+      }
+      function renderOverlay(routeEdges) {
+        removeOverlay();
+        if (!routeEdges.length) return;
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'route-probe-overlay');
+        overlay.setAttribute('data-route-probe-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        routeEdges.forEach(function (edge, step) {
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+          edgeShapes(edge).forEach(function (shape) { wrapper.appendChild(traceGeometry(shape, step)); });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+      }
+      function journeyButtons() {
+        return Array.prototype.slice.call(path.querySelectorAll('[data-route-journey-index]'));
+      }
+      function journeyMotionAllowed() {
+        return html.getAttribute('data-embed') !== 'true' &&
+          !document.hidden &&
+          Archify.motionGovernor &&
+          Archify.motionGovernor.capable === true &&
+          !Archify.motionGovernor.isPaused();
+      }
+      function routeOverviewStatus() {
+        return activeNodeIds.length + ' nodes · ' + activeEdges.length + ' directed hop' + (activeEdges.length === 1 ? '' : 's') + ' · shortest authored route';
+      }
+      function centerJourneyButton(button) {
+        if (!button) return;
+        var target = button.offsetLeft - Math.max(0, (path.clientWidth - button.offsetWidth) / 2);
+        path.scrollLeft = Math.max(0, target);
+      }
+      function focusJourneyButton(index) {
+        var buttons = journeyButtons();
+        if (!buttons.length) return false;
+        var next = Math.max(0, Math.min(buttons.length - 1, index));
+        buttons.forEach(function (button, buttonIndex) {
+          button.setAttribute('tabindex', buttonIndex === next ? '0' : '-1');
+        });
+        try { buttons[next].focus({ preventScroll: true }); } catch (_) { buttons[next].focus(); }
+        centerJourneyButton(buttons[next]);
+        return true;
+      }
+      function renderJourneyControls() {
+        var hasRoute = mode === 'result' && activeNodeIds.length > 1;
+        var canPlay = hasRoute && journeyMotionAllowed();
+        journeyControls.hidden = !hasRoute;
+        journeyControls.setAttribute('data-playing', journeyPlaying ? 'true' : 'false');
+        journeyPrevBtn.disabled = !hasRoute || journeyIndex <= 0;
+        journeyNextBtn.disabled = !hasRoute || journeyIndex >= activeNodeIds.length - 1;
+        journeyOverviewBtn.disabled = !hasRoute || journeyIndex < 0;
+        journeyPlayBtn.disabled = !canPlay;
+        journeyPlayBtn.setAttribute('aria-pressed', journeyPlaying ? 'true' : 'false');
+        if (journeyPlaying) {
+          journeyPlayIcon.textContent = '\u275a\u275a';
+          journeyPlayLabel.textContent = 'Pause';
+          journeyPlayBtn.setAttribute('aria-label', 'Pause route journey');
+          journeyPlayBtn.title = 'Pause route journey';
+        } else if (journeyComplete || journeyIndex === activeNodeIds.length - 1) {
+          journeyPlayIcon.textContent = '\u21bb';
+          journeyPlayLabel.textContent = 'Replay';
+          journeyPlayBtn.setAttribute('aria-label', 'Replay route journey');
+          journeyPlayBtn.title = canPlay ? 'Replay route journey' : 'Automatic journey requires Live motion';
+        } else {
+          journeyPlayIcon.textContent = '\u25b6';
+          journeyPlayLabel.textContent = 'Journey';
+          journeyPlayBtn.setAttribute('aria-label', 'Play route journey');
+          journeyPlayBtn.title = canPlay ? 'Play route journey' : 'Automatic journey requires Live motion';
+        }
+      }
+      function journeyGeometry(shape) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-labelledby');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-route-match');
+        clone.removeAttribute('data-route-step');
+        clone.removeAttribute('data-route-journey-state');
+        clone.removeAttribute('data-route-journey-current');
+        clone.setAttribute('class', 'route-journey-flow');
+        clone.setAttribute('pathLength', '1');
+        return clone;
+      }
+      function renderJourneyPulse(edge) {
+        removeJourneyPulse();
+        if (!edge || !journeyMotionAllowed()) return false;
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'route-journey-overlay');
+        overlay.setAttribute('data-route-journey-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        var wrapper = document.createElementNS(namespace, 'g');
+        if (edge.hasAttribute('transform')) wrapper.setAttribute('transform', edge.getAttribute('transform'));
+        edgeShapes(edge).forEach(function (shape) { wrapper.appendChild(journeyGeometry(shape)); });
+        if (!wrapper.childNodes.length) return false;
+        overlay.appendChild(wrapper);
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        if (Archify.motionGovernor && Archify.motionGovernor.capable) {
+          var token = 0;
+          token = Archify.motionGovernor.claim('route', function () {
+            if (journeyOwnerToken === token) journeyOwnerToken = 0;
+            removeJourneyPulse({ release: false });
+          });
+          journeyOwnerToken = token;
+        }
+        overlay.addEventListener('animationend', function () {
+          if (overlay.isConnected) removeJourneyPulse();
+        }, { once: true });
+        window.setTimeout(function () {
+          if (overlay.isConnected) removeJourneyPulse();
+        }, 860);
+        return true;
+      }
+      function applyJourneyState(index, options) {
+        options = options || {};
+        if (mode !== 'result' || !activeNodeIds.length) return false;
+        var byId = nodesById();
+        journeyIndex = Math.max(0, Math.min(activeNodeIds.length - 1, index));
+        removeJourneyPulse();
+        svg.setAttribute('data-route-journey', (journeyIndex + 1) + '/' + activeNodeIds.length);
+        panel.setAttribute('data-route-journey', String(journeyIndex));
+        activeNodeIds.forEach(function (id, step) {
+          var node = byId[id];
+          if (!node) return;
+          var state = step < journeyIndex ? 'past' : (step === journeyIndex ? 'current' : 'future');
+          node.setAttribute('data-route-journey-state', state);
+          if (step === journeyIndex) node.setAttribute('data-route-journey-current', '');
+          else node.removeAttribute('data-route-journey-current');
+        });
+        activeEdges.forEach(function (edge, step) {
+          var destination = step + 1;
+          var state = destination < journeyIndex ? 'past' : (destination === journeyIndex ? 'current' : 'future');
+          edge.setAttribute('data-route-journey-state', state);
+          if (destination === journeyIndex) edge.setAttribute('data-route-journey-current', '');
+          else edge.removeAttribute('data-route-journey-current');
+        });
+        var buttons = journeyButtons();
+        buttons.forEach(function (button, step) {
+          var state = step < journeyIndex ? 'past' : (step === journeyIndex ? 'current' : 'future');
+          button.setAttribute('data-route-journey-state', state);
+          button.setAttribute('tabindex', step === journeyIndex ? '0' : '-1');
+          if (step === journeyIndex) button.setAttribute('aria-current', 'step');
+          else button.removeAttribute('aria-current');
+        });
+        if (options.center !== false) centerJourneyButton(buttons[journeyIndex]);
+        var phase = journeyPlaying ? 'Playing' : (journeyComplete ? 'Complete' : 'Inspecting');
+        status.textContent = 'Step ' + (journeyIndex + 1) + ' of ' + activeNodeIds.length + ' · ' + phase + ' · ' + nodeLabel(byId[activeNodeIds[journeyIndex]], activeNodeIds[journeyIndex]);
+        if (options.pulse === true && journeyIndex > 0) renderJourneyPulse(activeEdges[journeyIndex - 1]);
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(activeNodeIds.slice(Math.max(0, journeyIndex - 1), Math.min(activeNodeIds.length, journeyIndex + 2)), {
+            includeNeighbors: false,
+            reason: 'route-journey',
+            maxScale: 1.65,
+            padding: 64,
+            duration: 360,
+            instant: !journeyMotionAllowed()
+          });
+        }
+        renderJourneyControls();
+        requestDocking();
+        return true;
+      }
+      function pauseJourney(options) {
+        options = options || {};
+        if (!journeyPlaying && options.complete !== true) {
+          renderJourneyControls();
+          return false;
+        }
+        stopJourneyTimer({ preserveElapsed: options.complete !== true && options.preserveElapsed !== false });
+        journeyPlaying = false;
+        journeyComplete = options.complete === true;
+        if (journeyComplete) journeyElapsedMs = 0;
+        removeJourneyPulse();
+        if (journeyIndex >= 0) applyJourneyState(journeyIndex, { center: false, pulse: false, reveal: false });
+        else renderJourneyControls();
+        return true;
+      }
+      function selectJourneyIndex(index) {
+        if (mode !== 'result') return false;
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        return applyJourneyState(index, { pulse: true, reveal: true });
+      }
+      function showJourneyOverview(options) {
+        options = options || {};
+        if (mode !== 'result') return false;
+        stopJourneyTimer();
+        journeyPlaying = false;
+        journeyComplete = false;
+        journeyIndex = -1;
+        clearJourneyPresentation({ keepControls: true });
+        status.textContent = routeOverviewStatus();
+        renderJourneyControls();
+        if (options.reveal !== false && Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(activeNodeIds, { includeNeighbors: false, reason: 'route', instant: !journeyMotionAllowed() });
+        }
+        requestDocking();
+        return true;
+      }
+      function scheduleJourney() {
+        if (!journeyPlaying || !journeyMotionAllowed()) {
+          pauseJourney({ preserveElapsed: true });
+          return false;
+        }
+        var generation = ++journeyGeneration;
+        var remaining = Math.max(0, JOURNEY_DWELL_MS - journeyElapsedMs);
+        journeyStartedAt = Date.now();
+        journeyTimer = window.setTimeout(function () {
+          if (generation !== journeyGeneration || !journeyPlaying) return;
+          journeyTimer = null;
+          journeyStartedAt = 0;
+          journeyElapsedMs = 0;
+          if (journeyIndex >= activeNodeIds.length - 1) {
+            pauseJourney({ complete: true, preserveElapsed: false });
+            return;
+          }
+          applyJourneyState(journeyIndex + 1, { pulse: true, reveal: true });
+          // Camera and motion-owner handoff are allowed to synchronously
+          // settle the previous step. The new step always starts with a fresh
+          // dwell; never carry cleanup time into the next scheduler lease.
+          journeyElapsedMs = 0;
+          journeyStartedAt = 0;
+          scheduleJourney();
+        }, remaining);
+        return true;
+      }
+      function playJourney() {
+        if (mode !== 'result' || activeNodeIds.length < 2 || !journeyMotionAllowed()) {
+          renderJourneyControls();
+          return false;
+        }
+        if (journeyPlaying) return true;
+        if (journeyComplete || journeyIndex >= activeNodeIds.length - 1) {
+          journeyIndex = -1;
+          journeyElapsedMs = 0;
+          journeyComplete = false;
+        }
+        journeyPlaying = true;
+        if (journeyIndex < 0) applyJourneyState(0, { pulse: false, reveal: true });
+        else applyJourneyState(journeyIndex, { center: false, pulse: false, reveal: false });
+        scheduleJourney();
+        return true;
+      }
+      function toggleJourney() {
+        return journeyPlaying ? pauseJourney({ preserveElapsed: true }) : playJourney();
+      }
+      function previousJourney() {
+        return selectJourneyIndex(Math.max(0, journeyIndex < 0 ? 0 : journeyIndex - 1));
+      }
+      function nextJourney() {
+        return selectJourneyIndex(Math.min(activeNodeIds.length - 1, journeyIndex + 1));
+      }
+      function overlapArea(a, b) {
+        var width = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));
+        var height = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+        return width * height;
+      }
+      function updateDocking() {
+        if (panel.hidden) {
+          panel.removeAttribute('data-route-dock');
+          return;
+        }
+        var containerRect = container.getBoundingClientRect();
+        var width = panel.offsetWidth;
+        var height = panel.offsetHeight;
+        if (!width || !height) return;
+        var currentRect = panel.getBoundingClientRect();
+        var left = currentRect.left;
+        var topCandidate = {
+          left: left,
+          right: left + width,
+          top: containerRect.top + 8,
+          bottom: containerRect.top + 8 + height
+        };
+        var nav = container.querySelector('.diagram-nav');
+        var navRect = nav ? nav.getBoundingClientRect() : null;
+        var bottom = navRect ? navRect.top - 9 : containerRect.bottom - 8;
+        var bottomCandidate = {
+          left: left,
+          right: left + width,
+          top: bottom - height,
+          bottom: bottom
+        };
+        var byId = nodesById();
+        var relevant = activeNodeIds.length ? activeNodeIds : (startId ? [startId] : []);
+        var blockers = relevant.map(function (id) { return byId[id]; }).filter(Boolean).map(function (node) {
+          return node.getBoundingClientRect();
+        });
+        function score(candidate) {
+          var value = blockers.reduce(function (sum, rect) { return sum + overlapArea(candidate, rect); }, 0);
+          if (navRect) value += overlapArea(candidate, navRect) * 4;
+          if (candidate.top < containerRect.top || candidate.bottom > containerRect.bottom) value += 1000000;
+          return value;
+        }
+        if (score(topCandidate) <= score(bottomCandidate)) panel.setAttribute('data-route-dock', 'top');
+        else panel.setAttribute('data-route-dock', 'bottom');
+      }
+      function requestDocking() {
+        requestAnimationFrame(updateDocking);
+        window.setTimeout(updateDocking, 120);
+        window.setTimeout(updateDocking, 560);
+      }
+      function chooseStart(id) {
+        var byId = nodesById();
+        if (!byId[id]) return false;
+        cleanSvgState();
+        startId = id;
+        endId = null;
+        mode = 'target';
+        var reached = reachableFrom(id);
+        byId[id].setAttribute('data-route-start', '');
+        byId[id].setAttribute('data-route-match', '');
+        Object.keys(reached).forEach(function (candidateId) {
+          if (candidateId !== id && byId[candidateId]) byId[candidateId].setAttribute('data-route-candidate', '');
+        });
+        svg.setAttribute('data-route-picking', 'target');
+        panel.setAttribute('data-state', 'target');
+        title.textContent = 'Choose a destination from ' + nodeLabel(byId[id], id);
+        renderPath([id]);
+        var count = Math.max(0, Object.keys(reached).length - 1);
+        status.textContent = count
+          ? count + ' directed destination' + (count === 1 ? '' : 's') + ' available. Pick a highlighted node.'
+          : 'No outgoing route starts here. Clear and choose another source.';
+        findBtn.hidden = false;
+        findBtn.textContent = 'Find target';
+        findBtn.setAttribute('aria-label', 'Find a reachable route destination');
+        requestDocking();
+        return true;
+      }
+      function showResult(result, options) {
+        options = options || {};
+        var byId = nodesById();
+        cleanSvgState();
+        mode = 'result';
+        startId = result.nodes[0];
+        endId = result.nodes[result.nodes.length - 1];
+        activeNodeIds = result.nodes.slice();
+        activeEdges = result.edges.slice();
+        result.nodes.forEach(function (id, step) {
+          var node = byId[id];
+          if (!node) return;
+          node.setAttribute('data-route-match', '');
+          node.setAttribute('data-route-step', String(step));
+          node.style.setProperty('--route-step', String(step));
+          if (step === 0) node.setAttribute('data-route-start', '');
+          if (step === result.nodes.length - 1) node.setAttribute('data-route-end', '');
+        });
+        result.edges.forEach(function (edge, step) {
+          edge.setAttribute('data-route-match', '');
+          edge.setAttribute('data-route-step', String(step));
+          edge.style.setProperty('--route-step', String(step));
+        });
+        svg.setAttribute('data-route-active', startId + '~' + endId);
+        renderOverlay(result.edges);
+        renderPath(result.nodes, { interactive: true });
+        panel.setAttribute('data-state', 'result');
+        panel.hidden = false;
+        title.textContent = nodeLabel(byId[startId], startId) + ' to ' + nodeLabel(byId[endId], endId);
+        findBtn.hidden = true;
+        copyBtn.hidden = false;
+        setTrigger(true);
+        if (Archify.exportMenu && typeof Archify.exportMenu.syncRouteShare === 'function') Archify.exportMenu.syncRouteShare();
+        if (options.updateUrl !== false) {
+          replaceRouteHash(encodeURIComponent(startId) + '~' + encodeURIComponent(endId));
+        }
+        showJourneyOverview({ reveal: false });
+        if (Archify.view && typeof Archify.view.reveal === 'function') {
+          Archify.view.reveal(result.nodes, { includeNeighbors: false, reason: 'route' });
+        }
+        return true;
+      }
+      function choose(id, options) {
+        options = options || {};
+        var byId = nodesById();
+        if (!byId[id]) return false;
+        if (mode === 'source') return chooseStart(id);
+        if (mode !== 'target') return false;
+        if (id === startId) {
+          panel.setAttribute('data-state', 'error');
+          title.textContent = 'Choose a different destination';
+          status.textContent = 'A route needs two distinct semantic nodes.';
+          return false;
+        }
+        var result = shortestDirectedPath(startId, id);
+        if (!result) {
+          panel.setAttribute('data-state', 'error');
+          title.textContent = 'No directed route to ' + nodeLabel(byId[id], id);
+          status.textContent = nodeLabel(byId[id], id) + ' is not reachable from ' + nodeLabel(byId[startId], startId) + '. Pick a highlighted destination.';
+          return false;
+        }
+        return showResult(result, options);
+      }
+      function begin(options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.semanticLens && Archify.semanticLens.active()) {
+          Archify.semanticLens.clear({ updateUrl: false, preserveView: true, closePanel: true });
+        }
+        var focused = options.source || (Archify.focus && typeof Archify.focus.active === 'function' ? Archify.focus.active() : null);
+        if (Array.isArray(focused)) focused = null;
+        clear({ updateUrl: false, preserveView: true, restoreFocus: false });
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') Archify.intentTrace.clear({ announce: false });
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.focus && typeof Archify.focus.clear === 'function') {
+          Archify.focus.clear({ updateUrl: false, preserveView: true });
+        }
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        mode = 'source';
+        panel.hidden = false;
+        panel.setAttribute('data-state', 'source');
+        svg.setAttribute('data-route-picking', 'source');
+        title.textContent = 'Choose a start node';
+        renderPlaceholder('Pick a semantic node on the diagram');
+        status.textContent = 'Select the source. The next step will reveal only directed destinations.';
+        findBtn.hidden = false;
+        findBtn.textContent = 'Find start';
+        findBtn.setAttribute('aria-label', 'Find a route start');
+        copyBtn.hidden = true;
+        setTrigger(true);
+        if (focused && nodesById()[focused]) chooseStart(focused);
+        if (options.focusNode === true && !focused) {
+          var first = nodes()[0];
+          if (first) {
+            try { first.focus({ preventScroll: true }); } catch (_) { try { first.focus(); } catch (_) {} }
+          }
+        }
+        return true;
+      }
+      function toggle(options) {
+        if (mode !== 'idle') {
+          clear({ restoreFocus: true });
+          return false;
+        }
+        return begin(options);
+      }
+      function finderContext() {
+        var byId = nodesById();
+        if (mode === 'source') {
+          var outgoing = outgoingByNode();
+          var sourceIds = nodes().map(function (node) { return node.getAttribute('data-node-id'); }).filter(function (id) {
+            return outgoing[id] && outgoing[id].length;
+          });
+          var sourceBadges = {};
+          sourceIds.forEach(function (id) { sourceBadges[id] = 'start'; });
+          return {
+            kind: 'route-source',
+            title: 'Choose route start',
+            placeholder: 'Search route sources',
+            empty: 'No matching route sources',
+            resultsLabel: 'Nodes that can start a route',
+            availableNoun: 'route sources',
+            allowedIds: sourceIds,
+            badges: sourceBadges
           };
-          img.onerror = function (e) {
-            URL.revokeObjectURL(svgUrl);
-            reject(e);
+        }
+        if (mode === 'target' && startId && byId[startId]) {
+          var distances = hopDistancesFrom(startId);
+          var targetIds = Object.keys(distances).filter(function (id) { return id !== startId && byId[id]; });
+          var targetBadges = {};
+          targetIds.forEach(function (id) {
+            targetBadges[id] = distances[id] + ' hop' + (distances[id] === 1 ? '' : 's');
+          });
+          return {
+            kind: 'route-target',
+            title: 'Destination from ' + nodeLabel(byId[startId], startId),
+            placeholder: 'Search reachable destinations',
+            empty: 'No matching reachable destinations',
+            resultsLabel: 'Reachable route destinations',
+            availableNoun: 'reachable destinations',
+            allowedIds: targetIds,
+            badges: targetBadges
           };
-          img.src = svgUrl;
+        }
+        return null;
+      }
+      function finderOpening() {
+        panel.setAttribute('data-finder-open', 'true');
+      }
+      function finderClosed(options) {
+        options = options || {};
+        panel.removeAttribute('data-finder-open');
+        requestDocking();
+        if (options.restoreFocus === true && !findBtn.hidden) findBtn.focus();
+      }
+      function openFinder() {
+        var context = finderContext();
+        if (!context || !Archify.finder) return false;
+        return Archify.finder.open({ context: context });
+      }
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+      function copyLink() {
+        if (mode !== 'result') return Promise.resolve(false);
+        var value = location.href.replace(/#.*$/, '') + '#route=' + encodeURIComponent(startId) + '~' + encodeURIComponent(endId);
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          copyBtn.setAttribute('aria-label', copied ? 'Traced route link copied' : 'Could not copy traced route link');
+          window.setTimeout(function () {
+            copyBtn.textContent = 'Copy link';
+            copyBtn.setAttribute('aria-label', 'Copy link to traced route');
+          }, 1600);
+          return copied;
+        });
+      }
+      function interceptSelection(event) {
+        if (mode !== 'source' && mode !== 'target') return;
+        if (container.getAttribute('data-just-panned') === 'true') return;
+        var node = event.target.closest('[data-node-id]');
+        if (!node) return;
+        if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        choose(node.getAttribute('data-node-id'));
+      }
+      function syncFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var route = params.get('route');
+          if (!route) {
+            if (mode !== 'idle') clear({ updateUrl: false, restoreFocus: false });
+            return;
+          }
+          var parts = route.split('~');
+          if (parts.length !== 2) return;
+          var byId = nodesById();
+          if (!byId[parts[0]] || !byId[parts[1]]) return;
+          begin({ source: parts[0], focusNode: false });
+          choose(parts[1], { updateUrl: false });
+        } catch (_) {}
+      }
+      function escapeRoute(options) {
+        options = options || {};
+        if (journeyPlaying) {
+          pauseJourney({ preserveElapsed: true });
+          if (options.restoreFocus === true) journeyPlayBtn.focus();
+          return 'paused';
+        }
+        if (journeyIndex >= 0) {
+          showJourneyOverview({ reveal: true });
+          if (options.restoreFocus === true) journeyOverviewBtn.focus();
+          return 'overview';
+        }
+        clear({ restoreFocus: options.restoreFocus === true });
+        return 'cleared';
+      }
+      function syncJourneyMotion() {
+        if (journeyPlaying && !journeyMotionAllowed()) pauseJourney({ preserveElapsed: true });
+        renderJourneyControls();
+        return journeyMotionAllowed();
+      }
+
+      trigger.addEventListener('click', function () { toggle({ focusNode: false }); });
+      findBtn.addEventListener('click', openFinder);
+      clearBtn.addEventListener('click', function () { clear({ restoreFocus: true }); });
+      copyBtn.addEventListener('click', copyLink);
+      journeyPrevBtn.addEventListener('click', previousJourney);
+      journeyPlayBtn.addEventListener('click', toggleJourney);
+      journeyNextBtn.addEventListener('click', nextJourney);
+      journeyOverviewBtn.addEventListener('click', function () { showJourneyOverview({ reveal: true }); });
+      path.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-route-journey-index]');
+        if (!button) return;
+        selectJourneyIndex(Number(button.getAttribute('data-route-journey-index')));
+      });
+      path.addEventListener('focusin', function (event) {
+        if (journeyPlaying && event.target.closest('[data-route-journey-index]')) pauseJourney({ preserveElapsed: true });
+      });
+      path.addEventListener('keydown', function (event) {
+        var button = event.target.closest('[data-route-journey-index]');
+        if (!button) return;
+        var index = Number(button.getAttribute('data-route-journey-index'));
+        var next = null;
+        if (event.key === 'ArrowRight') next = Math.min(activeNodeIds.length - 1, index + 1);
+        else if (event.key === 'ArrowLeft') next = Math.max(0, index - 1);
+        else if (event.key === 'Home') next = 0;
+        else if (event.key === 'End') next = activeNodeIds.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          focusJourneyButton(next);
+          return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          selectJourneyIndex(index);
+        }
+      });
+      svg.addEventListener('click', interceptSelection, true);
+      svg.addEventListener('keydown', interceptSelection, true);
+      container.addEventListener('scroll', updateDocking, { passive: true });
+      window.addEventListener('resize', requestDocking);
+      window.addEventListener('beforeprint', function () {
+        if (journeyPlaying) pauseJourney({ preserveElapsed: true, reason: 'print' });
+        else removeJourneyPulse();
+      });
+      window.addEventListener('hashchange', function () { requestAnimationFrame(syncFromHash); });
+      syncFromHash();
+
+      return {
+        begin: begin,
+        choose: choose,
+        clear: clear,
+        toggle: toggle,
+        escape: escapeRoute,
+        copyLink: copyLink,
+        playJourney: playJourney,
+        pauseJourney: pauseJourney,
+        showOverview: showJourneyOverview,
+        selectJourneyIndex: selectJourneyIndex,
+        syncMotion: syncJourneyMotion,
+        isJourneyPlaying: function () { return journeyPlaying; },
+        finderContext: finderContext,
+        finderOpening: finderOpening,
+        finderClosed: finderClosed,
+        openFinder: openFinder,
+        exportSnapshot: exportSnapshot,
+        active: function () { return mode === 'idle' ? null : mode; },
+        result: function () {
+          return mode === 'result'
+            ? { source: startId, target: endId, nodes: activeNodeIds.slice(), hops: activeEdges.length, journey: journeyIndex, playing: journeyPlaying }
+            : null;
+        }
+      };
+    })();
+
+    /* ============================================================
+       Semantic Lens — a counted, viewer-only legend over data-node-kind.
+       One selected kind reveals every authored relationship touching it.
+       Two selected kinds compare only direct cross-kind relationships while
+       preserving the full diagram as a dimmed spatial reference.
+       ============================================================ */
+    Archify.semanticLens = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-semantic-lens');
+      var panel = document.getElementById('semantic-lens');
+      var closeBtn = document.getElementById('semantic-lens-close');
+      var kindsRoot = document.getElementById('semantic-lens-kinds');
+      var status = document.getElementById('semantic-lens-status');
+      var copyBtn = document.getElementById('semantic-lens-copy');
+      var clearBtn = document.getElementById('semantic-lens-clear');
+      var legendBridge = svg.querySelector('[data-legend-bridge]');
+      var legendEntries = [];
+      var hoveredLegendEntry = null;
+      var focusedLegendEntry = null;
+      var activeLegendPreview = null;
+      var lensOpener = trigger;
+      var selectedKinds = [];
+      var namespace = 'http://www.w3.org/2000/svg';
+      var finePointerQuery = window.matchMedia ? window.matchMedia('(hover: hover) and (pointer: fine)') : null;
+      var MAX_LENS_FLOW_EDGES = 24;
+
+      function kindLabel(value) {
+        return String(value || 'neutral')
+          .replace(/messagebus/gi, 'message bus')
+          .replace(/[-_]+/g, ' ')
+          .replace(/\b\w/g, function (letter) { return letter.toUpperCase(); });
+      }
+      function nodesById() {
+        var byId = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-node-id][data-node-kind]'), function (node) {
+          var id = node.getAttribute('data-node-id');
+          if (id && !byId[id]) byId[id] = node;
+        });
+        return byId;
+      }
+      function collectKinds() {
+        var kinds = {};
+        var byId = nodesById();
+        Object.keys(byId).forEach(function (id) {
+          var node = byId[id];
+          var value = node.getAttribute('data-node-kind') || 'neutral';
+          var kind = kinds[value] || (kinds[value] = { id: value, label: kindLabel(value), nodes: [] });
+          kind.nodes.push(node);
+        });
+        return Object.keys(kinds).map(function (key) { return kinds[key]; }).sort(function (a, b) {
+          return b.nodes.length - a.nodes.length || a.label.localeCompare(b.label);
+        });
+      }
+      function edgeGroups() {
+        var groups = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var from = edge.getAttribute('data-edge-from');
+          var to = edge.getAttribute('data-edge-to');
+          var key = edge.getAttribute('data-edge-key') || [from, to, edge.getAttribute('data-edge-label') || ''].join('\u0000');
+          if (!groups[key]) groups[key] = { key: key, from: from, to: to, members: [] };
+          groups[key].members.push(edge);
+        });
+        return Object.keys(groups).map(function (key) { return groups[key]; });
+      }
+      function edgeShapes(edge) {
+        if (!edge) return [];
+        if (/^(path|line|polyline)$/i.test(edge.tagName || '')) return [edge];
+        return Array.prototype.slice.call(edge.querySelectorAll('path, line, polyline'));
+      }
+      function legendSourceBounds(entry) {
+        var bounds = null;
+        Array.prototype.forEach.call(entry.children, function (child) {
+          if (child.hasAttribute('data-legend-bridge-runtime')) return;
+          var box;
+          try { box = child.getBBox(); } catch (_) { return; }
+          if (!box || !Number.isFinite(box.x) || !Number.isFinite(box.y)) return;
+          var next = { left: box.x, top: box.y, right: box.x + box.width, bottom: box.y + box.height };
+          if (!bounds) bounds = next;
+          else {
+            bounds.left = Math.min(bounds.left, next.left);
+            bounds.top = Math.min(bounds.top, next.top);
+            bounds.right = Math.max(bounds.right, next.right);
+            bounds.bottom = Math.max(bounds.bottom, next.bottom);
+          }
         });
+        return bounds;
       }
-
-      var menu = document.getElementById('export-menu');
-      var btn = document.getElementById('btn-export');
-      var items = function () {
-        return Array.prototype.slice.call(menu.querySelectorAll('button[role="menuitem"]'));
-      };
-
-      // ---- Clipboard support ----------------------------------------------
-      function canCopyImage() {
-        return typeof ClipboardItem !== 'undefined' &&
-               navigator.clipboard &&
-               typeof navigator.clipboard.write === 'function';
+      function layoutLegendEntry(entry) {
+        var bounds = legendSourceBounds(entry);
+        var hit = entry.querySelector('[data-legend-hit]');
+        var badge = entry.querySelector('[data-legend-count-badge]');
+        if (!bounds || !hit || !badge) return false;
+        var count = entry.getAttribute('data-legend-count') || '0';
+        var centerY = (bounds.top + bounds.bottom) / 2;
+        var badgeWidth = Math.max(14, count.length * 5 + 8);
+        var badgeX = bounds.right + 3;
+        var hitX = bounds.left - 5;
+        var hitRight = badgeX + badgeWidth + 4;
+        hit.setAttribute('x', hitX.toFixed(2));
+        hit.setAttribute('y', (centerY - 12).toFixed(2));
+        hit.setAttribute('width', Math.max(24, hitRight - hitX).toFixed(2));
+        hit.setAttribute('height', '24');
+        hit.setAttribute('rx', '4');
+        var badgeRect = badge.querySelector('rect');
+        var badgeText = badge.querySelector('text');
+        badgeRect.setAttribute('x', badgeX.toFixed(2));
+        badgeRect.setAttribute('y', (centerY - 7).toFixed(2));
+        badgeRect.setAttribute('width', badgeWidth.toFixed(2));
+        badgeRect.setAttribute('height', '14');
+        badgeRect.setAttribute('rx', '7');
+        badgeText.setAttribute('x', (badgeX + badgeWidth / 2).toFixed(2));
+        badgeText.setAttribute('y', (centerY + 2.5).toFixed(2));
+        return true;
       }
-
-      // ---- Raster format detection ----------------------------------------
-      // canvas.toBlob('image/webp') silently returns a PNG on browsers without
-      // WebP encoding (older Safari), so detect explicitly.
-      function supports(format) {
-        if (format === 'svg' || format === 'png') return true;
-        var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';
+      function layoutLegendBridge() {
+        legendEntries.forEach(layoutLegendEntry);
+        if (!legendBridge) return;
+        Array.prototype.forEach.call(legendBridge.querySelectorAll('[data-legend-zero]'), layoutLegendEntry);
+      }
+      function decorateLegendBridge() {
+        legendEntries = [];
+        if (!legendBridge || html.getAttribute('data-embed') === 'true') return false;
+        var facts = {};
+        collectKinds().forEach(function (kind) { facts[kind.id] = kind; });
+        Array.prototype.forEach.call(legendBridge.querySelectorAll('[data-legend-kind]'), function (entry) {
+          var kind = entry.getAttribute('data-legend-kind');
+          var fact = facts[kind];
+          var count = fact ? fact.nodes.length : 0;
+          entry.setAttribute('data-legend-count', String(count));
+          var hit = document.createElementNS(namespace, 'rect');
+          hit.setAttribute('data-legend-bridge-runtime', '');
+          hit.setAttribute('data-legend-hit', '');
+          hit.setAttribute('aria-hidden', 'true');
+          entry.insertBefore(hit, entry.firstChild);
+          var badge = document.createElementNS(namespace, 'g');
+          badge.setAttribute('data-legend-bridge-runtime', '');
+          badge.setAttribute('data-legend-count-badge', '');
+          badge.setAttribute('aria-hidden', 'true');
+          badge.appendChild(document.createElementNS(namespace, 'rect'));
+          var countText = document.createElementNS(namespace, 'text');
+          countText.textContent = String(count);
+          badge.appendChild(countText);
+          entry.appendChild(badge);
+          if (!fact || !count) {
+            entry.setAttribute('data-legend-zero', '');
+            return;
+          }
+          entry.setAttribute('role', 'button');
+          entry.setAttribute('tabindex', legendEntries.length ? '-1' : '0');
+          var visibleLabel = entry.getAttribute('data-legend-label') || fact.label;
+          entry.setAttribute('aria-label', 'Inspect ' + visibleLabel + ', ' + count + ' node' + (count === 1 ? '' : 's'));
+          entry.setAttribute('aria-pressed', 'false');
+          entry.setAttribute('aria-haspopup', 'dialog');
+          entry.setAttribute('aria-controls', 'semantic-lens');
+          entry.setAttribute('aria-expanded', 'false');
+          legendEntries.push(entry);
+        });
+        if (!legendEntries.length) return false;
+        legendBridge.setAttribute('role', legendEntries.length >= 3 ? 'toolbar' : 'group');
+        legendBridge.setAttribute('aria-label', 'Semantic legend');
+        syncLegendBridge();
+        layoutLegendBridge();
         try {
-          var c = document.createElement('canvas');
-          c.width = c.height = 2;
-          return c.toDataURL(mime).indexOf('data:' + mime) === 0;
-        } catch (_) { return false; }
+          if (document.fonts && document.fonts.ready) document.fonts.ready.then(layoutLegendBridge);
+        } catch (_) {}
+        return true;
       }
-
-      // Gray out unsupported items.
-      items().forEach(function (it) {
-        if (it.dataset.format && !supports(it.dataset.format)) {
-          it.disabled = true;
-          it.title = 'Not supported by this browser';
-          it.style.opacity = '0.5';
+      function syncLegendBridge() {
+        legendEntries.forEach(function (entry) {
+          var selected = selectedKinds.indexOf(entry.getAttribute('data-legend-kind')) >= 0;
+          entry.setAttribute('aria-pressed', selected ? 'true' : 'false');
+          entry.setAttribute('aria-expanded', !panel.hidden && lensOpener === entry ? 'true' : 'false');
+          if (selected) entry.setAttribute('data-legend-selected', '');
+          else entry.removeAttribute('data-legend-selected');
+        });
+      }
+      function clearLegendPreview() {
+        activeLegendPreview = null;
+        svg.removeAttribute('data-legend-preview-active');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-legend-preview-match], [data-legend-preview-selected], [data-legend-preview-peer]'), function (element) {
+          element.removeAttribute('data-legend-preview-match');
+          element.removeAttribute('data-legend-preview-selected');
+          element.removeAttribute('data-legend-preview-peer');
+        });
+      }
+      function strongerLegendOwnerActive() {
+        return selectedKinds.length > 0 || !panel.hidden || html.getAttribute('data-present') === 'true' ||
+          svg.hasAttribute('data-focus-active') || svg.hasAttribute('data-intent-trace-active') ||
+          svg.hasAttribute('data-route-picking') || svg.hasAttribute('data-route-active') ||
+          svg.hasAttribute('data-story-active') || svg.hasAttribute('data-relationship-preview-active');
+      }
+      function previewLegendKind(entry) {
+        clearLegendPreview();
+        if (!entry || strongerLegendOwnerActive()) return false;
+        var kind = entry.getAttribute('data-legend-kind');
+        var byId = nodesById();
+        var matches = Object.keys(byId).filter(function (id) {
+          return (byId[id].getAttribute('data-node-kind') || 'neutral') === kind;
+        });
+        if (!matches.length) return false;
+        var chosen = {};
+        matches.forEach(function (id) {
+          chosen[id] = true;
+          byId[id].setAttribute('data-legend-preview-match', '');
+          byId[id].setAttribute('data-legend-preview-selected', '');
+        });
+        edgeGroups().forEach(function (edge) {
+          if (!chosen[edge.from] && !chosen[edge.to]) return;
+          edge.members.forEach(function (member) { member.setAttribute('data-legend-preview-match', ''); });
+          [edge.from, edge.to].forEach(function (id) {
+            if (!byId[id] || chosen[id]) return;
+            byId[id].setAttribute('data-legend-preview-match', '');
+            byId[id].setAttribute('data-legend-preview-peer', '');
+          });
+        });
+        svg.setAttribute('data-legend-preview-active', kind);
+        activeLegendPreview = entry;
+        return true;
+      }
+      function syncLegendPreview() {
+        var next = focusedLegendEntry || hoveredLegendEntry;
+        if (next === activeLegendPreview) return;
+        clearLegendPreview();
+        if (next) previewLegendKind(next);
+      }
+      function activateLegendEntry(entry) {
+        if (!entry || entry.getAttribute('role') !== 'button') return false;
+        clearLegendPreview();
+        select(entry.getAttribute('data-legend-kind'));
+        return open({ opener: entry });
+      }
+      function removeFlowOverlay() {
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-semantic-lens-overlay]'), function (element) {
+          element.remove();
+        });
+        svg.removeAttribute('data-lens-flow-count');
+        svg.removeAttribute('data-lens-flow-density');
+      }
+      function flowGeometry(shape, direction, step) {
+        var clone = shape.cloneNode(false);
+        clone.removeAttribute('id');
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('marker-start');
+        clone.removeAttribute('marker-mid');
+        clone.removeAttribute('marker-end');
+        clone.removeAttribute('role');
+        clone.removeAttribute('aria-label');
+        clone.removeAttribute('aria-hidden');
+        clone.removeAttribute('data-animate');
+        clone.removeAttribute('data-edge-from');
+        clone.removeAttribute('data-edge-to');
+        clone.removeAttribute('data-edge-key');
+        clone.removeAttribute('data-edge-id');
+        clone.removeAttribute('data-edge-label');
+        clone.removeAttribute('data-lens-match');
+        clone.setAttribute('class', 'semantic-lens-flow');
+        clone.setAttribute('data-direction', direction);
+        clone.setAttribute('pathLength', '1');
+        clone.style.setProperty('--lens-flow-delay', (step * 0.08).toFixed(2) + 's');
+        return clone;
+      }
+      function renderFlowOverlay(entries) {
+        removeFlowOverlay();
+        svg.setAttribute('data-lens-flow-count', String(entries.length));
+        if (!entries.length || html.getAttribute('data-embed') === 'true') return false;
+        if (entries.length > MAX_LENS_FLOW_EDGES) {
+          svg.setAttribute('data-lens-flow-density', 'quiet');
+          return false;
         }
-        if (it.dataset.action === 'copy' && !canCopyImage()) {
-          it.disabled = true;
-          it.title = 'Clipboard image write not supported by this browser';
-          it.style.opacity = '0.5';
+        var overlay = document.createElementNS(namespace, 'g');
+        overlay.setAttribute('class', 'semantic-lens-overlay');
+        overlay.setAttribute('data-semantic-lens-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        entries.forEach(function (entry, step) {
+          var wrapper = document.createElementNS(namespace, 'g');
+          if (entry.edge.members[0].hasAttribute('transform')) {
+            wrapper.setAttribute('transform', entry.edge.members[0].getAttribute('transform'));
+          }
+          edgeShapes(entry.edge.members[0]).forEach(function (shape) {
+            wrapper.appendChild(flowGeometry(shape, entry.direction, step));
+          });
+          if (wrapper.childNodes.length) overlay.appendChild(wrapper);
+        });
+        if (!overlay.childNodes.length) return false;
+        var firstNode = svg.querySelector('[data-node-id]');
+        if (firstNode) svg.insertBefore(overlay, firstNode);
+        else svg.appendChild(overlay);
+        return true;
+      }
+      function cleanSvgState() {
+        removeFlowOverlay();
+        svg.removeAttribute('data-lens-active');
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-lens-match], [data-lens-selected], [data-lens-peer]'), function (element) {
+          element.removeAttribute('data-lens-match');
+          element.removeAttribute('data-lens-selected');
+          element.removeAttribute('data-lens-peer');
+        });
+      }
+      function renderKinds() {
+        kindsRoot.textContent = '';
+        collectKinds().forEach(function (kind) {
+          var button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'semantic-lens-kind';
+          button.setAttribute('data-kind', kind.id);
+          button.setAttribute('aria-pressed', selectedKinds.indexOf(kind.id) >= 0 ? 'true' : 'false');
+          button.setAttribute('aria-label', kind.label + ', ' + kind.nodes.length + ' node' + (kind.nodes.length === 1 ? '' : 's'));
+          button.disabled = selectedKinds.length >= 2 && selectedKinds.indexOf(kind.id) === -1;
+          var swatch = document.createElement('span');
+          swatch.className = 'semantic-lens-swatch';
+          swatch.setAttribute('aria-hidden', 'true');
+          var label = document.createElement('strong');
+          label.textContent = kind.label;
+          var count = document.createElement('em');
+          count.textContent = String(kind.nodes.length);
+          button.appendChild(swatch);
+          button.appendChild(label);
+          button.appendChild(count);
+          kindsRoot.appendChild(button);
+        });
+      }
+      function updateHash() {
+        try {
+          var hash = selectedKinds.length
+            ? '#lens=' + selectedKinds.map(encodeURIComponent).join('~')
+            : '';
+          history.replaceState(null, '', location.pathname + location.search + hash);
+        } catch (_) {}
+      }
+      function updateTrigger() {
+        var active = selectedKinds.length > 0;
+        trigger.setAttribute('aria-pressed', active ? 'true' : 'false');
+        trigger.setAttribute('aria-label', active ? 'Open active semantic lens' : 'Open semantic lens');
+        copyBtn.hidden = !active;
+        syncLegendBridge();
+      }
+      function overlapArea(a, b) {
+        var width = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left));
+        var height = Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+        return width * height;
+      }
+      function dockPanel(byId) {
+        panel.removeAttribute('data-dock-side');
+        if (panel.hidden || !selectedKinds.length || window.innerWidth <= 720) return 'right';
+        var panelRect = panel.getBoundingClientRect();
+        var containerRect = container.getBoundingClientRect();
+        if (!panelRect.width || !panelRect.height) return 'right';
+        var selectedRects = Object.keys(byId).filter(function (id) {
+          return selectedKinds.indexOf(byId[id].getAttribute('data-node-kind') || 'neutral') >= 0;
+        }).map(function (id) { return byId[id].getBoundingClientRect(); });
+        var top = panelRect.top;
+        var width = panelRect.width;
+        var leftCandidate = { left: containerRect.left + 16, right: containerRect.left + 16 + width, top: top, bottom: panelRect.bottom };
+        var rightCandidate = { left: containerRect.right - 16 - width, right: containerRect.right - 16, top: top, bottom: panelRect.bottom };
+        var leftScore = selectedRects.reduce(function (score, rect) { return score + overlapArea(leftCandidate, rect); }, 0);
+        var rightScore = selectedRects.reduce(function (score, rect) { return score + overlapArea(rightCandidate, rect); }, 0);
+        var side = leftScore < rightScore ? 'left' : 'right';
+        panel.setAttribute('data-dock-side', side);
+        return side;
+      }
+      function applySelection(options) {
+        options = options || {};
+        cleanSvgState();
+        var byId = nodesById();
+        var nodeKind = {};
+        Object.keys(byId).forEach(function (id) { nodeKind[id] = byId[id].getAttribute('data-node-kind') || 'neutral'; });
+        if (!selectedKinds.length) {
+          status.textContent = 'Choose a kind to inspect its nodes and touching relationships.';
+          updateTrigger();
+          renderKinds();
+          dockPanel(byId);
+          if (options.updateUrl !== false) updateHash();
+          return false;
         }
-      });
 
-      // ---- Toast ----------------------------------------------------------
-      // A live region only announces CHANGES to an existing node, so the toast
-      // element is created once up front and updated in place.
-      var toastEl = document.createElement('div');
-      toastEl.className = 'archify-toast';
-      toastEl.setAttribute('role', 'status');
-      document.body.appendChild(toastEl);
-      var toastTimer = null;
+        var chosen = {};
+        selectedKinds.forEach(function (kind) { chosen[kind] = true; });
+        Object.keys(byId).forEach(function (id) {
+          if (!chosen[nodeKind[id]]) return;
+          byId[id].setAttribute('data-lens-match', '');
+          byId[id].setAttribute('data-lens-selected', '');
+        });
 
-      function toast(msg) {
-        toastEl.textContent = '';
+        var touching = 0;
+        var forward = 0;
+        var reverse = 0;
+        var crossKind = selectedKinds.length === 2;
+        var matchedFlow = [];
+        edgeGroups().forEach(function (edge) {
+          var fromKind = nodeKind[edge.from];
+          var toKind = nodeKind[edge.to];
+          var match = false;
+          if (crossKind) {
+            if (fromKind === selectedKinds[0] && toKind === selectedKinds[1]) { match = true; forward += 1; }
+            if (fromKind === selectedKinds[1] && toKind === selectedKinds[0]) { match = true; reverse += 1; }
+          } else if (fromKind === selectedKinds[0] || toKind === selectedKinds[0]) {
+            match = true;
+            touching += 1;
+          }
+          if (!match) return;
+          var direction = 'within';
+          if (crossKind) {
+            direction = fromKind === selectedKinds[0] ? 'forward' : 'reverse';
+          } else {
+            direction = fromKind === selectedKinds[0] && toKind !== selectedKinds[0] ? 'out'
+              : (toKind === selectedKinds[0] && fromKind !== selectedKinds[0] ? 'in' : 'within');
+          }
+          matchedFlow.push({ edge: edge, direction: direction });
+          edge.members.forEach(function (member) { member.setAttribute('data-lens-match', ''); });
+          if (!crossKind) {
+            [edge.from, edge.to].forEach(function (id) {
+              if (!byId[id]) return;
+              byId[id].setAttribute('data-lens-match', '');
+              if (!chosen[nodeKind[id]]) byId[id].setAttribute('data-lens-peer', '');
+            });
+          }
+        });
+
+        svg.setAttribute('data-lens-active', selectedKinds.join(' '));
+        renderFlowOverlay(matchedFlow);
+        if (crossKind) {
+          var total = forward + reverse;
+          status.textContent = kindLabel(selectedKinds[0]) + ' → ' + kindLabel(selectedKinds[1]) + ': ' + forward + ' · ' +
+            kindLabel(selectedKinds[1]) + ' → ' + kindLabel(selectedKinds[0]) + ': ' + reverse + ' · ' +
+            total + ' direct relationship' + (total === 1 ? '' : 's');
+        } else {
+          var nodeCount = collectKinds().filter(function (kind) { return kind.id === selectedKinds[0]; })[0].nodes.length;
+          status.textContent = nodeCount + ' ' + kindLabel(selectedKinds[0]) + ' node' + (nodeCount === 1 ? '' : 's') + ' · ' +
+            touching + ' touching relationship' + (touching === 1 ? '' : 's') + ' · connected peers remain visible';
+        }
+        updateTrigger();
+        renderKinds();
+        dockPanel(byId);
+        if (options.updateUrl !== false) updateHash();
+        return true;
+      }
+      function prepareForLens() {
+        clearLegendPreview();
+        if (Archify.focus && typeof Archify.focus.clear === 'function') {
+          Archify.focus.clear({ updateUrl: false, preserveView: true });
+        }
+        if (Archify.routeProbe && typeof Archify.routeProbe.clear === 'function') {
+          Archify.routeProbe.clear({ updateUrl: false, restoreFocus: false });
+        }
+        if (Archify.guidedViews && typeof Archify.guidedViews.showAll === 'function') {
+          Archify.guidedViews.showAll({ clearFocus: false, updateUrl: false });
+        }
+        if (Archify.intentTrace && typeof Archify.intentTrace.clear === 'function') {
+          Archify.intentTrace.clear({ announce: false });
+        }
+      }
+      function select(kind, options) {
+        options = options || {};
+        clearLegendPreview();
+        var exists = collectKinds().some(function (entry) { return entry.id === kind; });
+        if (!exists) return false;
+        var index = selectedKinds.indexOf(kind);
+        if (index >= 0) selectedKinds.splice(index, 1);
+        else {
+          if (selectedKinds.length >= 2) return false;
+          if (!selectedKinds.length) prepareForLens();
+          selectedKinds.push(kind);
+        }
+        return applySelection(options);
+      }
+      function close(options) {
+        options = options || {};
+        panel.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        updateTrigger();
+        if (options.restoreFocus !== false && lensOpener && typeof lensOpener.focus === 'function') lensOpener.focus();
+        return false;
+      }
+      function open(options) {
+        options = options || {};
+        if (html.getAttribute('data-embed') === 'true') return false;
+        lensOpener = options.opener || trigger;
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        if (Archify.guide && Archify.guide.isOpen()) Archify.guide.close({ restoreFocus: false });
+        renderKinds();
+        panel.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        updateTrigger();
         requestAnimationFrame(function () {
-          toastEl.textContent = msg;
-          toastEl.classList.add('show');
+          dockPanel(nodesById());
+          var activeButton = kindsRoot.querySelector('[aria-pressed="true"]');
+          var firstButton = activeButton || kindsRoot.querySelector('button:not(:disabled)');
+          if (firstButton) firstButton.focus();
         });
-        clearTimeout(toastTimer);
-        toastTimer = setTimeout(function () { toastEl.classList.remove('show'); }, 1500);
+        return true;
       }
-
-      function open(focusLast) {
-        menu.classList.add('open');
-        btn.setAttribute('aria-expanded', 'true');
-        var available = items().filter(function (i) { return !i.disabled; });
-        var target = focusLast ? available[available.length - 1] : available[0];
-        if (target) target.focus();
+      function toggle() { return panel.hidden ? open({ opener: trigger }) : close(); }
+      function clear(options) {
+        options = options || {};
+        selectedKinds = [];
+        cleanSvgState();
+        panel.removeAttribute('data-dock-side');
+        updateTrigger();
+        renderKinds();
+        status.textContent = 'Choose a kind to inspect its nodes and touching relationships.';
+        if (options.updateUrl !== false) updateHash();
+        if (options.preserveView !== true && Archify.view && typeof Archify.view.reset === 'function') {
+          Archify.view.reset({ automatic: true });
+        }
+        if (options.closePanel === true) close({ restoreFocus: false });
+        return false;
       }
-      function close(focusTrigger) {
-        menu.classList.remove('open');
-        btn.setAttribute('aria-expanded', 'false');
-        if (focusTrigger) btn.focus();
+      function fallbackCopy(value) {
+        var field = document.createElement('textarea');
+        field.value = value;
+        field.setAttribute('readonly', '');
+        field.style.position = 'fixed';
+        field.style.opacity = '0';
+        document.body.appendChild(field);
+        field.select();
+        var copied = false;
+        try { copied = document.execCommand('copy'); } catch (_) {}
+        field.remove();
+        return copied;
+      }
+      function copyLink() {
+        if (!selectedKinds.length) return Promise.resolve(false);
+        var value = location.href.replace(/#.*$/, '') + '#lens=' + selectedKinds.map(encodeURIComponent).join('~');
+        var copy = navigator.clipboard && typeof navigator.clipboard.writeText === 'function'
+          ? navigator.clipboard.writeText(value).then(function () { return true; }).catch(function () { return fallbackCopy(value); })
+          : Promise.resolve(fallbackCopy(value));
+        return copy.then(function (copied) {
+          copyBtn.textContent = copied ? 'Copied' : 'Copy failed';
+          window.setTimeout(function () { copyBtn.textContent = 'Copy link'; }, 1600);
+          return copied;
+        });
+      }
+      function syncFromHash() {
+        try {
+          var params = new URLSearchParams(location.hash.replace(/^#/, ''));
+          var value = params.get('lens');
+          if (!value) {
+            if (selectedKinds.length) clear({ updateUrl: false, preserveView: true });
+            return;
+          }
+          var available = collectKinds().map(function (kind) { return kind.id; });
+          var requested = value.split('~').filter(function (kind, index, list) {
+            return available.indexOf(kind) >= 0 && list.indexOf(kind) === index;
+          }).slice(0, 2);
+          if (!requested.length) return;
+          prepareForLens();
+          selectedKinds = requested;
+          applySelection({ updateUrl: false });
+        } catch (_) {}
       }
-      function isOpen() { return menu.classList.contains('open'); }
 
-      btn.addEventListener('click', function (e) {
-        e.stopPropagation();
-        if (isOpen()) close(false);
-        else open();
+      trigger.addEventListener('click', toggle);
+      if (decorateLegendBridge()) {
+        legendBridge.addEventListener('click', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (entry) activateLegendEntry(entry);
+        });
+        legendBridge.addEventListener('pointerover', function (event) {
+          if (event.pointerType === 'touch' || (finePointerQuery && !finePointerQuery.matches)) return;
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          hoveredLegendEntry = entry;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('pointerout', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          if (hoveredLegendEntry === entry) hoveredLegendEntry = null;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('focusin', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry) return;
+          focusedLegendEntry = entry;
+          legendEntries.forEach(function (candidate) {
+            candidate.setAttribute('tabindex', candidate === entry ? '0' : '-1');
+          });
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('focusout', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry || (event.relatedTarget && entry.contains(event.relatedTarget))) return;
+          if (focusedLegendEntry === entry) focusedLegendEntry = null;
+          syncLegendPreview();
+        });
+        legendBridge.addEventListener('keydown', function (event) {
+          var entry = event.target.closest('[data-legend-kind][role="button"]');
+          if (!entry) return;
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            activateLegendEntry(entry);
+            return;
+          }
+          var index = legendEntries.indexOf(entry);
+          var next = null;
+          if (event.key === 'ArrowRight') next = (index + 1) % legendEntries.length;
+          else if (event.key === 'ArrowLeft') next = (index - 1 + legendEntries.length) % legendEntries.length;
+          else if (event.key === 'Home') next = 0;
+          else if (event.key === 'End') next = legendEntries.length - 1;
+          if (next === null) return;
+          event.preventDefault();
+          legendEntries.forEach(function (candidate, candidateIndex) {
+            candidate.setAttribute('tabindex', candidateIndex === next ? '0' : '-1');
+          });
+          legendEntries[next].focus();
+        });
+      }
+      closeBtn.addEventListener('click', function () { close(); });
+      clearBtn.addEventListener('click', function () { clear({ preserveView: true }); });
+      copyBtn.addEventListener('click', copyLink);
+      kindsRoot.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-kind]');
+        if (!button || button.disabled) return;
+        select(button.getAttribute('data-kind'));
       });
-      // APG menu-button pattern: ArrowDown/ArrowUp on the trigger opens the menu.
-      btn.addEventListener('keydown', function (e) {
-        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-          e.preventDefault();
-          if (!isOpen()) open(e.key === 'ArrowUp');
-        }
+      kindsRoot.addEventListener('keydown', function (event) {
+        var buttons = Array.prototype.slice.call(kindsRoot.querySelectorAll('button:not(:disabled)'));
+        var index = buttons.indexOf(document.activeElement);
+        var next = null;
+        if (index >= 0 && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) next = (index + 1) % buttons.length;
+        else if (index >= 0 && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')) next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home' && buttons.length) next = 0;
+        else if (event.key === 'End' && buttons.length) next = buttons.length - 1;
+        if (next !== null) { event.preventDefault(); buttons[next].focus(); }
       });
-      document.addEventListener('click', function (e) {
-        if (!menu.contains(e.target) && e.target !== btn) close(false);
+      panel.addEventListener('keydown', function (event) {
+        if (event.key !== 'Escape') return;
+        event.preventDefault();
+        event.stopPropagation();
+        close();
       });
-
-      // Keyboard navigation inside the menu.
-      //   Menu items: Up/Down, Home/End.
-      //   Esc closes + returns focus to trigger; Tab closes.
-      menu.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
-        if (e.key === 'Tab')    { close(false); return; }
-
-        var available = items().filter(function (i) { return !i.disabled; });
-        var current = available.indexOf(document.activeElement);
-        switch (e.key) {
-          case 'ArrowDown':
-            e.preventDefault();
-            if (available.length) available[(current + 1 + available.length) % available.length].focus();
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            if (available.length) available[(current - 1 + available.length) % available.length].focus();
-            break;
-          case 'Home':
-            e.preventDefault();
-            if (available[0]) available[0].focus();
-            break;
-          case 'End':
-            e.preventDefault();
-            if (available.length) available[available.length - 1].focus();
-            break;
-        }
+      document.addEventListener('click', function (event) {
+        var eventPath = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        var clickedInside = eventPath.indexOf(panel) >= 0 || panel.contains(event.target);
+        var clickedLauncher = event.target === trigger || legendEntries.some(function (entry) {
+          return event.target === entry || entry.contains(event.target);
+        });
+        if (!panel.hidden && !clickedInside && !clickedLauncher) close({ restoreFocus: false });
+      });
+      window.addEventListener('hashchange', syncFromHash);
+      window.addEventListener('resize', function () {
+        if (!panel.hidden && selectedKinds.length) dockPanel(nodesById());
+        layoutLegendBridge();
       });
+      renderKinds();
+      syncFromHash();
+
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        clear: clear,
+        clearPreview: clearLegendPreview,
+        select: select,
+        copyLink: copyLink,
+        isOpen: function () { return !panel.hidden; },
+        active: function () { return selectedKinds.length ? selectedKinds.slice() : null; },
+        kinds: function () { return collectKinds().map(function (kind) { return { id: kind.id, count: kind.nodes.length }; }); }
+      };
+    })();
 
-      function runExport(format) {
-        var base = diagramFilename();
-        close(true);
-        return (format === 'svg'
-          ? Promise.resolve(serializeSvg(1, { autoTheme: true })).then(function (d) {
-              download(new Blob([d.svgString], { type: 'image/svg+xml;charset=utf-8' }), base + '.svg');
-            })
-          : rasterize(format).then(function (blob) {
-              download(blob, base + '.' + format);
-            })
-        ).catch(function (err) {
-          console.error(err);
-          alert('Export failed: ' + (err && err.message ? err.message : format));
+    /* ============================================================
+       Diagram Guide — a factual command deck over existing interactions.
+       Counts come from compiled semantics; actions delegate to Finder, Route
+       Probe, Semantic Radar, Semantic Lens, Story Trail, Presentation, theme, export, and
+       camera without adding a second command implementation or SVG state.
+       ============================================================ */
+    Archify.guide = (function () {
+      var html = document.documentElement;
+      var container = document.querySelector('.diagram-container');
+      var svg = container.querySelector(':scope > svg');
+      var trigger = document.getElementById('btn-diagram-guide');
+      var panel = document.getElementById('diagram-guide');
+      var closeBtn = document.getElementById('diagram-guide-close');
+      var stats = document.getElementById('diagram-guide-stats');
+      var actions = document.getElementById('diagram-guide-actions');
+      var feedback = document.getElementById('diagram-guide-feedback');
+      var storyBtn = actions.querySelector('[data-guide-action="story"]');
+      var storyCopy = document.getElementById('diagram-guide-story-copy');
+      var routePanel = document.getElementById('route-probe');
+
+      function viewCount() {
+        return Archify.guidedViews && Number(Archify.guidedViews.count) || 0;
+      }
+      function relationshipCount() {
+        var seen = {};
+        Array.prototype.forEach.call(svg.querySelectorAll('[data-edge-from][data-edge-to]'), function (edge) {
+          var key = edge.getAttribute('data-edge-key') || [
+            edge.getAttribute('data-edge-from'),
+            edge.getAttribute('data-edge-to'),
+            edge.getAttribute('data-edge-label') || ''
+          ].join('\u0000');
+          seen[key] = true;
         });
+        return Object.keys(seen).length;
       }
-
-      function runCopy() {
-        close(true);
-        if (!canCopyImage()) {
-          alert('Clipboard image write not supported in this browser.');
-          return;
+      function renderFacts() {
+        var nodes = svg.querySelectorAll('[data-node-id]').length;
+        var relationships = relationshipCount();
+        var views = viewCount();
+        stats.textContent = nodes + ' semantic node' + (nodes === 1 ? '' : 's') + ' · ' +
+          relationships + ' relationship' + (relationships === 1 ? '' : 's') + ' · ' +
+          views + ' guided view' + (views === 1 ? '' : 's');
+        storyBtn.disabled = views === 0;
+        storyBtn.setAttribute('aria-disabled', views === 0 ? 'true' : 'false');
+        storyCopy.textContent = views
+          ? 'Walk ' + views + ' authored chapter' + (views === 1 ? '' : 's') + ' and their real relationships.'
+          : 'No authored guided story in this diagram.';
+      }
+      function actionButtons() {
+        return Array.prototype.slice.call(actions.querySelectorAll('.diagram-guide-action:not(:disabled)'));
+      }
+      function close(options) {
+        options = options || {};
+        panel.hidden = true;
+        html.removeAttribute('data-guide-open');
+        routePanel.removeAttribute('data-guide-open');
+        trigger.setAttribute('aria-expanded', 'false');
+        trigger.setAttribute('aria-label', 'Open diagram guide');
+        feedback.textContent = '';
+        if (options.restoreFocus !== false) trigger.focus();
+        return false;
+      }
+      function open() {
+        if (html.getAttribute('data-embed') === 'true') return false;
+        if (Archify.semanticLens && typeof Archify.semanticLens.clearPreview === 'function') Archify.semanticLens.clearPreview();
+        if (Archify.exportMenu && Archify.exportMenu.isOpen()) Archify.exportMenu.close(false);
+        if (Archify.finder && Archify.finder.isOpen()) Archify.finder.close({ restoreFocus: false });
+        if (Archify.radar && Archify.radar.isOpen()) Archify.radar.close({ restoreFocus: false });
+        if (Archify.semanticLens && Archify.semanticLens.isOpen()) Archify.semanticLens.close({ restoreFocus: false });
+        if (Archify.guidedViews && Archify.guidedViews.isPlaying && Archify.guidedViews.isPlaying()) {
+          Archify.guidedViews.pause();
         }
-        // WebKit requires ClipboardItem to be constructed synchronously inside
-        // the user gesture — pass the pending Promise<Blob> as the item value.
-        // Browsers that reject promise values throw synchronously; fall back
-        // to awaiting the blob first (works in Chromium/Firefox).
-        var blobPromise = rasterize('png');
-        var writePromise;
-        try {
-          writePromise = navigator.clipboard.write([new ClipboardItem({ 'image/png': blobPromise })]);
-        } catch (_) {
-          writePromise = blobPromise.then(function (blob) {
-            return navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
-          });
+        if (Archify.routeProbe && Archify.routeProbe.isJourneyPlaying && Archify.routeProbe.isJourneyPlaying()) {
+          Archify.routeProbe.pauseJourney({ preserveElapsed: true, reason: 'guide' });
         }
-        return writePromise.then(function () {
-          toast('Copied PNG to clipboard');
-        }).catch(function (err) {
-          console.error(err);
-          alert('Copy failed: ' + (err && err.message ? err.message : 'unknown'));
+        renderFacts();
+        panel.hidden = false;
+        html.setAttribute('data-guide-open', 'true');
+        routePanel.setAttribute('data-guide-open', 'true');
+        trigger.setAttribute('aria-expanded', 'true');
+        trigger.setAttribute('aria-label', 'Close diagram guide');
+        feedback.textContent = '';
+        requestAnimationFrame(function () {
+          var first = actionButtons()[0];
+          if (first) first.focus();
         });
+        return true;
+      }
+      function toggle() { return panel.hidden ? open() : close(); }
+      function execute(action) {
+        feedback.textContent = '';
+        if (action === 'story' && !viewCount()) {
+          feedback.textContent = 'This diagram has no authored guided story.';
+          return false;
+        }
+        close({ restoreFocus: false });
+        if (action === 'find') return Archify.finder.open();
+        if (action === 'route') return Archify.routeProbe.begin({ focusNode: true });
+        if (action === 'map') return Archify.radar.open();
+        if (action === 'lens') return Archify.semanticLens.open();
+        if (action === 'story') return Archify.guidedViews.play();
+        if (action === 'present') return Archify.presentation.enter();
+        if (action === 'export') return Archify.exportMenu.open();
+        if (action === 'theme') return Archify.theme.toggle();
+        if (action === 'preset') return Archify.preset.cycle();
+        if (action === 'reset') return Archify.view.reset();
+        if (action === 'zoom-in') return Archify.view.zoomIn();
+        if (action === 'zoom-out') return Archify.view.zoomOut();
+        return false;
+      }
+      function actionForKey(key) {
+        return {
+          '/': 'find',
+          r: 'route',
+          m: 'map',
+          l: 'lens',
+          p: 'story',
+          f: 'present',
+          e: 'export',
+          t: 'theme',
+          s: 'preset',
+          '0': 'reset',
+          '+': 'zoom-in',
+          '=': 'zoom-in',
+          '-': 'zoom-out'
+        }[key] || null;
       }
 
-      menu.addEventListener('click', function (e) {
-        var copyBtn = e.target.closest('button[data-action="copy"]');
-        if (copyBtn && !copyBtn.disabled) { runCopy(); return; }
-
-        var formatBtn = e.target.closest('button[data-format]');
-        if (formatBtn && !formatBtn.disabled) { runExport(formatBtn.dataset.format); }
+      trigger.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', function () { close(); });
+      actions.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-guide-action]');
+        if (!button || button.disabled) return;
+        event.stopPropagation();
+        execute(button.getAttribute('data-guide-action'));
+      });
+      panel.addEventListener('keydown', function (event) {
+        if (event.key === 'Escape' || event.key === '?') {
+          event.preventDefault();
+          event.stopPropagation();
+          close();
+          return;
+        }
+        var buttons = actionButtons();
+        var index = buttons.indexOf(document.activeElement);
+        var next = null;
+        if (index >= 0 && event.key === 'ArrowRight') next = (index + 1) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowDown') next = (index + 1) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowLeft') next = (index - 1 + buttons.length) % buttons.length;
+        else if (index >= 0 && event.key === 'ArrowUp') next = (index - 1 + buttons.length) % buttons.length;
+        else if (event.key === 'Home' && buttons.length) next = 0;
+        else if (event.key === 'End' && buttons.length) next = buttons.length - 1;
+        if (next !== null) {
+          event.preventDefault();
+          event.stopPropagation();
+          buttons[next].focus();
+          return;
+        }
+        var action = actionForKey(event.key.length === 1 ? event.key.toLowerCase() : event.key);
+        if (!action) return;
+        event.preventDefault();
+        event.stopPropagation();
+        execute(action);
+      });
+      document.addEventListener('click', function (event) {
+        if (!panel.hidden && !panel.contains(event.target) && event.target !== trigger) close({ restoreFocus: false });
       });
 
-      Archify.exportMenu = { open: open, close: close, isOpen: isOpen, run: runExport };
-
-      // Auto-open on page load for demo/screenshot purposes: ?openExport=1
-      // Wait for fonts (so the menu doesn't flash before typography lands)
-      // and paint before opening. Fallback timeout for browsers without the
-      // Font Loading API.
-      try {
-        if (new URLSearchParams(window.location.search).get('openExport') === '1') {
-          var openWhenReady = function () {
-            requestAnimationFrame(function () { requestAnimationFrame(open); });
+      renderFacts();
+      return {
+        open: open,
+        close: close,
+        toggle: toggle,
+        execute: execute,
+        isOpen: function () { return !panel.hidden; },
+        facts: function () {
+          return {
+            nodes: svg.querySelectorAll('[data-node-id]').length,
+            relationships: relationshipCount(),
+            views: viewCount()
           };
-          if (document.fonts && document.fonts.ready) {
-            document.fonts.ready.then(openWhenReady);
-          } else {
-            setTimeout(openWhenReady, 200);
-          }
         }
-      } catch (_) {}
+      };
     })();
 
     /* ============================================================
        Global keyboard shortcuts
-         T -> toggle theme
-         E -> open export menu
+       ? -> open Diagram Guide
+       T -> toggle theme
+       S -> cycle visual style
+       E -> open export menu
+         F -> toggle presentation stage
+         M -> toggle Semantic Radar
+         L -> toggle Semantic Lens
+         R -> start/clear Route Probe
+         / -> open node finder or the active route endpoint picker
+         + / - -> zoom, 0 -> reset view
+         Escape -> clear temporary trace/focus/view first, then exit presentation
        Ignored when focus is inside an input/textarea/contenteditable.
        ============================================================ */
     document.addEventListener('keydown', function (e) {
       if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (e.defaultPrevented) return;
       var t = e.target;
       if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
-      if (e.key === 't' || e.key === 'T') {
+      if (Archify.preset && Archify.preset.isOpen() && e.key !== 'Escape' && e.key !== 's' && e.key !== 'S') {
+        Archify.preset.close(false);
+      }
+      if (e.key === '?') {
+        e.preventDefault();
+        Archify.guide.toggle();
+      } else if (e.key === '/') {
+        e.preventDefault();
+        Archify.finder.open();
+      } else if (e.key === 't' || e.key === 'T') {
         e.preventDefault();
         Archify.theme.toggle();
+      } else if (e.key === 's' || e.key === 'S') {
+        e.preventDefault();
+        Archify.preset.cycle();
       } else if (e.key === 'e' || e.key === 'E') {
         e.preventDefault();
         if (!Archify.exportMenu.isOpen()) Archify.exportMenu.open();
+      } else if (e.key === 'f' || e.key === 'F') {
+        e.preventDefault();
+        Archify.presentation.toggle();
+      } else if (e.key === 'm' || e.key === 'M') {
+        e.preventDefault();
+        Archify.radar.toggle();
+      } else if (e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        Archify.semanticLens.toggle();
+      } else if (e.key === 'r' || e.key === 'R') {
+        e.preventDefault();
+        Archify.routeProbe.toggle({ focusNode: true });
+      } else if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        Archify.view.zoomIn();
+      } else if (e.key === '-') {
+        e.preventDefault();
+        Archify.view.zoomOut();
+      } else if (e.key === '0') {
+        e.preventDefault();
+        Archify.view.reset();
+      } else if (e.key === 'Escape' && Archify.preset.isOpen()) {
+        e.preventDefault();
+        Archify.preset.close(true);
+      } else if (e.key === 'Escape' && Archify.semanticLens.isOpen()) {
+        e.preventDefault();
+        Archify.semanticLens.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.semanticLens.active()) {
+        e.preventDefault();
+        Archify.semanticLens.clear({ preserveView: true });
+      } else if (e.key === 'Escape' && Archify.guide.isOpen()) {
+        e.preventDefault();
+        Archify.guide.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.radar.isOpen()) {
+        e.preventDefault();
+        Archify.radar.close({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.routeProbe.active()) {
+        e.preventDefault();
+        Archify.routeProbe.escape({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.intentTrace.active()) {
+        e.preventDefault();
+        Archify.intentTrace.clear();
+      } else if (e.key === 'Escape' && Archify.focus.active()) {
+        e.preventDefault();
+        Archify.focus.clear({ restoreFocus: true });
+      } else if (e.key === 'Escape' && Archify.presentation.active()) {
+        e.preventDefault();
+        Archify.presentation.exit();
       }
     });
   </script>
diff --git a/examples/workflow-strict.drawio b/examples/workflow-strict.drawio
new file mode 100644
index 0000000..614748c
--- /dev/null
+++ b/examples/workflow-strict.drawio
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="0" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0" background="#f8fafc">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#64748b;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=1;absoluteArcSize=1;arcSize=8;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=1;absoluteArcSize=1;arcSize=10;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#94a3b8;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#059669;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=#f8fafc;strokeColor=#cbd5e1;strokeWidth=1;dashed=1;dashPattern=6 6;fontColor=#ea580c;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;absoluteArcSize=1;arcSize=9;fillColor=none;strokeColor=#e11d48;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#e11d48;fontSize=9;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;asks for work&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#eceef2;strokeColor=#64748b;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#def8fc;strokeColor=#0891b2;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;plan next step&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#059669&quot;&gt;context aware&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#daf7ed;strokeColor=#059669;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;scope + consent&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#e11d48&quot;&gt;block risky ops&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;wait or reject&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feeaed;strokeColor=#e11d48;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;revise request&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;shell / browser / MCP&lt;/font&gt;&lt;br/&gt;&lt;font style=&quot;font-size:7px&quot; color=&quot;#ea580c&quot;&gt;structured result&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#feefe2;strokeColor=#ea580c;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;network service&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#fef3d8;strokeColor=#d97706;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;repo + memory&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:8px&quot; color=&quot;#64748b&quot;&gt;events + output&lt;/font&gt;" style="rounded=1;absoluteArcSize=1;arcSize=6;fillColor=#ede8fe;strokeColor=#7c3aed;strokeWidth=1.5;fontColor=#0f172a;fontSize=11;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;whiteSpace=wrap;html=1;verticalAlign=middle;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#059669;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.153" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.554" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.8;endArrow=block;endFill=1;endSize=18;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=none;rounded=0;strokeColor=#e11d48;strokeWidth=1.4;dashed=1;dashPattern=5 5;endArrow=block;endFill=1;endSize=14;fontColor=#e11d48;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="-0.284" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=none;rounded=0;strokeColor=#94a3b8;strokeWidth=1.4;endArrow=block;endFill=1;endSize=14;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=none;rounded=0;strokeColor=#059669;strokeWidth=1.2;endArrow=block;endFill=1;endSize=12;fontColor=#64748b;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.396" y="0" relative="1" as="geometry"/>
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=none;rounded=0;strokeColor=#7c3aed;strokeWidth=1.4;dashed=1;dashPattern=4 4;endArrow=block;endFill=1;endSize=14;fontColor=#7c3aed;fontSize=8;fontFamily=JetBrains Mono,ui-monospace,Menlo,monospace;labelBackgroundColor=#ffffff;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <mxGeometry x="0.053" y="0" relative="1" as="geometry"/>
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file
diff --git a/examples/workflow.drawio b/examples/workflow.drawio
new file mode 100644
index 0000000..a8d4925
--- /dev/null
+++ b/examples/workflow.drawio
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mxGraphModel dx="720" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="720" pageHeight="900" math="0" shadow="0">
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="boundary-0" value="01 / User Interface" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="52" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-1" value="02 / Agent Runtime" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="176" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-2" value="03 / Policy Boundary" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="300" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-3" value="lane" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="424" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-4" value="EX / Exception Handling" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b85450;dashed=1;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="46" y="430" width="628" height="92" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-5" value="05 / Tool Execution" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="548" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-6" value="06 / Observability" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#b0b0b0;verticalAlign=top;align=left;spacingLeft=8;" vertex="1" parent="1">
+      <mxGeometry x="40" y="672" width="640" height="104" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-7" value="Planning loop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="250" y="214" width="230" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-8" value="Tool work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="450" y="586" width="225" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="boundary-9" value="Human or policy stop" style="rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#6c8ebf;dashed=1;verticalAlign=top;" vertex="1" parent="1">
+      <mxGeometry x="380" y="462" width="295" height="58" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-user" value="&lt;b&gt;User&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;asks for work&lt;/font&gt;" style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="boundary-0">
+      <mxGeometry x="2" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-chat" value="&lt;b&gt;Chat Surface&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;thread + files&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="boundary-0">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-final" value="&lt;b&gt;Final Reply&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;answer + changes&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-0">
+      <mxGeometry x="539" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-planner" value="&lt;b&gt;Agent Planner&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;plan next step · context aware&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-router" value="&lt;b&gt;Tool Router&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;choose capability&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="boundary-7">
+      <mxGeometry x="134" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-approval" value="&lt;b&gt;Approval Gate&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;scope + consent · block risky ops&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-2">
+      <mxGeometry x="344" y="33" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-blocked" value="&lt;b&gt;Blocked&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;wait or reject&lt;/font&gt;" style="shape=shield;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="boundary-9">
+      <mxGeometry x="74" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-retry" value="&lt;b&gt;Retry Path&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;revise request&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-9">
+      <mxGeometry x="199" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-tool" value="&lt;b&gt;Tool Call&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;shell / browser / MCP · structured result&lt;/font&gt;" style="shape=queue;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="boundary-8">
+      <mxGeometry x="4" y="-5" width="92" height="68" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-external" value="&lt;b&gt;External API&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;network service&lt;/font&gt;" style="ellipse;shape=cloud;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="boundary-8">
+      <mxGeometry x="129" y="3" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-store" value="&lt;b&gt;Context Store&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;repo + memory&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="134" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="node-trace" value="&lt;b&gt;Trace Log&lt;/b&gt;&lt;br/&gt;&lt;font style=&quot;font-size:9px&quot;&gt;events + output&lt;/font&gt;" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="boundary-6">
+      <mxGeometry x="414" y="41" width="92" height="52" as="geometry"/>
+    </mxCell>
+    <mxCell id="edge-request-chat" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-user" target="node-chat">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-plan-request" value="plan" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-chat" target="node-planner">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="220" y="166"/>
+          <mxPoint x="300" y="166"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-planner-route" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-planner" target="node-router">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-check" value="needs approval?" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-router" target="node-approval">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="290"/>
+          <mxPoint x="430" y="290"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approved-tool" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-tool">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="356" y="367"/>
+          <mxPoint x="356" y="615"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-approval-denied" value="denied" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-approval" target="node-blocked">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="430" y="414"/>
+          <mxPoint x="500" y="414"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-retry-request" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-blocked" target="node-retry">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-tool-external-call" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-tool" target="node-external">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-external-reply" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-final">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="692" y="615"/>
+          <mxPoint x="692" y="119"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-record-result" value="record result" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-external" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+        <Array as="points">
+          <mxPoint x="625" y="797"/>
+          <mxPoint x="500" y="797"/>
+        </Array>
+      </mxGeometry>
+    </mxCell>
+    <mxCell id="edge-write-trace-memory" value="trace + memory" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;strokeColor=#666666;" edge="1" parent="1" source="node-store" target="node-trace">
+      <mxGeometry relative="1" as="geometry">
+      </mxGeometry>
+    </mxCell>
+  </root>
+</mxGraphModel>
\ No newline at end of file