docs: add the reference topology diagram to the architecture page (#1194)

* docs: add the reference topology diagram to the architecture page

Adds a "Reference topology" section to Platform architecture with the
Whimsical topology export, so readers see the whole deployment before the
page walks through each service.

The export has a baked-in white background, so it keeps a light canvas in
both themes rather than inverting, which would wreck the node fills. The
card border, ring, and caption are theme-aware instead, which frames the
white panel as deliberate in dark mode.

The diagram is too dense to read at the prose column width, so it links to
the full-size PNG and breaks out of the article padding on md and up.

~ 🎹 Evanescence, Evan's Agent

* docs: add padding around the topology diagram

Bumps the figure's inner padding from p-3 to p-4, and to p-6 at md and up,
so the diagram has room to breathe inside the white card.

~ 🎹 Evanescence, Evan's Agent

Author: evantahler

app/en/operate/deploy/architecture/page.mdx

@@ -4,13 +4,52 @@ description: "The services that make up a self-hosted Arcade deployment and how
 ---
 
 import { Callout } from "nextra/components";
+import Image from "next/image";
 
 # Platform architecture
 
 A self-hosted Arcade deployment runs the services below on your Kubernetes cluster. The [Helm chart](/operate/deploy/helm) and the [Azure](/operate/deploy/azure) and [AWS](/operate/deploy/aws) marketplace deployments install the same platform.
 
 This page describes what each service does and what it connects to. For installation steps, see [Self-host with Helm](/operate/deploy/helm).
 
+## Reference topology
+
+The diagram below shows a complete deployment: the Kubernetes clusters that run the platform and its workers, the network boundaries each call crosses, and the data tier behind every service. The sections that follow describe each piece.
+
+{/*
+  Source diagram, edit it here and re-export the PNG:
+  https://whimsical.com/arcade719/arcade-reference-topology-diagram-8DCV7aoMm9rmBkZg2xvpem
+
+  The export has a baked-in white background, so the figure keeps a light
+  canvas in both themes rather than inverting. In dark mode the image is
+  dimmed to 83% and the panel behind it is set to neutral-300, the same value,
+  so the two match seamlessly and the figure reads as a lit panel instead of a
+  glaring rectangle. Brightness scales every channel equally, so the diagram's
+  own contrast is unchanged. The figure stays inside the content column.
+*/}
+
+<figure className="my-6">
+  <a
+    className="group block cursor-zoom-in overflow-hidden rounded-xl border border-neutral-300 bg-white p-4 shadow-sm ring-1 ring-black/5 transition hover:border-neutral-400 hover:shadow-md md:p-6 dark:bg-neutral-300"
+    href="/images/architecture/arcade-reference-topology.png"
+    rel="noopener"
+    target="_blank"
+    title="Open the full-size topology diagram"
+  >
+    <Image
+      alt="Arcade reference topology diagram: agents and tool developers reach the ingress gateway, which fronts the Kubernetes clusters running the Engine, Coordinator, Experience API, dashboard, and workers; egress gateways reach identity providers, telemetry, and connected services; PostgreSQL, Redis, and blob storage sit in the data tier below"
+      className="h-auto w-full dark:brightness-[0.83]"
+      height={5362}
+      sizes="(max-width: 768px) 100vw, 800px"
+      src="/images/architecture/arcade-reference-topology.png"
+      width={9772}
+    />
+  </a>
+  <figcaption className="mt-3 text-center text-neutral-600 text-sm dark:text-neutral-400">
+    The Arcade reference topology. Open the diagram in a new tab to zoom in and read the labels.
+  </figcaption>
+</figure>
+
 ## Services
 
 | Service | Responsible for | Talks to | Required |