<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 880 300" role="img" aria-label="Architecture: the browser talks to the Horizon BFF (Fastify), which proxies to OAP">
  <defs>
    <marker id="ah" markerWidth="9" markerHeight="9" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L8,3 L0,6 Z" fill="#94a3b8"/>
    </marker>
  </defs>

  <rect x="1" y="1" width="878" height="298" rx="14" fill="#f8fafc" stroke="#e2e8f0"/>

  <!-- Browser -->
  <rect x="32" y="112" width="132" height="72" rx="10" fill="#334155"/>
  <text x="98" y="153" text-anchor="middle" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="16" font-weight="600" fill="#f8fafc">Browser</text>

  <!-- arrow 1 -->
  <line x1="166" y1="148" x2="246" y2="148" stroke="#94a3b8" stroke-width="2" marker-end="url(#ah)"/>

  <!-- Horizon BFF (the new tier) -->
  <rect x="250" y="40" width="340" height="216" rx="10" fill="#ffffff" stroke="#e2722e" stroke-width="2"/>
  <text x="270" y="72" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="17" font-weight="700" fill="#c2540f">Horizon BFF</text>
  <text x="270" y="92" font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="12" fill="#a8743f">Fastify · Node.js</text>
  <line x1="270" y1="104" x2="570" y2="104" stroke="#f3ddcf" stroke-width="1"/>
  <g font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="13.5" fill="#334155">
    <text x="270" y="132">· authentication &amp; sessions</text>
    <text x="270" y="156">· RBAC enforcement</text>
    <text x="270" y="180">· audit logging</text>
    <text x="270" y="204">· capability probing &amp; caching</text>
    <text x="270" y="228">· server-side i18n &amp; widget gating</text>
  </g>

  <!-- arrow 2 -->
  <line x1="592" y1="148" x2="672" y2="148" stroke="#94a3b8" stroke-width="2" marker-end="url(#ah)"/>

  <!-- OAP -->
  <rect x="676" y="104" width="172" height="88" rx="10" fill="#334155"/>
  <text x="762" y="132" text-anchor="middle" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif" font-size="16" font-weight="700" fill="#f8fafc">OAP</text>
  <g font-family="ui-monospace, SFMono-Regular, Menlo, monospace" font-size="11.5" fill="#cbd5e1">
    <text x="762" y="158" text-anchor="middle">GraphQL query · :12800</text>
    <text x="762" y="177" text-anchor="middle">admin REST · :17128</text>
  </g>
</svg>
