diff --git a/apps/web/index.html b/apps/web/index.html
index 8ea13ac..c09e476 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -34,10 +34,11 @@
     <link rel="icon" type="image/png" href="/logo.png" />
     <link rel="apple-touch-icon" href="/logo.png" />
 
-    <!-- Typography: Poppins & JetBrains Mono -->
+    <!-- Typography: Poppins, JetBrains Mono & Silvana Editorial Serif -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&display=swap" rel="stylesheet">
+    <link href="https://fonts.cdnfonts.com/css/silvana" rel="stylesheet">
 
     <!-- Schema.org JSON-LD Structured Data -->
     <script type="application/ld+json">
diff --git a/apps/web/public/fonts/silvana/Silvana-Bold.woff b/apps/web/public/fonts/silvana/Silvana-Bold.woff
new file mode 100644
index 0000000..314ffa6
Binary files /dev/null and b/apps/web/public/fonts/silvana/Silvana-Bold.woff differ
diff --git a/apps/web/public/fonts/silvana/Silvana-Italic.woff b/apps/web/public/fonts/silvana/Silvana-Italic.woff
new file mode 100644
index 0000000..d15a114
Binary files /dev/null and b/apps/web/public/fonts/silvana/Silvana-Italic.woff differ
diff --git a/apps/web/public/fonts/silvana/Silvana-Light.woff b/apps/web/public/fonts/silvana/Silvana-Light.woff
new file mode 100644
index 0000000..a08f778
Binary files /dev/null and b/apps/web/public/fonts/silvana/Silvana-Light.woff differ
diff --git a/apps/web/public/fonts/silvana/Silvana-Medium.woff b/apps/web/public/fonts/silvana/Silvana-Medium.woff
new file mode 100644
index 0000000..2234903
Binary files /dev/null and b/apps/web/public/fonts/silvana/Silvana-Medium.woff differ
diff --git a/apps/web/public/fonts/silvana/Silvana-Regular.woff b/apps/web/public/fonts/silvana/Silvana-Regular.woff
new file mode 100644
index 0000000..2d79c89
Binary files /dev/null and b/apps/web/public/fonts/silvana/Silvana-Regular.woff differ
diff --git a/apps/web/src/components/layout/RootLayout.tsx b/apps/web/src/components/layout/RootLayout.tsx
index 44774aa..a21783d 100644
--- a/apps/web/src/components/layout/RootLayout.tsx
+++ b/apps/web/src/components/layout/RootLayout.tsx
@@ -13,9 +13,11 @@ import { cn } from '../../lib/utils';
  * - Dominating cream background (#FFF8F0) with skeuomorphic porcelain depth.
  * - Fluid, component-by-component Framer Motion transitions.
  * - Subtle ambient cobalt blue lighting.
+ * - Editorial Silvana typography applied across pages, preserving sans on home hero/navbar/footer.
  */
 export const RootLayout: React.FC = () => {
   const location = useLocation();
+  const isHome = location.pathname === '/';
   const isPatents = location.pathname.startsWith('/patents') || location.pathname === '/governance/patents';
   const isArchitect = location.pathname.startsWith('/architect');
 
@@ -34,7 +36,7 @@ export const RootLayout: React.FC = () => {
           className="pointer-events-none fixed inset-0 z-0 opacity-20 bg-[linear-gradient(to_right,rgba(26,26,26,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(26,26,26,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem]"
         />
 
-        {/* Floating Porcelain Dock Navbar */}
+        {/* Floating Porcelain Dock Navbar (Maintains Poppins / font-sans) */}
         <Navbar />
 
         {/* Centered Main Stage */}
@@ -56,14 +58,14 @@ export const RootLayout: React.FC = () => {
                 animate={{ opacity: 1, y: 0, scale: 1 }}
                 exit={{ opacity: 0, y: -10, scale: 0.995 }}
                 transition={{ duration: 0.32, ease: [0.16, 1, 0.3, 1] }}
-                className="w-full"
+                className={cn('w-full', !isHome && 'silvana-scope')}
               >
                 <Outlet />
               </motion.div>
             </AnimatePresence>
           </div>
         </main>
-        {/* Antigravity-Style Monumental Footer */}
+        {/* Antigravity-Style Monumental Footer (Maintains Poppins / font-sans) */}
         <Footer />
       </div>
     </OnboardingGate>
diff --git a/apps/web/src/components/topology/TopologyGraph.test.ts b/apps/web/src/components/topology/TopologyGraph.test.ts
new file mode 100644
index 0000000..d637ec5
--- /dev/null
+++ b/apps/web/src/components/topology/TopologyGraph.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'bun:test';
+import { TopologyGraph } from './TopologyGraph';
+import { clusterState } from '../../engine/state';
+
+describe('TopologyGraph Component & Autonomous DAG Suite', () => {
+  it('exports TopologyGraph as a valid React functional component', () => {
+    expect(TopologyGraph).toBeDefined();
+    expect(typeof TopologyGraph).toBe('function');
+  });
+
+  it('validates 7 enterprise nodes in cluster state', () => {
+    const nodes = clusterState.getNodes();
+    expect(nodes.length).toBeGreaterThanOrEqual(7);
+
+    const ids = nodes.map((n) => n.id);
+    expect(ids).toContain('db-primary');
+    expect(ids).toContain('db-replica');
+    expect(ids).toContain('redis-cache');
+    expect(ids).toContain('auth-service');
+    expect(ids).toContain('payment-service');
+    expect(ids).toContain('api-gateway');
+    expect(ids).toContain('web-frontend');
+  });
+
+  it('verifies DAG is cycle-free with Kahn topological sort', () => {
+    const graph = clusterState.getGraph();
+    expect(graph.hasCycle()).toBe(false);
+
+    const order = graph.getTopologicalRecoveryOrder();
+    expect(order).toBeDefined();
+    expect(order.length).toBe(7);
+
+    // Root database must be restored before dependent microservices
+    const dbIndex = order.indexOf('db-primary');
+    const authIndex = order.indexOf('auth-service');
+    const gatewayIndex = order.indexOf('api-gateway');
+    const webIndex = order.indexOf('web-frontend');
+
+    expect(dbIndex).toBeLessThan(authIndex);
+    expect(authIndex).toBeLessThan(gatewayIndex);
+    expect(gatewayIndex).toBeLessThan(webIndex);
+  });
+
+  it('verifies reverse blast radius calculation for root db outage', () => {
+    const graph = clusterState.getGraph();
+    const blast = graph.computeBlastRadius('db-primary');
+
+    expect(blast.targetNodeId).toBe('db-primary');
+    // Primary DB failure cascades to cache, replica, auth, payment, gateway, web
+    expect(blast.affectedNodeIds).toContain('redis-cache');
+    expect(blast.affectedNodeIds).toContain('db-replica');
+    expect(blast.affectedNodeIds).toContain('auth-service');
+    expect(blast.affectedNodeIds).toContain('payment-service');
+    expect(blast.affectedNodeIds).toContain('api-gateway');
+    expect(blast.affectedNodeIds).toContain('web-frontend');
+    expect(blast.severity).toBe('critical');
+  });
+
+  it('verifies minimal leaf blast radius for web frontend outage', () => {
+    const graph = clusterState.getGraph();
+    const blast = graph.computeBlastRadius('web-frontend');
+
+    expect(blast.targetNodeId).toBe('web-frontend');
+    // Frontend is an edge leaf node; downtime should not cascade to core databases
+    expect(blast.affectedNodeIds.length).toBe(0);
+    expect(blast.severity).toBe('low');
+  });
+});
+
diff --git a/apps/web/src/components/topology/TopologyGraph.tsx b/apps/web/src/components/topology/TopologyGraph.tsx
index 05a53b0..f58e963 100644
--- a/apps/web/src/components/topology/TopologyGraph.tsx
+++ b/apps/web/src/components/topology/TopologyGraph.tsx
@@ -1,31 +1,286 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Card } from '../common/Card';
 import { Badge } from '../common/Badge';
 import { Button } from '../common/Button';
 import { fetchNodes, fetchGraph, triggerSimulation } from '../../lib/api';
+import { clusterState } from '../../engine/state';
 import type { SystemNode } from '../../types';
+import { cn } from '../../lib/utils';
 import {
   Network,
-  CheckCircle2,
-  AlertOctagon,
+  Database,
+  Globe,
+  Zap,
+  ShieldCheck,
+  CreditCard,
+  Monitor,
   RefreshCw,
+  AlertOctagon,
+  CheckCircle2,
+  AlertTriangle,
+  ArrowDown,
+  Layers,
+  Activity,
+  Flame,
+  Radio,
+  RotateCcw,
+  X,
+  SlidersHorizontal,
 } from 'lucide-react';
 
-export const TopologyGraph: React.FC = () => {
+export interface TopologyGraphProps {
+  className?: string;
+}
+
+interface NodeLayoutMeta {
+  id: string;
+  name: string;
+  tier: number;
+  tierLabel: string;
+  tierName: string;
+  recoveryStep: number;
+  type: 'database' | 'application' | 'gateway' | 'cache';
+  port: string;
+  latency: string;
+  protocol: string;
+  icon: React.ElementType;
+  iconColor: string;
+  iconBg: string;
+  engine: string;
+  description: string;
+  x: number;
+  y: number;
+}
+
+const STATIC_NODE_METAS: Record<string, NodeLayoutMeta> = {
+  'web-frontend': {
+    id: 'web-frontend',
+    name: 'Horizon Web UI',
+    tier: 3,
+    tierLabel: 'L3',
+    tierName: 'CLIENT INGRESS',
+    recoveryStep: 5,
+    type: 'application',
+    port: ':3000',
+    latency: '24ms',
+    protocol: 'HTTPS / Web',
+    icon: Monitor,
+    iconColor: 'text-[#0047AB]',
+    iconBg: 'bg-blue-50 border-blue-200',
+    engine: 'React 19 / Vite Edge',
+    description: 'Client-facing mission control dashboard and operator cockpit.',
+    x: 300,
+    y: 50,
+  },
+  'api-gateway': {
+    id: 'api-gateway',
+    name: 'API Gateway',
+    tier: 2,
+    tierLabel: 'L2',
+    tierName: 'ROUTING & PROXY',
+    recoveryStep: 4,
+    type: 'gateway',
+    port: ':8080',
+    latency: '4.5ms',
+    protocol: 'HTTP/2 & gRPC',
+    icon: Globe,
+    iconColor: 'text-indigo-600',
+    iconBg: 'bg-indigo-50 border-indigo-200',
+    engine: 'Envoy Reverse Proxy',
+    description: 'TLS termination, rate limiting, and intelligent load routing.',
+    x: 300,
+    y: 165,
+  },
+  'auth-service': {
+    id: 'auth-service',
+    name: 'Auth Service',
+    tier: 1,
+    tierLabel: 'L1',
+    tierName: 'APPLICATION CORE',
+    recoveryStep: 3,
+    type: 'application',
+    port: ':5001',
+    latency: '12ms',
+    protocol: 'gRPC / JWT',
+    icon: ShieldCheck,
+    iconColor: 'text-emerald-700',
+    iconBg: 'bg-emerald-50 border-emerald-200',
+    engine: 'EIP-712 / Go Auth Engine',
+    description: 'Session state validation, HMAC token signing, and Web3 key authorization.',
+    x: 180,
+    y: 295,
+  },
+  'payment-service': {
+    id: 'payment-service',
+    name: 'Payment Service',
+    tier: 1,
+    tierLabel: 'L1',
+    tierName: 'PAYMENT GATEWAY',
+    recoveryStep: 3,
+    type: 'application',
+    port: ':5002',
+    latency: '18ms',
+    protocol: 'REST / Webhook',
+    icon: CreditCard,
+    iconColor: 'text-purple-700',
+    iconBg: 'bg-purple-50 border-purple-200',
+    engine: 'MST Escrow / Stripe Gateway',
+    description: 'NFT subscription license checking and fiat/crypto payment settlement.',
+    x: 420,
+    y: 295,
+  },
+  'redis-cache': {
+    id: 'redis-cache',
+    name: 'Redis Cache',
+    tier: 0,
+    tierLabel: 'L0',
+    tierName: 'CACHE STORE',
+    recoveryStep: 2,
+    type: 'cache',
+    port: ':6379',
+    latency: '0.4ms',
+    protocol: 'RESP3 / TCP',
+    icon: Zap,
+    iconColor: 'text-amber-700',
+    iconBg: 'bg-amber-50 border-amber-200',
+    engine: 'Redis 7.2 Memory Cluster',
+    description: 'High-throughput session cache, rate-limit buckets, and pub/sub message bus.',
+    x: 105,
+    y: 435,
+  },
+  'db-primary': {
+    id: 'db-primary',
+    name: 'PostgreSQL Primary',
+    tier: 0,
+    tierLabel: 'L0',
+    tierName: 'ROOT ACID',
+    recoveryStep: 1,
+    type: 'database',
+    port: ':5432',
+    latency: '1.2ms',
+    protocol: 'PostgreSQL Wire / TLS',
+    icon: Database,
+    iconColor: 'text-[#0047AB]',
+    iconBg: 'bg-blue-100 border-blue-300',
+    engine: 'PostgreSQL 16 Primary ACID',
+    description: 'Foundational system of record with continuous WAL replication archiving.',
+    x: 300,
+    y: 435,
+  },
+  'db-replica': {
+    id: 'db-replica',
+    name: 'PostgreSQL Replica',
+    tier: 0,
+    tierLabel: 'L0',
+    tierName: 'READ REPLICA',
+    recoveryStep: 2,
+    type: 'database',
+    port: ':5433',
+    latency: '0.8ms',
+    protocol: 'WAL Streaming Sync',
+    icon: Database,
+    iconColor: 'text-sky-700',
+    iconBg: 'bg-sky-50 border-sky-200',
+    engine: 'PostgreSQL 16 Hot Standby',
+    description: 'Real-time asynchronous read replica ready for automated failover promotion.',
+    x: 495,
+    y: 435,
+  },
+};
+
+interface GraphEdgeConfig {
+  id: string;
+  sourceId: string;
+  targetId: string;
+  label: string;
+  path: string;
+}
+
+const STATIC_EDGES: GraphEdgeConfig[] = [
+  {
+    id: 'edge-gateway-to-web',
+    sourceId: 'api-gateway',
+    targetId: 'web-frontend',
+    label: 'User Traffic Ingress',
+    path: 'M 300 129 L 300 86',
+  },
+  {
+    id: 'edge-auth-to-gateway',
+    sourceId: 'auth-service',
+    targetId: 'api-gateway',
+    label: 'Route Auth & JWT',
+    path: 'M 180 259 C 180 220, 270 230, 270 201',
+  },
+  {
+    id: 'edge-cache-to-gateway',
+    sourceId: 'redis-cache',
+    targetId: 'api-gateway',
+    label: 'Session & Rate Limits',
+    path: 'M 105 399 C 75 300, 220 250, 245 201',
+  },
+  {
+    id: 'edge-cache-to-auth',
+    sourceId: 'redis-cache',
+    targetId: 'auth-service',
+    label: 'Token Caching',
+    path: 'M 120 399 C 120 360, 155 365, 155 331',
+  },
+  {
+    id: 'edge-db-to-auth',
+    sourceId: 'db-primary',
+    targetId: 'auth-service',
+    label: 'User Credentials Query',
+    path: 'M 275 399 C 275 360, 205 365, 205 331',
+  },
+  {
+    id: 'edge-auth-to-payment',
+    sourceId: 'auth-service',
+    targetId: 'payment-service',
+    label: 'Identity Attestation',
+    path: 'M 260 295 C 300 295, 300 295, 340 295',
+  },
+  {
+    id: 'edge-db-to-payment',
+    sourceId: 'db-primary',
+    targetId: 'payment-service',
+    label: 'Ledger Balance Query',
+    path: 'M 325 399 C 325 360, 420 365, 420 331',
+  },
+  {
+    id: 'edge-db-to-cache',
+    sourceId: 'db-primary',
+    targetId: 'redis-cache',
+    label: 'Cache Warmup & Sync',
+    path: 'M 220 435 C 200 435, 200 435, 185 435',
+  },
+  {
+    id: 'edge-db-to-replica',
+    sourceId: 'db-primary',
+    targetId: 'db-replica',
+    label: 'Continuous WAL Stream',
+    path: 'M 380 435 C 400 435, 400 435, 415 435',
+  },
+];
+
+export const TopologyGraph: React.FC<TopologyGraphProps> = ({ className = '' }) => {
   const [nodes, setNodes] = useState<SystemNode[]>([]);
   const [edges, setEdges] = useState<{ dependent_id: string; depends_on_id: string }[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>('db-primary');
-  const [loading, setLoading] = useState(true);
-  const [blastRadius, setBlastRadius] = useState<string[]>([]);
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [viewMode, setViewMode] = useState<'traffic' | 'recovery'>('traffic');
+  const [filter, setFilter] = useState<'all' | 'data' | 'services' | 'edge'>('all');
+  const [isInspectorOpen, setIsInspectorOpen] = useState<boolean>(true);
 
-  const loadTopology = async () => {
+  const loadTopology = useCallback(async () => {
     try {
+      setLoading(true);
       const [n, g] = await Promise.all([fetchNodes(), fetchGraph()]);
       setNodes(n);
       if (g.edges && g.edges.length > 0) {
         setEdges(g.edges);
       } else {
-        // Fallback default edges based on node dependencies
         const derivedEdges: { dependent_id: string; depends_on_id: string }[] = [];
         n.forEach((node: SystemNode) => {
           node.dependencies.forEach((dep: string) => {
@@ -37,25 +292,43 @@ export const TopologyGraph: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     loadTopology();
-  }, []);
+    const unsubscribe = clusterState.subscribe(() => {
+      loadTopology();
+    });
+    return () => unsubscribe();
+  }, [loadTopology]);
 
-  // Compute blast radius: find all nodes that depend directly or indirectly on targetNode
-  useEffect(() => {
-    if (!selectedNodeId) {
-      setBlastRadius([]);
-      return;
-    }
+  // Selected node metadata
+  const selectedNode = useMemo(() => {
+    return nodes.find((n) => n.id === selectedNodeId) || null;
+  }, [nodes, selectedNodeId]);
+
+  const selectedNodeMeta = useMemo(() => {
+    if (!selectedNodeId) return null;
+    return STATIC_NODE_METAS[selectedNodeId] || null;
+  }, [selectedNodeId]);
 
+  // Compute upstream prerequisites for selected node
+  const upstreamDependencies = useMemo(() => {
+    if (!selectedNodeId) return [];
+    const directPrereqs = edges
+      .filter((e) => e.dependent_id === selectedNodeId)
+      .map((e) => e.depends_on_id);
+    return Array.from(new Set(directPrereqs));
+  }, [selectedNodeId, edges]);
+
+  // Compute blast radius for selected node
+  const blastRadius = useMemo(() => {
+    if (!selectedNodeId) return [];
     const affected = new Set<string>();
     const queue = [selectedNodeId];
 
     while (queue.length > 0) {
       const current = queue.shift()!;
-      // Find all nodes that depend on current
       const dependents = edges
         .filter((e) => e.depends_on_id === current)
         .map((e) => e.dependent_id);
@@ -67,252 +340,795 @@ export const TopologyGraph: React.FC = () => {
         }
       }
     }
-
-    setBlastRadius(Array.from(affected));
+    return Array.from(affected);
   }, [selectedNodeId, edges]);
 
-  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+  // Check if any node in cluster is down
+  const downNodes = useMemo(() => {
+    return nodes.filter((n) => n.status === 'down');
+  }, [nodes]);
+
+  const isSelectedDown = selectedNode?.status === 'down';
 
+  // Toggle simulate failure or restore
   const handleToggleState = async (nodeId: string, currentStatus: string) => {
     const nextStatus = currentStatus === 'down' ? 'healthy' : 'down';
     await triggerSimulation(nodeId, nextStatus);
     await loadTopology();
   };
 
-  // Group nodes into topological visual tiers
-  const tier1 = nodes.filter((n) => n.id === 'web-frontend');
-  const tier2 = nodes.filter((n) => n.id === 'api-gateway');
-  const tier3 = nodes.filter((n) => n.id === 'auth-service' || n.id === 'payment-service');
-  const tier4 = nodes.filter((n) => n.id === 'redis-cache');
-  const tier5 = nodes.filter((n) => n.id === 'db-primary' || n.id === 'db-replica');
+  // One-click restore all nodes to healthy
+  const handleRestoreAll = async () => {
+    for (const node of nodes) {
+      if (node.status === 'down') {
+        await triggerSimulation(node.id, 'healthy');
+      }
+    }
+    await loadTopology();
+  };
+
+  // Helper to determine edge relationship with active focus
+  const getEdgeState = (edge: GraphEdgeConfig) => {
+    const focusId = hoveredNodeId || selectedNodeId;
+    if (!focusId) return 'normal';
+
+    const isDirectUpstream = edge.targetId === focusId;
+    const isDirectDownstream = edge.sourceId === focusId;
+    const isCascaded =
+      blastRadius.includes(edge.targetId) &&
+      (edge.sourceId === selectedNodeId || blastRadius.includes(edge.sourceId));
+
+    if (isDirectUpstream) return 'upstream';
+    if (isDirectDownstream || isCascaded) {
+      return isSelectedDown ? 'danger' : 'downstream';
+    }
+    return 'dimmed';
+  };
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-      {/* Main Interactive Visualizer */}
-      <Card className="p-6 lg:col-span-2 flex flex-col justify-between min-h-[580px] relative overflow-hidden skeuo-card border-[#E5D7C5]">
+    <div className={cn('horizon-topology-graph flex flex-col gap-6 font-sans w-full', className)}>
+      {/* Main Interactive Visualizer (Full Width) */}
+      <Card className="horizon-topology-card p-5 sm:p-6 flex flex-col justify-between min-h-[620px] relative overflow-hidden skeuo-card border-[#E5D7C5] w-full">
         {/* Subtle Network Dot Grid */}
-        <div className="absolute inset-0 opacity-[0.07] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
+        <div className="absolute inset-0 opacity-[0.06] pointer-events-none bg-[radial-gradient(#0047AB_1.5px,transparent_1.5px)] [background-size:24px_24px]" />
 
         <div>
-          <div className="flex items-center justify-between pb-4 mb-6 border-b border-[#EADCC9] relative z-10">
+          {/* Header Controls Bar */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-4 mb-4 border-b border-[#EADCC9] gap-4 relative z-10">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] flex items-center justify-center shadow-inner">
+              <div className="w-10 h-10 rounded-xl bg-[#0047AB]/10 border border-[#0047AB]/25 text-[#0047AB] flex items-center justify-center shadow-inner shrink-0">
                 <Network className="w-5 h-5" />
               </div>
               <div>
-                <h2 className="text-base font-bold text-[#1A1A1A] tracking-tight">
+                <h2 className="text-base font-black text-[#1A1A1A] tracking-tight">
                   Autonomous Dependency DAG
                 </h2>
-                <p className="text-xs text-[#6E6258] font-medium">
-                  Topological recovery flow: Foundational Data Layer &rarr; Gateway &rarr; Web Edge
+                <p className="text-xs text-[#6E6258] font-medium mt-0.5">
+                  Multi-tier service dependency topology with reverse blast radius resolution.
                 </p>
               </div>
             </div>
 
-            <Button variant="secondary" size="sm" onClick={loadTopology} className="gap-1.5 text-xs font-semibold">
-              <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
-              <span>Refresh DAG</span>
-            </Button>
+            <div className="flex flex-wrap items-center gap-2">
+              {/* View Mode Switcher */}
+              <div className="inline-flex p-1 rounded-xl bg-[#F5EDE2] border border-[#E5D7C5] shadow-inner text-xs font-semibold">
+                <button
+                  type="button"
+                  onClick={() => setViewMode('traffic')}
+                  className={cn(
+                    'px-3 py-1.5 rounded-lg transition-all duration-150 flex items-center gap-1.5 cursor-pointer',
+                    viewMode === 'traffic'
+                      ? 'bg-white text-[#0047AB] font-bold shadow-xs border border-[#E0D0BE]'
+                      : 'text-[#6E6258] hover:text-[#1A1A1A]'
+                  )}
+                >
+                  <ArrowDown className="w-3.5 h-3.5" />
+                  <span>Traffic Flow</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setViewMode('recovery')}
+                  className={cn(
+                    'px-3 py-1.5 rounded-lg transition-all duration-150 flex items-center gap-1.5 cursor-pointer',
+                    viewMode === 'recovery'
+                      ? 'bg-white text-[#0047AB] font-bold shadow-xs border border-[#E0D0BE]'
+                      : 'text-[#6E6258] hover:text-[#1A1A1A]'
+                  )}
+                >
+                  <Layers className="w-3.5 h-3.5" />
+                  <span>Kahn Order</span>
+                </button>
+              </div>
+
+              {/* Refresh DAG */}
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={loadTopology}
+                className="gap-1.5 text-xs font-semibold rounded-xl"
+              >
+                <RefreshCw className={cn('w-3.5 h-3.5', loading && 'animate-spin')} />
+                <span className="hidden sm:inline">Refresh</span>
+              </Button>
+            </div>
           </div>
 
-          {/* Interactive Tiered Canvas */}
-          <div className="relative z-10 py-4 flex flex-col items-center gap-8">
-            
-            {/* Tier 1: Client Edge */}
-            <div className="flex justify-center gap-6 w-full">
-              {tier1.map((n) => renderNode(n))}
+          {/* Sub-toolbar: Non-Repetitive Filter & Outage Alert Banner */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4 pb-2 text-xs relative z-10">
+            {/* Filter pills with primary node auto-selection */}
+            <div className="flex items-center gap-1.5 text-xs">
+              <span className="text-[10px] font-mono tracking-wider text-[#8A7B6D] font-bold uppercase mr-1">
+                Filter:
+              </span>
+              {[
+                { id: 'all', label: 'All Tiers (7)', targetNode: null },
+                { id: 'data', label: 'Tier 0 Data', targetNode: 'db-primary' },
+                { id: 'services', label: 'Tier 1 Services', targetNode: 'auth-service' },
+                { id: 'edge', label: 'Tier 2-3 Edge', targetNode: 'web-frontend' },
+              ].map((f) => (
+                <button
+                  key={f.id}
+                  type="button"
+                  onClick={() => {
+                    setFilter(f.id as any);
+                    if (f.targetNode) {
+                      setSelectedNodeId(f.targetNode);
+                      setIsInspectorOpen(true);
+                    }
+                  }}
+                  className={cn(
+                    'px-2.5 py-1 rounded-lg font-mono text-[10px] tracking-wider font-bold uppercase transition-colors cursor-pointer',
+                    filter === f.id
+                      ? 'bg-[#0047AB] text-white shadow-xs'
+                      : 'bg-white border border-[#E5D7C5] text-[#6E6258] hover:bg-[#FAF3EA]'
+                  )}
+                >
+                  {f.label}
+                </button>
+              ))}
             </div>
 
-            <ConnectorArrow text="Directs User Traffic" />
+            {/* Outage status pill */}
+            {downNodes.length > 0 ? (
+              <div className="flex items-center gap-2 px-3 py-1 rounded-lg bg-red-50 border border-red-300 text-red-700 text-xs font-bold animate-pulse">
+                <AlertTriangle className="w-3.5 h-3.5 text-red-600 shrink-0" />
+                <span className="font-mono text-[11px] tracking-wider">
+                  {downNodes.length} OUTAGE ACTIVE: {downNodes.map((n) => n.name).join(', ')}
+                </span>
+                <button
+                  type="button"
+                  onClick={handleRestoreAll}
+                  className="ml-1 underline hover:text-red-900 cursor-pointer font-mono text-[10px] uppercase font-bold"
+                >
+                  Heal All
+                </button>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-xs font-mono tracking-wider text-emerald-800">
+                <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-xs" />
+                <span className="font-semibold text-[11px]">ALL 7 NODES OPERATIONAL &bull; 0 CYCLES</span>
+              </div>
+            )}
+          </div>
 
-            {/* Tier 2: Gateway */}
-            <div className="flex justify-center gap-6 w-full">
-              {tier2.map((n) => renderNode(n))}
-            </div>
+          {/* Interactive Topological DAG Canvas with Dedicated Left Rail */}
+          <div className="relative w-full overflow-x-auto overflow-y-hidden rounded-2xl bg-[#FFFDF9] border border-[#E8DCCE] p-3 shadow-inner">
+            <div className="relative w-[710px] h-[500px] mx-auto select-none flex">
+              {/* Dedicated Left-Side Rail Gutter (Interactive Clickable Tier Parameters) */}
+              <div className="w-[110px] h-full flex flex-col justify-between py-2 border-r border-[#EADCC9]/60 shrink-0 select-none z-10 pr-2">
+                {/* L3: Ingress */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('web-frontend');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[80px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 3
+                      ? 'bg-[#0047AB]/10 border border-[#0047AB]/30 shadow-xs ring-1 ring-[#0047AB]/20'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 3 Ingress to inspect on right"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/20">
+                      L3
+                    </span>
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-[#0047AB]">
+                      INGRESS
+                    </span>
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
+                    Client Edge
+                  </span>
+                </button>
 
-            <ConnectorArrow text="Authenticates & Routes" />
+                {/* L2: Gateway */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('api-gateway');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[85px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 2
+                      ? 'bg-indigo-50 border border-indigo-300 shadow-xs ring-1 ring-indigo-200'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 2 Gateway to inspect on right"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-mono tracking-wider text-[9px] font-black border border-indigo-200">
+                      L2
+                    </span>
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-indigo-700">
+                      GATEWAY
+                    </span>
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
+                    Route & TLS
+                  </span>
+                </button>
 
-            {/* Tier 3: Microservices */}
-            <div className="flex justify-center gap-6 w-full flex-wrap">
-              {tier3.map((n) => renderNode(n))}
-            </div>
+                {/* L1: Core */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('auth-service');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[95px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 1
+                      ? 'bg-emerald-50 border border-emerald-300 shadow-xs ring-1 ring-emerald-200'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 1 Core to inspect on right"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-800 font-mono tracking-wider text-[9px] font-black border border-emerald-200">
+                      L1
+                    </span>
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#1A1A1A] uppercase group-hover:text-emerald-800">
+                      CORE
+                    </span>
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
+                    Application
+                  </span>
+                </button>
+
+                {/* L0: Data */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSelectedNodeId('db-primary');
+                    setIsInspectorOpen(true);
+                  }}
+                  className={cn(
+                    'h-[95px] flex flex-col justify-center text-left p-1.5 rounded-xl transition-all cursor-pointer group',
+                    selectedNodeMeta?.tier === 0
+                      ? 'bg-[#0047AB]/10 border border-[#0047AB]/30 shadow-xs ring-1 ring-[#0047AB]/25'
+                      : 'hover:bg-[#FAF3EA] border border-transparent'
+                  )}
+                  title="Click Tier 0 Data to inspect on right"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <span className="px-1.5 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-mono tracking-wider text-[9px] font-black border border-[#0047AB]/25">
+                      L0
+                    </span>
+                    <span className="font-mono tracking-wider text-[10px] font-bold text-[#0047AB] uppercase group-hover:underline">
+                      DATA
+                    </span>
+                  </div>
+                  <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-1 pl-0.5">
+                    Root ACID
+                  </span>
+                </button>
+              </div>
+
+              {/* Main Node Canvas Area (600px width) */}
+              <div className="relative w-[600px] h-full overflow-hidden">
+                {/* Subtle Horizontal Divider Lines (Zero text collisions!) */}
+                <div className="absolute inset-0 pointer-events-none flex flex-col justify-between py-2">
+                  <div className="h-[80px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[85px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[95px] border-b border-dashed border-[#E5D7C5]/40" />
+                  <div className="h-[95px]" />
+                </div>
+
+                {/* SVG Connectors Canvas */}
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  viewBox="0 0 600 500"
+                >
+                  <defs>
+                    <marker
+                      id="arrow-default"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#94A3B8" />
+                    </marker>
+
+                    <marker
+                      id="arrow-upstream"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#0047AB" />
+                    </marker>
+
+                    <marker
+                      id="arrow-downstream"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#D97706" />
+                    </marker>
+
+                    <marker
+                      id="arrow-danger"
+                      viewBox="0 0 10 10"
+                      refX="6"
+                      refY="5"
+                      markerWidth="6"
+                      markerHeight="6"
+                      orient="auto-start-reverse"
+                    >
+                      <path d="M 0 1 L 8 5 L 0 9 z" fill="#EF4444" />
+                    </marker>
+                  </defs>
+
+                  {/* Render Directed Bézier Curves */}
+                  {STATIC_EDGES.map((edge) => {
+                    const state = getEdgeState(edge);
+                    const source = STATIC_NODE_METAS[edge.sourceId];
+                    const target = STATIC_NODE_METAS[edge.targetId];
+
+                    let strokeColor = '#CBD5E1';
+                    let strokeWidth = 1.75;
+                    let strokeDash = '5 4';
+                    let marker = 'url(#arrow-default)';
+                    let animClass = 'animate-dag-flow';
+                    let opacity = 1;
+
+                    if (state === 'upstream') {
+                      strokeColor = '#0047AB';
+                      strokeWidth = 2.75;
+                      strokeDash = '6 3';
+                      marker = 'url(#arrow-upstream)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'downstream') {
+                      strokeColor = '#D97706';
+                      strokeWidth = 2.5;
+                      strokeDash = '6 3';
+                      marker = 'url(#arrow-downstream)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'danger') {
+                      strokeColor = '#EF4444';
+                      strokeWidth = 3;
+                      strokeDash = '4 4';
+                      marker = 'url(#arrow-danger)';
+                      animClass = 'animate-dag-flow-fast';
+                    } else if (state === 'dimmed') {
+                      opacity = 0.22;
+                      animClass = '';
+                    }
+
+                    return (
+                      <g key={edge.id} className="cursor-pointer group">
+                        <path
+                          d={edge.path}
+                          fill="none"
+                          stroke="transparent"
+                          strokeWidth={14}
+                          className="pointer-events-auto"
+                        />
+                        <path
+                          d={edge.path}
+                          fill="none"
+                          stroke={strokeColor}
+                          strokeWidth={strokeWidth}
+                          strokeDasharray={strokeDash}
+                          markerEnd={viewMode === 'recovery' ? marker : undefined}
+                          markerStart={viewMode === 'traffic' ? marker : undefined}
+                          className={cn('transition-all duration-150', animClass, 'group-hover:stroke-[#0047AB] group-hover:stroke-[3px]')}
+                          style={{ opacity }}
+                        />
+                        <title>{`${source?.name} → ${target?.name} (${edge.label})`}</title>
+                      </g>
+                    );
+                  })}
+                </svg>
 
-            <ConnectorArrow text="Caches & Persists" />
+                {/* Interactive Node Cards */}
+                {Object.values(STATIC_NODE_METAS).map((meta) => {
+                  const liveNode = nodes.find((n) => n.id === meta.id);
+                  const status = liveNode?.status || 'healthy';
+                  const isDown = status === 'down';
+                  const isSelected = selectedNodeId === meta.id;
+                  const isUpstream = upstreamDependencies.includes(meta.id);
+                  const isDownstream = blastRadius.includes(meta.id);
+                  const isSimulatedBlast = isDownstream && isSelectedDown;
 
-            {/* Tier 4 & 5: Cache & Database Foundational */}
-            <div className="flex justify-center gap-6 w-full flex-wrap">
-              {tier4.map((n) => renderNode(n))}
-              {tier5.map((n) => renderNode(n))}
+                  // Dim card if filter does not match
+                  let isFilteredOut = false;
+                  if (filter === 'data' && meta.tier !== 0) isFilteredOut = true;
+                  if (filter === 'services' && meta.tier !== 1) isFilteredOut = true;
+                  if (filter === 'edge' && meta.tier < 2) isFilteredOut = true;
+
+                  const IconComponent = meta.icon;
+
+                  return (
+                    <div
+                      key={meta.id}
+                      style={{
+                        left: `${meta.x}px`,
+                        top: `${meta.y}px`,
+                        transform: 'translate(-50%, -50%)',
+                      }}
+                      className={cn(
+                        'absolute pointer-events-auto select-none transition-opacity duration-150',
+                        isSelected ? 'z-20' : 'z-10',
+                        isFilteredOut && 'opacity-25 pointer-events-none'
+                      )}
+                    >
+                      <div
+                        onClick={() => {
+                          setSelectedNodeId(meta.id);
+                          setIsInspectorOpen(true);
+                        }}
+                        onMouseEnter={() => setHoveredNodeId(meta.id)}
+                        onMouseLeave={() => setHoveredNodeId(null)}
+                        className={cn(
+                          'horizon-dag-node w-[160px] rounded-2xl p-2.5 transition-all duration-150 cursor-pointer select-none',
+                          'shadow-[0_2px_8px_rgba(26,26,26,0.06),0_1px_2px_rgba(26,26,26,0.04)]',
+                          // Base Card Style (No movement on hover!)
+                          !isSelected && !isDown && !isSimulatedBlast && 'bg-white border-2 border-[rgba(26,26,26,0.12)] hover:border-[#0047AB]/70 hover:shadow-[0_4px_16px_rgba(0,71,171,0.18)] hover:ring-2 hover:ring-[#0047AB]/20',
+                          // Selected Style
+                          isSelected && !isDown && 'bg-white border-2 border-[#0047AB] ring-4 ring-[#0047AB]/20 shadow-[0_6px_20px_rgba(0,71,171,0.22)]',
+                          // Upstream Prerequisite of Selected Node
+                          isUpstream && !isSelected && 'border-2 border-[#0047AB]/60 bg-blue-50/40',
+                          // Active Cascaded Risk (when selected target is down)
+                          isSimulatedBlast && 'border-2 border-dashed border-amber-500 bg-amber-50/90 shadow-[0_4px_14px_rgba(217,119,6,0.2)]',
+                          // Target Node Is Down (Primary Failure)
+                          isDown && 'border-2 border-red-500 bg-red-50/90 ring-4 ring-red-500/20 shadow-[0_6px_20px_rgba(239,68,68,0.25)]'
+                        )}
+                      >
+                        {/* Top Anchor Dot */}
+                        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
+                        {/* Bottom Anchor Dot */}
+                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-2 h-2 rounded-full bg-[#CBD5E1] border border-white shadow-xs pointer-events-none" />
+
+                        {/* Mode Tag / Sequence Pill */}
+                        <div className="flex items-center justify-between gap-1 mb-1.5">
+                          <span className="text-[9px] font-mono tracking-widest font-black px-1.5 py-0.5 rounded bg-[#F4EBE0] border border-[#E0D0BE] text-[#5A4E44] uppercase">
+                            {viewMode === 'recovery' ? `STEP ${meta.recoveryStep}` : meta.tierLabel}
+                          </span>
+
+                          {/* Status Indicator Pill */}
+                          {isDown ? (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-red-100 text-red-800 border border-red-300">
+                              <span className="w-1.5 h-1.5 rounded-full bg-red-600 animate-ping" />
+                              <span>DOWN</span>
+                            </span>
+                          ) : isSimulatedBlast ? (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-amber-100 text-amber-900 border border-amber-300">
+                              <AlertTriangle className="w-2.5 h-2.5 text-amber-700" />
+                              <span>RISK</span>
+                            </span>
+                          ) : isUpstream ? (
+                            <span className="text-[9px] font-mono tracking-wider font-bold text-[#0047AB] bg-blue-50 px-1.5 py-0.5 rounded border border-blue-200">
+                              PREREQ
+                            </span>
+                          ) : (
+                            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-mono tracking-wider font-bold bg-[#EBF7EE] text-[#0A6C3D] border border-[#0F8E52]/25">
+                              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-xs" />
+                              <span>HEALTHY</span>
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Node Core Info */}
+                        <div className="flex items-center gap-2">
+                          <div className={cn('w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 shadow-xs', meta.iconBg)}>
+                            <IconComponent className={cn('w-4 h-4', meta.iconColor)} />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="text-xs font-black text-[#1A1A1A] truncate leading-tight">
+                              {meta.name}
+                            </div>
+                            <div className="text-[10px] text-[#6E6258] font-mono tracking-wider uppercase font-bold truncate">
+                              {meta.port} &bull; {meta.latency}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>
 
-        {/* Legend Footer */}
-        <div className="mt-8 pt-4 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10">
-          <div className="flex items-center gap-4">
-            <span className="flex items-center gap-1.5 font-medium">
+        {/* Legend Footer & Right Inspector Drawer Trigger */}
+        <div className="mt-4 pt-3 border-t border-[#EADCC9] flex flex-wrap items-center justify-between text-xs text-[#6E6258] relative z-10 gap-3">
+          <div className="flex flex-wrap items-center gap-3 font-mono text-[11px] tracking-wider uppercase">
+            <span className="flex items-center gap-1.5 font-bold">
               <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-xs" /> Healthy
             </span>
-            <span className="flex items-center gap-1.5 font-medium">
-              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs" /> Down
+            <span className="flex items-center gap-1.5 font-bold text-red-700">
+              <span className="w-2.5 h-2.5 rounded-full bg-red-500 shadow-xs animate-pulse" /> Outage
+            </span>
+            <span className="flex items-center gap-1.5 font-bold text-amber-700">
+              <span className="w-2.5 h-2.5 rounded-full bg-amber-500 border border-amber-600 shadow-xs" /> Cascade Risk
+            </span>
+            <span className="flex items-center gap-1.5 font-bold text-[#0047AB]">
+              <span className="w-2.5 h-2.5 rounded-full bg-[#0047AB] shadow-xs" /> Prerequisite
             </span>
-            <span className="flex items-center gap-1.5 font-medium">
-              <span className="w-2.5 h-2.5 rounded-full bg-amber-500 border border-amber-600 shadow-xs" /> Blast Radius Affected
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <span className="font-mono text-[10px] tracking-wider text-[#8A7B6D] font-bold uppercase hidden sm:inline">
+              Click any tier parameter or node to inspect on right &rarr;
             </span>
+            <button
+              type="button"
+              onClick={() => setIsInspectorOpen((prev) => !prev)}
+              className="px-2.5 py-1 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 text-[#1A1A1A] font-mono text-[10px] font-bold uppercase tracking-wider transition-colors cursor-pointer flex items-center gap-1.5"
+            >
+              <SlidersHorizontal className="w-3 h-3 text-[#0047AB]" />
+              <span>{isInspectorOpen ? 'Hide Inspector' : 'Show Inspector'}</span>
+            </button>
           </div>
-          <span className="font-mono text-[11px] text-[#8A7B6D] font-bold">Click any node to inspect blast radius</span>
         </div>
       </Card>
 
-      {/* Side Impact & Blast Radius Inspection Panel */}
-      <Card className="p-6 flex flex-col justify-between skeuo-card border-[#E5D7C5]">
-        <div>
-          <div className="flex items-center justify-between pb-3 mb-4 border-b border-[#EADCC9]">
-            <div className="flex items-center gap-2">
-              <div className="w-8 h-8 rounded-lg bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center">
-                <AlertOctagon className="w-4 h-4" />
+      {/* Right-Side Slide-Over Inspector Drawer */}
+      <AnimatePresence>
+        {isInspectorOpen && selectedNode && selectedNodeMeta && (
+          <motion.aside
+            key="service-inspector-drawer"
+            initial={{ x: '100%', opacity: 0.9 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: '100%', opacity: 0 }}
+            transition={{ type: 'spring', damping: 28, stiffness: 280 }}
+            className="fixed top-0 right-0 h-full w-[440px] max-w-[94vw] z-50 bg-[#FFFDF9] border-l-2 border-[#E5D7C5] shadow-[-10px_0_35px_rgba(26,26,26,0.18)] flex flex-col justify-between"
+            aria-label="Service Inspector"
+          >
+            {/* Drawer Header */}
+            <div className="p-4 sm:p-5 border-b border-[#EADCC9] bg-[#FFF8F0]/80 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2.5">
+                <div className="w-9 h-9 rounded-xl bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 flex items-center justify-center shrink-0 shadow-inner">
+                  <AlertOctagon className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-black text-[#1A1A1A] tracking-tight">
+                    Service Inspector
+                  </h3>
+                  <p className="text-[9px] font-mono tracking-wider uppercase text-[#6E6258] font-bold">
+                    Blast Radius & Autonomous Playbook
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <span className="text-[9px] font-mono tracking-widest px-2.5 py-1 rounded-md bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                  {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setIsInspectorOpen(false)}
+                  className="p-1.5 rounded-lg text-[#6E6258] hover:text-[#1A1A1A] hover:bg-[#F5EDE2] border border-[#E5D7C5] transition-colors cursor-pointer"
+                  title="Close Inspector"
+                >
+                  <X className="w-4 h-4" />
+                </button>
               </div>
-              <h3 className="text-base font-bold text-[#1A1A1A] tracking-tight">
-                Impact Analysis
-              </h3>
             </div>
-            {selectedNode && (
-              <Badge status={selectedNode.status as any}>
-                {selectedNode.status}
-              </Badge>
-            )}
-          </div>
 
-          {selectedNode ? (
-            <div className="space-y-4">
+            {/* Drawer Scrollable Content: 4 Cards Stacked Vertically */}
+            <div className="p-4 sm:p-5 overflow-y-auto flex-1 space-y-3.5">
+              {/* Card 1: Target Service */}
               <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
-                <span className="text-[10px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
-                  Target Service
-                </span>
-                <div className="text-lg font-black text-[#1A1A1A] mt-0.5">
-                  {selectedNode.name}
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-[9px] text-[#8A7B6D] uppercase font-mono tracking-wider font-bold">
+                    TARGET SERVICE
+                  </span>
+                  <span className="text-[9px] font-mono tracking-widest px-2 py-0.5 rounded bg-[#0047AB]/10 text-[#0047AB] font-black border border-[#0047AB]/20 uppercase">
+                    {selectedNodeMeta.tierLabel} &bull; {selectedNodeMeta.tierName}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-2.5">
+                  <div className={cn('w-9 h-9 rounded-xl border flex items-center justify-center shadow-xs shrink-0', selectedNodeMeta.iconBg)}>
+                    {React.createElement(selectedNodeMeta.icon, {
+                      className: cn('w-5 h-5', selectedNodeMeta.iconColor),
+                    })}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-base font-black text-[#1A1A1A] truncate">
+                      {selectedNodeMeta.name}
+                    </div>
+                    <div className="text-[11px] text-[#6E6258] font-mono truncate">
+                      {selectedNodeMeta.engine}
+                    </div>
+                  </div>
+                </div>
+
+                <p className="text-xs text-[#5A4E44] mt-2.5 leading-relaxed">
+                  {selectedNodeMeta.description}
+                </p>
+
+                <div className="grid grid-cols-2 gap-2 mt-3 pt-3 border-t border-[#E5D7C5]/60 text-xs font-mono">
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[8px] text-[#8A7B6D] block tracking-wider uppercase font-bold">PORT / PROTOCOL</span>
+                    <span className="font-bold text-[#1A1A1A] text-[10px] truncate block">
+                      {selectedNodeMeta.port} ({selectedNodeMeta.protocol})
+                    </span>
+                  </div>
+                  <div className="p-2 rounded-lg bg-white/80 border border-[#D9C8B5]">
+                    <span className="text-[8px] text-[#8A7B6D] block tracking-wider uppercase font-bold">TELEMETRY P99</span>
+                    <span className="font-bold text-[#0047AB] text-[10px] block">
+                      {selectedNodeMeta.latency}
+                    </span>
+                  </div>
                 </div>
-                <div className="flex items-center gap-2 mt-2">
-                  <span className="text-[11px] font-mono px-2 py-0.5 rounded-md bg-white border border-[#D9C8B5] text-[#0047AB] font-bold">
-                    ID: {selectedNode.id}
+              </div>
+
+              {/* Card 2: Upstream Prerequisites */}
+              <div className="p-4 rounded-xl bg-white border border-[#E5D7C5] shadow-xs">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-bold text-[#1A1A1A] flex items-center gap-1.5">
+                    <Radio className="w-3.5 h-3.5 text-[#0047AB]" />
+                    <span>Upstream Prerequisites</span>
                   </span>
-                  <span className="text-[11px] font-mono px-2 py-0.5 rounded-md bg-white border border-[#D9C8B5] text-[#6E6258] font-semibold">
-                    TYPE: {selectedNode.type}
+                  <span className="text-[9px] font-mono tracking-wider font-bold text-[#6E6258] uppercase">
+                    {upstreamDependencies.length} REQUIRED
                   </span>
                 </div>
+
+                {upstreamDependencies.length === 0 ? (
+                  <div className="p-3 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] text-xs text-[#6E6258] italic font-medium mt-2">
+                    Root foundation service. Has zero upstream dependencies.
+                  </div>
+                ) : (
+                  <div className="space-y-1.5 mt-2">
+                    {upstreamDependencies.map((depId) => {
+                      const depMeta = STATIC_NODE_METAS[depId];
+                      const depNode = nodes.find((n) => n.id === depId);
+                      return (
+                        <div
+                          key={depId}
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-[#FAF3EA] border border-[#E5D7C5] hover:border-[#0047AB]/40 cursor-pointer transition-colors text-xs"
+                        >
+                          <div className="flex items-center gap-2">
+                            <span className="w-2 h-2 rounded-full bg-[#0047AB]" />
+                            <span className="font-bold text-[#1A1A1A]">
+                              {depMeta?.name || depId}
+                            </span>
+                          </div>
+                          <Badge status={(depNode?.status || 'healthy') as any}>
+                            {depNode?.status || 'healthy'}
+                          </Badge>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                <span className="font-mono text-[9px] text-[#8A7B6D] tracking-wide mt-3 block">
+                  Click any prerequisite to inspect its dependencies
+                </span>
               </div>
 
-              {/* Blast Radius Count - Cobalt Blue Patch */}
-              <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20">
-                <div className="flex items-center justify-between">
-                  <span className="text-xs font-bold text-white">Calculated Blast Radius</span>
-                  <span className="text-xs font-mono font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30">
-                    {blastRadius.length} Cascaded Services
+              {/* Card 3: Cascaded Blast Radius (Cobalt Patch) */}
+              <div className="p-4 rounded-xl cobalt-patch shadow-lg shadow-[#0047AB]/20 text-white">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-bold text-white flex items-center gap-1.5">
+                    <Flame className="w-3.5 h-3.5 text-amber-300" />
+                    <span>Cascaded Blast Radius</span>
+                  </span>
+                  <span className="text-[9px] font-mono tracking-wider font-bold px-2 py-0.5 rounded-full bg-white/20 text-white border border-white/30 uppercase">
+                    {blastRadius.length} DOWNSTREAM
                   </span>
                 </div>
 
-                <p className="text-xs text-white/80 mt-2 font-medium">
-                  If <strong className="text-white underline">{selectedNode.name}</strong> experiences downtime, the following downstream systems are impaired:
+                <p className="text-xs text-white/80 mt-1 font-medium">
+                  If <strong className="text-white underline">{selectedNodeMeta.name}</strong> fails:
                 </p>
 
-                <div className="mt-3 space-y-1.5">
+                <div className="mt-2 space-y-1.5">
                   {blastRadius.length === 0 ? (
-                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-1 font-semibold">
-                      <CheckCircle2 className="w-4 h-4 text-emerald-300" />
-                      <span>Edge leaf node: 0 downstream dependencies impacted.</span>
+                    <div className="text-xs text-emerald-200 flex items-center gap-1.5 py-2 font-semibold">
+                      <CheckCircle2 className="w-4 h-4 text-emerald-300 shrink-0" />
+                      <span>Edge leaf node: 0 downstream cascaded.</span>
                     </div>
                   ) : (
                     blastRadius.map((depId) => {
-                      const depNode = nodes.find((n) => n.id === depId);
+                      const depMeta = STATIC_NODE_METAS[depId];
                       return (
                         <div
                           key={depId}
-                          className="flex items-center justify-between p-2 rounded-lg bg-black/20 border border-white/10 text-xs"
+                          onClick={() => setSelectedNodeId(depId)}
+                          className="flex items-center justify-between p-2 rounded-lg bg-black/25 border border-white/10 hover:border-white/30 text-xs cursor-pointer transition-colors"
                         >
-                          <span className="text-white font-semibold">
-                            {depNode ? depNode.name : depId}
+                          <span className="text-white font-semibold truncate mr-2">
+                            {depMeta ? depMeta.name : depId}
                           </span>
-                          <span className="text-[10px] font-mono text-amber-300 font-bold">
-                            Impaired
+                          <span className="text-[9px] font-mono tracking-wider text-amber-300 font-bold px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-400/30 uppercase shrink-0">
+                            {isSelectedDown ? 'IMPAIRED' : 'AT RISK'}
                           </span>
                         </div>
                       );
                     })
                   )}
                 </div>
-              </div>
 
-              {/* Recovery Order Recommendation */}
-              <div className="p-3.5 rounded-xl skeuo-well border-[#E5D7C5] text-xs text-[#5A4E44]">
-                <span className="font-bold text-[#1A1A1A] block mb-1">
-                  Autonomous Playbook Assignment:
+                <span className="font-mono text-[9px] text-white/70 tracking-wide mt-3 block">
+                  Reverse topological traversal O(V+E)
                 </span>
-                {selectedNode.type === 'database'
-                  ? 'High-Risk Database Failover to replica. Human Commander approval gate required.'
-                  : selectedNode.type === 'cache'
-                  ? 'Automated Cache Invalidation and connection pool reconnection.'
-                  : 'Zero-Downtime Rolling Service Pod Restart.'}
+              </div>
+
+              {/* Card 4: Autonomous Playbook Assignment */}
+              <div className="p-4 rounded-xl skeuo-well border-[#E5D7C5]">
+                <div className="flex items-center gap-1.5 font-bold text-[#1A1A1A] mb-2 text-xs">
+                  <Activity className="w-3.5 h-3.5 text-[#0047AB]" />
+                  <span>Autonomous Playbook Assignment:</span>
+                </div>
+                <p className="leading-relaxed text-[11px] text-[#5A4E44]">
+                  {selectedNode.type === 'database'
+                    ? 'Playbook #PB-01: High-Risk Database Failover to read replica. EIP-712 Multi-Sig Commander approval required.'
+                    : selectedNode.type === 'cache'
+                    ? 'Playbook #PB-02: Automated Redis cache flush, container restart, and client pool reconnection.'
+                    : selectedNode.type === 'gateway'
+                    ? 'Playbook #PB-03: Zero-downtime Envoy ingress reload and dynamic DNS re-route to healthy pods.'
+                    : 'Playbook #PB-04: Graceful SIGTERM pod termination, Kubernetes rolling restart, and readiness probe poll.'}
+                </p>
               </div>
             </div>
-          ) : (
-            <div className="text-center py-12 text-xs text-[#8A7B6D] font-medium">
-              Select a service from the DAG topology to inspect its blast radius.
-            </div>
-          )}
-        </div>
 
-        {selectedNode && (
-          <div className="mt-6 pt-4 border-t border-[#EADCC9] flex items-center justify-between gap-3">
-            <Button
-              variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
-              size="sm"
-              onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
-              className="w-full text-xs font-bold py-2.5 rounded-xl"
-            >
-              {selectedNode.status === 'down' ? 'Restore Service' : 'Simulate Failure'}
-            </Button>
-          </div>
+            {/* Drawer Footer: Pinned Action Button (100% visible, zero cutoff!) */}
+            <div className="p-4 sm:p-5 border-t border-[#E5D7C5] bg-[#FFFDF9] shrink-0">
+              <Button
+                variant={selectedNode.status === 'down' ? 'primary' : 'danger'}
+                size="sm"
+                onClick={() => handleToggleState(selectedNode.id, selectedNode.status)}
+                className="w-full text-xs font-bold py-3 rounded-xl flex items-center justify-center gap-2 cursor-pointer shadow-md"
+              >
+                {selectedNode.status === 'down' ? (
+                  <>
+                    <RotateCcw className="w-4 h-4" />
+                    <span>Restore & Heal Service</span>
+                  </>
+                ) : (
+                  <>
+                    <Flame className="w-4 h-4" />
+                    <span>Simulate Failure on Node</span>
+                  </>
+                )}
+              </Button>
+            </div>
+          </motion.aside>
         )}
-      </Card>
+      </AnimatePresence>
     </div>
   );
-
-  function renderNode(node: SystemNode) {
-    const isSelected = selectedNodeId === node.id;
-    const isImpacted = blastRadius.includes(node.id);
-    const isDown = node.status === 'down';
-
-    return (
-      <div
-        key={node.id}
-        onClick={() => setSelectedNodeId(node.id)}
-        className={`p-3.5 rounded-xl border cursor-pointer transition-all duration-200 min-w-[150px] flex flex-col items-center gap-2 select-none ${
-          isDown
-            ? 'bg-red-50 border-red-300 shadow-md shadow-red-500/10 scale-105'
-            : isSelected
-            ? 'bg-blue-50 border-[#0047AB] shadow-md shadow-[#0047AB]/20 scale-105 ring-2 ring-[#0047AB]/20'
-            : isImpacted
-            ? 'bg-amber-50/80 border-amber-300 shadow-xs'
-            : 'bg-white border-[#E5D7C5] shadow-xs hover:border-[#0047AB]/50 hover:shadow-md'
-        }`}
-      >
-        <span className="text-xs font-bold text-[#1A1A1A] text-center">{node.name}</span>
-        <Badge status={node.status as any}>{node.status}</Badge>
-        {isImpacted && (
-          <span className="text-[10px] font-mono font-bold text-amber-800">
-            &bull; Impacted
-          </span>
-        )}
-      </div>
-    );
-  }
-
-  function ConnectorArrow({ text }: { text: string }) {
-    return (
-      <div className="flex flex-col items-center gap-1 text-[10px] font-mono text-[#8A7B6D] font-bold">
-        <div className="w-px h-6 bg-gradient-to-b from-[#0047AB]/60 to-transparent" />
-        <span>{text}</span>
-      </div>
-    );
-  }
 };
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index ca15ab1..e16d3b4 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -10,6 +10,55 @@
 @import "@fontsource/poppins/800.css";
 @import "@fontsource/poppins/900.css";
 
+
+/* =====================================================================
+   SILVANA TYPEFACE FAMILY (Blaze Type / Awwwards Typography)
+   ===================================================================== */
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Light.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Light-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Regular.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Regular-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Italic.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-RegularItalic-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Medium.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Medium-Trial.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Silvana';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/silvana/Silvana-Bold.woff') format('woff'),
+       url('https://fonts.cdnfonts.com/s/88418/Silvana-Bold-Trial.woff') format('woff');
+}
+
 @plugin "daisyui";
 
 /* =====================================================================
@@ -47,6 +96,7 @@
     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-heading:
     "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-silvana: "Silvana", "Newsreader", "Cormorant Garamond", "Playfair Display", Georgia, serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
 
   --color-background: var(--background);
@@ -457,3 +507,89 @@ h1.bblacnkherotit.text-3xl.sm\:text-4xl.font-black.text-\[\#1A1A1A\].tracking-ti
   background-clip: text;
   filter: brightness(0.65) contrast(2.5);
 }
+
+
+/* =====================================================================
+   DAG SVG ANIMATED DEPENDENCY FLOW
+   ===================================================================== */
+@keyframes dagFlow {
+  from {
+    stroke-dashoffset: 24;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dagFlowReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 24;
+  }
+}
+
+.animate-dag-flow {
+  animation: dagFlow 1.4s linear infinite;
+}
+
+.animate-dag-flow-fast {
+  animation: dagFlow 0.7s linear infinite;
+}
+
+.animate-dag-flow-reverse {
+  animation: dagFlowReverse 1.4s linear infinite;
+}
+
+/* =====================================================================
+   SILVANA EDITORIAL TYPOGRAPHY RULES
+   ===================================================================== */
+.font-silvana {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
+}
+
+/* Scoped Silvana Typography for Docs and Sub-pages */
+.docs-page-container,
+.silvana-scope {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+}
+
+.docs-page-container h1,
+.docs-page-container h2,
+.docs-page-container h3,
+.docs-page-container h4,
+.docs-page-container h5,
+.docs-page-container h6,
+.silvana-scope h1,
+.silvana-scope h2,
+.silvana-scope h3,
+.silvana-scope h4,
+.silvana-scope h5,
+.silvana-scope h6 {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+  letter-spacing: -0.012em;
+}
+
+.docs-page-container p,
+.docs-page-container li,
+.docs-page-container td,
+.docs-page-container th,
+.silvana-scope p,
+.silvana-scope li,
+.silvana-scope td,
+.silvana-scope th {
+  font-family: 'Silvana', 'Newsreader', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
+}
+
+/* Ensure code, terminals, badges and monospace elements strictly retain JetBrains Mono */
+.docs-page-container code,
+.docs-page-container pre,
+.docs-page-container kbd,
+.docs-page-container .font-mono,
+.silvana-scope code,
+.silvana-scope pre,
+.silvana-scope kbd,
+.silvana-scope .font-mono {
+  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace !important;
+}
diff --git a/apps/web/src/pages/DocsPage.tsx b/apps/web/src/pages/DocsPage.tsx
index 9204eda..745b7bf 100644
--- a/apps/web/src/pages/DocsPage.tsx
+++ b/apps/web/src/pages/DocsPage.tsx
@@ -963,7 +963,7 @@ export const DocsPage: React.FC = () => {
       variants={containerVariants}
       initial="hidden"
       animate="visible"
-      className="space-y-8 font-sans w-full max-w-7xl mx-auto pb-16"
+      className="space-y-8 font-silvana docs-page-container w-full max-w-7xl mx-auto pb-16"
     >
       {/* MDN-Style Breadcrumb Navigation */}
       <motion.div variants={itemVariants} className="flex flex-wrap items-center justify-between gap-3 text-xs border-b border-[#EADCC9] pb-3">
@@ -1474,25 +1474,25 @@ export const DocsPage: React.FC = () => {
                         <td className="p-3 font-bold text-[#0047AB]">HORIZON_API_URL</td>
                         <td className="p-3 text-[#6E6258]">URL</td>
                         <td className="p-3 text-emerald-800 font-bold">Required</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">Production Horizon orchestrator endpoint or local daemon URL.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">Production Horizon orchestrator endpoint or local daemon URL.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">MST_CHAIN_ID</td>
                         <td className="p-3 text-[#6E6258]">Number</td>
                         <td className="p-3">91562037</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">MST Blockchain Testnet EVM Chain identifier for EIP-712 signing.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">MST Blockchain Testnet EVM Chain identifier for EIP-712 signing.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">MST_RPC_URL</td>
                         <td className="p-3 text-[#6E6258]">URL</td>
                         <td className="p-3">https://testnet.mstscan.com/rpc</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">JSON-RPC node for blockchain Merkle root query and smart contract state.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">JSON-RPC node for blockchain Merkle root query and smart contract state.</td>
                       </tr>
                       <tr>
                         <td className="p-3 font-bold text-[#0047AB]">SARVAM_AGENT_ENABLED</td>
                         <td className="p-3 text-[#6E6258]">Boolean</td>
                         <td className="p-3">true</td>
-                        <td className="p-3 font-sans text-[#1A1A1A]">Enables native Sarvam-105b LLM integration for automated SRE synthesis.</td>
+                        <td className="p-3 font-silvana text-[#1A1A1A]">Enables native Sarvam-105b LLM integration for automated SRE synthesis.</td>
                       </tr>
                     </tbody>
                   </table>
@@ -1611,7 +1611,7 @@ export const DocsPage: React.FC = () => {
                             )}
                           </td>
                           <td className="p-3 text-[#5A4E44]">{param.defaultVal}</td>
-                          <td className="p-3 font-sans text-[#1A1A1A] leading-relaxed">{param.description}</td>
+                          <td className="p-3 font-silvana text-[#1A1A1A] leading-relaxed">{param.description}</td>
                         </tr>
                       ))}
                     </tbody>
@@ -1769,10 +1769,10 @@ export const DocsPage: React.FC = () => {
                           {err.category}
                         </span>
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-[#403830] max-w-sm leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-[#403830] max-w-sm leading-relaxed">
                         {err.description}
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-emerald-800 max-w-xs leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-emerald-800 max-w-xs leading-relaxed">
                         {err.remediation}
                       </td>
                     </tr>
@@ -1863,7 +1863,7 @@ export const DocsPage: React.FC = () => {
                       <td className="p-3.5 text-[#6E6258] whitespace-nowrap font-medium">
                         {sc.args || '—'}
                       </td>
-                      <td className="p-3.5 font-sans font-medium text-[#1A1A1A] max-w-xs leading-relaxed">
+                      <td className="p-3.5 font-silvana font-medium text-[#1A1A1A] max-w-xs leading-relaxed">
                         {sc.desc}
                       </td>
                       <td className="p-3.5 text-emerald-800 font-semibold whitespace-nowrap">
diff --git a/apps/web/src/pages/TopologyPage.tsx b/apps/web/src/pages/TopologyPage.tsx
index ec261ac..21f2e2c 100644
--- a/apps/web/src/pages/TopologyPage.tsx
+++ b/apps/web/src/pages/TopologyPage.tsx
@@ -38,7 +38,7 @@ export const TopologyPage: React.FC = () => {
       animate="visible"
       className="space-y-6 sm:space-y-8 font-sans w-full"
     >
-      {/* Return Navigation & Live Pill */}
+      {/* Return Navigation */}
       <motion.div variants={itemVariants} className="flex items-center justify-between">
         <Link
           to="/"
@@ -46,24 +46,14 @@ export const TopologyPage: React.FC = () => {
         >
           <span>&larr; Return to Home</span>
         </Link>
-        <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200/80 shadow-xs">
-          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-          <span className="text-xs font-mono text-emerald-800 font-bold">O(V + E) Acyclic DAG Active</span>
-        </div>
       </motion.div>
 
       {/* Header */}
       <motion.div variants={itemVariants} className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-1">
         <div>
-          <div className="flex flex-wrap items-center gap-3">
-            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-[#1A1A1A]">
-              Dependency DAG Topology
-            </h1>
-            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-bold bg-[#0047AB]/10 text-[#0047AB] border border-[#0047AB]/20 shadow-xs">
-              <Network className="w-3.5 h-3.5 text-[#0047AB]" />
-              TOPOLOGICAL RESOLVER
-            </span>
-          </div>
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-[#1A1A1A]">
+            Dependency DAG Topology
+          </h1>
           <p className="text-xs sm:text-sm text-[#5A4E44] mt-1.5 max-w-3xl leading-relaxed font-medium">
             Dynamic Directed Acyclic Graph (DAG) visualizing parent-child service relationships, reverse dependency traversal, and failure blast radius.
           </p>