<svg viewBox="108 68 584 434" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Clams architecture: one binary with two interfaces (CLI and Server) that deploys to your machine, your servers, or our servers">
  <defs>
    <style>
      .label { font-family: "Diatype Semi Mono", monospace; font-size: 14px; fill: #212420; }
      .label-small { font-family: "Diatype Semi Mono", monospace; font-size: 11px; fill: #212420; }
      .label-large { font-family: "Diatype Semi Mono", monospace; font-size: 18px; fill: #212420; font-weight: 600; }
      .label-engine { font-family: "Diatype Semi Mono", monospace; font-size: 20px; fill: #f1eee7; font-weight: 600; }
      .label-feature { font-family: "Diatype Semi Mono", monospace; font-size: 11px; fill: #212420; dominant-baseline: middle; }
    </style>
  </defs>

  <!-- INTERFACES LAYER (Top) -->
  <!-- CLI -->
  <rect x="250" y="70" width="130" height="80" rx="8" fill="#ffffff" stroke="#9ca3af" stroke-width="1.5"/>
  <text x="315" y="102" text-anchor="middle" font-family="'Diatype Semi Mono', monospace" font-size="22" fill="#6b7280">&gt;_</text>
  <text x="315" y="135" text-anchor="middle" class="label">CLI</text>

  <!-- Server -->
  <rect x="420" y="70" width="130" height="80" rx="8" fill="#ffffff" stroke="#9ca3af" stroke-width="1.5"/>
  <rect x="473" y="85" width="24" height="11" rx="2" fill="none" stroke="#6b7280" stroke-width="1.5"/><circle cx="491" cy="90.5" r="1.5" fill="#6b7280"/><rect x="473" y="98" width="24" height="11" rx="2" fill="none" stroke="#6b7280" stroke-width="1.5"/><circle cx="491" cy="103.5" r="1.5" fill="#6b7280"/>
  <text x="485" y="135" text-anchor="middle" class="label">Server</text>

  <!-- Connection lines from interfaces to engine -->
  <line x1="315" y1="150" x2="315" y2="180" stroke="#9ca3af" stroke-width="1.5"/>
  <line x1="485" y1="150" x2="485" y2="180" stroke="#9ca3af" stroke-width="1.5"/>
  <line x1="315" y1="180" x2="485" y2="180" stroke="#9ca3af" stroke-width="1.5"/>
  <line x1="400" y1="180" x2="400" y2="210" stroke="#9ca3af" stroke-width="1.5"/>
  <polygon points="400,220 395,210 405,210" fill="#9ca3af"/>

  <!-- CORE ENGINE (Center) -->
  <rect x="180" y="230" width="440" height="120" rx="12" fill="#8f0709"/>
  <text x="400" y="265" text-anchor="middle" class="label-engine">Clams</text>
  <text x="400" y="290" text-anchor="middle" font-family="'Diatype Semi Mono', monospace" font-size="12" font-weight="600" fill="#f1eee7">
    Multi-wallet · Journal Entries · Cost Basis · Reports
  </text>

  <!-- Enterprise features badges: SSO | Workspaces | Role-based Access | Audit Trail -->
  <rect x="205" y="308" width="55" height="18" rx="9" fill="#f1eee7"/>
  <text x="232" y="317" text-anchor="middle" class="label-feature">SSO</text>

  <rect x="270" y="308" width="95" height="18" rx="9" fill="#f1eee7"/>
  <text x="317" y="317" text-anchor="middle" class="label-feature">Workspaces</text>

  <rect x="375" y="308" width="125" height="18" rx="9" fill="#f1eee7"/>
  <text x="437" y="317" text-anchor="middle" class="label-feature">Role-based Access</text>

  <rect x="510" y="308" width="85" height="18" rx="9" fill="#f1eee7"/>
  <text x="552" y="317" text-anchor="middle" class="label-feature">Audit Trail</text>

  <!-- Arrow down to deployment -->
  <line x1="400" y1="350" x2="400" y2="370" stroke="#9ca3af" stroke-width="1.5"/>
  <polygon points="400,380 395,370 405,370" fill="#9ca3af"/>

  <!-- DEPLOYMENT LAYER (Bottom) -->
  <!-- Your Machine -->
  <rect x="115" y="390" width="180" height="110" rx="8" fill="#ffffff" stroke="#9ca3af" stroke-width="1.5"/>
  <rect x="190" y="410" width="30" height="20" rx="2" fill="#6b7280"/>
  <rect x="188" y="432" width="34" height="3" rx="1" fill="#6b7280"/>
  <text x="205" y="465" text-anchor="middle" class="label">Your Machine</text>
  <text x="205" y="482" text-anchor="middle" class="label-small">Local · Private</text>

  <!-- Your Servers -->
  <rect x="310" y="390" width="180" height="110" rx="8" fill="#ffffff" stroke="#9ca3af" stroke-width="1.5"/>
  <rect x="382" y="410" width="36" height="7" rx="1" fill="#6b7280"/>
  <rect x="382" y="420" width="36" height="7" rx="1" fill="#6b7280"/>
  <rect x="382" y="430" width="36" height="7" rx="1" fill="#6b7280"/>
  <text x="400" y="465" text-anchor="middle" class="label">Your Servers</text>
  <text x="400" y="482" text-anchor="middle" class="label-small">Self-hosted · Your Infra</text>

  <!-- Our Cloud -->
  <rect x="505" y="390" width="180" height="110" rx="8" fill="#ffffff" stroke="#9ca3af" stroke-width="1.5"/>
  <circle cx="583" cy="425" r="9" fill="#6b7280"/>
  <circle cx="595" cy="419" r="11" fill="#6b7280"/>
  <circle cx="607" cy="425" r="9" fill="#6b7280"/>
  <rect x="580" y="425" width="30" height="9" fill="#6b7280"/>
  <text x="595" y="465" text-anchor="middle" class="label">Our Servers</text>
  <text x="595" y="482" text-anchor="middle" class="label-small">Managed · We handle it</text>
</svg>
