Explain Endor concepts with a reproducible multi-region topology

apps/docs/src/styles/globals.css

@@ -455,7 +455,7 @@ button {
 }
 .doc-cards {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 14px;
 }
 .doc-card {
@@ -1340,3 +1340,167 @@ button {
   border: 0;
   border-radius: 0;
 }
+
+/* The topology stays a reproducible SVG; React only supplies the viewer. */
+.architecture-figure {
+  display: block;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 28px 0;
+}
+.figure-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #f5f8f3;
+  font:
+    11px ui-monospace,
+    monospace;
+  color: #6c806f;
+}
+.figure-toolbar button {
+  color: var(--green);
+  border: 1px solid #d7e3d4;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: white;
+}
+.figure-preview {
+  display: block;
+  width: 100%;
+  background: #fcfdfb;
+  cursor: zoom-in;
+}
+.prose .figure-preview img {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+.figure-caption {
+  display: block;
+  padding: 10px 16px;
+  font-size: 11px;
+  color: #758576;
+  border-top: 1px solid var(--line);
+}
+.figure-dialog {
+  padding: 0;
+  width: 96vw;
+  max-width: 1900px;
+  height: 94dvh;
+  max-height: 94dvh;
+  border: 1px solid #dce5d9;
+  border-radius: 12px;
+  margin: auto;
+  overflow: hidden;
+  background: #fcfdfb;
+  box-shadow: 0 20px 100px #18312530;
+}
+.figure-dialog::backdrop {
+  background: #1e322e66;
+  backdrop-filter: blur(4px);
+}
+.figure-dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+.figure-viewer-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 12px 18px;
+  background: #fff;
+  border-bottom: 1px solid var(--line);
+  align-items: center;
+}
+.figure-viewer-toolbar strong {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.figure-viewer-toolbar small {
+  color: #a68b52;
+  font-size: 11px;
+  margin-left: 5px;
+}
+.figure-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 11px;
+  color: #647c67;
+}
+.figure-controls button,
+.figure-controls a {
+  min-height: 32px;
+  min-width: 32px;
+  padding: 4px 9px;
+  border: 1px solid #dae4d6;
+  border-radius: 5px;
+  background: #fff;
+  font-weight: 400;
+  text-decoration: none;
+}
+.figure-controls button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.figure-controls > span {
+  min-width: 62px;
+  text-align: center;
+}
+.figure-pan {
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+  overscroll-behavior: contain;
+  padding: 8px;
+}
+.prose .figure-pan img {
+  display: block;
+  max-width: none;
+  height: auto;
+  margin: 0 auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: #fcfdfb;
+}
+.figure-viewer-hint {
+  margin: 0 !important;
+  padding: 10px 18px;
+  border-top: 1px solid var(--line);
+  background: #fff;
+  color: #798d79;
+  font-size: 10px !important;
+  line-height: 1.7 !important;
+}
+@media (max-width: 560px) {
+  .figure-viewer-toolbar {
+    padding: 10px;
+    gap: 8px;
+  }
+  .figure-controls {
+    gap: 5px;
+  }
+  .figure-controls button,
+  .figure-controls a {
+    min-height: 36px;
+  }
+  .figure-toolbar {
+    padding: 10px;
+    font-size: 10px;
+  }
+  .figure-caption {
+    font-size: 10px;
+    padding: 10px;
+  }
+}