<svg width="100%" viewBox="0 0 760 280" role="img" xmlns="http://www.w3.org/2000/svg">
  <title>The 60-second model: three surfaces converge on one per-user agent</title>
  <desc>Voice, chat, and WhatsApp all funnel into a single per-family hermes agent, which talks to an LLM via OpenRouter.</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}
    .lbl{font-size:12px;fill:#9c9a92;text-anchor:middle}
    rect{stroke-width:.5}
    .neutral{fill:#444441;stroke:#b4b2a9} .nt{fill:#d3d1c7} .ns{fill:#b4b2a9}
    .orange{fill:#712b13;stroke:#f0997b}  .ot{fill:#f5c4b3} .os{fill:#f0997b}
    .purple{fill:#3c3489;stroke:#afa9ec}  .pt{fill:#ceccf6} .ps{fill:#afa9ec}
    .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="neutral" x="40"  y="22"  width="200" height="60" rx="8"/>
  <text class="t nt" x="140" y="46">🎤  Voice</text>
  <text class="s ns" x="140" y="66">the Pi in the home</text>

  <rect class="neutral" x="40"  y="112" width="200" height="60" rx="8"/>
  <text class="t nt" x="140" y="136">💬  Chat</text>
  <text class="s ns" x="140" y="156">web browser</text>

  <rect class="neutral" x="40"  y="202" width="200" height="60" rx="8"/>
  <text class="t nt" x="140" y="226">📱  WhatsApp</text>
  <text class="s ns" x="140" y="246">phone</text>

  <rect class="orange"  x="320" y="80"  width="240" height="124" rx="8"/>
  <text class="t ot" x="440" y="114">🧠  hermes agent</text>
  <text class="s os" x="440" y="138">one per family account</text>
  <text class="s os" x="440" y="156">memory · tools · cronjobs</text>
  <text class="s os" x="440" y="174">native to all three surfaces</text>

  <rect class="purple"  x="600" y="120" width="140" height="64" rx="8"/>
  <text class="t pt" x="670" y="146">LLM</text>
  <text class="s ps" x="670" y="166">via OpenRouter</text>

  <path class="arrow" d="M 240 52  L 285 52  L 285 110 L 318 110" marker-end="url(#a)"/>
  <path class="arrow" d="M 240 142 L 318 142" marker-end="url(#a)"/>
  <path class="arrow" d="M 240 232 L 285 232 L 285 174 L 318 174" marker-end="url(#a)"/>

  <path class="arrow" d="M 560 142 L 598 142" marker-end="url(#a)"/>
  <path class="arrow" d="M 600 162 L 562 162" marker-end="url(#a)"/>
  <text class="lbl" x="580" y="200">think</text>
</svg>
