<svg viewBox="0 0 700 480" xmlns="http://www.w3.org/2000/svg">
  <!-- Title -->
  <text x="350" y="22" text-anchor="middle" font-family="'Space Mono', monospace" font-size="13" fill="#6366f1">Happy case: server response fits in the 3600-byte budget</text>

  <!-- Lifeline labels -->
  <text x="150" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#6366f1">Server</text>
  <text x="550" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#6366f1">Client</text>

  <!-- Lifelines -->
  <line x1="150" y1="70" x2="150" y2="455" stroke="#888" stroke-width="1" stroke-dasharray="4 3"/>
  <line x1="550" y1="70" x2="550" y2="455" stroke="#888" stroke-width="1" stroke-dasharray="4 3"/>

  <!-- Arrowhead defs -->
  <defs>
    <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#6366f1"/>
    </marker>
  </defs>

  <!-- Message 1: Client -> Server: ClientHello -->
  <line x1="550" y1="102" x2="156" y2="110" stroke="#6366f1" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="350" y="96" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">ClientHello</text>
  <text x="350" y="124" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#888">1200 bytes (padded)</text>

  <!-- Message 2: Server -> Client: ServerHello + rest of handshake -->
  <line x1="150" y1="172" x2="544" y2="180" stroke="#6366f1" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="350" y="158" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">ServerHello, Cert, CertVerify, Finished</text>
  <text x="350" y="196" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#888">~1 KiB &lt; 3600-byte budget</text>

  <!-- Message 3: Client -> Server: client Finished + 1-RTT request -->
  <line x1="550" y1="262" x2="156" y2="270" stroke="#6366f1" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="350" y="256" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">client Finished + 1-RTT request</text>
  <text x="350" y="284" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#888">handshake complete</text>

  <!-- Annotation: address validated -->
  <text x="62" y="270" font-family="'Space Mono', monospace" font-size="10" fill="#d97706">address validated</text>
  <text x="62" y="284" font-family="'Space Mono', monospace" font-size="10" fill="#d97706">3x cap lifted</text>

  <!-- Message 4: Server -> Client: 1-RTT response (app data) -->
  <line x1="150" y1="332" x2="544" y2="340" stroke="#6366f1" stroke-width="1.5" marker-end="url(#arr)"/>
  <text x="350" y="326" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">1-RTT response (application data)</text>
  <text x="350" y="354" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#888">client has the data</text>

</svg>
