<svg viewBox="0 0 920 470" xmlns="http://www.w3.org/2000/svg" font-family="Inter,system-ui,sans-serif">
  <defs>
    <linearGradient id="bgg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#F6F8FC"/>
      <stop offset="1" stop-color="#EEF3FE"/>
    </linearGradient>
    <marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0 L10 5 L0 10 z" fill="#6B7693"/>
    </marker>
    <filter id="sh" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0B1220" flood-opacity="0.08"/>
    </filter>
  </defs>

  <rect width="920" height="470" rx="18" fill="url(#bgg)"/>
  <text x="36" y="46" font-size="13" font-weight="700" letter-spacing="2" fill="#2463EB" font-family="'JetBrains Mono',monospace">// ARCHITECTURE — HUMAN-LIKE AI AGENT</text>

  <!-- USER CHROME -->
  <g filter="url(#sh)">
    <rect x="36" y="86" width="200" height="120" rx="14" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="36" y="86" width="200" height="120" rx="14" fill="none" stroke="#2463EB" stroke-opacity="0.25"/>
  <text x="56" y="118" font-size="11" font-weight="700" fill="#6B7693" font-family="'JetBrains Mono',monospace">USER'S REAL CHROME</text>
  <text x="56" y="142" font-size="15" font-weight="700" fill="#0B1220">Browser + cookies</text>
  <text x="56" y="162" font-size="13" fill="#3E4A60">real fingerprint,</text>
  <text x="56" y="180" font-size="13" fill="#3E4A60">history, localStorage</text>
  <rect x="56" y="188" width="100" height="6" rx="3" fill="#16A34A" opacity="0.18"/>
  <text x="162" y="194" font-size="10" font-weight="700" fill="#16A34A" font-family="'JetBrains Mono',monospace">CDP :9222</text>

  <!-- CONTROL CORE -->
  <g filter="url(#sh)">
    <rect x="360" y="70" width="200" height="150" rx="14" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="360" y="70" width="200" height="150" rx="14" fill="none" stroke="#0EA5E9" stroke-opacity="0.35"/>
  <text x="380" y="100" font-size="11" font-weight="700" fill="#0EA5E9" font-family="'JetBrains Mono',monospace">CONTROL CORE</text>
  <text x="380" y="126" font-size="16" font-weight="800" fill="#0B1220">Playwright</text>
  <text x="380" y="148" font-size="13" fill="#3E4A60">attaches over CDP</text>
  <text x="380" y="170" font-size="13" fill="#3E4A60">screenshots · clicks</text>
  <text x="380" y="188" font-size="13" fill="#3E4A60">HUD inject</text>
  <rect x="380" y="196" width="160" height="6" rx="3" fill="#0EA5E9" opacity="0.16"/>
  <text x="380" y="214" font-size="10" fill="#6B7693" font-family="'JetBrains Mono',monospace">FastAPI · push-context</text>

  <!-- VISION -->
  <g filter="url(#sh)">
    <rect x="684" y="60" width="200" height="92" rx="14" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="684" y="60" width="200" height="92" rx="14" fill="none" stroke="#2463EB" stroke-opacity="0.3"/>
  <text x="704" y="88" font-size="11" font-weight="700" fill="#2463EB" font-family="'JetBrains Mono',monospace">VISION + REASONING</text>
  <text x="704" y="112" font-size="15" font-weight="800" fill="#0B1220">Claude Haiku 4.5</text>
  <text x="704" y="132" font-size="12" fill="#3E4A60">screenshot → text describe</text>

  <!-- VOICE -->
  <g filter="url(#sh)">
    <rect x="684" y="190" width="200" height="92" rx="14" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="684" y="190" width="200" height="92" rx="14" fill="none" stroke="#16A34A" stroke-opacity="0.35"/>
  <text x="704" y="218" font-size="11" font-weight="700" fill="#16A34A" font-family="'JetBrains Mono',monospace">VOICE + DIALOG</text>
  <text x="704" y="242" font-size="15" font-weight="800" fill="#0B1220">OpenAI Realtime</text>
  <text x="704" y="262" font-size="12" fill="#3E4A60">WebRTC · speaks · listens</text>

  <!-- APP -->
  <g filter="url(#sh)">
    <rect x="360" y="300" width="200" height="92" rx="14" fill="#FFFFFF" stroke="#E4E9F2"/>
  </g>
  <rect x="360" y="300" width="200" height="92" rx="14" fill="none" stroke="#D97706" stroke-opacity="0.3"/>
  <text x="380" y="328" font-size="11" font-weight="700" fill="#D97706" font-family="'JetBrains Mono',monospace">TARGET APP (UI)</text>
  <text x="380" y="352" font-size="15" font-weight="800" fill="#0B1220">Web app cards</text>
  <text x="380" y="372" font-size="12" fill="#3E4A60">swipe · stats · matches</text>

  <!-- arrows -->
  <!-- chrome <-> core (CDP, two-way) -->
  <line x1="236" y1="146" x2="360" y2="146" stroke="#6B7693" stroke-width="2" marker-end="url(#ar)" marker-start="url(#ar)"/>
  <text x="252" y="138" font-size="11" font-weight="700" fill="#16A34A" font-family="'JetBrains Mono',monospace">CDP attach</text>

  <!-- core -> vision (screenshot) -->
  <path d="M560 120 C 620 110, 640 106, 684 104" fill="none" stroke="#2463EB" stroke-width="2" marker-end="url(#ar)"/>
  <text x="568" y="98" font-size="11" fill="#2463EB" font-family="'JetBrains Mono',monospace">screenshot</text>

  <!-- vision -> voice (text) -->
  <path d="M784 152 L784 190" fill="none" stroke="#6B7693" stroke-width="2" marker-end="url(#ar)"/>
  <text x="792" y="176" font-size="11" fill="#6B7693" font-family="'JetBrains Mono',monospace">text</text>

  <!-- voice -> core (push-context) -->
  <path d="M684 236 C 620 236, 600 200, 560 180" fill="none" stroke="#16A34A" stroke-width="2" marker-end="url(#ar)"/>
  <text x="572" y="234" font-size="11" fill="#16A34A" font-family="'JetBrains Mono',monospace">push-context</text>

  <!-- core -> app (swipe) -->
  <path d="M460 220 L460 300" fill="none" stroke="#D97706" stroke-width="2" marker-end="url(#ar)"/>
  <text x="468" y="266" font-size="11" font-weight="700" fill="#D97706" font-family="'JetBrains Mono',monospace">swipe()</text>

  <!-- app -> chrome (renders in real browser) -->
  <path d="M360 360 C 200 360, 136 260, 136 206" fill="none" stroke="#6B7693" stroke-width="2" stroke-dasharray="5 5" marker-end="url(#ar)"/>
  <text x="150" y="300" font-size="11" fill="#6B7693" font-family="'JetBrains Mono',monospace">runs inside</text>

  <!-- footer legend -->
  <text x="36" y="442" font-size="12" fill="#6B7693" font-family="'JetBrains Mono',monospace">Hybrid AI: Claude = vision &amp; reasoning · OpenAI = voice &amp; dialog · Playwright = hands · CDP = no-headless stealth</text>
</svg>
