<svg viewBox="0 44 820 376" 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>
  <defs>
    <marker id="put-head" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#15803d"/>
    </marker>
    <marker id="lookup-head" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#2563eb"/>
    </marker>
  </defs>

  <path id="put-wire" d="M 120 296 Q 227 159 396 122" fill="none" stroke="#b4bac4" stroke-width="1.5" opacity="0"><animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.0414;0.0690;0.2759;0.3103;1.0000"/></path>
  <path id="lookup-wire" d="M 424 122 Q 587 161 688 296" fill="none" stroke="#b4bac4" stroke-width="1.5" opacity="0"><animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3034;0.3448;0.5724;0.6069;1.0000"/></path>

  <!-- dns.iroh.link server (vanilla) -->
  <g>
    <rect x="378" y="56" width="64" height="66" rx="3" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <circle cx="386" cy="68" r="1.6" fill="#888"/>
    <circle cx="392" cy="68" r="1.6" fill="#888"/>
    <line x1="402" y1="63" x2="402" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="407" y1="63" x2="407" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="412" y1="63" x2="412" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="417" y1="63" x2="417" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="422" y1="63" x2="422" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="427" y1="63" x2="427" y2="73" stroke="#888" stroke-width="1"/>
    <line x1="380" y1="79" x2="440" y2="79" stroke="#888" stroke-width="1"/>
    <circle cx="386" cy="89" r="1.6" fill="#888"/>
    <circle cx="392" cy="89" r="1.6" fill="#888"/>
    <line x1="402" y1="84" x2="402" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="407" y1="84" x2="407" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="412" y1="84" x2="412" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="417" y1="84" x2="417" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="422" y1="84" x2="422" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="427" y1="84" x2="427" y2="94" stroke="#888" stroke-width="1"/>
    <line x1="380" y1="100" x2="440" y2="100" stroke="#888" stroke-width="1"/>
    <circle cx="386" cy="110" r="1.6" fill="#888"/>
    <circle cx="392" cy="110" r="1.6" fill="#888"/>
    <line x1="402" y1="105" x2="402" y2="115" stroke="#888" stroke-width="1"/>
    <line x1="407" y1="105" x2="407" y2="115" stroke="#888" stroke-width="1"/>
    <line x1="412" y1="105" x2="412" y2="115" stroke="#888" stroke-width="1"/>
    <line x1="417" y1="105" x2="417" y2="115" stroke="#888" stroke-width="1"/>
    <line x1="422" y1="105" x2="422" y2="115" stroke="#888" stroke-width="1"/>
    <line x1="427" y1="105" x2="427" y2="115" stroke="#888" stroke-width="1"/>
    <text x="410.0" y="144" text-anchor="middle" font-family="'Space Mono', monospace" font-size="14" fill="#111">dns.iroh.link</text>
  </g>

  <!-- server records; Bob's entry is added when his PUT arrives, removed on loop -->
  <rect x="462" y="46" width="150" height="86" rx="4" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
  <g font-family="'Space Mono', monospace" font-size="11">
    <text x="472" y="60" fill="#888">1f3a… → eu-west</text>
    <text x="472" y="76" fill="#888">7c0e… → us-west</text>
    <text x="472" y="92" fill="#888">b48d… → us-east</text>
    <text x="472" y="108" fill="#888">2a91… → eu-west</text>
    <text x="472" y="124" fill="#111" font-weight="bold" opacity="0">8e2b… → us-east<animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.2414;0.2759;0.9517;0.9793;1.0000"/></text>
  </g>

  <!-- Bob (publisher) -->
  <g>
    <rect x="96" y="296" width="48" height="88" rx="9" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <rect x="99" y="299" width="42" height="82" rx="6" fill="#eee" stroke="#6366f1" stroke-width="1"/>
    <circle cx="120.0" cy="304" r="1.6" fill="#888"/>
    <rect x="106" y="322" width="28" height="16" rx="3" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="120.0" y="334" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">iroh</text>
    <path d="M 101.60 351.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 103.12 351.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="104.32" y="350.88" width="7.68" height="1.44" fill="#eab308"/><rect x="110.96" y="352.32" width="1.04" height="2.40" fill="#eab308"/><rect x="108.56" y="352.32" width="1.04" height="1.60" fill="#eab308"/><text x="114.40" y="354" text-anchor="start" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">8e2b…</text>
    <text x="120" y="400" 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 x="162" y="326"><tspan font-weight="bold">NodeId:</tspan> 8e2b…</text>
    <text x="162" y="346"><tspan font-weight="bold">Home relay:</tspan> us-east</text>
  </g>

  <!-- Alice (resolver) — appears after Bob's record is published -->
  <g opacity="0">
    <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.2621;0.3034;0.9517;0.9793;1.0000"/>
    <rect x="664" y="296" width="48" height="88" rx="9" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <path d="M 673 299 L 681.0 299 Q 683.0 299 683.0 301 L 683.0 302 Q 683.0 304 684.0 304 L 692.0 304 Q 693.0 304 693.0 302 L 693.0 301 Q 693.0 299 695.0 299 L 703 299 A 6 6 0 0 1 709 305 L 709 375 A 6 6 0 0 1 703 381 L 673 381 A 6 6 0 0 1 667 375 L 667 305 A 6 6 0 0 1 673 299 Z" fill="none" stroke="#6366f1" stroke-width="1"/>
    <rect x="674" y="322" width="28" height="16" rx="3" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="688.0" y="334" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">iroh</text>
    <path d="M 669.60 351.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 671.12 351.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="672.32" y="350.88" width="7.68" height="1.44" fill="#eab308"/><rect x="678.96" y="352.32" width="1.04" height="2.40" fill="#eab308"/><rect x="676.56" y="352.32" width="1.04" height="1.60" fill="#eab308"/><text x="682.40" y="354" text-anchor="start" font-family="'Space Mono', monospace" font-size="8" fill="#d97706">1a9c…</text>
    <text x="688" y="400" text-anchor="middle" font-family="'Space Mono', monospace" font-size="13" fill="#6366f1">Alice</text>
  </g>
  <!-- resolved result, appears as the answer comes back -->
  <text x="650" y="342" text-anchor="end" font-family="'Space Mono', monospace" font-size="11" fill="#111" opacity="0">8e2b… is at relay us-east<animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.5517;0.5862;0.9517;0.9793;1.0000"/></text>

  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.1034;0.1172;0.2345;0.2483;1.0000"/>
    <animateMotion dur="14.5s" repeatCount="indefinite" calcMode="linear" keyPoints="0;0;1;1" keyTimes="0.0000;0.1034;0.2414;1.0000"><mpath href="#put-wire"/></animateMotion>
  </g>
  <g opacity="0">
    <circle r="4" fill="#2563eb"/>
    <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3448;0.3586;0.5448;0.5586;1.0000"/>
    <animateMotion dur="14.5s" repeatCount="indefinite" calcMode="linear" keyPoints="1;1;0;1;1" keyTimes="0.0000;0.3448;0.4483;0.5517;1.0000"><mpath href="#lookup-wire"/></animateMotion>
  </g>

  <!-- HTTPS PUT callout -->
  <g opacity="0">
    <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.1103;0.1379;0.2759;0.3103;1.0000"/>
    <rect x="40" y="150" width="200" height="70" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <text x="54" y="172" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">HTTPS PUT</text>
    <text x="54" y="192" font-family="'Space Mono', monospace" font-size="12" fill="#111"><tspan font-weight="bold">Relay:</tspan> us-east</text>
    <text x="54" y="210" font-family="'Space Mono', monospace" font-size="12" fill="#111"><tspan font-weight="bold">Signed by:</tspan> 8e2b…</text>
  </g>

  <!-- DNS LOOKUP callout: query is replaced by the answer as the response returns -->
  <g opacity="0">
    <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3172;0.3448;0.5724;0.6069;1.0000"/>
    <rect x="470" y="158" width="330" height="56" rx="5" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
    <g opacity="0">
      <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.3172;0.3448;0.4345;0.4552;1.0000"/>
      <text x="484" y="182" font-family="'Space Mono', monospace" font-size="12" fill="#111" font-weight="bold">DNS LOOKUP</text>
      <text x="484" y="202" font-family="'Space Mono', monospace" font-size="11" fill="#111">TXT _iroh.8e2b….dns.iroh.link</text>
    </g>
    <g opacity="0">
      <animate attributeName="opacity" dur="14.5s" repeatCount="indefinite" calcMode="linear" values="0;0;1;1;0;0" keyTimes="0.0000;0.4414;0.4621;0.5724;0.6000;1.0000"/>
      <text x="484" y="182" font-family="'Space Mono', monospace" font-size="12" fill="#111">;; ANSWER SECTION:</text>
      <text x="484" y="202" font-family="'Space Mono', monospace" font-size="12" fill="#2563eb" font-weight="bold">TXT "relay=https://us-east"</text>
    </g>
  </g>

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