<svg viewBox="0 30 940 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>/* transparent-canvas */ :root { background-color: transparent; color-scheme: light dark; }</style>
  <!-- relay pipe (Alice <-> relay <-> Bob); fades blue->gray once the direct path takes over -->
  <path id="relay-path" d="M 200 312 L 200 230 C 200 120 280 66 408 66 L 472 66 C 600 66 680 120 680 230 L 680 312" fill="none" stroke="#2563eb" stroke-width="1.5"><animate attributeName="stroke" dur="39.0s" repeatCount="indefinite" values="#2563eb;#2563eb;#aab2bd;#aab2bd" keyTimes="0;0.7205;0.7462;1"/></path>
  <!-- the direct path: gray as the first packet goes through, blue once validated -->
  <path id="direct" d="M 200 312 L 200 230 C 200 158 680 158 680 230 L 680 312" fill="none" stroke="#aab2bd" stroke-width="1.5" opacity="0"><animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5103;0.5179;0.9872;0.9949;1.0000"/><animate attributeName="stroke" dur="39.0s" repeatCount="indefinite" values="#aab2bd;#aab2bd;#2563eb;#2563eb" keyTimes="0;0.7205;0.7359;1"/></path>
  <!-- local links (phone <-> router) — always blue, drawn AFTER the relay path so the phone↔router segment stays blue even while the relay leg fades to gray -->
  <line x1="200" y1="312" x2="200" y2="230" stroke="#2563eb" stroke-width="1.5"/>
  <line x1="680" y1="312" x2="680" y2="230" stroke="#2563eb" stroke-width="1.5"/>
  <!-- local probe trajectories (invisible; the packets ride them) -->
  <path id="probe-local-a" d="M 200 312 L 200 165" fill="none" stroke="none"/>
  <path id="probe-local-b" d="M 680 312 L 680 165" fill="none" stroke="none"/>

  <g>
    <rect x="408" y="57" width="64" height="18" rx="2" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <line x1="424" y1="60" x2="424" y2="72" stroke="#888" stroke-width="1"/>
    <circle cx="414" cy="63" r="1.5" fill="#d97706"/>
    <circle cx="414" cy="69" r="1.5" fill="#888"/>
    <line x1="432" y1="61" x2="432" y2="71" stroke="#888" stroke-width="1"/>
    <line x1="437" y1="61" x2="437" y2="71" stroke="#888" stroke-width="1"/>
    <line x1="442" y1="61" x2="442" y2="71" stroke="#888" stroke-width="1"/>
    <line x1="447" y1="61" x2="447" y2="71" stroke="#888" stroke-width="1"/>
    <line x1="452" y1="61" x2="452" y2="71" stroke="#888" stroke-width="1"/>
    <line x1="457" y1="61" x2="457" y2="71" stroke="#888" stroke-width="1"/>
    <text x="440" y="91" text-anchor="middle" font-family="'Space Mono', monospace" font-size="13" fill="#111">relay</text>
  </g>

  <g font-family="'Space Mono', monospace" font-size="10" fill="#888">
    <text x="200" y="222" text-anchor="middle">8.3.1.9</text>
    <polyline points="170,265 160,265 160,222" fill="none" stroke="#888" stroke-width="1.5"/>
    <circle cx="160" cy="220" r="1.5" fill="#888"/>
    <polyline points="230,265 240,265 240,222" fill="none" stroke="#888" stroke-width="1.5"/>
    <circle cx="240" cy="220" r="1.5" fill="#888"/>
    <rect x="170" y="230" width="60" height="40" rx="3" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <circle cx="220" cy="264" r="1.5" fill="#d97706"/>
    <text x="200" y="285" text-anchor="middle">10.0.0.1</text>
  </g>

  <g font-family="'Space Mono', monospace" font-size="10" fill="#888">
    <text x="680" y="222" text-anchor="middle">4.9.8.2</text>
    <polyline points="650,265 640,265 640,222" fill="none" stroke="#888" stroke-width="1.5"/>
    <circle cx="640" cy="220" r="1.5" fill="#888"/>
    <polyline points="710,265 720,265 720,222" fill="none" stroke="#888" stroke-width="1.5"/>
    <circle cx="720" cy="220" r="1.5" fill="#888"/>
    <rect x="650" y="230" width="60" height="40" rx="3" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <circle cx="700" cy="264" r="1.5" fill="#d97706"/>
    <text x="680" y="285" text-anchor="middle">192.168.0.1</text>
  </g>

  <!-- Alice -->
  <g>
    <rect x="175" y="312" width="50" height="92" rx="9" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <path d="M 184 315 L 193.0 315 Q 195.0 315 195.0 317 L 195.0 318 Q 195.0 320 196.0 320 L 204.0 320 Q 205.0 320 205.0 318 L 205.0 317 Q 205.0 315 207.0 315 L 216 315 A 6 6 0 0 1 222 321 L 222 395 A 6 6 0 0 1 216 401 L 184 401 A 6 6 0 0 1 178 395 L 178 321 A 6 6 0 0 1 184 315 Z" fill="none" stroke="#6366f1" stroke-width="1"/>
    <rect x="186" y="340" width="28" height="16" rx="3" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="200.0" y="352" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">iroh</text>
    <path d="M 181.60 369.60 a 2.72 2.72 0 1 0 5.44 0 a 2.72 2.72 0 1 0 -5.44 0 Z M 183.12 369.60 a 1.20 1.20 0 1 0 2.40 0 a 1.20 1.20 0 1 0 -2.40 0 Z" fill="#eab308" fill-rule="evenodd"/><rect x="184.32" y="368.88" width="7.68" height="1.44" fill="#eab308"/><rect x="190.96" y="370.32" width="1.04" height="2.40" fill="#eab308"/><rect x="188.56" y="370.32" width="1.04" height="1.60" fill="#eab308"/><text x="194.40" y="372" text-anchor="start" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">1a9c…</text>
    <text x="200" y="420" text-anchor="middle" font-family="'Space Mono', monospace" font-size="13" fill="#6366f1">Alice</text>
  </g>
  <g font-family="'Space Mono', monospace" font-size="11" fill="#888" text-anchor="start">
    <text x="237" y="330"><tspan font-weight="bold">EndpointId:</tspan> 1a9c…</text>
    <text x="237" y="348"><tspan font-weight="bold">Addr:</tspan> 10.0.0.3:2104</text>
    <text x="237" y="366"><tspan font-weight="bold">Addr:</tspan> 8.3.1.9:2104</text>
    <text x="237" y="384"><tspan font-weight="bold">relay:</tspan> us-west</text>
  </g>

  <!-- Bob -->
  <g>
    <rect x="655" y="312" width="50" height="92" rx="9" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <rect x="658" y="315" width="44" height="86" rx="6" fill="#eee" stroke="#6366f1" stroke-width="1"/>
    <circle cx="680.0" cy="320" r="1.6" fill="#888"/>
    <rect x="666" y="340" width="28" height="16" rx="3" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="680.0" y="352" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">iroh</text>
    <path d="M 661.60 369.60 a 2.72 2.72 0 1 0 5.44 0 a 2.72 2.72 0 1 0 -5.44 0 Z M 663.12 369.60 a 1.20 1.20 0 1 0 2.40 0 a 1.20 1.20 0 1 0 -2.40 0 Z" fill="#eab308" fill-rule="evenodd"/><rect x="664.32" y="368.88" width="7.68" height="1.44" fill="#eab308"/><rect x="670.96" y="370.32" width="1.04" height="2.40" fill="#eab308"/><rect x="668.56" y="370.32" width="1.04" height="1.60" fill="#eab308"/><text x="674.40" y="372" text-anchor="start" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">8e2b…</text>
    <text x="680" y="420" text-anchor="middle" font-family="'Space Mono', monospace" font-size="13" fill="#6366f1">Bob</text>
  </g>
  <g font-family="'Space Mono', monospace" font-size="11" fill="#888" text-anchor="start">
    <text x="717" y="330"><tspan font-weight="bold">EndpointId:</tspan> 8e2b…</text>
    <text x="717" y="348"><tspan font-weight="bold">Addr:</tspan> 192.168.0.3:4153</text>
    <text x="717" y="366"><tspan font-weight="bold">Addr:</tspan> 4.9.8.2:4153</text>
    <text x="717" y="384"><tspan font-weight="bold">relay:</tspan> us-east</text>
  </g>

  <!-- All packets first so they pass behind the info boxes -->
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.0256;0.0333;0.1000;0.1077;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="1;1;0;0" keyTimes="0.0000;0.0256;0.1026;1.0000"><mpath href="#relay-path"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.1744;0.1821;0.2359;0.2410;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;1;1" keyTimes="0.0000;0.1744;0.2385;1.0000"><mpath href="#relay-path"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3179;0.3218;0.3508;0.3554;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;1;1" keyTimes="0.0000;0.3179;0.3538;1.0000"><mpath href="#probe-local-a"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3744;0.3782;0.4072;0.4118;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;1;1" keyTimes="0.0000;0.3744;0.4103;1.0000"><mpath href="#probe-local-b"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4333;0.4372;0.4815;0.4862;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;0.8786399047434874;0.8786399047434874" keyTimes="0.0000;0.4333;0.4846;1.0000"><mpath href="#direct"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5103;0.5141;0.5636;0.5682;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="1;1;0;0" keyTimes="0.0000;0.5103;0.5667;1.0000"><mpath href="#direct"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5872;0.5910;0.6405;0.6451;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;1;1" keyTimes="0.0000;0.5872;0.6436;1.0000"><mpath href="#direct"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.6590;0.6628;0.7123;0.7169;1.0000"/>
    <animateMotion dur="39.0s" repeatCount="indefinite" calcMode="linear" keyPoints="1;1;0;0" keyTimes="0.0000;0.6590;0.7154;1.0000"><mpath href="#direct"/></animateMotion>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3526;0.3577;0.3667;0.3744;1.0000"/>
    <line x1="194" y1="159" x2="206" y2="171" stroke="#dc2626" stroke-width="2"/>
    <line x1="194" y1="171" x2="206" y2="159" stroke="#dc2626" stroke-width="2"/>
    <text x="200" y="187" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#dc2626">not routable</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4090;0.4141;0.4231;0.4308;1.0000"/>
    <line x1="674" y1="159" x2="686" y2="171" stroke="#dc2626" stroke-width="2"/>
    <line x1="674" y1="171" x2="686" y2="159" stroke="#dc2626" stroke-width="2"/>
    <text x="680" y="187" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#dc2626">not routable</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4833;0.4885;0.5000;0.5077;1.0000"/>
    <line x1="674" y1="224" x2="686" y2="236" stroke="#dc2626" stroke-width="2"/>
    <line x1="674" y1="236" x2="686" y2="224" stroke="#dc2626" stroke-width="2"/>
    <text x="696" y="234" text-anchor="start" font-family="'Space Mono', monospace" font-size="10" fill="#dc2626">no mapping</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4487;0.4590;0.7564;0.7821;1.0000"/>
    <circle cx="236" cy="251" r="3" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="231" cy="250" r="2.5" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="227" cy="249" r="2" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <rect x="240" y="230" width="160" height="46" rx="14" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <text x="252" y="250" font-family="'Space Mono', monospace" font-size="11" fill="#111">4.9.8.2:4153 →</text>
    <text x="252" y="267" font-family="'Space Mono', monospace" font-size="11" fill="#111">10.0.0.3:2104</text>
    <g opacity="0">
      <line x1="377" y1="258" x2="389" y2="258" stroke="#888" stroke-width="1.5"/>
      <line x1="377" y1="270" x2="389" y2="270" stroke="#888" stroke-width="1.5"/>
      <polygon points="379,259 387,259 383,263.5" fill="#d97706" stroke="none"/>
      <polygon points="378,258 388,258 383,264 388,270 378,270 383,264" fill="#eee" stroke="#888" stroke-width="1.3"/>
      <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4590;0.4667;0.5615;0.5692;1.0000"/>
    </g>
    <g opacity="0">
      <polyline points="378,264 382,269 389,259" fill="none" stroke="#15803d" stroke-width="2"/>
      <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1" keyTimes="0.0000;0.5615;0.5692;1.0000"/>
    </g>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5256;0.5359;0.7564;0.7821;1.0000"/>
    <circle cx="716" cy="251" r="3" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="711" cy="250" r="2.5" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="707" cy="249" r="2" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <rect x="720" y="230" width="160" height="46" rx="14" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <text x="732" y="250" font-family="'Space Mono', monospace" font-size="11" fill="#111">8.3.1.9:2104 →</text>
    <text x="732" y="267" font-family="'Space Mono', monospace" font-size="11" fill="#111">192.168.0.3:4153</text>
    <g opacity="0">
      <line x1="857" y1="258" x2="869" y2="258" stroke="#888" stroke-width="1.5"/>
      <line x1="857" y1="270" x2="869" y2="270" stroke="#888" stroke-width="1.5"/>
      <polygon points="859,259 867,259 863,263.5" fill="#d97706" stroke="none"/>
      <polygon points="858,258 868,258 863,264 868,270 858,270 863,264" fill="#eee" stroke="#888" stroke-width="1.3"/>
      <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5359;0.5436;0.6385;0.6462;1.0000"/>
    </g>
    <g opacity="0">
      <polyline points="858,264 862,269 869,259" fill="none" stroke="#15803d" stroke-width="2"/>
      <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1" keyTimes="0.0000;0.6385;0.6462;1.0000"/>
    </g>
  </g>

  <!-- Callouts/boxes drawn last so they sit on top of paths and packets -->
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.0256;0.0359;0.1026;0.1128;1.0000"/>
    <rect x="432" y="150" width="224" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="446" y="174" font-family="'Space Mono', monospace" font-size="12" fill="#111"><tspan font-weight="bold">ADD_ADDRESS</tspan> 192.168.0.3:4153</text>
    <text x="446" y="194" font-family="'Space Mono', monospace" font-size="12" fill="#111"><tspan font-weight="bold">ADD_ADDRESS</tspan> 4.9.8.2:4153</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.1026;0.1103;0.1590;0.1667;1.0000"/>
    <circle cx="234" cy="366" r="4" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="226" cy="358" r="3" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="219" cy="352" r="2" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <rect x="238" y="324" width="216" height="64" rx="16" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <text x="252" y="343" font-family="'Space Mono', monospace" font-size="12" fill="#6366f1" font-weight="bold">Bob</text>
    <text x="252" y="362" font-family="'Space Mono', monospace" font-size="11" fill="#111"><tspan font-weight="bold">Candidate:</tspan> 192.168.0.3:4153</text>
    <text x="252" y="380" font-family="'Space Mono', monospace" font-size="11" fill="#111"><tspan font-weight="bold">Candidate:</tspan> 4.9.8.2:4153</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.1744;0.1821;0.2385;0.2462;1.0000"/>
    <rect x="246" y="150" width="216" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="262" y="174" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">REACH_OUT<tspan x="352" font-weight="normal">10.0.0.3:2104</tspan></text>
    <text x="262" y="194" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">REACH_OUT<tspan x="352" font-weight="normal">8.3.1.9:2104</tspan></text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.2385;0.2462;0.2974;0.3051;1.0000"/>
    <circle cx="704" cy="366" r="4" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="698" cy="358" r="3" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <circle cx="692" cy="352" r="2" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <rect x="708" y="324" width="186" height="86" rx="16" fill="#eef2ff" stroke="#6366f1" stroke-width="1"/>
    <text x="722" y="343" font-family="'Space Mono', monospace" font-size="12" fill="#6366f1" font-weight="bold">Alice</text>
    <text x="722" y="362" font-family="'Space Mono', monospace" font-size="11" fill="#111"><tspan font-weight="bold">Candidate:</tspan> 10.0.0.3:2104</text>
    <text x="722" y="380" font-family="'Space Mono', monospace" font-size="11" fill="#111"><tspan font-weight="bold">Candidate:</tspan> 8.3.1.9:2104</text>
    <text x="722" y="401" font-family="Georgia, serif" font-style="italic" font-size="13" fill="#6366f1">I need to reach out</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3026;0.3103;0.3564;0.3641;1.0000"/>
    <rect x="240" y="136" width="164" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="252" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_CHALLENGE</text>
    <text x="252" y="176" font-family="'Space Mono', monospace" font-size="12" fill="#111">192.168.0.3:4153</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3590;0.3667;0.4128;0.4205;1.0000"/>
    <rect x="492" y="136" width="164" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="504" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_CHALLENGE</text>
    <text x="504" y="176" font-family="'Space Mono', monospace" font-size="12" fill="#111">10.0.0.3:2104</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4179;0.4256;0.4872;0.4949;1.0000"/>
    <rect x="240" y="136" width="164" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="252" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_CHALLENGE</text>
    <text x="252" y="176" font-family="'Space Mono', monospace" font-size="12" fill="#111">4.9.8.2:4153</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4949;0.5026;0.5692;0.5769;1.0000"/>
    <rect x="492" y="136" width="164" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="504" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_CHALLENGE</text>
    <text x="504" y="176" font-family="'Space Mono', monospace" font-size="12" fill="#111">8.3.1.9:2104</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5718;0.5795;0.6462;0.6538;1.0000"/>
    <rect x="240" y="136" width="164" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="252" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_RESPONSE</text>
    <text x="252" y="176" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_CHALLENGE</text>
  </g>
  <g opacity="0">
    <animate attributeName="opacity" dur="39.0s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.6436;0.6513;0.7179;0.7256;1.0000"/>
    <rect x="506" y="136" width="150" height="37" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="518" y="157" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">PATH_RESPONSE</text>
  </g>

  <!-- Timer bar (position in loop) -->
  <rect x="0" y="456" width="0" height="3" fill="#9ca3af">
    <animate attributeName="width" from="0" to="940" dur="39.0s" repeatCount="indefinite"/>
  </rect>
</svg>
