feat: Tapo platform page

site/app/globals.css

@@ -1234,3 +1234,109 @@ table.cmp {
 .foot__in a:hover {
     color: var(--ink);
 }
+
+/* ---------- Topology diagram ---------- */
+
+.topo {
+    margin: 2rem 0 0;
+    border: 1px solid var(--rule);
+    border-radius: 10px;
+    background: var(--panel-2);
+    overflow: hidden;
+}
+
+.topo__head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.9rem 1.2rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 0.9rem;
+    border-bottom: 1px solid var(--rule);
+    background: var(--panel);
+}
+
+.topo__seg {
+    display: inline-flex;
+    border: 1px solid var(--rule);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.topo__btn {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: var(--ink-2);
+    font: inherit;
+    font-size: 0.85rem;
+    padding: 0.42rem 0.85rem;
+    cursor: pointer;
+}
+
+.topo__btn + .topo__btn {
+    border-left: 1px solid var(--rule);
+}
+
+.topo__btn:hover {
+    color: var(--ink);
+}
+
+.topo__btn.is-on {
+    background: var(--accent);
+    color: var(--accent-ink);
+}
+
+.topo__btn:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+}
+
+.topo__key {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+    margin: 0;
+    color: var(--ink-3);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+}
+
+.topo__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    display: inline-block;
+}
+
+.topo__dot--out {
+    background: var(--up);
+}
+
+.topo__dot--in {
+    background: var(--accent);
+    margin-left: 0.8rem;
+}
+
+.topo__canvas {
+    display: block;
+    width: 100%;
+    height: 380px;
+}
+
+.topo__note {
+    margin: 0;
+    padding: 0.8rem 0.95rem;
+    border-top: 1px solid var(--rule);
+    background: var(--panel);
+    color: var(--ink-2);
+    font-size: 0.88rem;
+    max-width: 78ch;
+}
+
+@media (max-width: 660px) {
+    .topo__canvas {
+        height: 460px;
+    }
+}

site/app/platform/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { TopologyDiagram } from "@/components/TopologyDiagram";
 
 export const metadata: Metadata = {
     title: "Platform",
@@ -13,6 +14,8 @@ export default function PlatformPage() {
                 <h1 style={{ fontSize: "var(--s-3)", margin: "0.8rem 0 1rem", maxWidth: "19ch" }}>How the pieces fit together.</h1>
                 <p className="lede">There are only three parts: Vantage itself, a small program on each of your servers, and one connection between them that your server opens.</p>
 
+                <TopologyDiagram />
+
                 <div className="split" style={{ marginTop: "3rem" }}>
                     <div>
                         <h2 style={{ fontSize: "var(--s-2)", maxWidth: "18ch" }}>Your servers call us, not the other way round.</h2>