<svg width="100%" viewBox="0 0 820 360" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>Two physical places: the home and the VPS</title>
  <desc>sudoedge runs natively in the home for audio; everything else (sudo-api, voice-bridge, livekit-server, per-user hermes containers) runs on a single VPS.</desc>
  <style>
    text{font-family:"Anthropic Sans",-apple-system,system-ui,"Segoe UI",sans-serif}
    .t{font-size:14px;font-weight:500;text-anchor:middle;dominant-baseline:central}
    .s{font-size:12px;text-anchor:middle;dominant-baseline:central}
    .hdr{font-size:13px;font-weight:500;fill:#c2c0b6}
    rect{stroke-width:.5}
    .zone{fill:none;stroke:#5a5852;stroke-width:.5;stroke-dasharray:5 4;opacity:.6}
    .blue{fill:#1f3b7a;stroke:#8aaef0}    .bt{fill:#cfdcf4} .bs{fill:#8aaef0}
    .orange{fill:#712b13;stroke:#f0997b}  .ot{fill:#f5c4b3} .os{fill:#f0997b}
    .green{fill:#27500a;stroke:#97c459}   .gt{fill:#c0dd97} .gs{fill:#97c459}
    .arrow{fill:none;stroke:#9c9a92;stroke-width:1.5}
  </style>
  <defs>
    <marker id="a" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <rect class="zone" x="20" y="40" width="240" height="280" rx="12"/>
  <text class="hdr" x="40" y="62">🏠  The home</text>

  <rect class="green" x="60" y="160" width="160" height="64" rx="8"/>
  <text class="t gt" x="140" y="184">sudoedge</text>
  <text class="s gs" x="140" y="204">mic · speaker · setup</text>

  <rect class="zone" x="290" y="40" width="510" height="280" rx="12"/>
  <text class="hdr" x="310" y="62">☁️  VPS — sudohomes.com</text>

  <rect class="blue" x="320" y="92" width="200" height="64" rx="8"/>
  <text class="t bt" x="420" y="116">sudo-api</text>
  <text class="s bs" x="420" y="136">web API + provisioner</text>

  <rect class="blue" x="540" y="92" width="240" height="64" rx="8"/>
  <text class="t bt" x="660" y="116">voice-bridge</text>
  <text class="s bs" x="660" y="136">STT · hermes · TTS</text>

  <rect class="blue" x="320" y="180" width="200" height="64" rx="8"/>
  <text class="t bt" x="420" y="204">livekit-server</text>
  <text class="s bs" x="420" y="224">WebRTC audio transport</text>

  <rect class="orange" x="540" y="180" width="240" height="64" rx="8"/>
  <text class="t ot" x="660" y="204">hermes-user-&lt;id&gt;</text>
  <text class="s os" x="660" y="224">one per family · spawned on demand</text>

  <path class="arrow" d="M 220 192 C 250 192, 280 212, 320 212" marker-end="url(#a)"/>
  <path class="arrow" d="M 220 200 C 250 200, 280 220, 320 220" marker-end="url(#a)" opacity=".5" stroke-dasharray="3 3"/>
  <path class="arrow" d="M 520 124 L 540 124" marker-end="url(#a)"/>
  <path class="arrow" d="M 520 212 L 540 212" marker-end="url(#a)"/>
  <path class="arrow" d="M 660 156 L 660 178" marker-end="url(#a)"/>
  <path class="arrow" d="M 420 156 L 420 178" marker-end="url(#a)"/>
</svg>
