Design a next-generation Multi-Agent AI Collaboration Platform that redefines the paradigm of human-AI workflows through a revolutionary, production-grade interface. This is not an iteration—it is a complete reimagining of how autonomous agents, human operators, and complex data systems visually coexist and interact.

Design Philosophy & Visual Direction:

Aesthetic: Sophisticated "Post-Corporate" futurism—clean, authoritative, yet organic. Move beyond sterile SaaS templates. Think: Blade Runner 2049 meets Notion, with the functional density of a Bloomberg Terminal and the elegance of Linear.
Color Architecture: Strictly no dominant purple. Instead, deploy a chromatic strategy using:
Primary: Deep oceanic teal (#0A4F4F) to electric coral (#FF6B6B) gradient system, OR charcoal slate (#1A1D21) with vermillion (#E85D04) and citron (#CCFF00) accents
Semantic Coding: Distinctive hues for agent types (Autonomous=warm amber, Human=neutral blue, System=cool slate, Execution=vibrant emerald)
Dark Mode Native: True OLED black (#000000) backgrounds with high-contrast zinc (#A1A1AA) typography and luminous accent glows
Interaction States: Micro-gradients that shift with data velocity—subtle, non-distracting bioluminescent cues



Spatial & Interaction Design:

Canvas-First Architecture: Infinite zoomable workspace (Figma-like) where agents exist as intelligent "nodes" with orbital awareness—not static sidebar lists
Glassmorphic Intelligence: Agents manifest as semi-transparent, depth-layered entities with real-time activity indicators (neural pulse animations, subtle bloom effects)
Dynamic Topology: Visual representation of agent relationships as living, breathing connection lines (bezier curves with data-pulse animations) that thicken with bandwidth and shift color with sentiment/confidence scores
Ambient Awareness: Non-intrusive peripheral vision system—agents working in background show subtle edge-glow; urgent interventions use spatial audio-visual cues from the correct vector

Component & UX Specifications:

Agent Avatars: Abstract geometric forms (icosahedrons, mobius strips) rather than human faces, with distinct motion signatures—each agent type has unique "breathing" rhythms and particle trails when moving across the canvas
Collaboration Stream: Chronological feed transformed into a horizontal "Time-Reel" at screen bottom, showing agent decisions as filmstrip cells with scrubbable history
Command Interface: Omnibar with contextual intelligence—natural language input that expands into node-based logic trees (visual programming meets chat)
Conflict Resolution UI: When agents disagree, visual "tension zones" emerge—gradient meshes that require conscious human mediation through tactile slider controls
Data Corporeality: Files and datasets rendered as manipulable 3D artifacts with physics—drag a document onto an agent, watch it "absorb" with satisfying haptic-visual feedback

Typography & Micro-interactions:

Font System: Inter or Geist for UI elements; Space Grotesk or Plus Jakarta Sans for agent communications—distinct voice for machine vs. human text
Motion Physics: Everything springs, never oscillates. Agents arrive with orchestrated entrances (scale + blur resolve). 60fps minimum on all transitions. Damping values: 0.8 (snappy but substantial)
Negative Space: Aggressive information density with intelligent decluttering—agents fade to wireframe outlines when not in focus, expanding to full detail on proximity hover

Technical Rigor:

Responsive Liquid Layouts: From 4K multi-monitor setups (agents spread across spatial zones) to mobile (stacked card metaphor with gesture-based orchestration)
Accessibility WCAG 2.1 AA+: High contrast mode available, reduced motion alternatives for neurodivergent users, screen reader optimized with semantic agent status announcements
Design Token System: Complete atomic design methodology with CSS variables for all glow effects, z-index layers, and easing curves

Emotional Outcome: The interface should evoke control without overwhelm—users feel like orchestral conductors, not database administrators. Every pixel should communicate that this is a thinking system, not a tool.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Synapse Canvas
-emoji: 🔥
-colorFrom: indigo
-colorTo: purple
+title: Synapse Canvas 🧠
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,302 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synapse Canvas — Multi-Agent AI Collaboration Platform</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        ocean: {
+                            900: '#0A4F4F',
+                            800: '#0D6B6B',
+                            700: '#108888',
+                            600: '#14A5A5',
+                            500: '#17C2C2',
+                        },
+                        coral: {
+                            500: '#FF6B6B',
+                            400: '#FF8585',
+                            300: '#FF9F9F',
+                        },
+                        charcoal: {
+                            950: '#000000',
+                            900: '#0A0A0F',
+                            800: '#141419',
+                            700: '#1A1D21',
+                            600: '#252830',
+                        },
+                        vermillion: {
+                            500: '#E85D04',
+                            400: '#F0701A',
+                        },
+                        citron: {
+                            500: '#CCFF00',
+                            400: '#D4FF33',
+                        },
+                        agent: {
+                            autonomous: '#F59E0B',
+                            human: '#3B82F6',
+                            system: '#64748B',
+                            execution: '#10B981',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'system-ui', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                        display: ['Space Grotesk', 'sans-serif'],
+                    },
+                    animation: {
+                        'neural-pulse': 'neuralPulse 2s ease-in-out infinite',
+                        'data-flow': 'dataFlow 1.5s ease-in-out infinite',
+                        'bloom-glow': 'bloomGlow 3s ease-in-out infinite',
+                        'agent-breathe': 'agentBreathe 4s ease-in-out infinite',
+                        'orbit': 'orbit 20s linear infinite',
+                    },
+                    keyframes: {
+                        neuralPulse: {
+                            '0%, 100%': { opacity: 0.4, transform: 'scale(1)' },
+                            '50%': { opacity: 1, transform: 'scale(1.05)' },
+                        },
+                        dataFlow: {
+                            '0%': { strokeDashoffset: '100' },
+                            '100%': { strokeDashoffset: '0' },
+                        },
+                        bloomGlow: {
+                            '0%, 100%': { filter: 'blur(20px) opacity(0.5)' },
+                            '50%': { filter: 'blur(30px) opacity(0.8)' },
+                        },
+                        agentBreathe: {
+                            '0%, 100%': { transform: 'scale(0.98)', opacity: 0.9 },
+                            '50%': { transform: 'scale(1.02)', opacity: 1 },
+                        },
+                        orbit: {
+                            '0%': { transform: 'rotate(0deg)' },
+                            '100%': { transform: 'rotate(360deg)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-charcoal-950 text-zinc-300 font-sans overflow-hidden">
+    <!-- Ambient Background Layer -->
+    <div class="fixed inset-0 pointer-events-none">
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-ocean-900/20 via-transparent to-transparent"></div>
+        <div class="absolute top-0 right-0 w-96 h-96 bg-coral-500/10 rounded-full blur-3xl animate-bloom-glow"></div>
+        <div class="absolute bottom-0 left-0 w-64 h-64 bg-citron-500/5 rounded-full blur-2xl"></div>
+        <!-- Grid Pattern -->
+        <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 60px 60px;"></div>
+    </div>
+
+    <!-- Main Application Container -->
+    <div id="app" class="relative h-screen w-full flex flex-col">
+        
+        <!-- Top Navigation Bar -->
+        <synapse-header></synapse-header>
+
+        <!-- Workspace Area -->
+        <div class="flex-1 flex relative overflow-hidden">
+            
+            <!-- Left Sidebar: Agent Palette -->
+            <synapse-agent-palette></synapse-agent-palette>
+
+            <!-- Infinite Canvas -->
+            <main id="canvas-container" class="flex-1 relative overflow-hidden cursor-grab active:cursor-grabbing">
+                <!-- Transform Layer for Pan/Zoom -->
+                <div id="canvas-transform" class="absolute inset-0 origin-center transition-transform duration-75 ease-out" style="transform: translate(0px, 0px) scale(1);">
+                    
+                    <!-- Canvas Grid -->
+                    <div class="absolute inset-0 opacity-[0.05]" style="background-image: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px); background-size: 40px 40px;"></div>
+
+                    <!-- Connection Layer (SVG) -->
+                    <svg id="connection-layer" class="absolute inset-0 w-full h-full pointer-events-none">
+                        <defs>
+                            <linearGradient id="flow-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                <stop offset="0%" stop-color="#0A4F4F" stop-opacity="0.2" />
+                                <stop offset="50%" stop-color="#CCFF00" stop-opacity="0.6" />
+                                <stop offset="100%" stop-color="#E85D04" stop-opacity="0.2" />
+                            </linearGradient>
+                            <filter id="glow">
+                                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                                <feMerge>
+                                    <feMergeNode in="coloredBlur"/>
+                                    <feMergeNode in="SourceGraphic"/>
+                                </feMerge>
+                            </filter>
+                        </defs>
+                        <!-- Dynamic connections rendered here -->
+                    </svg>
+
+                    <!-- Agent Nodes Layer -->
+                    <div id="nodes-layer" class="absolute inset-0">
+                        <!-- Nodes rendered dynamically -->
+                    </div>
+
+                    <!-- Floating Context Menu -->
+                    <div id="context-menu" class="absolute hidden bg-charcoal-800/95 backdrop-blur-xl border border-charcoal-600 rounded-xl shadow-2xl p-2 min-w-[200px] z-50">
+                        <div class="px-3 py-2 text-xs font-medium text-zinc-500 uppercase tracking-wider">Actions</div>
+                        <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors">
+                            <i data-feather="zap" class="w-4 h-4 text-citron-500"></i>
+                            Execute Workflow
+                        </button>
+                        <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors">
+                            <i data-feather="git-branch" class="w-4 h-4 text-ocean-500"></i>
+                            Fork Agent
+                        </button>
+                        <button class="w-full text-left px-3 py-2 text-sm text-zinc-300 hover:bg-charcoal-700 rounded-lg flex items-center gap-2 transition-colors">
+                            <i data-feather="shield" class="w-4 h-4 text-coral-500"></i>
+                            Isolate & Debug
+                        </button>
+                        <div class="h-px bg-charcoal-600 my-2"></div>
+                        <button class="w-full text-left px-3 py-2 text-sm text-zinc-400 hover:text-coral-500 hover:bg-coral-500/10 rounded-lg flex items-center gap-2 transition-colors">
+                            <i data-feather="trash-2" class="w-4 h-4"></i>
+                            Terminate Agent
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Canvas Controls -->
+                <div class="absolute bottom-6 right-6 flex flex-col gap-2">
+                    <button id="zoom-in" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all">
+                        <i data-feather="plus" class="w-5 h-5"></i>
+                    </button>
+                    <button id="zoom-reset" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all text-xs font-mono">
+                        100%
+                    </button>
+                    <button id="zoom-out" class="w-10 h-10 bg-charcoal-800/90 backdrop-blur border border-charcoal-600 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:border-ocean-500 transition-all">
+                        <i data-feather="minus" class="w-5 h-5"></i>
+                    </button>
+                </div>
+
+                <!-- Mini-map -->
+                <div class="absolute top-6 right-6 w-48 h-32 bg-charcoal-900/90 backdrop-blur border border-charcoal-700 rounded-lg overflow-hidden">
+                    <div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 8px 8px;"></div>
+                    <div id="minimap-viewport" class="absolute border-2 border-ocean-500/50 bg-ocean-500/10 rounded" style="left: 20%; top: 20%; width: 40%; height: 40%;"></div>
+                    <!-- Minimap dots for nodes -->
+                    <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-autonomous" style="left: 30%; top: 35%;"></div>
+                    <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-human" style="left: 50%; top: 45%;"></div>
+                    <div class="absolute w-1.5 h-1.5 rounded-full bg-agent-execution" style="left: 40%; top: 55%;"></div>
+                </div>
+            </main>
+
+            <!-- Right Panel: Inspector -->
+            <synapse-inspector></synapse-inspector>
+        </div>
+
+        <!-- Bottom Time-Reel -->
+        <synapse-time-reel></synapse-time-reel>
+
+        <!-- Omnibar Command Interface -->
+        <div id="omnibar" class="fixed bottom-32 left-1/2 -translate-x-1/2 w-[600px] max-w-[90vw] opacity-0 pointer-events-none transition-all duration-300 z-50">
+            <div class="bg-charcoal-800/95 backdrop-blur-2xl border border-charcoal-600 rounded-2xl shadow-2xl overflow-hidden">
+                <div class="flex items-center gap-3 px-4 py-3 border-b border-charcoal-700">
+                    <i data-feather="terminal" class="w-5 h-5 text-citron-500"></i>
+                    <input type="text" placeholder="Command agents, query data, or create workflows..." 
+                           class="flex-1 bg-transparent text-white placeholder-zinc-500 outline-none font-mono text-sm">
+                    <span class="text-xs text-zinc-500 px-2 py-1 bg-charcoal-700 rounded">⌘K</span>
+                </div>
+                <div class="max-h-64 overflow-y-auto">
+                    <div class="px-4 py-2 text-xs font-medium text-zinc-500 uppercase tracking-wider">Recent Commands</div>
+                    <button class="w-full text-left px-4 py-3 hover:bg-charcoal-700/50 flex items-center gap-3 transition-colors group">
+                        <div class="w-8 h-8 rounded-lg bg-agent-autonomous/20 flex items-center justify-center">
+                            <i data-feather="cpu" class="w-4 h-4 text-agent-autonomous"></i>
+                        </div>
+                        <div class="flex-1">
+                            <div class="text-sm text-zinc-200 group-hover:text-white">Deploy sentiment analysis agent</div>
+                            <div class="text-xs text-zinc-500">Autonomous • Marketing pipeline</div>
+                        </div>
+                    </button>
+                    <button class="w-full text-left px-4 py-3 hover:bg-charcoal-700/50 flex items-center gap-3 transition-colors group">
+                        <div class="w-8 h-8 rounded-lg bg-agent-execution/20 flex items-center justify-center">
+                            <i data-feather="database" class="w-4 h-4 text-agent-execution"></i>
+                        </div>
+                        <div class="flex-1">
+                            <div class="text-sm text-zinc-200 group-hover:text-white">Sync Q3 financial projections</div>
+                            <div class="text-xs text-zinc-500">Execution • 2.4GB dataset</div>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Conflict Resolution Modal -->
+        <div id="conflict-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center">
+            <div class="bg-charcoal-900 border border-charcoal-600 rounded-2xl max-w-2xl w-full mx-4 overflow-hidden">
+                <div class="p-6 border-b border-charcoal-700">
+                    <div class="flex items-center gap-3 mb-2">
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-coral-500 to-vermillion-500 flex items-center justify-center animate-pulse">
+                            <i data-feather="alert-triangle" class="w-5 h-5 text-white"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold text-white">Agent Conflict Detected</h3>
+                            <p class="text-sm text-zinc-400">Resolution required for workflow integrity</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6 space-y-4">
+                    <div class="flex gap-4">
+                        <div class="flex-1 p-4 bg-charcoal-800 rounded-xl border border-agent-autonomous/30">
+                            <div class="flex items-center gap-2 mb-2">
+                                <div class="w-2 h-2 rounded-full bg-agent-autonomous animate-pulse"></div>
+                                <span class="text-sm font-medium text-agent-autonomous">Analyzer-7</span>
+                            </div>
+                            <p class="text-sm text-zinc-300">Recommend immediate market exit based on volatility signals. Confidence: 94%</p>
+                        </div>
+                        <div class="flex-1 p-4 bg-charcoal-800 rounded-xl border border-agent-human/30">
+                            <div class="flex items-center gap-2 mb-2">
+                                <div class="w-2 h-2 rounded-full bg-agent-human"></div>
+                                <span class="text-sm font-medium text-agent-human">Strategist-3</span>
+                            </div>
+                            <p class="text-sm text-zinc-300">Advocate holding position. Pattern matches 2019 recovery. Confidence: 87%</p>
+                        </div>
+                    </div>
+                    <div class="relative">
+                        <div class="h-2 bg-charcoal-700 rounded-full overflow-hidden">
+                            <div id="conflict-slider-track" class="absolute inset-y-0 left-1/2 w-1 bg-gradient-to-r from-agent-autonomous via-white to-agent-human"></div>
+                        </div>
+                        <input type="range" min="0" max="100" value="50" 
+                               class="absolute inset-0 w-full h-full opacity-0 cursor-grab active:cursor-grabbing"
+                               id="conflict-slider">
+                        <div class="flex justify-between mt-2 text-xs text-zinc-500">
+                            <span>Follow Analyzer-7</span>
+                            <span id="conflict-value" class="text-white font-mono">50%</span>
+                            <span>Follow Strategist-3</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6 border-t border-charcoal-700 flex gap-3">
+                    <button class="flex-1 py-3 bg-coral-500 hover:bg-coral-400 text-white rounded-xl font-medium transition-colors">
+                        Override & Decide
+                    </button>
+                    <button class="px-6 py-3 border border-charcoal-600 hover:bg-charcoal-800 text-zinc-300 rounded-xl transition-colors" onclick="document.getElementById('conflict-modal').classList.add('hidden')">
+                        Defer
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Component Scripts -->
+    <script src="components/synapse-header.js"></script>
+    <script src="components/synapse-agent-palette.js"></script>
+    <script src="components/synapse-inspector.js"></script>
+    <script src="components/synapse-time-reel.js"></script>
+    <script src="components/synapse-agent-node.js"></script>
+    
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +1,285 @@
+/* Synapse Canvas — Design Token System */
+
+:root {
+    /* Core Colors */
+    --color-ocean-900: #0A4F4F;
+    --color-ocean-500: #17C2C2;
+    --color-coral-500: #FF6B6B;
+    --color-charcoal-950: #000000;
+    --color-charcoal-900: #0A0A0F;
+    --color-charcoal-800: #141419;
+    --color-charcoal-700: #1A1D21;
+    --color-vermillion-500: #E85D04;
+    --color-citron-500: #CCFF00;
+    
+    /* Agent Semantic Colors */
+    --agent-autonomous: #F59E0B;
+    --agent-human: #3B82F6;
+    --agent-system: #64748B;
+    --agent-execution: #10B981;
+    
+    /* Typography */
+    --font-sans: 'Inter', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    --font-display: 'Space Grotesk', sans-serif;
+    
+    /* Motion */
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+    --duration-instant: 150ms;
+    --duration-fast: 250ms;
+    --duration-normal: 400ms;
+    --duration-slow: 600ms;
+    
+    /* Z-Index Scale */
+    --z-background: -1;
+    --z-base: 0;
+    --z-elevated: 10;
+    --z-floating: 100;
+    --z-overlay: 1000;
+    --z-modal: 2000;
+    --z-toast: 3000;
+    
+    /* Glow Effects */
+    --glow-ocean: 0 0 20px rgba(23, 194, 194, 0.3);
+    --glow-coral: 0 0 20px rgba(255, 107, 107, 0.3);
+    --glow-citron: 0 0 20px rgba(204, 255, 0, 0.3);
+    --glow-agent-autonomous: 0 0 15px rgba(245, 158, 11, 0.4);
+    --glow-agent-human: 0 0 15px rgba(59, 130, 246, 0.4);
+    --glow-agent-execution: 0 0 15px rgba(16, 185, 129, 0.4);
+}
+
+/* Base Reset */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: var(--font-sans);
+    background: var(--color-charcoal-950);
+    color: #A1A1AA;
+    line-height: 1.5;
+    overflow: hidden;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-charcoal-900);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-charcoal-700);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-charcoal-600);
+}
+
+/* Selection */
+::selection {
+    background: rgba(23, 194, 194, 0.3);
+    color: white;
+}
+
+/* Focus States */
+:focus-visible {
+    outline: 2px solid var(--color-ocean-500);
+    outline-offset: 2px;
+}
+
+/* Agent Node Base Styles */
+.agent-node {
+    position: absolute;
+    width: 280px;
+    transition: all var(--duration-fast) var(--ease-spring);
+    transform-origin: center center;
+}
+
+.agent-node:hover {
+    z-index: var(--z-floating);
+}
+
+.agent-node.focused {
+    z-index: calc(var(--z-floating) + 10);
+}
+
+.agent-node.wireframe {
+    opacity: 0.6;
+}
+
+.agent-node.wireframe .node-content {
+    background: transparent;
+    border-style: dashed;
+}
+
+/* Glassmorphism Base */
+.glass {
+    background: rgba(20, 20, 25, 0.8);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-strong {
+    background: rgba(26, 29, 33, 0.95);
+    backdrop-filter: blur(40px) saturate(200%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+/* Connection Lines */
+.connection-line {
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    pointer-events: stroke;
+    transition: all var(--duration-fast) var(--ease-smooth);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.connection-line:hover {
+    stroke-width: 4;
+    filter: url(#glow);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.connection-line.active {
+    animation: dataPulse 1s ease-in-out infinite;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes dataPulse {
+    0%, 100% { stroke-opacity: 0.4; }
+    50% { stroke-opacity: 1; }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Data Flow Particles */
+.data-particle {
+    fill: var(--color-citron-500);
+    filter: url(#glow);
+    animation: flowAlongPath 2s linear infinite;
 }
+
+@keyframes flowAlongPath {
+    0% { offset-distance: 0%; opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { offset-distance: 100%; opacity: 0; }
+}
+
+/* Neural Pulse Animation */
+.neural-pulse {
+    position: relative;
+}
+
+.neural-pulse::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0;
+    animation: pulseRing 2s ease-out infinite;
+    z-index: -1;
+}
+
+@keyframes pulseRing {
+    0% { transform: scale(1); opacity: 0.5; }
+    100% { transform: scale(1.5); opacity: 0; }
+}
+
+/* Agent Avatar Geometries */
+.agent-avatar {
+    width: 48px;
+    height: 48px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.agent-avatar::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 12px;
+    background: linear-gradient(135deg, currentColor 0%, transparent 50%);
+    opacity: 0.3;
+}
+
+.agent-avatar.autonomous {
+    color: var(--agent-autonomous);
+}
+
+.agent-avatar.human {
+    color: var(--agent-human);
+    border-radius: 50%;
+}
+
+.agent-avatar.system {
+    color: var(--agent-system);
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.agent-avatar.execution {
+    color: var(--agent-execution);
+    border-radius: 4px;
+    transform: rotate(45deg);
+}
+
+.agent-avatar.execution > * {
+    transform: rotate(-45deg);
+}
+
+/* Activity Indicators */
+.activity-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    position: relative;
+}
+
+.activity-indicator.active {
+    animation: activityBlink 1.5s ease-in-out infinite;
+}
+
+.activity-indicator.processing {
+    animation: activitySpin 1s linear infinite;
+}
+
+@keyframes activityBlink {
+    0%, 100% { opacity: 0.3; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes activitySpin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Tension Zone (Conflict) */
+.tension-zone {
+    position: absolute;
+    border-radius: 50%;
+    background: radial-gradient(ellipse at center, 
+        rgba(232, 93, 4, 0.2) 0%,
+        rgba(255, 107, 107, 0.1) 40%,
+        transparent 70%
+    );
+    animation: tensionPulse 2s ease-in-out infinite;
+    pointer-events: none;
+}
+
+@keyframes tensionPulse {
+    0%, 100% { transform: scale(1); opacity: 0.6; }