<svg viewBox="0 0 700 130" xmlns="http://www.w3.org/2000/svg">
  <!-- Handshake Packet -->
  <text x="350" y="18" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#6366f1">Handshake Packet (type 10)</text>

  <!-- First byte -->
  <rect x="10" y="35" width="70" height="50" rx="3" fill="none" stroke="#6366f1" stroke-width="1.5"/>
  <text x="45" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">1110mmmm</text>
  <text x="45" y="70" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">1 byte</text>

  <!-- Version -->
  <rect x="80" y="35" width="80" height="50" rx="3" fill="none" stroke="#6366f1" stroke-width="1.5"/>
  <text x="120" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#6366f1">Version</text>
  <text x="120" y="70" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">4 bytes</text>

  <!-- DCID -->
  <rect x="160" y="35" width="100" height="50" rx="3" fill="none" stroke="#818cf8" stroke-width="1"/>
  <text x="210" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="9" fill="#818cf8">Dest CID</text>
  <text x="210" y="70" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">len + data</text>

  <!-- SCID -->
  <rect x="260" y="35" width="100" height="50" rx="3" fill="none" stroke="#818cf8" stroke-width="1"/>
  <text x="310" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="9" fill="#818cf8">Src CID</text>
  <text x="310" y="70" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">len + data</text>

  <!-- Length -->
  <rect x="360" y="35" width="60" height="50" rx="3" fill="none" stroke="#818cf8" stroke-width="1"/>
  <text x="390" y="58" text-anchor="middle" font-family="'Space Mono', monospace" font-size="9" fill="#818cf8">Length</text>
  <text x="390" y="70" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">var int</text>

  <!-- PN + Encrypted payload -->
  <rect x="420" y="35" width="270" height="50" rx="3" fill="none" stroke="#888" stroke-width="1" stroke-dasharray="4 3"/>
  <text x="555" y="52" text-anchor="middle" font-family="'Space Mono', monospace" font-size="9" fill="#888">PN + Payload</text>
  <text x="555" y="64" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">encrypted with</text>
  <text x="555" y="76" text-anchor="middle" font-family="'Space Mono', monospace" font-size="8" fill="#888">handshake keys</text>

  <!-- Annotations -->
  <text x="215" y="110" text-anchor="middle" font-family="'Space Mono', monospace" font-size="9" fill="#888">&#x2190; unencrypted &#x2192;</text>
  <line x1="420" y1="100" x2="420" y2="92" stroke="#888" stroke-width="0.5"/>
</svg>
