/* ==========================================================
       THEME VARIABLES — switch by toggling [data-theme] on <html>
       ========================================================== */
    :root,
    [data-theme="dark"] {
      --bg: #020617;
      --grid: #1e293b;
      --canvas-dot: rgba(148, 163, 184, 0.16);
      --text: #ffffff;
      --text-muted: #94a3b8;
      --text-dim: #475569;
      /* UI chrome and menu hints need more contrast than SVG .t-dim accents */
      --text-faint: #7d8da1;

      --panel: rgba(15, 23, 42, 0.5);
      --panel-border: #1e293b;
      --lane-fill: rgba(15, 23, 42, 0.22);
      --lane-stroke: #334155;

      --arrow: #64748b;
      --arrow-emphasis: #34d399;

      /* Opaque mask color used behind semi-transparent component fills
         so the arrows drawn underneath are properly hidden. */
      --mask: #0f172a;

      --frontend-fill:    rgba(8, 51, 68, 0.4);
      --frontend-stroke:  #22d3ee;
      --backend-fill:     rgba(6, 78, 59, 0.4);
      --backend-stroke:   #34d399;
      --database-fill:    rgba(76, 29, 149, 0.4);
      --database-stroke:  #a78bfa;
      --cloud-fill:       rgba(120, 53, 15, 0.3);
      --cloud-stroke:     #fbbf24;
      --security-fill:    rgba(136, 19, 55, 0.4);
      --security-stroke:  #fb7185;
      --messagebus-fill:  rgba(251, 146, 60, 0.3);
      --messagebus-stroke:#fb923c;
      --external-fill:    rgba(30, 41, 59, 0.5);
      --external-stroke:  #94a3b8;

      --toolbar-bg:       rgba(15, 23, 42, 0.8);
      --toolbar-border:   #334155;
      --toolbar-text:     #e2e8f0;
      --toolbar-hover:    rgba(15, 23, 42, 0.95);
      --toolbar-menu-bg:  #0f172a;
    }

    [data-theme="light"] {
      --bg: #f4f5f7;
      --grid: #e9edf2;
      --canvas-dot: #d9dee5;
      --text: #111827;
      --text-muted: #5b6474;
      --text-dim: #9aa3b2;
      --text-faint: #6b7280;

      --panel: #ffffff;
      --panel-border: #e5e7eb;
      --lane-fill: rgba(248, 250, 252, 0.65);
      --lane-stroke: #cbd5e1;

      --arrow: #94a3b8;
      --arrow-emphasis: #059669;

      --mask: #ffffff;

      --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;

      --toolbar-bg:       rgba(255, 255, 255, 0.92);
      --toolbar-border:   #cbd5e1;
      --toolbar-text:     #334155;
      --toolbar-hover:    #ffffff;
      --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 {
      --archify-page-top: 2rem;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      background: var(--bg);
      min-height: 100vh;
      padding: var(--archify-page-top) 2rem 2rem;
      color: var(--text);
      /* Theme surfaces change together; animating the page background leaves it
         visibly out of sync with the SVG and panel for the first 200ms. */
    }

    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"] .node-outline { 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; }

    /* 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 {
      --archify-page-top: 1rem;
      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"]) .diagram-container {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: 0.75rem;
      padding-bottom: calc(0.75rem + var(--archify-nav-reserve));
    }
    html[data-present="true"]:not([data-embed="true"]) .diagram-container > svg {
      flex: 1 1 auto;
      height: 100%;
      min-height: 0;
      width: 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 and measured tall workflows 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;
    }
    html[data-reader-narrow="true"]:not([data-present="true"]) .diagram-container > svg {
      min-width: 0;
      max-width: var(--archify-diagram-max-width);
      margin-inline: 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; }

    html[data-preset="signal-flow"] .header,
    html[data-preset="blueprint"] .header,
    html[data-preset="editorial"] .header { padding-right: 29.5rem; }

    .header-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-height: 2.75rem;
      margin-bottom: 0.25rem;
    }

    .pulse-dot {
      flex: none;
      width: 10px;
      height: 10px;
      background: var(--frontend-stroke);
      border-radius: 50%;
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--frontend-stroke) 16%, transparent);
      animation: none;
    }

    html[data-motion-capable="true"] .pulse-dot { animation: pulse 2s infinite; }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    h1 {
      font-size: 1.5rem;
      font-weight: 650;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }

    .subtitle {
      color: var(--text-muted);
      font-size: 0.875rem;
      line-height: 1.55;
      margin-left: 1.375rem;
    }

    html[data-preset="signal-flow"] .header-row::after {
      content: attr(data-preset-badge-signal-flow);
      flex: none;
      margin-left: 0.25rem;
      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: attr(data-preset-badge-blueprint);
      flex: none;
      margin-left: 0.25rem;
      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: attr(data-preset-badge-editorial);
      flex: none;
      margin-left: 0.25rem;
      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 {
      --archify-nav-reserve: 0px;
      background: var(--panel);
      border-radius: 1rem;
      border: 1px solid var(--panel-border);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px -20px rgba(15, 23, 42, 0.18);
      padding: 1.5rem;
      padding-bottom: calc(1.5rem + var(--archify-nav-reserve));
      overflow: hidden;
      position: relative;
    }

    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);
    }
    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);
    }
    html[data-preset="blueprint"] .diagram-container {
      border-color: var(--panel-border);
      border-radius: 0.35rem;
      background: var(--panel);
      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);
      background: var(--panel);
      color: var(--arrow-emphasis);
      content: attr(data-preset-badge-editorial-plate);
      font-family: Georgia, 'Times New Roman', serif;
      font-size: 0.52rem;
      font-style: italic;
      font-weight: 600;
      letter-spacing: 0.09em;
      pointer-events: none;
    }
    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;
    }

    /* 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;
    }
    html:not([data-motion-capable="true"]) svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] {
      animation: none !important;
    }
    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],
    html[data-motion="still"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"],
    html[data-motion-owner] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"],
    html[data-embed="true"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"],
    html[data-share-playback="true"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"],
    html[data-document-hidden="true"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] {
      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"] .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"] .overview-map-live,
    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"] .overview-map-live {
      animation: none !important;
    }

    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 { display: none !important; }

    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;
    }

    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;
      width: 100%;
      min-width: min(900px, 100%);
      display: block;
      transform-origin: 0 0;
      transition: transform 0.18s ease;
    }

    .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; }

    .diagram-nav {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 12;
      translate: 0 calc(-1 * var(--archify-dock-lift, 0px));
      display: inline-flex;
      align-items: center;
      max-width: calc(100% - 2rem);
      padding: 0.25rem;
      gap: 0.0625rem;
      overflow-x: auto;
      border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent);
      border-radius: 0.75rem;
      background: color-mix(in srgb, var(--panel) 84%, transparent);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px -14px rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(14px) saturate(1.2);
      scrollbar-width: none;
    }
    .diagram-nav::-webkit-scrollbar { display: none; }
    .diagram-nav button,
    .focus-chip button {
      border: 0;
      background: transparent;
      color: var(--toolbar-text);
      font: inherit;
      cursor: pointer;
    }
    .diagram-nav button {
      min-width: 2rem;
      height: 2rem;
      padding: 0 0.4rem;
      border-radius: 0.5rem;
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0;
      transition: background 0.15s, color 0.15s;
    }
    .diagram-nav button:hover,
    .diagram-nav button:focus-visible {
      color: var(--text);
      background: color-mix(in srgb, var(--text) 6%, transparent);
    }
    .diagram-nav button:hover,
    .diagram-nav button:focus-visible,
    .focus-chip button:hover,
    .focus-chip button:focus-visible { background: var(--toolbar-hover); }
    .diagram-nav button:focus-visible,
    .focus-chip button:focus-visible {
      outline: 2px solid var(--frontend-stroke);
      outline-offset: 1px;
    }
    .diagram-nav button:disabled { opacity: 0.38; cursor: default; }
    /* The Guide stays on the ? shortcut; Map only earns dock space once the
       reader has zoomed past the full diagram (or opened it from the keyboard). */
    .diagram-nav button[hidden] { display: none; }
    .diagram-container:not(.is-pannable) #btn-overview-map:not([data-radar-requested]):not(:focus) { display: none; }
    .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.6rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .diagram-nav #btn-node-finder,
    .diagram-nav [data-view="out"] {
      position: relative;
      margin-left: 0.375rem;
    }
    .diagram-nav #btn-node-finder::before,
    .diagram-nav [data-view="out"]::before {
      position: absolute;
      top: 0.55rem;
      bottom: 0.55rem;
      left: -0.19rem;
      width: 1px;
      background: color-mix(in srgb, var(--panel-border) 90%, transparent);
      content: "";
      pointer-events: none;
    }
    .diagram-nav-icon {
      display: block;
      width: 0.875rem;
      height: 0.875rem;
      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: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }
    /* Mode buttons carry a small glyph so the dock reads as one icon language. */
    .diagram-nav #btn-route-probe,
    .diagram-nav #btn-overview-map,
    .diagram-nav #btn-semantic-lens {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding-inline: 0.55rem 0.65rem;
    }
    .diagram-nav #btn-route-probe::before,
    .diagram-nav #btn-overview-map::before,
    .diagram-nav #btn-semantic-lens::before {
      flex: none;
      width: 0.875rem;
      height: 0.875rem;
      background: currentColor;
      content: "";
      opacity: 0.85;
      -webkit-mask: var(--nav-glyph) center / contain no-repeat;
      mask: var(--nav-glyph) center / contain no-repeat;
    }
    .diagram-nav #btn-route-probe { --nav-glyph: 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='4.8' cy='14.8' r='2.2'/%3E%3Ccircle cx='15.2' cy='5.2' r='2.2'/%3E%3Cpath d='M6.9 13.9c3.8-1.4 2.6-6.3 6.2-7.8'/%3E%3C/g%3E%3C/svg%3E"); }
    .diagram-nav #btn-overview-map { --nav-glyph: 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-linejoin='round'%3E%3Cpath d='M2.8 5.4 7.4 3.5l5.2 2 4.6-1.9v11l-4.6 1.9-5.2-2-4.6 1.9z'/%3E%3Cpath d='M7.4 3.5v11M12.6 5.5v11'/%3E%3C/g%3E%3C/svg%3E"); }
    .diagram-nav #btn-semantic-lens { --nav-glyph: 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'%3E%3Ccircle cx='10' cy='10' r='6.8'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); }
    /* Zoom out / level / zoom in join into one stepper well. */
    .diagram-nav [data-view="out"],
    .diagram-nav [data-view="reset"],
    .diagram-nav [data-view="in"] {
      border-radius: 0;
      background: color-mix(in srgb, var(--text) 4.5%, transparent);
    }
    .diagram-nav [data-view="out"] { margin-left: 0.375rem; border-radius: 0.5rem 0 0 0.5rem; }
    .diagram-nav [data-view="out"]::before { display: none; }
    .diagram-nav [data-view="reset"],
    .diagram-nav [data-view="in"] { margin-left: -0.0625rem; }
    .diagram-nav [data-view="in"] { border-radius: 0 0.5rem 0.5rem 0; }
    .diagram-nav [data-view="out"]:hover,
    .diagram-nav [data-view="reset"]:hover,
    .diagram-nav [data-view="in"]:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
    .diagram-nav [data-view="out"]:disabled,
    .diagram-nav [data-view="in"]:disabled { opacity: 1; color: color-mix(in srgb, var(--text-muted) 40%, transparent); }
    .diagram-nav [data-view="out"]:disabled:hover,
    .diagram-nav [data-view="in"]:disabled:hover { background: color-mix(in srgb, var(--text) 4.5%, transparent); }
    .diagram-nav [data-view="reset"] { min-width: 3.25rem; }
    .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: calc(4.15rem + var(--archify-nav-reserve));
      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%);
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .overview-map[data-panel-dragging="true"] .overview-map-head { cursor: grabbing; }
    .overview-map[data-placement-invalid="true"] {
      border-color: var(--security-stroke);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--security-stroke) 34%, transparent), 0 16px 42px rgba(0, 0, 0, 0.3);
    }
    .overview-map[data-compact="true"] {
      width: 7.4rem;
    }
    .overview-map[data-compact="true"] .overview-map-head {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.24rem;
      min-height: 1.5rem;
      padding: 0.05rem 0.16rem 0.05rem 0.32rem;
      border-bottom: 0;
    }
    .overview-map[data-compact="true"] .overview-map-live,
    .overview-map[data-compact="true"] .overview-map-copy,
    .overview-map[data-compact="true"] .overview-map-surface,
    .overview-map[data-compact="true"] .overview-map-hint {
      display: none;
    }
    .overview-map[data-compact="true"] .overview-map-expand { display: inline-flex; }
    .overview-map[data-compact="true"] .overview-map-close {
      width: 1.15rem;
      height: 1.15rem;
      font-size: 0.72rem;
    }
    .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-expand {
      display: none;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 1.2rem;
      padding: 0 0.34rem;
      overflow: hidden;
      border: 0;
      border-radius: 0.3rem;
      background: transparent;
      color: var(--frontend-stroke);
      font: inherit;
      font-size: 0.49rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
    }
    .overview-map-close {
      width: 1.55rem;
      height: 1.55rem;
      padding: 0;
      border: 0;
      border-radius: 0.34rem;
      background: transparent;
      color: var(--toolbar-text);
      font: inherit;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .overview-map-expand:hover,
    .overview-map-expand:focus-visible,
    .overview-map-close:hover,
    .overview-map-close:focus-visible { background: var(--toolbar-hover); }
    .overview-map-expand:focus-visible,
    .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%;
      height: 100%;
      min-width: 0;
      transform: none !important;
      transition: none !important;
      display: block;
      overflow: visible;
    }
    .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;
    }
    .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.49rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .diagram-nav #btn-overview-map[aria-expanded="true"] {
      color: var(--frontend-stroke);
      background: color-mix(in srgb, var(--frontend-stroke) 11%, transparent);
    }
    .overview-map-feedback {
      position: absolute;
      right: 1rem;
      bottom: 4.15rem;
      z-index: 13;
      max-width: min(16rem, calc(100% - 2rem));
      padding: 0.38rem 0.55rem;
      border: 1px solid color-mix(in srgb, var(--frontend-stroke) 52%, var(--toolbar-border));
      border-radius: 0.5rem;
      background: var(--toolbar-menu-bg);
      color: var(--toolbar-text);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      font-size: 0.52rem;
      line-height: 1.35;
      pointer-events: none;
    }
    .overview-map-feedback[hidden] { display: none; }
    .focus-chip[data-radar-yielded="true"] { display: none !important; }
    .diagram-nav #btn-route-probe[aria-pressed="true"] {
      color: var(--backend-stroke);
      background: color-mix(in srgb, var(--backend-stroke) 11%, transparent);
    }
    .diagram-nav #btn-semantic-lens[aria-expanded="true"],
    .diagram-nav #btn-semantic-lens[aria-pressed="true"] {
      color: var(--database-stroke);
      background: color-mix(in srgb, var(--database-stroke) 11%, transparent);
    }

    /* 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: calc(4.15rem + var(--archify-nav-reserve));
      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;
    }
    .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);
      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); }
    }

    /* 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: calc(1rem + var(--archify-nav-reserve));
      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.75rem;
    }
    .route-probe[hidden] { display: none; }
    /* Picking needs one line of guidance, not a wide empty card; the panel
       widens only when there is a traced route to show. */
    .route-probe:not([data-state="result"]) { width: min(22rem, calc(100% - 2rem)); min-width: 0; }
    .route-probe-path:has(> .route-probe-placeholder:only-child) { display: none; }
    .route-probe[data-route-dock="top"] {
      top: 1rem;
      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.625rem 0.75rem 0.5rem;
      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.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .route-probe-title {
      display: block;
      margin-top: 0.14rem;
      overflow: hidden;
      color: var(--toolbar-text);
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.3;
      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);
      font-size: 0.56rem;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .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;
    }
    html[data-preset="blueprint"] .route-probe-node[aria-current="step"] {
      border-style: double;
      border-width: 3px;
      border-radius: 0.2rem;
      box-shadow: none;
    }
    .route-probe-arrow {
      flex: none;
      padding: 0 0.28rem;
      color: var(--text-faint);
      font-size: 0.65rem;
    }
    .route-probe-placeholder {
      color: var(--text-faint);
      font-size: 0.75rem;
    }
    .route-probe-status {
      display: block;
      min-height: 1.45rem;
      padding: 0.5rem 0.75rem 0.625rem;
      color: var(--text-muted, var(--text-faint));
      font-size: 0.75rem;
      line-height: 1.45;
    }
    .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;
    }
    .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;
    }
    .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 {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 0.75rem;
      padding: 0.9rem 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-drag-handle {
      position: absolute;
      top: 0.12rem;
      left: 50%;
      width: 2.5rem;
      height: 0.78rem;
      padding: 0 !important;
      transform: translateX(-50%);
      color: var(--text-faint) !important;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .relationship-lens-drag-handle::before {
      content: "";
      display: block;
      width: 1.25rem;
      margin: auto;
      border-top: 2px dotted currentColor;
      opacity: 0.72;
    }
    .focus-chip[data-panel-dragging="true"] .relationship-lens-drag-handle { cursor: grabbing; }
    @media (hover: none), (pointer: coarse) {
      .relationship-lens-drag-handle { display: none; }
    }
    .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 [data-passport="brand"] {
      border-color: color-mix(in srgb, var(--messagebus-stroke) 52%, var(--toolbar-border));
      color: var(--messagebus-stroke);
      font-weight: 700;
    }
    .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;
    }
    a.semantic-passport-source:hover,
    a.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="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;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }

    .card {
      background: var(--panel);
      border-radius: 0.75rem;
      border: 1px solid var(--panel-border);
      padding: 1.125rem 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;
        padding-bottom: calc(0.875rem + var(--archify-nav-reserve));
      }
      .cards { margin-top: 1rem; }
      .card { padding: 1rem; }
    }
    @media (min-width: 768px) and (max-height: 920px) {
      body { padding-block: 1.25rem; }
      body { --archify-page-top: 1.25rem; }
      .header { margin-bottom: 0.875rem; }
      .cards { margin-top: 0.75rem; }
      html[data-nav-stage-rail="true"] body { padding-block: 0.375rem; }
      /* Align the fixed toolbar with the compact title row. Reserve its hit area
         above the guide without taking extra height from a fitted diagram. */
      html[data-nav-stage-rail="true"] .toolbar { top: 0.25rem; }
      html[data-nav-stage-rail="true"] .header { min-height: 2.625rem; margin-bottom: 0.5rem; }
      html[data-nav-stage-rail="true"] .diagram-container[data-nav-stage-rail="true"] { padding-top: 0.5rem; }
      html[data-nav-stage-rail="true"] .cards { margin-top: 0.375rem; }
    }

    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); }

    /* Summary rail: the reader measures the viewport and enables it only when the
       diagram keeps its readable width beside the notes. */
    .reader-rail { display: contents; }
    html[data-reader-rail="true"] .container {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--archify-rail-width);
      grid-auto-flow: row dense;
      column-gap: var(--archify-rail-gap);
      align-items: start;
    }
    html[data-reader-rail="true"] .container > .header { grid-column: 1 / -1; }
    html[data-reader-rail="true"] .container > .diagram-container { grid-column: 1; }
    /* The rail is at least the diagram's height and may run on to the viewport
       floor (--archify-rail-max, set by the reader); past that, notes scroll and
       the index keeps a usable share instead of collapsing to its header. */
    html[data-reader-rail="true"] .reader-rail {
      display: flex;
      flex-direction: column;
      grid-column: 2;
      align-self: stretch;
      min-height: 0;
      max-height: var(--archify-rail-max, none);
    }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards:empty { display: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards {
      display: flex;
      flex: 0 1 auto;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      margin-top: 0;
      padding: 0.125rem 0 0;
      overflow-y: auto;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent);
    }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards::-webkit-scrollbar { display: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card { flex: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card {
      padding: 0 0.25rem 1.125rem;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card + .card {
      padding-top: 1.125rem;
      border-top: 1px solid var(--panel-border);
    }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card::before { display: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .card-header { gap: 0.55rem; margin-bottom: 0.45rem; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card h3 { font-size: 0.875rem; letter-spacing: -0.005em; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards .card ul { font-size: 0.8125rem; line-height: 1.6; }

    .node-outline { display: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .node-outline:not([hidden]) {
      display: flex;
      flex: 1 0 min(13rem, 55%);
      flex-direction: column;
      min-height: 0;
      margin-top: 0.25rem;
      overflow: hidden;
      border-top: 1px solid var(--panel-border);
    }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"]) .cards:empty + .node-outline:not([hidden]) { margin-top: 0; border-top: 0; }
    /* Collapsed: only the reveal control remains, so the diagram takes the width. */
    html[data-reader-rail="collapsed"] .reader-rail { display: none; }
    /* Overlay: a drawer for diagrams whose readable floor leaves no room to dock. */
    html[data-reader-rail="overlay"] .reader-rail {
      position: fixed;
      z-index: 150;
      top: 1rem;
      right: 1rem;
      bottom: 1rem;
      display: flex;
      flex-direction: column;
      width: var(--archify-rail-width);
      padding: 0.75rem 1rem 0.5rem;
      border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
      border-radius: 1rem;
      background: var(--toolbar-menu-bg);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 28px 64px -18px rgba(15, 23, 42, 0.38);
      animation: rail-drawer-in 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes rail-drawer-in {
      from { opacity: 0; transform: translateX(0.75rem); }
      to { opacity: 1; transform: translateX(0); }
    }
    /* Bottom (default): the notes keep their full-width card row and the index
       follows as one panel whose groups flow into columns, so nothing scrolls
       inside it. The placement toggle sits in the index header. */
    html[data-reader-rail="bottom"] .reader-rail {
      display: grid;
      grid-template-areas: "cards" "index";
      grid-template-columns: minmax(0, 1fr);
      row-gap: 1rem;
      margin-top: 1rem;
    }
    html[data-reader-rail="bottom"] .cards { grid-area: cards; margin-top: 0; }
    html[data-reader-rail="bottom"] .cards:empty { display: none; }
    html[data-reader-rail="bottom"] .node-outline:not([hidden]) {
      display: block;
      grid-area: index;
      padding: 0 1.25rem 0.75rem;
      border: 1px solid var(--panel-border);
      border-radius: 0.75rem;
      background: var(--panel);
    }
    html[data-reader-rail="bottom"] .reader-rail > .rail-controls {
      z-index: 1;
      grid-area: index;
      align-self: start;
      justify-self: end;
      margin: 0.625rem 0.625rem 0 0;
    }
    html[data-reader-rail="bottom"] .node-outline-head { padding: 1rem 2.5rem 0.375rem 0.25rem; }
    html[data-reader-rail="bottom"] .node-outline-list {
      columns: 15rem;
      column-gap: 1.75rem;
      padding: 0;
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
    }
    /* Named groups stay whole; a single unnamed group may split across columns,
       where a continuous spine would read as a broken line. */
    html[data-reader-rail="bottom"] .node-outline-group + .node-outline-group { margin-top: 0; }
    html[data-reader-rail="bottom"] .node-outline-group:has(> .node-outline-heading) { break-inside: avoid; padding-bottom: 0.25rem; }
    html[data-reader-rail="bottom"] .node-outline-group:not(:has(> .node-outline-heading)) > ul::before { display: none; }
    html[data-reader-rail="bottom"] .node-outline-group li { break-inside: avoid; }
    .rail-controls { display: none; }
    html:is([data-reader-rail="true"], [data-reader-rail="overlay"], [data-reader-rail="bottom"]) .rail-controls {
      display: flex;
      flex: none;
      justify-content: flex-end;
      gap: 0.125rem;
      margin: -0.25rem -0.25rem 0.25rem 0;
    }
    .rail-control {
      display: inline-grid;
      place-items: center;
      width: 1.875rem;
      height: 1.875rem;
      border: 0;
      border-radius: 0.5rem;
      background: transparent;
      color: var(--text-faint);
      cursor: pointer;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .rail-control[hidden] { display: none; }
    .rail-control:hover,
    .rail-control:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
    .rail-control:focus-visible { outline: 1.5px solid color-mix(in srgb, var(--frontend-stroke) 60%, transparent); outline-offset: -1.5px; }
    .rail-control-icon,
    .rail-reveal-icon {
      width: 1rem;
      height: 1rem;
      background: currentColor;
      -webkit-mask: var(--rail-glyph) center / contain no-repeat;
      mask: var(--rail-glyph) center / contain no-repeat;
    }
    /* Panel glyphs: a frame with the panel drawn on the side it moves to. */
    .rail-control-icon.placement,
    #rail-placement[data-placement="right"] .rail-control-icon { --rail-glyph: 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.6'%3E%3Crect x='2.8' y='3.8' width='14.4' height='12.4' rx='2'/%3E%3Cpath d='M2.8 12h14.4'/%3E%3C/g%3E%3C/svg%3E"); }
    #rail-placement[data-placement="bottom"] .rail-control-icon { --rail-glyph: 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.6'%3E%3Crect x='2.8' y='3.8' width='14.4' height='12.4' rx='2'/%3E%3Cpath d='M12.6 3.8v12.4'/%3E%3C/g%3E%3C/svg%3E"); }
    .rail-control-icon.collapse { --rail-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m8 5.5 4.5 4.5L8 14.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .rail-reveal-icon { --rail-glyph: 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.6'%3E%3Crect x='2.8' y='3.8' width='14.4' height='12.4' rx='2'/%3E%3Cpath d='M12.6 3.8v12.4M14.4 7.2h1M14.4 9.6h1M14.4 12h1'/%3E%3C/g%3E%3C/svg%3E"); }
    .rail-reveal[hidden] { display: none; }
    /* The collapsed rail leaves one quiet pill in the canvas corner. */
    .rail-reveal {
      position: absolute;
      z-index: 13;
      top: 0.75rem;
      right: 0.75rem;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      min-height: 2rem;
      padding: 0 0.75rem 0 0.625rem;
      border: 1px solid color-mix(in srgb, var(--panel-border) 85%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      color: var(--text-muted);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px -12px rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(12px);
      font: inherit;
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.14s ease, background 0.14s ease;
    }
    .rail-reveal:hover,
    .rail-reveal:focus-visible { color: var(--text); background: var(--panel); }
    .rail-reveal:focus-visible { outline: 1.5px solid color-mix(in srgb, var(--frontend-stroke) 60%, transparent); outline-offset: 2px; }
    html[data-motion="still"] .reader-rail { animation: none !important; }
    .node-outline-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1.125rem 0.25rem 0.375rem;
    }
    .node-outline-head strong {
      color: var(--text);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
    .node-outline-count {
      min-width: 1.35rem;
      padding: 0.1rem 0.4rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--text) 6%, transparent);
      color: var(--text-muted);
      font-size: 0.6875rem;
      font-weight: 600;
      line-height: 1.3;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .node-outline-list {
      flex: 1 1 auto;
      min-height: 0;
      margin: 0 -0.375rem;
      padding: 0 0 1.25rem;
      overflow-y: auto;
      list-style: none;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
    }
    .node-outline-list::-webkit-scrollbar { display: none; }
    .node-outline-group + .node-outline-group { margin-top: 0.25rem; }
    .node-outline-group > ul {
      position: relative;
      list-style: none;
    }
    /* A quiet spine ties each group's swatches together like a lane. */
    .node-outline-group > ul::before {
      position: absolute;
      top: 0.95rem;
      bottom: 0.95rem;
      left: calc(0.625rem + 0.3125rem - 0.5px);
      width: 1px;
      background: var(--panel-border);
      content: "";
    }
    .node-outline-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 0.7rem 0.625rem 0.25rem;
      color: var(--text-faint);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .node-outline-heading small {
      color: var(--text-dim);
      font-size: 0.6875rem;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    /* The rail frees the vertical budget, so compact viewports keep the normal
       title spacing instead of the stacked layout's tight stage rail. */
    html[data-reader-rail]:not([data-reader-rail="bottom"]) body { --archify-page-top: 1.5rem; padding-block: 1.5rem; }
    html[data-reader-rail]:not([data-reader-rail="bottom"]) .toolbar { top: calc(var(--archify-page-top) - 0.1875rem); }
    html[data-reader-rail]:not([data-reader-rail="bottom"]) .header { min-height: 0; margin-bottom: 1.125rem; }
    .node-outline-item {
      position: relative;
      display: grid;
      grid-template-columns: 0.625rem minmax(0, auto) minmax(0, 1fr) 0.75rem;
      align-items: center;
      column-gap: 0.625rem;
      width: 100%;
      min-height: 1.95rem;
      padding: 0.28rem 0.5rem 0.28rem 0.625rem;
      border: 0;
      border-radius: 0.5rem;
      background: transparent;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 0.16s ease;
    }
    /* Trailing chevron hints that a click focuses the node. */
    .node-outline-item::after {
      grid-column: 4;
      width: 0.75rem;
      height: 0.75rem;
      background: currentColor;
      color: var(--text-muted);
      content: "";
      opacity: 0;
      transform: translateX(-3px);
      transition: opacity 0.16s ease, transform 0.16s ease;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4.5 3 3 3-3 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4.5 3 3 3-3 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .node-outline-item:hover,
    .node-outline-item:focus-visible,
    .node-outline-item[data-previewing] { background: color-mix(in srgb, var(--text) 4.5%, transparent); }
    .node-outline-item:hover::after,
    .node-outline-item:focus-visible::after { opacity: 0.7; transform: translateX(0); }
    .node-outline-item:focus-visible { outline: 1.5px solid color-mix(in srgb, var(--outline-tone) 60%, transparent); outline-offset: -1.5px; }
    .node-outline-item[aria-current="true"] { background: color-mix(in srgb, var(--outline-tone) 10%, transparent); }
    .node-outline-item[aria-current="true"]::after { opacity: 0; }
    /* Swatches echo the diagram's node cards: tinted fill, hairline stroke. */
    .node-outline-dot {
      width: 0.625rem;
      height: 0.5rem;
      border: 1.25px solid var(--outline-tone);
      border-radius: 0.15rem;
      background: color-mix(in srgb, var(--outline-tone) 16%, var(--bg));
      transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }
    .node-outline-item:hover .node-outline-dot,
    .node-outline-item:focus-visible .node-outline-dot,
    .node-outline-item[data-previewing] .node-outline-dot,
    .node-outline-item[aria-current="true"] .node-outline-dot {
      background: var(--outline-tone);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--outline-tone) 18%, transparent);
      transform: scale(1.08);
    }
    .node-outline-item strong {
      overflow: hidden;
      font-size: 0.8125rem;
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .node-outline-item[aria-current="true"] strong { font-weight: 600; }
    .node-outline-item small {
      overflow: hidden;
      color: var(--text-faint);
      font-size: 0.6875rem;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color 0.16s ease;
    }
    .node-outline-item:hover small,
    .node-outline-item[data-previewing] small,
    .node-outline-item[aria-current="true"] small { color: var(--text-muted); }

    .card-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.625rem;
    }

    .card-dot {
      flex: none;
      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.9375rem; font-weight: 600; line-height: 1.4; color: var(--text); }

    .card ul {
      list-style: none;
      color: var(--text-muted);
      font-size: 0.8125rem;
      line-height: 1.6;
    }

    .card li {
      position: relative;
      margin-bottom: 0.3rem;
      padding-left: 0.9rem;
    }
    .card li:last-child { margin-bottom: 0; }
    /* Hanging markers take the card's tone so wrapped lines align under text. */
    .card li::before {
      position: absolute;
      top: calc(0.8em - 2px);
      left: 0.2rem;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--card-tone, var(--text-muted)) 70%, transparent);
      content: "";
    }
    .card:has(.card-dot.cyan)    { --card-tone: var(--frontend-stroke); }
    .card:has(.card-dot.emerald) { --card-tone: var(--backend-stroke); }
    .card:has(.card-dot.violet)  { --card-tone: var(--database-stroke); }
    .card:has(.card-dot.amber)   { --card-tone: var(--cloud-stroke); }
    .card:has(.card-dot.rose)    { --card-tone: var(--security-stroke); }
    .card:has(.card-dot.orange)  { --card-tone: var(--messagebus-stroke); }
    .card:has(.card-dot.slate)   { --card-tone: var(--external-stroke); }
    .card-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-tone, transparent) 16%, transparent); }

    /* ==========================================================
       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, .archify-toast, .no-print { display: none !important; }
      
      .diagram-container, .card { box-shadow: none; border-color: #e2e8f0; }
      .diagram-container { --archify-nav-reserve: 0px !important; }
      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; }
      .diagram-container svg[data-focus-active] [data-node-id],
      .diagram-container svg[data-focus-active] [data-edge-from],
      .diagram-container svg[data-focus-active] [data-graph-role="automatic-crossover-underlay"],
      .diagram-container svg[data-reach-active] [data-node-id],
      .diagram-container svg[data-reach-active] [data-edge-from],
      .diagram-container svg[data-reach-active] [data-graph-role="automatic-crossover-underlay"],
      .diagram-container svg[data-route-active] [data-node-id],
      .diagram-container svg[data-route-active] [data-edge-from],
      .diagram-container svg[data-route-active] [data-graph-role="automatic-crossover-underlay"] {
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
      }
      h1, .subtitle { color: #0f172a; }
    }

    /* ==========================================================
       TOOLBAR (theme toggle + export menu)
       ========================================================== */
    /* The toolbar tracks the centered reader column and the title row, so
       an adaptive narrow reader does not leave its controls stranded at the
       viewport edge. */
    .toolbar {
      position: absolute;
      top: var(--archify-page-top);
      right: max(1rem, calc((100vw - min(100vw - 4rem, var(--archify-reader-width, 1440px))) / 2));
      display: flex;
      align-items: center;
      gap: 0.125rem;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      z-index: 100;
    }
    /* Ghost controls keep a 44px hit area while the visible pill stays compact;
       Export is the one primary action. */
    .toolbar button {
      position: relative;
      isolation: isolate;
      background: transparent;
      color: var(--text-muted);
      border: 0;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5625rem;
      font-family: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: none;
      transition: color 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 2.75rem;
    }
    .toolbar button::before {
      position: absolute;
      z-index: -1;
      inset: 0.375rem 0;
      border-radius: 0.5rem;
      background: transparent;
      content: "";
      transition: background 0.15s, box-shadow 0.15s;
    }
    .toolbar button:hover { color: var(--text); }
    .toolbar button:hover::before { background: color-mix(in srgb, var(--text) 6%, transparent); }
    .toolbar button[aria-expanded="true"],
    .toolbar button[aria-pressed="true"]:not(#btn-theme) { color: var(--text); }
    .toolbar button[aria-expanded="true"]::before,
    .toolbar button[aria-pressed="true"]:not(#btn-theme)::before {
      background: color-mix(in srgb, var(--text) 8%, transparent);
    }
    .toolbar #btn-export {
      margin-left: 0.375rem;
      padding-right: 0.95rem;
      padding-left: 1rem;
      color: var(--bg);
      font-weight: 550;
    }
    .toolbar #btn-export::before {
      background: var(--text);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -8px rgba(15, 23, 42, 0.4);
    }
    .toolbar #btn-export:hover,
    .toolbar #btn-export[aria-expanded="true"] { color: var(--bg); }
    .toolbar #btn-export:hover::before,
    .toolbar #btn-export[aria-expanded="true"]::before { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
    .toolbar button:focus-visible {
      outline: 2px solid var(--frontend-stroke);
      outline-offset: -4px;
    }
    .toolbar { gap: 0.5rem; }
    .toolbar #btn-export { margin-left: 0; }
    .toolbar #btn-export::before { inset: 0.25rem 0; border-radius: 0.6875rem; }
    /* Tools share one quiet capsule; the capsule is drawn inside the 44px row
       so the controls keep their hit area without a tall visible box. */
    .toolbar-group {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: center;
      gap: 0.0625rem;
      padding: 0 0.25rem;
    }
    .toolbar-group::before {
      position: absolute;
      z-index: -1;
      inset: 0.25rem 0;
      border: 1px solid color-mix(in srgb, var(--panel-border) 85%, transparent);
      border-radius: 0.6875rem;
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -14px rgba(15, 23, 42, 0.22);
      backdrop-filter: blur(12px);
      content: "";
    }
    .toolbar-group button { padding-inline: 0.625rem; }
    .toolbar-group button::before { inset: 0.5rem 0; border-radius: 0.5rem; }
    /* Theme becomes a sliding switch; its label stays for assistive tech. */
    .toolbar #theme-label,
    .toolbar #present-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .toolbar #btn-theme {
      width: 3.5rem;
      padding: 0;
      justify-content: center;
    }
    .toolbar #btn-theme::before {
      inset: 0.75rem 0.4375rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--text) 9%, transparent);
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .toolbar #btn-theme:hover::before { background: color-mix(in srgb, var(--text) 13%, transparent); }
    .toolbar #btn-theme::after {
      position: absolute;
      z-index: 0;
      top: 50%;
      left: 0.5625rem;
      width: 1.125rem;
      height: 1.125rem;
      border-radius: 50%;
      background: var(--panel);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.12);
      content: "";
      transform: translateY(-50%);
      transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .toolbar #theme-icon {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: calc(0.5625rem + 0.1875rem);
      width: 0.75rem;
      height: 0.75rem;
      color: var(--cloud-stroke);
      transform: translateY(-50%);
      transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-theme="dark"] .toolbar #btn-theme::before { background: rgba(148, 163, 184, 0.16); }
    [data-theme="dark"] .toolbar #btn-theme::after { left: calc(100% - 0.5625rem - 1.125rem); background: #3b4a63; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
    [data-theme="dark"] .toolbar #theme-icon { left: calc(100% - 0.5625rem - 1.125rem + 0.1875rem); color: #c7d2fe; }
    .toolbar #btn-present { width: 2.5rem; padding: 0; justify-content: center; }
    .toolbar #btn-present .toolbar-icon { width: 1rem; height: 1rem; }
    html[data-motion="still"] .toolbar #btn-theme::after,
    html[data-motion="still"] .toolbar #theme-icon { transition: none; }
    html[data-present="true"]:not([data-embed="true"]) .toolbar { right: 1rem; }
    html[data-preset="editorial"] .toolbar { border-radius: 0.45rem; }
    .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);
    }
    /* Menus anchor to the tools capsule so they open flush under it. */
    .toolbar-group .preset-wrap { position: static; }
    .toolbar .preset-menu {
      position: absolute;
      top: calc(100% + 0.125rem);
      right: 0;
      display: none;
      width: 17.5rem;
      max-width: calc(100vw - 2rem);
      padding: 0.375rem;
      border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
      border-radius: 0.875rem;
      background: var(--toolbar-menu-bg);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 44px -14px rgba(15, 23, 42, 0.3);
    }
    [data-theme="dark"] .toolbar .preset-menu,
    [data-theme="dark"] .toolbar .export-menu {
      border-color: rgba(148, 163, 184, 0.16);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -12px rgba(0, 0, 0, 0.6);
    }
    /* Menu rows are not toolbar pills: drop the ghost-button pseudo surface. */
    .toolbar .preset-menu button,
    .toolbar .export-menu button { isolation: auto; min-height: 0; }
    .toolbar .preset-menu button::before { display: none; }
    .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: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.45rem 0.55rem 0.4rem;
      color: var(--text-faint);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .preset-menu-shortcut {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-weight: 500;
    }
    .preset-menu-shortcut kbd {
      min-width: 1.125rem;
      padding: 0.05rem 0.3rem;
      border: 1px solid var(--panel-border);
      border-bottom-width: 2px;
      border-radius: 0.3rem;
      background: color-mix(in srgb, var(--text) 3%, var(--toolbar-menu-bg));
      color: var(--text-muted);
      font-family: inherit;
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 1.3;
      text-align: center;
    }
    .toolbar .preset-option {
      display: grid;
      grid-template-columns: 2.375rem minmax(0, 1fr) 1rem;
      align-items: center;
      gap: 0.75rem;
      width: 100%;
      min-height: 3.125rem;
      margin-top: 0.125rem;
      padding: 0.45rem 0.6rem 0.45rem 0.5rem;
      border: 0;
      border-radius: 0.625rem;
      background: transparent;
      color: var(--text);
      box-shadow: none;
      backdrop-filter: none;
      text-align: left;
      transition: background 0.14s ease;
    }
    .toolbar .preset-option:hover,
    .toolbar .preset-option:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
    .toolbar .preset-option[aria-checked="true"] { background: color-mix(in srgb, var(--frontend-stroke) 8%, transparent); }
    .toolbar .preset-option:focus-visible {
      outline: 1.5px solid color-mix(in srgb, var(--frontend-stroke) 55%, transparent);
      outline-offset: -1.5px;
    }
    .preset-option-swatch {
      position: relative;
      width: 2.375rem;
      height: 1.75rem;
      overflow: hidden;
      border: 0;
      border-radius: 0.4375rem;
      background: #0f172a;
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28), 0 1px 2px rgba(15, 23, 42, 0.12);
      transition: box-shadow 0.14s ease, transform 0.14s ease;
    }
    .toolbar .preset-option:hover .preset-option-swatch { transform: translateY(-1px); }
    .toolbar .preset-option[aria-checked="true"] .preset-option-swatch {
      box-shadow: 0 0 0 2px var(--toolbar-menu-bg), 0 0 0 3.5px var(--frontend-stroke);
    }
    .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);
    }
    /* Classic previews the canvas it will actually produce in this theme. */
    [data-theme="light"] .preset-option-swatch.classic {
      background:
        radial-gradient(circle at 1px 1px, #d9dee5 0.6px, transparent 0.9px) 0 0 / 5px 5px,
        #ffffff;
    }
    [data-theme="light"] .preset-option-swatch.classic::before {
      border-color: #1b87a3;
      background: rgba(14, 116, 144, 0.08);
      box-shadow: 0 2px 4px rgba(17, 24, 39, 0.12);
    }
    .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(--text);
      font-size: 0.8125rem;
      font-weight: 550;
      letter-spacing: -0.005em;
    }
    .toolbar .preset-option[aria-checked="true"] .preset-option-copy strong { font-weight: 650; }
    .preset-option-copy small {
      margin-top: 0.125rem;
      overflow: hidden;
      color: var(--text-faint);
      font-size: 0.6875rem;
      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 {
      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.125rem);
      right: 0;
      background: var(--toolbar-menu-bg);
      border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
      width: 19rem;
      max-width: calc(100vw - 2rem);
      max-height: calc(100vh - 5.5rem);
      overflow-y: auto;
      border-radius: 0.875rem;
      padding: 0.375rem;
      display: none;
      flex-direction: column;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 44px -14px rgba(15, 23, 42, 0.3);
      scrollbar-width: thin;
    }
    .toolbar .export-menu.open { display: flex; }
    .export-menu-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.55rem 0.6rem 0.6rem;
    }
    .export-menu-header strong,
    .export-menu-header span { display: block; }
    .export-menu-header strong {
      color: var(--text);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
    .export-menu-header span {
      margin-top: 0.15rem;
      color: var(--text-faint);
      font-size: 0.75rem;
    }
    .export-menu-header kbd {
      min-width: 1.125rem;
      padding: 0.05rem 0.3rem;
      border: 1px solid var(--panel-border);
      border-bottom-width: 2px;
      border-radius: 0.3rem;
      background: color-mix(in srgb, var(--text) 3%, var(--toolbar-menu-bg));
      color: var(--text-muted);
      font-family: inherit;
      font-size: 0.625rem;
      font-weight: 600;
      line-height: 1.3;
      text-align: center;
    }
    .export-menu-section {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.0625rem;
    }
    .export-menu-section + .export-menu-section {
      margin-top: 0.3rem;
      padding-top: 0.3rem;
      border-top: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent);
    }
    .export-menu-heading {
      grid-column: 1 / -1;
      display: block;
      padding: 0.4rem 0.6rem 0.25rem;
      color: var(--text-faint);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .toolbar .export-menu button {
      display: grid;
      grid-template-columns: 1rem minmax(0, 1fr);
      align-items: center;
      column-gap: 0.7rem;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      width: 100%;
      min-height: 2.5rem;
      text-align: left;
      padding: 0.4rem 0.6rem;
      border-radius: 0.5625rem;
      color: var(--text);
      white-space: nowrap;
      transition: background 0.14s ease;
    }
    .toolbar .export-menu button:hover,
    .toolbar .export-menu button:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
    .toolbar .export-menu button:focus-visible {
      outline: 1.5px solid color-mix(in srgb, var(--frontend-stroke) 55%, transparent);
      outline-offset: -1.5px;
    }
    /* Name and format hint share one line, so each row stays compact. */
    .export-item-copy {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      min-width: 0;
    }
    .export-item-copy strong {
      overflow: hidden;
      color: inherit;
      font-size: 0.8125rem;
      font-weight: 500;
      text-overflow: ellipsis;
    }
    .export-item-copy small {
      flex: none;
      color: var(--text-faint);
      font-size: 0.6875rem;
      font-weight: 450;
    }
    .toolbar .export-menu button::before {
      position: static;
      z-index: auto;
      inset: auto;
      border-radius: 0;
      display: block;
      width: 1rem;
      height: 1rem;
      background: currentColor;
      color: var(--text-muted);
      content: "";
      opacity: 0.8;
      -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-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-action="route-share-card"],
    .toolbar .export-menu button[data-action="reach-share-card"] {
      color: var(--text);
      background: color-mix(in srgb, var(--frontend-stroke) 7%, transparent);
    }
    .toolbar .export-menu button[data-action="route-share-card"]::before,
    .toolbar .export-menu button[data-action="reach-share-card"]::before { color: var(--frontend-stroke); opacity: 1; }
    .toolbar .export-menu button[hidden] { display: none; }
    .toolbar .export-menu button[data-action="route-share-card"]:hover,
    .toolbar .export-menu button[data-action="reach-share-card"]:hover {
      background: color-mix(in srgb, var(--frontend-stroke) 12%, transparent);
    }
    .toolbar .export-menu button:disabled {
      color: var(--text-faint);
      background: transparent;
      opacity: 0.55;
      cursor: not-allowed;
    }
    .toolbar .export-menu .hint {
      color: var(--text-faint);
      font-size: 0.6875rem;
    }

    /* 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;
        top: auto;
        right: auto;
        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: var(--archify-radar-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: var(--archify-radar-left, 0.5rem);
      }
      .overview-map-surface { height: 4rem; }
      .overview-map-feedback { right: 0.5rem; bottom: 3.7rem; }
      .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-head { padding-top: 0.7rem; }
      .relationship-lens-drag-handle { display: 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; }
      
      
      
      
      
      
      
      
      
      
      
      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;
      }
      
      .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"]) .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-action="route-share-card"],
      .toolbar .export-menu button[data-action="reach-share-card"] { grid-column: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .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; }
    }

    /* ==========================================================
       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-lane-rule  { stroke: var(--lane-stroke); fill: none; opacity: 0.7; }
    .c-lane-wash  { fill: var(--lane-fill); 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); }

    /* Relationship labels share the exact color token used by their path. */
    .t-edge-default  { fill: var(--arrow); }
    .t-edge-emphasis { fill: var(--arrow-emphasis); }
    .t-edge-security { fill: var(--security-stroke); }
    .t-edge-dashed   { fill: var(--database-stroke); }

    /* Classic canvas: a quiet dot field replaces drafting grid lines, and nodes
       read as lifted cards with hairline strokes. Paint only; authored geometry,
       hit areas and exports keep their canonical shapes. */
    html[data-preset="classic"] .diagram-container {
      background:
        radial-gradient(circle at 1px 1px, var(--canvas-dot) 1px, transparent 1.4px) 0 0 / 20px 20px,
        var(--panel);
    }
    html[data-preset="classic"] .diagram-container > svg .c-grid { stroke: transparent; }
    html[data-preset="classic"][data-theme="light"] .diagram-container > svg [data-node-id] > rect:not(.c-mask) {
      filter: drop-shadow(0 1px 1px rgba(17, 24, 39, 0.05)) drop-shadow(0 6px 12px rgba(17, 24, 39, 0.06));
    }
    html[data-preset="classic"][data-theme="dark"] .diagram-container > svg [data-node-id] > rect:not(.c-mask) {
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    }
    html[data-preset="classic"] .diagram-container > svg [data-edge-from] {
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    html[data-preset="classic"] .diagram-container > svg .c-lane-wash { fill: color-mix(in srgb, var(--text) 2.6%, transparent); }
    html[data-preset="classic"] .diagram-container > svg .c-lane-rule { stroke: var(--panel-border); opacity: 1; }
    html[data-preset="classic"][data-theme="dark"] .diagram-container > svg .c-lane-rule { stroke: rgba(148, 163, 184, 0.16); }
    html[data-preset="classic"] .diagram-container > svg [data-node-id] {
      transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    html[data-preset="classic"]:not([data-motion="still"]) .diagram-container > svg [data-node-id]:hover {
      transform: translateY(-1.5px);
    }

    /* 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); }

    /* Brand Marks are authored identity badges. Their color is contained
       inside one neutral plate so vendor color never replaces Archify's
       semantic node and relationship vocabulary. */
    svg .brand-mark { pointer-events: none; }
    svg .brand-mark-badge { fill: #fff; stroke: none; }
    svg .brand-mark-frame {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 0.8;
      vector-effect: non-scaling-stroke;
    }
    svg .brand-mark-fallback {
      fill: none;
      stroke: #475569;
      stroke-width: 1.15;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    svg[data-preset="blueprint"] .brand-mark-badge,
    svg[data-preset="blueprint"] .brand-mark-frame { rx: 1px; }

    /* 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-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-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, fill-opacity 0.18s ease, stroke-opacity 0.18s ease, filter 0.18s ease;
    }
    svg [data-edge-from],
    svg [data-graph-role="automatic-crossover-underlay"] { 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: 1;
      transition: 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: 7px;
      font-weight: 700;
      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; }
    /* Automatic crossover masks are visual companions of their one semantic
       edge. Keep the mask free of data-edge-* identity so graph traversal and
       export still observe exactly one edge, then mirror reader emphasis from
       the paired foreground path in this presentation-only wrapper. */
    svg[data-legend-preview-active] [data-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"],
    svg[data-lens-active] [data-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.11; }
    svg[data-legend-preview-active] [data-graph-role="automatic-crossover"]:has(> [data-legend-preview-match]) > [data-graph-role="automatic-crossover-underlay"],
    svg[data-lens-active] [data-graph-role="automatic-crossover"]:has(> [data-lens-match]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 1; }
    svg[data-legend-preview-active] [data-graph-role="automatic-crossover"]:has(> [data-legend-preview-peer]) > [data-graph-role="automatic-crossover-underlay"],
    svg[data-lens-active] [data-graph-role="automatic-crossover"]:has(> [data-lens-peer]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.62; }
    svg[data-focus-active] [data-node-id],
    svg[data-focus-active] [data-edge-from] { opacity: 0.13; }
    svg[data-focus-active] [data-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.13; }
    svg[data-focus-active] [data-lifecycle-rail] { opacity: 0; }
    svg[data-focus-active] [data-focus-match] { opacity: 1; }
    svg[data-focus-active] [data-graph-role="automatic-crossover"]:has(> [data-focus-match]) > [data-graph-role="automatic-crossover-underlay"] { 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-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.09; }
    svg[data-reach-active] [data-reach-match] { opacity: 1; }
    svg[data-reach-active] [data-graph-role="automatic-crossover"]:has(> [data-reach-match]) > [data-graph-role="automatic-crossover-underlay"] { 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-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.16; }
    svg[data-relationship-direct-active] [data-relationship-preview],
    svg[data-relationship-direct-active] [data-relationship-preview-node] { opacity: 1; }
    svg[data-relationship-direct-active] [data-graph-role="automatic-crossover"]:has(> [data-relationship-preview]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 1; }
    svg[data-focus-active]:not([data-relationship-pin-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 { 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-graph-role="automatic-crossover"]:has(> [data-focus-match]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.18; }
    svg[data-relationship-preview-active] [data-lifecycle-rail] { opacity: 0; }
    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-graph-role="automatic-crossover"]:has(> [data-relationship-preview]) > [data-graph-role="automatic-crossover-underlay"] { 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;
    }

    .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. */
    /* Keep the node's opaque backing mask intact while its visible ink dims.
       Fading the whole group also fades that mask and briefly exposes arrows
       routed underneath the node when the pointer leaves. */
    svg[data-intent-trace-active] [data-node-id] { fill-opacity: 0.2; stroke-opacity: 0.2; }
    svg [data-node-id] > .c-mask { fill-opacity: 1; }
    svg[data-intent-trace-active] [data-node-id][data-intent-trace-match] { fill-opacity: 1; stroke-opacity: 1; }
    svg[data-intent-trace-active] [data-edge-from] { opacity: 0.2; }
    svg[data-intent-trace-active] [data-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.2; }
    svg[data-intent-trace-active] [data-lifecycle-rail] { opacity: 0; }
    svg[data-intent-trace-active] [data-intent-trace-match] { opacity: 1; }
    svg[data-intent-trace-active] [data-graph-role="automatic-crossover"]:has(> [data-intent-trace-match]) > [data-graph-role="automatic-crossover-underlay"] { 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;
    }
    /* Direction names describe each edge relative to the focused node only.
       The cloned geometry already runs from the authored source to target, so
       incoming and outgoing signals must share the same playback direction. */
    .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: normal;
    }
    .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-graph-role="automatic-crossover"] > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.11; }
    svg[data-route-active] [data-route-match] { opacity: 1; }
    svg[data-route-active] [data-graph-role="automatic-crossover"]:has(> [data-route-match]) > [data-graph-role="automatic-crossover-underlay"] { 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-graph-role="automatic-crossover"]:has(> [data-route-match][data-route-journey-state="past"]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.62; }
    svg[data-route-journey] [data-graph-role="automatic-crossover"]:has(> [data-route-match][data-route-journey-state="future"]) > [data-graph-role="automatic-crossover-underlay"] { opacity: 0.34; }
    svg[data-route-journey] [data-graph-role="automatic-crossover"]:has(> [data-route-match][data-route-journey-state="current"]) > [data-graph-role="automatic-crossover-underlay"] { 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));
    }

    /* 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-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] {
      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-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] { 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-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] { 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-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] { 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 stay static so proof grids are calm 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;
    }
    html[data-embed="true"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"],
    html[data-share-playback="true"] svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] {
      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-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-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;
      }
      svg[data-animation="trace"] [data-graph-role="automatic-crossover"]:has(> [data-animate="edge"]) > [data-graph-role="automatic-crossover-underlay"] {
        animation: none !important;
        stroke-dashoffset: 0;
      }
      .intent-trace-flow,
      .route-probe-flow,
      .semantic-lens,
      .diagram-guide,
      .overview-map-live { animation: none !important; }
      
      .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 { 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; }
      .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; }
    }