<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 500" role="img" aria-label="Tempx blog illustration: a terminal window and an envelope connected by a spark">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#eef2fe"/>
      <stop offset="1" stop-color="#e3ebfd"/>
    </linearGradient>
  </defs>
  <rect width="1200" height="500" fill="url(#bg)"/>
  <circle cx="130" cy="90" r="160" fill="#7c3aed" opacity="0.14"/>
  <circle cx="1080" cy="430" r="220" fill="#2456e6" opacity="0.08"/>
  <circle cx="1010" cy="110" r="10" fill="#7c3aed" opacity="0.5"/>
  <circle cx="200" cy="410" r="14" fill="#2456e6" opacity="0.25"/>

  <!-- Terminal window (left): where the one-liner runs -->
  <g transform="translate(280 250)">
    <rect x="-170" y="-110" width="340" height="220" rx="16" fill="#ffffff" stroke="#c9d4f2" stroke-width="4"/>
    <rect x="-170" y="-110" width="340" height="44" rx="16" fill="#e8eefc"/>
    <rect x="-170" y="-82" width="340" height="16" fill="#e8eefc"/>
    <circle cx="-140" cy="-88" r="7" fill="#f090a0"/>
    <circle cx="-116" cy="-88" r="7" fill="#f2c94c"/>
    <circle cx="-92" cy="-88" r="7" fill="#79c98f"/>
    <text x="-146" y="-24" font-family="ui-monospace, Menlo, monospace" font-size="21" fill="#2456e6">$ claude mcp add</text>
    <text x="-146" y="8" font-family="ui-monospace, Menlo, monospace" font-size="21" fill="#2456e6">--transport http</text>
    <text x="-146" y="40" font-family="ui-monospace, Menlo, monospace" font-size="21" fill="#2456e6">tempx tempx.uk/mcp</text>
    <text x="-146" y="82" font-family="ui-monospace, Menlo, monospace" font-size="18" fill="#5b7bd6">✓ paired — 6 tools live</text>
  </g>

  <!-- Spark between them: browser pairing handshake -->
  <g transform="translate(600 235)" fill="none" stroke="#d97757" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
    <path d="M0 -34 C 10 -10, 26 2, 50 0 C 26 -2, 10 10, 0 34 C -10 10, -26 -2, -50 0 C -26 2, -10 -10, 0 -34 Z" fill="#d97757" fill-opacity="0.16"/>
    <circle cx="0" cy="0" r="7" fill="#d97757" stroke="none"/>
  </g>
  <path d="M545 250 H 470" stroke="#2456e6" stroke-width="6" stroke-dasharray="2 14" stroke-linecap="round"/>
  <path d="M655 250 H 730" stroke="#2456e6" stroke-width="6" stroke-dasharray="2 14" stroke-linecap="round"/>

  <!-- Envelope with robot face (right): the disposable inbox -->
  <g transform="translate(910 250)" fill="none" stroke="#2456e6" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
    <rect x="-150" y="-90" width="300" height="180" rx="18" fill="#ffffff"/>
    <path d="M-150 -62 L 0 38 L 150 -62"/>
    <path d="M-150 90 L -30 -18 M 150 90 L 30 -18"/>
    <rect x="-46" y="-30" width="92" height="52" rx="12" stroke="#7c3aed"/>
    <circle cx="-20" cy="-4" r="4.5" fill="#7c3aed" stroke="none"/>
    <circle cx="20" cy="-4" r="4.5" fill="#7c3aed" stroke="none"/>
    <path d="M-14 10 H 14" stroke="#7c3aed" stroke-width="5"/>
    <path d="M0 -30 V -44" stroke="#7c3aed"/>
    <circle cx="0" cy="-50" r="5" fill="#7c3aed" stroke="none"/>
  </g>
</svg>
