<svg viewBox="0 0 1200 260" xmlns="http://www.w3.org/2000/svg">
  <style>/* transparent-canvas */ :root { background-color: transparent; color-scheme: light dark; }</style>
  <!-- ========== iPhone ========== -->
  <g>
    <title>iOS app (Swift)
iroh via iroh-ffi</title>
    <rect x="40" y="20" width="120" height="220" fill="transparent" pointer-events="all"/>
    <rect x="40" y="20" width="120" height="220" rx="22" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <path d="M 62 24
             L 77 24
             Q 80 24 80 27
             L 80 30
             Q 80 35 85 35
             L 115 35
             Q 120 35 120 30
             L 120 27
             Q 120 24 123 24
             L 138 24
             A 18 18 0 0 1 156 42
             L 156 218
             A 18 18 0 0 1 138 236
             L 62 236
             A 18 18 0 0 1 44 218
             L 44 42
             A 18 18 0 0 1 62 24 Z"
          fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <text x="100" y="82" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">swift app</text>
    <rect x="70" y="160" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="100" y="186" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
  </g>

  <!-- ========== Android ========== -->
  <g>
    <title>Android app (Kotlin)
iroh via iroh-ffi</title>
    <rect x="190" y="20" width="120" height="220" fill="transparent" pointer-events="all"/>
    <rect x="190" y="20" width="120" height="220" rx="22" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <rect x="194" y="24" width="112" height="212" rx="18" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <circle cx="250" cy="36" r="3" fill="#888"/>
    <text x="250" y="82" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">kotlin app</text>
    <rect x="220" y="160" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="250" y="186" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
  </g>

  <!-- ========== Desktop / monitor (native C++ app) ========== -->
  <g>
    <title>Native desktop (C++)
iroh via iroh-c-ffi</title>
    <rect x="350" y="40" width="180" height="158" fill="transparent" pointer-events="all"/>
    <rect x="350" y="40" width="180" height="130" rx="4" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <rect x="354" y="44" width="172" height="122" rx="3" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <text x="440" y="62" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">c++ app</text>
    <rect x="410" y="92" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="440" y="118" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
    <rect x="432" y="170" width="16" height="22" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <rect x="400" y="192" width="80" height="6" rx="2" fill="#eee" stroke="#888" stroke-width="1.5"/>
  </g>

  <!-- ========== Browser window (js app, iroh compiles to wasm) ========== -->
  <g>
    <title>Web app (JavaScript)
iroh compiled to WASM</title>
    <rect x="560" y="40" width="180" height="130" fill="transparent" pointer-events="all"/>
    <rect x="560" y="40" width="180" height="130" rx="4" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <line x1="560" y1="56" x2="740" y2="56" stroke="#888" stroke-width="1"/>
    <circle cx="572" cy="48" r="3" fill="#888"/>
    <circle cx="584" cy="48" r="3" fill="#888"/>
    <circle cx="596" cy="48" r="3" fill="#888"/>
    <rect x="608" y="44" width="120" height="8" rx="4" fill="#eee" stroke="#888" stroke-width="1"/>
    <rect x="564" y="60" width="172" height="106" rx="3" fill="#eee" stroke="#6366f1" stroke-width="1.5"/>
    <text x="650" y="78" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">js app</text>
    <rect x="620" y="105" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="650" y="131" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
  </g>

  <!-- ========== Server (1U pizza box) ========== -->
  <g>
    <title>Server daemon (Rust)
iroh crate directly</title>
    <rect x="780" y="70" width="220" height="90" fill="transparent" pointer-events="all"/>
    <rect x="780" y="70" width="220" height="90" rx="3" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <line x1="790" y1="83" x2="790" y2="147" stroke="#888" stroke-width="1"/>
    <line x1="794" y1="83" x2="794" y2="147" stroke="#888" stroke-width="1"/>
    <line x1="798" y1="83" x2="798" y2="147" stroke="#888" stroke-width="1"/>
    <line x1="802" y1="83" x2="802" y2="147" stroke="#888" stroke-width="1"/>
    <line x1="806" y1="83" x2="806" y2="147" stroke="#888" stroke-width="1"/>
    <rect x="970" y="80" width="20" height="15" fill="#eee" stroke="#888" stroke-width="1"/>
    <rect x="970" y="100" width="20" height="15" fill="#eee" stroke="#888" stroke-width="1"/>
    <rect x="970" y="120" width="20" height="15" fill="#eee" stroke="#888" stroke-width="1"/>
    <circle cx="980" cy="145" r="2" fill="#d97706"/>
    <text x="890" y="93" text-anchor="middle" font-family="'Space Mono', monospace" font-size="11" fill="#6366f1">rust daemon</text>
    <rect x="860" y="103" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="890" y="129" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
  </g>

  <!-- ========== Embedded (microcontroller chip) ========== -->
  <g>
    <title>Embedded firmware (Rust)
iroh crate</title>
    <rect x="1040" y="70" width="90" height="90" fill="transparent" pointer-events="all"/>
    <line x1="1042" y1="80" x2="1050" y2="80" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="92" x2="1050" y2="92" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="104" x2="1050" y2="104" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="116" x2="1050" y2="116" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="128" x2="1050" y2="128" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="140" x2="1050" y2="140" stroke="#888" stroke-width="1.5"/>
    <line x1="1042" y1="152" x2="1050" y2="152" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="80" x2="1128" y2="80" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="92" x2="1128" y2="92" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="104" x2="1128" y2="104" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="116" x2="1128" y2="116" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="128" x2="1128" y2="128" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="140" x2="1128" y2="140" stroke="#888" stroke-width="1.5"/>
    <line x1="1120" y1="152" x2="1128" y2="152" stroke="#888" stroke-width="1.5"/>
    <rect x="1050" y="70" width="70" height="90" rx="2" fill="#eee" stroke="#888" stroke-width="1.5"/>
    <circle cx="1057" cy="77" r="1.5" fill="#888"/>
    <text x="1085" y="88" text-anchor="middle" font-family="'Space Mono', monospace" font-size="10" fill="#6366f1">firmware</text>
    <rect x="1055" y="105" width="60" height="40" rx="4" fill="#eee" stroke="#d97706" stroke-width="1.5"/>
    <text x="1085" y="131" text-anchor="middle" font-family="'Space Mono', monospace" font-size="12" fill="#d97706">iroh</text>
  </g>
</svg>
