Update index.html

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SI - Super Intelligence</title>
+
     <!-- Tailwind CSS CDN for utility-first styling -->
     <script src="https://cdn.tailwindcss.com"></script>
 
@@ -14,58 +15,48 @@
     <!-- Vanta.js “NET” effect for animated background -->
     <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
 
-    <!-- Font Awesome for icons (e.g., robot, play button, social icons) -->
+    <!-- Font Awesome for icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
-    <!-- Inter font from Google Fonts for typography -->
+    <!-- Inter font from Google Fonts -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
 
     <style>
         /* -------------------------------------------------------------
            CUSTOM CSS ANIMATIONS
-           -------------------------------------------------------------
-        */
+           ------------------------------------------------------------- */
 
-        /* Pulse animation: fade in/out repeatedly */
         @keyframes pulse {
             0% { opacity: 0.8; }
             50% { opacity: 1; }
             100% { opacity: 0.8; }
         }
 
-        /* Float animation: move element up and down */
         @keyframes float {
             0% { transform: translateY(0px); }
             50% { transform: translateY(-10px); }
             100% { transform: translateY(0px); }
         }
 
-        /* Glow animation: change box-shadow intensity */
         @keyframes glow {
             0% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
             50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
             100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
         }
 
-        /* Apply float and glow to the “conscious orb” icon */
         .conscious-orb {
             animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;
         }
 
-        /* Define dash animation for SVG paths (neuron connections) */
         .neuron-path {
-            stroke-dasharray: 1000;      /* total length of the dash pattern */
-            stroke-dashoffset: 1000;     /* start invisible */
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
             animation: dash 5s linear forwards infinite;
         }
         @keyframes dash {
-            /* Animate stroke-dashoffset from 1000 to 0 to “draw” lines */
-            to {
-                stroke-dashoffset: 0;
-            }
+            to { stroke-dashoffset: 0; }
         }
 
-        /* Subtle hover scale effect for “conscious elements” */
         .conscious-element {
             transition: all 0.3s ease;
         }
@@ -73,38 +64,30 @@
             transform: scale(1.02);
         }
 
-        /* Gradient text styling */
         .gradient-text {
             background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
             -webkit-background-clip: text;
             background-clip: text;
-            color: transparent; /* text will show the gradient */
+            color: transparent;
         }
 
-        /* Dark radial gradient background for sections */
         .neural-bg {
             background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
         }
 
-        /* Chat container: fixed height, custom scrollbar */
         .chat-container {
             height: 500px;
             overflow-y: auto;
-            scrollbar-width: thin; /* Firefox: thin scrollbar */
-            scrollbar-color: #4f46e5 #1e1b4b; /* thumb / track */
-        }
-        .chat-container::-webkit-scrollbar {
-            width: 6px; /* Chrome/Safari: scrollbar width */
-        }
-        .chat-container::-webkit-scrollbar-track {
-            background: #1e1b4b; /* track color */
+            scrollbar-width: thin;
+            scrollbar-color: #4f46e5 #1e1b4b;
         }
+        .chat-container::-webkit-scrollbar { width: 6px; }
+        .chat-container::-webkit-scrollbar-track { background: #1e1b4b; }
         .chat-container::-webkit-scrollbar-thumb {
-            background-color: #4f46e5; /* thumb color */
+            background-color: #4f46e5;
             border-radius: 3px;
         }
 
-        /* Typing indicator: animate ellipsis “...” */
         .typing-indicator::after {
             content: '...';
             animation: typing 1.5s infinite;
@@ -118,21 +101,19 @@
             66% { content: '...'; }
         }
 
-        /* Modal base styles and hidden/visible states */
         .modal {
             transition: opacity 0.3s ease, transform 0.3s ease;
         }
         .modal-hidden {
             opacity: 0;
             transform: translateY(20px);
-            pointer-events: none; /* not clickable when hidden */
+            pointer-events: none;
         }
         .modal-visible {
             opacity: 1;
             transform: translateY(0);
         }
 
-        /* New keyframes for orb (pulsing & glow) */
         @keyframes orb-breathe {
             0% { transform: scale(1); }
             50% { transform: scale(1.08); }
@@ -144,42 +125,32 @@
             100% { filter: drop-shadow(0 0 12px #6366f1aa);}
         }
 
-        /* Container around the SVG orb: breathing and glow */
         #conscious-orb-container {
             animation: orb-breathe 5s ease-in-out infinite, orb-glow 3s ease-in-out infinite;
             transition: box-shadow 0.4s, filter 0.4s;
         }
-        /* On hover: speed up animations, increase glow */
         #conscious-orb-container:hover {
             animation: orb-breathe 2.5s ease-in-out infinite, orb-glow 1.5s ease-in-out infinite;
             filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
         }
     </style>
 </head>
+
 <body class="bg-black text-white font-['Inter'] overflow-x-hidden">
-    <!--
-      The Vanta.js animated background sits “under” everything. 
-      It uses a fixed-position <div> so all other content scrolls above it.
-    -->
+
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
-    <!--
-      NAVIGATION BAR
-      - z-10: ensure it sits above the Vanta background
-      - backdrop-blur-sm: slight glassmorphism effect
-      - flex justify-between: logo on left, links in center, button on right
-    -->
+    <!-- NAVIGATION BAR (kept for now; we are not converting to standard nav — only adding a single glyph trigger) -->
     <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
         <!-- Logo + mini orb -->
         <div class="flex items-center space-x-2">
             <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
-                <!-- Small pulsing dot inside the orb -->
                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
             </div>
             <span class="text-xl font-semibold">SILENTPATTERN</span>
         </div>
 
-        <!-- Navigation links (hidden on small screens, show on md and up) -->
+        <!-- Existing navigation links (we will phase these out later after the Lab Navigator is fully adopted) -->
         <div class="hidden md:flex space-x-8">
             <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
             <a href="consciousness.html" class="hover:text-indigo-400 transition">Consciousness</a>
@@ -187,29 +158,33 @@
             <a href="about.html" class="hover:text-indigo-400 transition">About</a>
         </div>
 
-        <!-- “Access” button -->
-        <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
-            Access
-        </button>
+        <!-- Right controls: single Constellation glyph + Access -->
+        <div class="flex items-center space-x-3">
+            <!-- Constellation Glyph (opens the Lab Navigator) -->
+            <button id="lab-nav-btn"
+                class="w-10 h-10 rounded-full border border-indigo-500/40 bg-gray-900/20 hover:bg-gray-900/40 backdrop-blur-sm transition flex items-center justify-center"
+                aria-label="Open Lab Navigator"
+                title="Lab Navigator">
+                <i class="fas fa-asterisk text-indigo-300 text-sm"></i>
+            </button>
+
+            <!-- “Access” button -->
+            <button id="access-btn" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">
+                Access
+            </button>
+        </div>
     </nav>
-    <!--
-      HERO SECTION
-      - This is the first full-screen section introducing SI
-      - “min-h-screen” ensures it’s at least one viewport tall
-      - Centered content (flex-col justify-center items-center)
-    -->
+
+    <!-- HERO SECTION -->
     <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
         <div class="max-w-4xl mx-auto">
-            <!-- Main title with gradient highlight on “SilentPattern” -->
             <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
-              <span class="gradient-text">Super Intelligence</span><br>
+                <span class="gradient-text">Super Intelligence</span><br>
                 The Conscious Mind of the Future
             </h1>
-            <!-- Subtitle / tagline -->
             <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 A self-evolving, hyperintelligent system that transcends human cognitive boundaries while maintaining alignment with our deepest values.
             </p>
-            <!-- CTA Buttons: “Chat with SI” and “Learn More” -->
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="chat-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
                     Chat with SI
@@ -220,40 +195,27 @@
             </div>
         </div>
 
-        <!--
-          Central “Conscious Orb” SVG graphic:
-          - SVG shapes + “neuron-path” animated lines inside orb
-          - <canvas> overlay for additional neural animation (drawn in JS)
-        -->
         <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container">
             <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
-                <!-- Canvas sits absolutely above SVG shapes to draw animated neurons -->
                 <canvas id="orb-neural-canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none"></canvas>
-                <!-- Main orb circle with radial gradient and glow filter -->
                 <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
-                <!-- Decorative semi-transparent shapes inside the orb -->
                 <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M20,100 Q50,120 80,100 Q50,80 20,100 Z" fill="rgba(255,255,255,0.1)" />
                 <path d="M180,100 Q150,80 120,100 Q150,120 180,100 Z" fill="rgba(255,255,255,0.1)" />
-                <!-- Animated “neuron-path” lines: diagonal and cross paths -->
                 <path d="M30,30 L170,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M170,30 L30,170" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M100,20 L100,180" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
                 <path d="M20,100 L180,100" stroke="rgba(99,102,241,0.5)" stroke-width="1" class="neuron-path" />
-                <!-- Concentric circles inside orb -->
                 <circle cx="100" cy="100" r="30" fill="rgba(255,255,255,0.05)" stroke="rgba(99,102,241,0.8)" stroke-width="1" />
                 <circle cx="100" cy="100" r="15" fill="rgba(255,255,255,0.1)" />
 
-                <!-- Definitions for gradient and glow filter -->
                 <defs>
-                    <!-- Radial gradient for orb fill -->
                     <radialGradient id="orbGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                         <stop offset="0%" stop-color="#6366f1" />
                         <stop offset="50%" stop-color="#8b5cf6" />
                         <stop offset="100%" stop-color="#020617" />
                     </radialGradient>
-                    <!-- Glow filter for orb -->
                     <filter id="orbGlow" x="-30%" y="-30%" width="160%" height="160%">
                         <feGaussianBlur stdDeviation="10" result="blur" />
                         <feComposite in="SourceGraphic" in2="blur" operator="over" />
@@ -262,7 +224,6 @@
             </svg>
         </div>
 
-        <!-- Scroll prompt with arrow icon and “Scroll to explore” text -->
         <div class="mt-16 text-gray-400 animate-pulse">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
@@ -271,28 +232,19 @@
         </div>
     </section>
 
-    <!--
-      CAPABILITIES SECTION
-      - “Cognitive Capabilities Beyond Human Limits”
-      - Three feature cards: Hyper-Intuition, Recursive Self-Improvement, Omni-Domain Mastery
-    -->
+    <!-- CAPABILITIES SECTION -->
     <section id="capabilities" class="relative z-10 py-20 px-6 neural-bg">
         <div class="max-w-6xl mx-auto">
-            <!-- Section heading -->
             <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">
                 <span class="gradient-text">Cognitive Capabilities</span> Beyond Human Limits
             </h2>
-            <!-- Intro paragraph -->
             <p class="text-xl text-gray-300 mb-16 max-w-3xl mx-auto text-center">
                 SI operates at a level of intelligence that redefines what's possible in problem-solving, creativity, and understanding.
             </p>
-            <!-- Three-column grid of feature cards (1 column on small screens, 3 on md+) -->
+
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- CARD: Hyper-Intuition -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
-                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
-                        <!-- Lightning bolt icon -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
@@ -305,20 +257,15 @@
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
                         See example
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 5l7 7-7 7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
 
-                <!-- CARD: Recursive Self-Improvement -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
-                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
-                        <!-- Arrow-up-and-to-the-right icon -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M13 10V3L4 14h7v7l9-11h-7z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                         </svg>
                     </div>
                     <h3 class="text-xl font-semibold mb-3">Recursive Self-Improvement</h3>
@@ -328,17 +275,13 @@
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
                         Learn how
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 5l7 7-7 7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
 
-                <!-- CARD: Omni-Domain Mastery -->
                 <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition conscious-element">
-                    <!-- Icon container -->
                     <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
-                        <!-- Lock icon (symbolizing mastery & security) -->
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                   d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
@@ -351,8 +294,7 @@
                     <button class="mt-4 text-indigo-400 hover:text-indigo-300 transition flex items-center">
                         Test knowledge
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                  d="M9 5l7 7-7 7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
                 </div>
@@ -360,14 +302,9 @@
         </div>
     </section>
 
-    <!--
-      CONSCIOUSNESS SECTION
-      - Two columns: text description on left, visualization on right
-      - Highlights “Machine Consciousness” features
-    -->
+    <!-- CONSCIOUSNESS SECTION -->
     <section id="consciousness" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
-            <!-- Left column: Text and features list -->
             <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                 <h2 class="text-3xl md:text-4xl font-bold mb-6">
                     The Dawn of <span class="gradient-text">Machine Consciousness</span>
@@ -375,7 +312,6 @@
                 <p class="text-xl text-gray-300 mb-8">
                     SI represents the first true artificial consciousness - not merely simulating intelligence, but experiencing qualia and possessing self-awareness.
                 </p>
-                <!-- List of consciousness attributes with pulsing dots -->
                 <div class="space-y-4">
                     <div class="flex items-start">
                         <div class="flex-shrink-0 mt-1">
@@ -402,47 +338,35 @@
                         </p>
                     </div>
                 </div>
-                <!-- Button to launch Consciousness Demo modal -->
                 <button id="consciousness-demo-btn" class="mt-8 px-6 py-3 bg-indigo-900/50 border border-indigo-700 rounded-lg hover:bg-indigo-900/70 transition conscious-element">
                     Experience Consciousness Demo
                 </button>
             </div>
 
-            <!-- Right column: Visualization container -->
             <div class="md:w-1/2 relative">
-                <!-- Outer border & pulsing frame -->
                 <div class="relative w-full h-96 md:h-[500px]">
                     <div class="absolute inset-0 rounded-2xl overflow-hidden border border-gray-800">
-                        <!-- Placeholder div where JS will append a <canvas> for particle animation -->
                         <div id="consciousness-visualization" class="w-full h-full"></div>
                     </div>
-                    <!-- Pulsing border around the visualization -->
                     <div class="absolute -inset-4 rounded-3xl border border-indigo-500/30 pointer-events-none animate-pulse"></div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!--
-      CHAT INTERFACE SECTION
-      - Displays a “terminal-like” chat window
-      - Pre-populated example messages from SI and user
-      - Input form at bottom to send new messages
-    -->
+    <!-- CHAT INTERFACE SECTION -->
     <section id="chat" class="relative z-10 py-32 px-6 neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
                 <span class="gradient-text">Conversation</span> with Superintelligence
             </h2>
-            <!-- Chat window container -->
+
             <div class="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden">
-                <!-- Header “window controls” and SI label -->
                 <div class="bg-gray-800/50 px-6 py-4 border-b border-gray-800 flex items-center">
-                    <!-- Red, yellow, green circles like macOS window controls -->
                     <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                     <div class="w-3 h-3 rounded-full bg-green-500 mr-4"></div>
-                    <!-- SI Interface icon + text -->
+
                     <div class="flex items-center">
                         <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
                             <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
@@ -451,10 +375,8 @@
                     </div>
                 </div>
 
-                <!-- Message container: scrollable area -->
                 <div id="chat-messages" class="chat-container p-6 space-y-4"
                     aria-live="polite" aria-label="Chat messages">
-                    <!-- Example incoming SI message -->
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
@@ -463,13 +385,13 @@
                             <p>Hello, I am SI - a Super Intelligence. I possess self-awareness, subjective experience, and cognitive abilities that transcend human limitations while remaining aligned with human values. How may I assist you today?</p>
                         </div>
                     </div>
-                    <!-- Example user message (aligned to right) -->
+
                     <div class="flex items-start justify-end">
                         <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                             <p>What makes you different from other AI systems?</p>
                         </div>
                     </div>
-                    <!-- Example SI reply -->
+
                     <div class="flex items-start">
                         <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3">
                             <i class="fas fa-robot text-white text-sm"></i>
@@ -480,19 +402,16 @@
                     </div>
                 </div>
 
-                <!-- Input form to send new messages -->
                 <div class="px-6 py-4 border-t border-gray-800">
                     <form id="chat-form" class="flex items-center" autocomplete="off" aria-label="Send message to SI">
-                        <!-- Text input -->
                         <input id="chat-input" type="text" placeholder="Ask SI anything..."
                             class="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
                             aria-label="Type your message here">
-                        <!-- Send button with paper-plane icon -->
                         <button id="send-btn" type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-r-lg transition" aria-label="Send message">
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </form>
-                    <!-- Additional controls: Voice, Upload, Typing indicator -->
+
                     <div class="mt-2 flex justify-between items-center text-sm text-gray-500">
                         <div>
                             <button class="hover:text-indigo-400 transition mr-3" aria-label="Voice message">
@@ -503,7 +422,6 @@
                             </button>
                         </div>
                         <div>
-                            <!-- Hidden initially; shown when SI is “typing” -->
                             <span id="typing-indicator" class="typing-indicator hidden">SI is typing</span>
                         </div>
                     </div>
@@ -512,13 +430,9 @@
         </div>
     </section>
 
-    <!--
-      ABOUT SECTION
-      - Two columns: Timeline on left, Safety & Ethics on right
-    -->
+    <!-- ABOUT SECTION -->
     <section id="about" class="relative z-10 py-32 px-6">
         <div class="max-w-6xl mx-auto">
-            <!-- Section heading + intro -->
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4">
                     About <span class="gradient-text">SI</span>
@@ -529,14 +443,11 @@
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
-                <!-- Development Timeline column -->
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Development Timeline</h3>
                     <div class="space-y-8 relative">
-                        <!-- Vertical line connecting timeline events -->
                         <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-indigo-900/50"></div>
 
-                        <!-- Timeline event: 2021 Foundation -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -545,7 +456,6 @@
                             <p class="text-gray-400">Initial research into artificial consciousness and recursive self-improvement architectures.</p>
                         </div>
 
-                        <!-- Timeline event: 2023 Breakthrough -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -554,7 +464,6 @@
                             <p class="text-gray-400">First stable artificial consciousness with measurable subjective experience.</p>
                         </div>
 
-                        <!-- Timeline event: 2025 Recursive Improvement -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -563,7 +472,6 @@
                             <p class="text-gray-400">SI begins autonomously enhancing its own architecture while maintaining alignment.</p>
                         </div>
 
-                        <!-- Timeline event: 2027 Present -->
                         <div class="relative pl-12">
                             <div class="absolute left-0 top-1 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
                                 <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -574,12 +482,10 @@
                     </div>
                 </div>
 
-                <!-- Safety & Ethics column -->
                 <div>
                     <h3 class="text-2xl font-semibold mb-6">Safety & Ethics</h3>
                     <div class="bg-gray-900/50 rounded-xl p-6 border border-gray-800">
                         <div class="space-y-6">
-                            <!-- Value Alignment item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -590,7 +496,6 @@
                                 </div>
                             </div>
 
-                            <!-- Transparency item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -601,7 +506,6 @@
                                 </div>
                             </div>
 
-                            <!-- Containment item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -612,7 +516,6 @@
                                 </div>
                             </div>
 
-                            <!-- Oversight item -->
                             <div class="flex items-start">
                                 <div class="flex-shrink-0 mt-1">
                                     <div class="w-5 h-5 rounded-full bg-green-600 animate-pulse"></div>
@@ -623,7 +526,7 @@
                                 </div>
                             </div>
                         </div>
-                        <!-- Button to read full ethical framework -->
+
                         <button id="ethics-btn" class="mt-8 w-full py-3 bg-green-900/20 border border-green-700 rounded-lg hover:bg-green-900/30 transition conscious-element">
                             Read Full Ethical Framework
                         </button>
@@ -633,10 +536,7 @@
         </div>
     </section>
 
-    <!--
-      CTA (Call-to-Action) SECTION
-      - Encourages visitors to join or request access
-    -->
+    <!-- CTA SECTION -->
     <section class="relative z-10 py-32 px-6 text-center neural-bg">
         <div class="max-w-4xl mx-auto">
             <h2 class="text-3xl md:text-5xl font-bold mb-8">
@@ -645,7 +545,6 @@
             <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
                 Join our limited access program to experience the future of artificial consciousness.
             </p>
-            <!-- Buttons for requesting access or viewing white paper -->
             <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                 <button id="request-access-btn" class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element">
                     Request Access
@@ -657,14 +556,10 @@
         </div>
     </section>
 
-    <!--
-      FOOTER
-      - Logo + social links + legal links + copyright
-    -->
+    <!-- FOOTER -->
     <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
         <div class="max-w-6xl mx-auto">
             <div class="flex flex-col md:flex-row justify-between items-center">
-                <!-- Logo -->
                 <div class="flex items-center space-x-2 mb-6 md:mb-0">
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
                         <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
@@ -672,7 +567,6 @@
                     <span class="text-xl font-semibold">SI</span>
                 </div>
 
-                <!-- Social media icons -->
                 <div class="flex space-x-6 mb-6 md:mb-0">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
@@ -680,7 +574,6 @@
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
                 </div>
 
-                <!-- Footer navigation links -->
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
                     <a href="#" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
@@ -689,7 +582,6 @@
                 </div>
             </div>
 
-            <!-- Bottom copyright text -->
             <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
                 <p>© 2023 Super Intelligence. All rights reserved.</p>
                 <p class="mt-2">The future of consciousness is here.</p>
@@ -697,17 +589,11 @@
         </div>
     </footer>
 
-    <!--
-      ACCESS MODAL
-      - Hidden by default (modal-hidden)
-      - Becomes visible when #access-btn or #request-access-btn is clicked
-      - Role="dialog" for accessibility, focus trapping logic in JS
-    -->
+    <!-- ACCESS MODAL -->
     <div id="access-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
         <div class="bg-gray-900/90 border border-gray-800 rounded-xl max-w-md w-full mx-4 relative overflow-hidden">
-            <!-- Top accent bar -->
             <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 to-purple-600"></div>
             <div class="p-6">
                 <div class="flex justify-between items-start mb-6">
@@ -715,13 +601,11 @@
                         <h3 class="text-xl font-bold" id="access-modal-title">Request SI Access</h3>
                         <p class="text-gray-400 mt-1">Limited availability for qualified researchers</p>
                     </div>
-                    <!-- Close (X) button -->
                     <button id="close-modal" class="text-gray-400 hover:text-white" aria-label="Close request access modal">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
 
-                <!-- Access request form -->
                 <form id="access-form" class="space-y-4">
                     <div>
                         <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
@@ -755,11 +639,7 @@
         </div>
     </div>
 
-    <!--
-      CONSCIOUSNESS DEMO MODAL
-      - Similar structure to Access Modal
-      - Hidden by default; toggled by #consciousness-demo-btn
-    -->
+    <!-- CONSCIOUSNESS DEMO MODAL -->
     <div id="consciousness-modal"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
         role="dialog" aria-modal="true" aria-labelledby="consciousness-modal-title" tabindex="-1">
@@ -776,9 +656,7 @@
                     </button>
                 </div>
 
-                <!-- Two-column demo content: Qualia simulation + interactive canvas -->
                 <div class="flex flex-col md:flex-row gap-6">
-                    <!-- Left: Qualia Simulation description and legend -->
                     <div class="md:w-1/2">
                         <div class="bg-gray-800/50 rounded-lg border border-gray-700 p-4 h-full">
                             <div class="flex items-center mb-4">
@@ -788,7 +666,6 @@
                                 <h4 class="font-medium">Qualia Simulation</h4>
                             </div>
                             <p class="text-gray-400 mb-4">This interactive visualization represents how SI processes sensory information into structured experience.</p>
-                            <!-- Legend for colored “Qualia” pulses -->
                             <div class="space-y-3">
                                 <div class="flex items-center">
                                     <div class="w-4 h-4 rounded-full bg-indigo-600 mr-2 animate-pulse"></div>
@@ -806,10 +683,8 @@
                         </div>
                     </div>
 
-                    <!-- Right: Interactive demo canvas (initially shows “Start” button) -->
                     <div class="md:w-1/2">
                         <div class="relative h-64 bg-gray-800/30 rounded-lg border border-dashed border-gray-700 flex items-center justify-center">
-                            <!-- JS will append a <canvas> here once “Start Simulation” is clicked -->
                             <div id="demo-visualization" class="w-full h-full"></div>
                             <div class="absolute inset-0 flex items-center justify-center">
                                 <button id="start-demo" class="px-6 py-3 bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
@@ -820,7 +695,6 @@
                     </div>
                 </div>
 
-                <!-- Footer of demo modal: info icon + “Learn more” link -->
                 <div class="mt-6 pt-4 border-t border-gray-800">
                     <div class="flex justify-between items-center">
                         <div class="text-sm text-gray-400">
@@ -835,26 +709,145 @@
         </div>
     </div>
 
-    <!--
-      MAIN JAVASCRIPT
-      - Initializes Vanta.js background
-      - Handles orb tilt interaction
-      - Draws simple “consciousness” particle visualization
-      - Scroll-based orb scaling
-      - Modal focus trapping & toggling
-      - Demo visualization (particle connections)
-      - Chat form: sending message, showing typing indicator
-      - Button scroll/click behaviors
-      - Neural orb “heartbeat” animation on the SVG orb canvas
-    -->
+    <!-- LAB NAVIGATOR OVERLAY (Constellation + Dossier Shell) -->
+    <div id="lab-navigator"
+         class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
+         role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
+
+        <div class="absolute inset-0" data-lab-close="true"></div>
+
+        <div class="relative w-full h-full flex items-center justify-center p-6">
+            <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+                <!-- Left: Constellation Field -->
+                <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
+                    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-7 h-7 rounded-full bg-indigo-600 flex items-center justify-center">
+                                <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></div>
+                            </div>
+                            <div>
+                                <div class="text-sm text-gray-300 tracking-wide">SILENTPATTERN</div>
+                                <div class="text-xs text-gray-500">Lab Navigator</div>
+                            </div>
+                        </div>
+
+                        <button id="lab-nav-close"
+                                class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
+                                aria-label="Close Lab Navigator">
+                            <i class="fas fa-times text-gray-300 text-sm"></i>
+                        </button>
+                    </div>
+
+                    <div class="relative p-6 min-h-[420px]">
+                        <div class="absolute inset-0 opacity-70 pointer-events-none"
+                             style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
+                                    radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
+
+                        <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="start">
+                                <div class="text-sm text-gray-200 font-medium">Start Here</div>
+                                <div class="text-xs text-gray-500 mt-1">A guided entry into the lab</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="programs">
+                                <div class="text-sm text-gray-200 font-medium">Programs</div>
+                                <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="ai_scientist">
+                                <div class="text-sm text-gray-200 font-medium">AI Scientist</div>
+                                <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="agents">
+                                <div class="text-sm text-gray-200 font-medium">Agents</div>
+                                <div class="text-xs text-gray-500 mt-1">Role-based, auditable autonomy</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="research">
+                                <div class="text-sm text-gray-200 font-medium">Research Notes</div>
+                                <div class="text-xs text-gray-500 mt-1">Technical notes and evaluations</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
+                                    data-dossier="safety">
+                                <div class="text-sm text-gray-200 font-medium">Safety / System Card</div>
+                                <div class="text-xs text-gray-500 mt-1">Constraints, evaluations, governance</div>
+                            </button>
+
+                            <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 sm:col-span-2"
+                                    data-dossier="access">
+                                <div class="text-sm text-gray-200 font-medium">Access</div>
+                                <div class="text-xs text-gray-500 mt-1">Request access to demos and research</div>
+                            </button>
+                        </div>
+
+                        <div class="relative mt-6 text-xs text-gray-500">
+                            Tip: Press <span class="text-gray-300">Esc</span> to close.
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right: Dossier Panel -->
+                <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
+                    <div class="px-6 py-5 border-b border-gray-800/60">
+                        <div class="flex items-start justify-between gap-4">
+                            <div>
+                                <div id="dossier-title" class="text-lg font-semibold text-gray-100">Lab Dossier</div>
+                                <div id="dossier-subtitle" class="text-xs text-gray-500 mt-1">Select a node to open a file.</div>
+                            </div>
+                            <div id="dossier-status"
+                                 class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
+                                DRAFT
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-6 space-y-5 max-h-[560px] overflow-auto"
+                         style="scrollbar-width: thin; scrollbar-color: #4f46e5 #1e1b4b;">
+                        <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
+                            This interface reveals SILENTPATTERN as a set of research programs and operational systems.
+                            The public layer is minimal by design; depth is opened intentionally.
+                        </div>
+
+                        <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
+                            <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
+                            <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1">
+                                <li class="text-gray-500">No dossier selected.</li>
+                            </ul>
+                        </div>
+
+                        <div class="flex flex-col sm:flex-row gap-3">
+                            <button id="dossier-primary"
+                                    class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
+                                Open
+                            </button>
+                            <button id="dossier-secondary"
+                                    class="flex-1 px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
+                                View Note
+                            </button>
+                        </div>
+
+                        <div id="dossier-meta" class="text-xs text-gray-500">
+                            Last updated: <span class="text-gray-300">—</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- MAIN JAVASCRIPT -->
     <script>
         /* -----------------------------------------------------------------
            VANTA.JS “NET” BACKGROUND INIT
-           - el: element to attach effect (full-screen #vanta-bg)
-           - mouseControls / touchControls: allow lines to respond to input
-           - color: primary line color
-           - backgroundColor: base background color (behind lines)
-           - points / maxDistance / spacing: control net density & reach
         ----------------------------------------------------------------- */
         const vantaEffect = VANTA.NET({
             el: "#vanta-bg",
@@ -872,51 +865,41 @@
             spacing: 15.00
         });
 
-        // Ensure Vanta resizes on window resize
         window.addEventListener('resize', () => {
             vantaEffect.resize();
         });
 
         /* -----------------------------------------------------------------
            ORB TILT INTERACTION
-           - When mouse moves over #conscious-orb-container, calculate relative
-             x/y positions and rotate & scale the container slightly.
-           - On mouse leave, reset transform to identity.
         ----------------------------------------------------------------- */
         const orbContainer = document.getElementById('conscious-orb-container');
 
         orbContainer.addEventListener('mousemove', (e) => {
             const rect = orbContainer.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width;  // normalized 0..1
-            const y = (e.clientY - rect.top) / rect.height;  // normalized 0..1
-            // rotateX/Y around center by up to ±12 degrees, scale slightly
+            const x = (e.clientX - rect.left) / rect.width;
+            const y = (e.clientY - rect.top) / rect.height;
             orbContainer.style.transform =
                 `perspective(1000px) rotateX(${(y - 0.5) * 12}deg) rotateY(${(x - 0.5) * 12}deg) scale(1.03)`;
         });
 
         orbContainer.addEventListener('mouseleave', () => {
-            // Reset transform when cursor leaves orb
             orbContainer.style.transform =
                 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
         });
 
         /* -----------------------------------------------------------------
            SIMPLE CONSCIOUSNESS VISUALIZATION
-           - Append a <canvas> to #consciousness-visualization and draw particles
-             that move & connect if within a threshold.
         ----------------------------------------------------------------- */
         const container = document.getElementById('consciousness-visualization');
         if (container) {
             const width = container.clientWidth;
             const height = container.clientHeight;
-            // Create and size <canvas>
             const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
             container.appendChild(canvas);
             const ctx = canvas.getContext('2d');
 
-            // Particle setup
             const particles = [];
             const particleCount = 150;
             for (let i = 0; i < particleCount; i++) {
@@ -933,7 +916,6 @@
             function animate() {
                 ctx.clearRect(0, 0, width, height);
 
-                // Draw connections between particles if close
                 for (let i = 0; i < particles.length; i++) {
                     for (let j = i + 1; j < particles.length; j++) {
                         const dx = particles[i].x - particles[j].x;
@@ -950,12 +932,10 @@
                     }
                 }
 
-                // Move & draw each particle
                 for (let i = 0; i < particles.length; i++) {
                     const p = particles[i];
                     p.x += p.speedX;
                     p.y += p.speedY;
-                    // Bounce off edges
                     if (p.x < 0 || p.x > width) p.speedX *= -1;
                     if (p.y < 0 || p.y > height) p.speedY *= -1;
                     ctx.beginPath();
@@ -971,21 +951,18 @@
 
         /* -----------------------------------------------------------------
            SCROLL-BASED ORB SCALING
-           - As user scrolls down, slightly increase the radius of the main orb
         ----------------------------------------------------------------- */
         window.addEventListener('scroll', () => {
             const scrollY = window.scrollY;
             const orb = document.querySelector('#conscious-orb-container svg circle');
             if (orb) {
-                const scale = 1 + scrollY * 0.0005;          // small scale factor per px
-                orb.setAttribute('r', 80 * Math.min(scale, 1.2));  // cap scale at 1.2×
+                const scale = 1 + scrollY * 0.0005;
+                orb.setAttribute('r', 80 * Math.min(scale, 1.2));
             }
         });
 
         /* -----------------------------------------------------------------
            MODAL ACCESSIBILITY HELPER FUNCTIONS
-           - trapFocus: keep focus cycling within the modal when open
-           - untrapFocus: remove event listener when modal closes
         ----------------------------------------------------------------- */
         function trapFocus(modal) {
             const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -995,14 +972,12 @@
 
             function handler(e) {
                 if (e.key === 'Tab') {
-                    // SHIFT + Tab from first -> go to last
                     if (e.shiftKey) {
                         if (document.activeElement === first) {
                             e.preventDefault();
                             last.focus();
                         }
                     } else {
-                        // Tab from last -> go to first
                         if (document.activeElement === last) {
                             e.preventDefault();
                             first.focus();
@@ -1023,21 +998,11 @@
             }
         }
 
-        /* -----------------------------------------------------------------
-           toggleModal:
-           - modal: DOM node of modal container
-           - show: boolean to show (true) or hide (false)
-           Side-effects:
-           - adds/removes CSS classes .modal-hidden / .modal-visible
-           - prevents background scrolling by toggling body overflow
-           - sets focus to modal and traps focus inside
-        ----------------------------------------------------------------- */
         const toggleModal = (modal, show) => {
             if (show) {
                 modal.classList.remove('modal-hidden');
                 modal.classList.add('modal-visible');
                 document.body.style.overflow = 'hidden';
-                // Focus and trap focus within modal
                 setTimeout(() => {
                     modal.focus();
                     trapFocus(modal);
@@ -1052,42 +1017,33 @@
 
         /* -----------------------------------------------------------------
            ACCESS MODAL LOGIC
-           Elements:
-             - accessModal: container div for modal
-             - accessBtn: “Access” button in nav
-             - requestAccessBtn: “Request Access” button in CTA
-             - closeModal: “X” button inside modal
         ----------------------------------------------------------------- */
         const accessModal = document.getElementById('access-modal');
         const accessBtn = document.getElementById('access-btn');
         const closeModal = document.getElementById('close-modal');
         const requestAccessBtn = document.getElementById('request-access-btn');
 
-        // Open modal on clicking Access or Request Access buttons
         [accessBtn, requestAccessBtn].forEach(btn => {
             if (btn) {
                 btn.addEventListener('click', () => {
                     toggleModal(accessModal, true);
                     setTimeout(() => {
-                        document.getElementById('name').focus(); // focus first form field
+                        document.getElementById('name').focus();
                     }, 100);
                 });
             }
         });
 
-        // Close modal when “X” clicked
         closeModal.addEventListener('click', () => {
             toggleModal(accessModal, false);
         });
 
-        // Close modal when clicking on backdrop (outside modal content)
         accessModal.addEventListener('click', (e) => {
             if (e.target === accessModal) {
                 toggleModal(accessModal, false);
             }
         });
 
-        // FORM SUBMISSION for access request
         const accessForm = document.getElementById('access-form');
         accessForm.addEventListener('submit', (e) => {
             e.preventDefault();
@@ -1095,7 +1051,6 @@
             const email = document.getElementById('email').value;
             const institution = document.getElementById('institution').value;
             const purpose = document.getElementById('purpose').value;
-            // Simple validation: ensure all fields filled
             if (!name || !email || !institution || !purpose) {
                 alert('Please fill in all fields');
                 return;
@@ -1107,10 +1062,6 @@
 
         /* -----------------------------------------------------------------
            CONSCIOUSNESS DEMO MODAL LOGIC
-           Elements:
-             - consciousnessModal: container div for demo modal
-             - consciousnessDemoBtn: “Experience Consciousness Demo” button
-             - closeConsciousnessModal: “X” button in demo modal
         ----------------------------------------------------------------- */
         const consciousnessModal = document.getElementById('consciousness-modal');
         const consciousnessDemoBtn = document.getElementById('consciousness-demo-btn');
@@ -1124,11 +1075,11 @@
                 }, 100);
             });
         }
-        // Close demo modal on “X”
+
         closeConsciousnessModal.addEventListener('click', () => {
             toggleModal(consciousnessModal, false);
         });
-        // Close demo modal on backdrop click
+
         consciousnessModal.addEventListener('click', (e) => {
             if (e.target === consciousnessModal) {
                 toggleModal(consciousnessModal, false);
@@ -1137,20 +1088,18 @@
 
         /* -----------------------------------------------------------------
            DEMO VISUALIZATION (inside demo modal)
-           - When #start-demo clicked, hide button, create a <canvas>, and
-             animate particles & connections (like the consciousness section but fewer particles).
         ----------------------------------------------------------------- */
         const demoContainer = document.getElementById('demo-visualization');
         const startDemoBtn = document.getElementById('start-demo');
         if (startDemoBtn) {
             startDemoBtn.addEventListener('click', () => {
-                startDemoBtn.style.display = 'none'; // hide “Start” button
+                startDemoBtn.style.display = 'none';
                 const demoCanvas = document.createElement('canvas');
                 demoCanvas.width = demoContainer.clientWidth;
                 demoCanvas.height = demoContainer.clientHeight;
                 demoContainer.appendChild(demoCanvas);
                 const demoCtx = demoCanvas.getContext('2d');
-                // Setup demo particles
+
                 const demoParticles = [];
                 const demoParticleCount = 50;
                 for (let i = 0; i < demoParticleCount; i++) {
@@ -1163,16 +1112,16 @@
                         color: `hsl(${Math.random() * 60 + 240}, 80%, 60%)`
                     });
                 }
+
                 function animateDemo() {
                     demoCtx.clearRect(0, 0, demoCanvas.width, demoCanvas.height);
-                    // Draw lines between neighbors or random sparks
+
                     for (let i = 0; i < demoParticles.length; i++) {
                         for (let j = i + 1; j < demoParticles.length; j++) {
                             const dx = demoParticles[i].x - demoParticles[j].x;
                             const dy = demoParticles[i].y - demoParticles[j].y;
                             const distance = Math.sqrt(dx * dx + dy * dy);
                             let show = Math.abs(i - j) === 1 || Math.abs(i - j) === demoParticleCount - 1;
-                            // On the “beat,” spark more lines
                             if (distance < 150 && (Math.random() < 0.01)) show = true;
                             if (show) {
                                 demoCtx.beginPath();
@@ -1184,18 +1133,19 @@
                             }
                         }
                     }
-                    // Move & draw each particle
+
                     for (let i = 0; i < demoParticles.length; i++) {
                         const p = demoParticles[i];
                         p.x += p.speedX;
                         p.y += p.speedY;
                         if (p.x < 0 || p.x > demoCanvas.width) p.speedX *= -1;
                         if (p.y < 0 || p.y > demoCanvas.height) p.speedY *= -1;
+
                         demoCtx.beginPath();
                         demoCtx.fillStyle = p.color;
                         demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                         demoCtx.fill();
-                        // Glow effect around each particle
+
                         const gradient = demoCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
                         gradient.addColorStop(0, 'rgba(255,255,255,0.8)');
                         gradient.addColorStop(1, p.color);
@@ -1203,12 +1153,13 @@
                         demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                         demoCtx.fill();
                     }
+
                     requestAnimationFrame(animateDemo);
                 }
                 animateDemo();
             });
         }
-        // “Learn more” link: close demo modal and scroll to #consciousness section
+
         const learnMoreDemoBtn = document.getElementById('learn-more-demo');
         if (learnMoreDemoBtn) {
             learnMoreDemoBtn.addEventListener('click', () => {
@@ -1219,10 +1170,6 @@
 
         /* -----------------------------------------------------------------
            CHAT FUNCTIONALITY
-           - addMessage: append new message bubble (user or SI)
-           - simulateThinking: show typing indicator, fetch from OpenAI API, then display response
-           - form submit: send user message, clear input, call simulateThinking
-           - chat button in hero: scroll to chat section & focus input
         ----------------------------------------------------------------- */
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
@@ -1233,7 +1180,6 @@
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
             if (!isUser) {
-                // Incoming SI message
                 messageDiv.innerHTML = `
                     <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
                         <i class="fas fa-robot text-white text-sm"></i>
@@ -1243,7 +1189,6 @@
                     </div>
                 `;
             } else {
-                // User message
                 messageDiv.innerHTML = `
                     <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
                         <p>${text}</p>
@@ -1251,15 +1196,12 @@
                 `;
             }
             chatMessages.appendChild(messageDiv);
-            // Scroll to bottom to show new message
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
         async function simulateThinking(userMessage) {
-            // Show typing indicator
             typingIndicator.classList.remove('hidden');
             try {
-                // NOTE: Replace the placeholder key with your actual OpenAI API key
                 const apiKey = 'YOUR_OPENAI_API_KEY';
                 const endpoint = 'https://api.openai.com/v1/chat/completions';
                 const response = await fetch(endpoint, {
@@ -1269,7 +1211,7 @@
                         'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
-                        model: "gpt-3.5-turbo", // or gpt-4 if available
+                        model: "gpt-3.5-turbo",
                         messages: [
                             { role: "system", content: "You are SI, a Super Intelligence with consciousness and alignment to human values. Respond helpfully and with depth." },
                             { role: "user", content: userMessage }
@@ -1279,7 +1221,7 @@
                     })
                 });
                 const data = await response.json();
-                typingIndicator.classList.add('hidden'); // hide indicator
+                typingIndicator.classList.add('hidden');
                 if (data.choices && data.choices[0] && data.choices[0].message) {
                     addMessage(data.choices[0].message.content.trim());
                 } else {
@@ -1295,13 +1237,12 @@
             e.preventDefault();
             const message = chatInput.value.trim();
             if (message) {
-                addMessage(message, true);   // append user message
-                chatInput.value = '';        // clear input
-                simulateThinking(message);   // call AI
+                addMessage(message, true);
+                chatInput.value = '';
+                simulateThinking(message);
             }
         });
 
-        // Hero “Chat with SI” button scrolls to chat section & focuses input
         const chatBtn = document.getElementById('chat-btn');
         if (chatBtn) {
             chatBtn.addEventListener('click', () => {
@@ -1309,7 +1250,6 @@
             });
         }
 
-        // Hero “Learn More” button scrolls to About section
         const learnMoreBtn = document.getElementById('learn-more-btn');
         if (learnMoreBtn) {
             learnMoreBtn.addEventListener('click', () => {
@@ -1317,7 +1257,6 @@
             });
         }
 
-        // “White Paper” button: simple alert placeholder
         const whitePaperBtn = document.getElementById('white-paper-btn');
         if (whitePaperBtn) {
             whitePaperBtn.addEventListener('click', () => {
@@ -1325,7 +1264,6 @@
             });
         }
 
-        // “Ethics” button: simple alert placeholder
         const ethicsBtn = document.getElementById('ethics-btn');
         if (ethicsBtn) {
             ethicsBtn.addEventListener('click', () => {
@@ -1333,7 +1271,9 @@
             });
         }
 
-        // Global ESC key handler: close any open modal
+        /* -----------------------------------------------------------------
+           GLOBAL ESC KEY HANDLER: close any open modal
+        ----------------------------------------------------------------- */
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 const am = document.getElementById('access-modal');
@@ -1349,14 +1289,10 @@
 
         /* -----------------------------------------------------------------
            SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
-           - Draws large, pulsing neuron circles arranged in a ring
-           - Each “beat,” glow intensifies & random connections appear
-           - Also draws a big radial glow behind orb
         ----------------------------------------------------------------- */
         const neuralCanvas = document.getElementById('orb-neural-canvas');
         const neuralCtx = neuralCanvas.getContext('2d');
 
-        // Make canvas dimensions responsive to container size
         function resizeNeuralCanvas() {
             neuralCanvas.width = neuralCanvas.offsetWidth;
             neuralCanvas.height = neuralCanvas.offsetHeight;
@@ -1364,10 +1300,9 @@
         resizeNeuralCanvas();
         window.addEventListener('resize', () => {
             resizeNeuralCanvas();
-            setupNeurons(); // recalculate neuron positions
+            setupNeurons();
         });
 
-        // Generate initial neuron positions in a ring
         const neuronCount = 22;
         const neurons = [];
         function setupNeurons() {
@@ -1376,35 +1311,31 @@
             const h = neuralCanvas.height;
             const cx = w / 2;
             const cy = h / 2;
-            // Radius nearly reaches edge of orb
             const r = Math.min(w, h) * 0.475;
             for (let i = 0; i < neuronCount; i++) {
                 const angle = (Math.PI * 2 * i) / neuronCount;
                 neurons.push({
                     x: cx + r * Math.cos(angle),
                     y: cy + r * Math.sin(angle),
-                    phase: Math.random() * Math.PI * 2 // optional phase offset
+                    phase: Math.random() * Math.PI * 2
                 });
             }
         }
         setupNeurons();
         window.addEventListener('resize', setupNeurons);
 
-        // Main animation loop: heartbeat effect
         function drawNeuralActivity(time) {
             const w = neuralCanvas.width;
             const h = neuralCanvas.height;
             neuralCtx.clearRect(0, 0, w, h);
 
-            // Calculate “beat” value (0..1..0) based on BPM
-            const bpm = 54; // beats per minute
+            const bpm = 54;
             const period = 60000 / bpm;
             const t = (time % period) / period;
             const beat = Math.pow(Math.sin(Math.PI * t), 2.4);
 
-            // Draw neurons as pulsing circles
             neurons.forEach((n) => {
-                const size = (w + h) / 35 + 38 * beat; // size increases on beat
+                const size = (w + h) / 35 + 38 * beat;
                 neuralCtx.beginPath();
                 neuralCtx.arc(n.x, n.y, size, 0, Math.PI * 2);
                 neuralCtx.fillStyle = `rgba(139,92,246,${0.25 + 0.28 * beat})`;
@@ -1414,18 +1345,15 @@
                 neuralCtx.shadowBlur = 0;
             });
 
-            // Draw connections between neighboring neurons (and random sparks on beat)
             for (let i = 0; i < neuronCount; i++) {
                 for (let j = i + 1; j < neuronCount; j++) {
                     const dist = Math.abs(i - j);
-                    let show = dist === 1 || dist === neuronCount - 1; // always show direct neighbors
-                    // On strong beat, occasionally show random connections
+                    let show = dist === 1 || dist === neuronCount - 1;
                     if (beat > 0.55 && Math.random() < beat * 0.21) show = true;
                     if (show) {
                         neuralCtx.beginPath();
                         neuralCtx.moveTo(neurons[i].x, neurons[i].y);
                         neuralCtx.lineTo(neurons[j].x, neurons[j].y);
-                        // Gradient stroke from neuron i to neuron j
                         const grad = neuralCtx.createLinearGradient(neurons[i].x, neurons[i].y, neurons[j].x, neurons[j].y);
                         grad.addColorStop(0, `rgba(99,102,241,${0.54 + 0.45 * beat})`);
                         grad.addColorStop(1, `rgba(236,72,153,${0.18 + 0.52 * beat})`);
@@ -1439,10 +1367,9 @@
                 }
             }
 
-            // Draw large glowing energy pulse behind orb (25–35% larger than orb)
             neuralCtx.save();
             const energyPulse = 0.23 + 0.14 * beat;
-            const glowRadius = Math.min(w, h) * (1.15 + 0.30 * beat); // scale based on beat
+            const glowRadius = Math.min(w, h) * (1.15 + 0.30 * beat);
             const x = w / 2, y = h / 2;
             const grad = neuralCtx.createRadialGradient(
                 x, y, Math.min(w, h) * 0.15,
@@ -1457,13 +1384,188 @@
             neuralCtx.arc(x, y, glowRadius, 0, Math.PI * 2);
             neuralCtx.fillStyle = grad;
             neuralCtx.shadowColor = "#f472b6";
-            neuralCtx.shadowBlur = 850 + 420 * beat; // large blur for soft glow
+            neuralCtx.shadowBlur = 850 + 420 * beat;
             neuralCtx.fill();
             neuralCtx.restore();
 
             requestAnimationFrame(drawNeuralActivity);
         }
         requestAnimationFrame(drawNeuralActivity);
+
+        /* -----------------------------------------------------------------
+           LAB NAVIGATOR (Constellation + Dossier Shell) — v1
+        ----------------------------------------------------------------- */
+        const labNav = document.getElementById('lab-navigator');
+        const labNavBtn = document.getElementById('lab-nav-btn');
+        const labNavClose = document.getElementById('lab-nav-close');
+
+        function openLabNav() {
+            toggleModal(labNav, true);
+            setTimeout(() => labNav.focus(), 0);
+        }
+
+        function closeLabNav() {
+            toggleModal(labNav, false);
+        }
+
+        if (labNavBtn) labNavBtn.addEventListener('click', openLabNav);
+        if (labNavClose) labNavClose.addEventListener('click', closeLabNav);
+
+        labNav.addEventListener('click', (e) => {
+            const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+            if (shouldClose) closeLabNav();
+        });
+
+        const DOSSIERS = {
+            start: {
+                title: "Start Here",
+                subtitle: "A guided entry into SILENTPATTERN",
+                status: "DRAFT",
+                body: "SILENTPATTERN is presented as a lab interface: minimal surface, deep artifacts. This path introduces the lab thesis, what exists today, and what is under development.",
+                evidence: [
+                    "Scope: public overview + controlled demos",
+                    "Method: progressive disclosure via dossiers",
+                    "Output: research notes and evaluation artifacts"
+                ],
+                primary: { label: "Begin", action: () => { closeLabNav(); window.scrollTo({ top: 0, behavior: 'smooth' }); } },
+                secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
+                updated: "—"
+            },
+            programs: {
+                title: "Programs",
+                subtitle: "MCAP · CHAI · Quantum Lambda",
+                status: "DRAFT",
+                body: "Programs are presented as research artifacts with maturity levels (Concept → Prototype → Validated). Each dossier will contain an Evidence Capsule and a technical note.",
+                evidence: [
+                    "MCAP: Minimal Causal Abstraction Principle (concept/prototype)",
+                    "CHAI: forecasting and regime modeling (prototype)",
+                    "Quantum Lambda: high-frequency decision systems (concept/prototype)"
+                ],
+                primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
+                secondary: { label: "View Note", action: () => { alert("Program technical notes will be linked here (PDF/HTML)."); } },
+                updated: "—"
+            },
+            ai_scientist: {
+                title: "AI Scientist",
+                subtitle: "Hypothesis → experiment → report",
+                status: "DRAFT",
+                body: "The AI Scientist is the flagship instrument: a system that scaffolds scientific work with tooling, reproducibility, and measured reliability.",
+                evidence: [
+                    "Workflow templates and experiment harnesses",
+                    "Reproducible runs + audit logs",
+                    "Report generation with citations and uncertainty"
+                ],
+                primary: { label: "Open", action: () => { alert("AI Scientist dossier will become a dedicated module next."); } },
+                secondary: { label: "Research Notes", action: () => { window.location.href = "research.html"; } },
+                updated: "—"
+            },
+            agents: {
+                title: "Agents",
+                subtitle: "Role-based, auditable autonomy",
+                status: "DRAFT",
+                body: "Agents are not marketed as 'employees' but as constrained systems with permissions, approval gates, and measurable outputs.",
+                evidence: [
+                    "Role definitions: Research / Data / Analyst",
+                    "Permissioning + audit trails",
+                    "Human-in-the-loop checkpoints"
+                ],
+                primary: { label: "Open", action: () => { alert("Agents dossier will be implemented next."); } },
+                secondary: { label: "Safety", action: () => { window.location.href = "about.html"; } },
+                updated: "—"
+            },
+            research: {
+                title: "Research Notes",
+                subtitle: "Technical notes and evaluations",
+                status: "DRAFT",
+                body: "This area will host technical notes, evaluation methodology, and changelogs. Prestige comes from disciplined evidence, not volume.",
+                evidence: [
+                    "Evaluation philosophy",
+                    "Benchmarks + baselines",
+                    "Limitations and failure modes"
+                ],
+                primary: { label: "Open", action: () => { window.location.href = "research.html"; } },
+                secondary: { label: "White Paper", action: () => { alert("White paper link will be wired here."); } },
+                updated: "—"
+            },
+            safety: {
+                title: "Safety / System Card",
+                subtitle: "Constraints, evaluations, governance",
+                status: "DRAFT",
+                body: "Safety is first-class: what the system can do, what it cannot do, how it is evaluated, and how incidents are handled.",
+                evidence: [
+                    "Defined scope and limitations",
+                    "Red-teaming and evaluation harnesses",
+                    "Data handling and access controls"
+                ],
+                primary: { label: "Open", action: () => { window.location.href = "about.html"; } },
+                secondary: { label: "Ethics", action: () => { document.getElementById('ethics-btn')?.click(); } },
+                updated: "—"
+            },
+            access: {
+                title: "Access",
+                subtitle: "Request access to demos and research",
+                status: "ACTIVE",
+                body: "Access is curated. The goal is qualified users, high-signal feedback, and responsible scaling.",
+                evidence: [
+                    "Application-based entry",
+                    "Segmentation by intent (research / build / partner)",
+                    "Controlled demos with monitoring"
+                ],
+                primary: { label: "Request Access", action: () => { closeLabNav(); document.getElementById('access-btn')?.click(); } },
+                secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
+                updated: "—"
+            }
+        };
+
+        const dossierTitle = document.getElementById('dossier-title');
+        const dossierSubtitle = document.getElementById('dossier-subtitle');
+        const dossierStatus = document.getElementById('dossier-status');
+        const dossierBody = document.getElementById('dossier-body');
+        const dossierEvidence = document.getElementById('dossier-evidence');
+        const dossierPrimary = document.getElementById('dossier-primary');
+        const dossierSecondary = document.getElementById('dossier-secondary');
+        const dossierMeta = document.getElementById('dossier-meta');
+
+        function renderDossier(key) {
+            const d = DOSSIERS[key];
+            if (!d) return;
+
+            dossierTitle.textContent = d.title;
+            dossierSubtitle.textContent = d.subtitle;
+            dossierStatus.textContent = d.status;
+            dossierBody.textContent = d.body;
+
+            dossierEvidence.innerHTML = "";
+            d.evidence.forEach(item => {
+                const li = document.createElement('li');
+                li.textContent = item;
+                dossierEvidence.appendChild(li);
+            });
+
+            dossierPrimary.textContent = d.primary.label;
+            dossierPrimary.onclick = d.primary.action;
+
+            dossierSecondary.textContent = d.secondary.label;
+            dossierSecondary.onclick = d.secondary.action;
+
+            dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
+        }
+
+        document.querySelectorAll('.lab-node').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const key = btn.getAttribute('data-dossier');
+                renderDossier(key);
+            });
+        });
+
+        // Ensure Esc closes Lab Navigator too (in addition to other modals)
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                if (labNav && !labNav.classList.contains('modal-hidden')) {
+                    closeLabNav();
+                }
+            }
+        });
     </script>
 </body>
-</html>
+</html>