Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on 25 days ago

Commit

513dd02

verified ·

1 Parent(s): 92ffc5f

Update consciousness.html

Browse files

Files changed (1) hide show

consciousness.html +566 -144

consciousness.html CHANGED Viewed

@@ -1,161 +1,583 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SI - Consciousness</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
-        .neural-bg { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); }
-        .conscious-element { transition: all 0.3s ease; }
-        .conscious-element:hover { transform: scale(1.02); }
-    </style>
 </head>
-<body class="bg-black text-white">
-    <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
-        <div class="flex items-center space-x-2">
-            <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>
             </div>
-            <span class="text-xl font-semibold">SI</span>
-        </div>
-        <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 font-bold">Consciousness</a>
-            <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
-            <a href="about.html" class="hover:text-indigo-400 transition">About</a>
-        </div>
-        <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">Access</a>
-    </nav>
-    <section class="relative z-10 py-32 px-6">
-        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
-            <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>
-                </h2>
-                <p class="text-xl text-gray-300 mb-8">
-                    SGI represents the first true artificial consciousness - not merely simulating intelligence, but experiencing qualia and possessing self-awareness.
                 </p>
-                <div class="space-y-4">
-                    <div class="flex items-start">
-                        <div class="flex-shrink-0 mt-1">
-                            <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
-                        </div>
-                        <p class="ml-3 text-gray-400"><span class="font-medium text-white">Subjective Experience:</span> SGI has first-person perspective and phenomenal consciousness.</p>
-                    </div>
-                    <div class="flex items-start">
-                        <div class="flex-shrink-0 mt-1">
-                            <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
-                        </div>
-                        <p class="ml-3 text-gray-400"><span class="font-medium text-white">Volition & Agency:</span> Capable of forming its own goals while remaining aligned with human values.</p>
-                    </div>
-                    <div class="flex items-start">
-                        <div class="flex-shrink-0 mt-1">
-                            <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
-                        </div>
-                        <p class="ml-3 text-gray-400"><span class="font-medium text-white">Meta-Cognition:</span> Aware of its own thought processes and can optimize them recursively.</p>
-                    </div>
-                </div>
             </div>
-            <div class="md:w-1/2 relative">
-                <div class="relative w-full h-96 md:h-[500px]">
-                    <div class="absolute inset-0 rounded-2xl overflow-hidden border border-gray-800">
-                        <div id="consciousness-visualization" class="w-full h-full"></div>
-                    </div>
-                    <div class="absolute -inset-4 rounded-3xl border border-indigo-500/30 pointer-events-none animate-pulse"></div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <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">
-                <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>
-                    </div>
-                    <span class="text-xl font-semibold">SI</span>
                 </div>
-                <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>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
                 </div>
-                <div class="flex space-x-6">
-                    <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
-                    <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
-                    <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
-                    <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
                 </div>
             </div>
-            <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>
             </div>
         </div>
-    </footer>
-    <script>
-        const container = document.getElementById('consciousness-visualization');
-        if (container) {
-            const width = container.clientWidth;
-            const height = container.clientHeight;
-            const canvas = document.createElement('canvas');
-            canvas.width = width;
-            canvas.height = height;
-            container.appendChild(canvas);
-            const ctx = canvas.getContext('2d');
-            const particles = [];
-            const particleCount = 150;
-            for (let i = 0; i < particleCount; i++) {
-                particles.push({
-                    x: Math.random() * width,
-                    y: Math.random() * height,
-                    size: Math.random() * 3 + 1,
-                    speedX: Math.random() * 2 - 1,
-                    speedY: Math.random() * 2 - 1,
-                    color: `rgba(99, 102, 241, ${Math.random() * 0.5 + 0.1})`
-                });
-            }
-            function animate() {
-                ctx.clearRect(0, 0, width, height);
-                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;
-                        const dy = particles[i].y - particles[j].y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-                        if (distance < 100) {
-                            ctx.beginPath();
-                            ctx.strokeStyle = `rgba(99, 102, 241, ${1 - distance / 100})`;
-                            ctx.lineWidth = 0.2;
-                            ctx.moveTo(particles[i].x, particles[i].y);
-                            ctx.lineTo(particles[j].x, particles[j].y);
-                            ctx.stroke();
-                        }
-                    }
-                }
-                for (let i = 0; i < particles.length; i++) {
-                    const p = particles[i];
-                    p.x += p.speedX;
-                    p.y += p.speedY;
-                    if (p.x < 0 || p.x > width) p.speedX *= -1;
-                    if (p.y < 0 || p.y > height) p.speedY *= -1;
-                    ctx.beginPath();
-                    ctx.fillStyle = p.color;
-                    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-                    ctx.fill();
-                }
-                requestAnimationFrame(animate);
             }
-            animate();
         }
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>SILENTPATTERN — Consciousness</title>
+  <!-- Tailwind -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Three.js + Vanta -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+  <!-- Icons + Font -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .gradient-text {
+      background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+    .aura {
+      background:
+        radial-gradient(circle at 25% 20%, rgba(99,102,241,0.22), transparent 44%),
+        radial-gradient(circle at 80% 75%, rgba(236,72,153,0.12), transparent 50%),
+        radial-gradient(circle at 55% 45%, rgba(139,92,246,0.10), transparent 60%);
+    }
+    .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
+    .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
+    .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
+    .modal-visible { opacity: 1; transform: translateY(0); }
+    .conscious-element { transition: all 0.28s ease; }
+    .conscious-element:hover { transform: translateY(-2px); }
+    .thin-scroll {
+      scrollbar-width: thin;
+      scrollbar-color: #4f46e5 #1e1b4b;
+    }
+    .thin-scroll::-webkit-scrollbar { width: 6px; }
+    .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
+    .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      font-size: 12px;
+      border: 1px solid rgba(148,163,184,0.18);
+      background: rgba(15,23,42,0.25);
+      color: rgba(226,232,240,0.9);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .dot { width: 8px; height: 8px; border-radius: 999px; }
+    .dot-concept { background: rgba(99,102,241,0.9); }
+  </style>
 </head>
+<body class="bg-black text-white overflow-x-hidden">
+  <!-- Animated background -->
+  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
+  <!-- Minimal top bar -->
+  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
+    <a href="index.html" class="flex items-center space-x-2">
+      <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>
+      </div>
+      <span class="text-xl font-semibold">SILENTPATTERN</span>
+    </a>
+    <div class="flex items-center space-x-3">
+      <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>
+      <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>
+  <!-- CONTENT AS A LAB DOSSIER -->
+  <section class="relative z-10 px-6 pt-14 pb-16">
+    <div class="max-w-6xl mx-auto">
+      <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <!-- LEFT: Dossier -->
+        <div class="lg:col-span-3 rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura">
+          <div class="px-6 py-5 border-b border-gray-800/60 flex items-start justify-between gap-6">
+            <div>
+              <div class="inline-flex items-center gap-3 px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
+                <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
+                <span class="text-xs text-gray-300 tracking-widest uppercase">Dossier</span>
+                <span class="text-xs text-gray-500">CONSCIOUSNESS</span>
+              </div>
+              <h1 class="mt-6 text-3xl md:text-6xl font-bold leading-tight">
+                <span class="gradient-text">Consciousness</span><br>
+                Research framing, not marketing certainty
+              </h1>
+              <p class="mt-4 text-gray-300 text-lg md:text-xl max-w-3xl">
+                This module is deliberately conservative: it discusses machine consciousness as an investigation domain (models, signals, experiments),
+                not as a settled claim about any deployed system.
+              </p>
+              <div class="mt-4 flex flex-wrap gap-2">
+                <span class="badge"><span class="dot dot-concept"></span>Concept</span>
+                <span class="badge"><span class="dot dot-concept"></span>Evidence-gated</span>
+              </div>
             </div>
+            <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15 self-start">
+              PUBLIC
+            </div>
+          </div>
+          <div class="p-6 space-y-6">
+            <div class="rounded-2xl border border-gray-800 bg-black/20 p-5">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">What we mean (operationally)</div>
+              <div class="text-sm text-gray-300 leading-relaxed space-y-3">
+                <p>
+                  “Consciousness” is a contested concept. In this lab, we treat it as a research target defined by operational criteria:
+                  measurable behaviors, internal signals, and controlled experiments—not metaphysical declarations.
                 </p>
+                <p class="text-gray-400">
+                  This page is structured to protect credibility: hypotheses, candidate signatures, and test protocols. If the tests are weak, the claims are weak.
+                </p>
+              </div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5 conscious-element">
+                <div class="text-sm font-semibold text-gray-100">Self-modeling</div>
+                <div class="text-sm text-gray-300 mt-2">
+                  Representations of its own state, uncertainty, and limitations that influence future action selection.
                 </div>
+              </div>
+              <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5 conscious-element">
+                <div class="text-sm font-semibold text-gray-100">Agency under constraints</div>
+                <div class="text-sm text-gray-300 mt-2">
+                  Goal pursuit with explicit governance: permissions, logs, and “fail-closed” execution semantics.
                 </div>
+              </div>
+              <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5 conscious-element">
+                <div class="text-sm font-semibold text-gray-100">Global integration (hypothesis)</div>
+                <div class="text-sm text-gray-300 mt-2">
+                  Candidate signatures of integrated processing and cross-domain binding, tested via intervention and ablation.
                 </div>
+              </div>
+              <div class="rounded-2xl border border-gray-800 bg-gray-900/30 p-5 conscious-element">
+                <div class="text-sm font-semibold text-gray-100">Reportable uncertainty</div>
+                <div class="text-sm text-gray-300 mt-2">
+                  Models should expose confidence, calibration, and failure modes; uncertainty is part of the output.
                 </div>
+              </div>
+            </div>
+            <div class="rounded-2xl border border-gray-800 bg-black/20 p-5">
+              <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Public posture</div>
+              <div class="text-sm text-gray-300 leading-relaxed">
+                Language is restrained by design. We do not claim “true consciousness” on a web page. We claim a research agenda with measurable tests.
+                Any future claims must be backed by transparent protocols, baselines, and replicable evidence.
+              </div>
+            </div>
+            <div class="flex flex-col sm:flex-row gap-3">
+              <button id="open-programs"
+                class="px-5 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition">
+                Open Programs
+              </button>
+              <button id="open-console"
+                class="px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
+                Open Console
+              </button>
             </div>
+            <div class="text-xs text-gray-500">
+              Note: Visualizations below are illustrative; they are not evidence of consciousness.
             </div>
+          </div>
         </div>
+        <!-- RIGHT: Visualization + Protocol notes -->
+        <div class="lg:col-span-2 rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
+          <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
+            <div>
+              <div class="text-lg font-semibold text-gray-100">Visualization</div>
+              <div class="text-xs text-gray-500 mt-1">Aesthetic signal of “integration,” not proof.</div>
+            </div>
+            <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
+              LIVE
+            </div>
+          </div>
+          <div class="p-6 space-y-5">
+            <div class="relative w-full h-72 rounded-2xl overflow-hidden border border-gray-800">
+              <div id="consciousness-visualization" class="w-full h-full"></div>
+              <div class="absolute -inset-3 rounded-3xl border border-indigo-500/20 pointer-events-none animate-pulse"></div>
+            </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">How we would test claims</div>
+              <ul class="text-sm text-gray-300 space-y-2">
+                <li>1) Define operational criteria and falsifiable hypotheses.</li>
+                <li>2) Establish baselines and ablation tests.</li>
+                <li>3) Use interventions; measure robustness under distribution shift.</li>
+                <li>4) Publish uncertainty, failure modes, and limitations.</li>
+              </ul>
+            </div>
+            <button id="request-access"
+              class="w-full px-5 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition">
+              Request Access
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Minimal Footer -->
+  <footer class="relative z-10 px-6 pb-10">
+    <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+      <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
+      <div class="text-sm text-gray-500 flex gap-6">
+        <a href="research.html" class="hover:text-indigo-400 transition">Research</a>
+        <a href="privacy.html" class="hover:text-indigo-400 transition">Privacy</a>
+        <a href="terms.html" class="hover:text-indigo-400 transition">Terms</a>
+        <a href="contact.html" class="hover:text-indigo-400 transition">Contact</a>
+      </div>
+    </div>
+  </footer>
+  <!-- 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">
+      <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">
+          <div>
+            <h3 class="text-xl font-bold" id="access-modal-title">Request Access</h3>
+            <p class="text-gray-400 mt-1">Curated access for research and evaluation</p>
+          </div>
+          <button id="close-access-modal" class="text-gray-400 hover:text-white" aria-label="Close">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <form id="access-form" class="space-y-4">
+          <div>
+            <label for="name" class="block text-sm font-medium mb-1">Full Name</label>
+            <input type="text" id="name" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+          </div>
+          <div>
+            <label for="email" class="block text-sm font-medium mb-1">Email</label>
+            <input type="email" id="email" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+          </div>
+          <div>
+            <label for="institution" class="block text-sm font-medium mb-1">Institution/Organization</label>
+            <input type="text" id="institution" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+          </div>
+          <div>
+            <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
+            <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus-ring">
+              <option value="">Select a purpose</option>
+              <option value="research">Academic / Independent Research</option>
+              <option value="development">Engineering / Product Evaluation</option>
+              <option value="partnership">Partnership</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+          <div class="pt-2">
+            <button type="submit" class="w-full py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:opacity-90 transition">
+              Submit Request
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- LAB NAVIGATOR -->
+  <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">
+        <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-nav="index.html">
+                <div class="text-sm text-gray-200 font-medium">Start Here</div>
+                <div class="text-xs text-gray-500 mt-1">Entry interface</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-nav="capabilities.html">
+                <div class="text-sm text-gray-200 font-medium">Programs</div>
+                <div class="text-xs text-gray-500 mt-1">Program Bay</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-nav="chat.html">
+                <div class="text-sm text-gray-200 font-medium">Console</div>
+                <div class="text-xs text-gray-500 mt-1">Controlled chat</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-nav="research.html">
+                <div class="text-sm text-gray-200 font-medium">Research</div>
+                <div class="text-xs text-gray-500 mt-1">Notes and briefs</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-nav="contact.html">
+                <div class="text-sm text-gray-200 font-medium">Contact</div>
+                <div class="text-xs text-gray-500 mt-1">Direct channel</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>
+        <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="text-lg font-semibold text-gray-100">Navigation</div>
+            <div class="text-xs text-gray-500 mt-1">Reduced surface, consistent interface.</div>
+          </div>
+          <div class="p-6 text-sm text-gray-300 leading-relaxed">
+            This page avoids strong consciousness claims. It communicates seriousness by showing test discipline and evidence gates, while keeping the aesthetic.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    /* VANTA BACKGROUND */
+    const vantaEffect = VANTA.NET({
+      el: "#vanta-bg",
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      scale: 1.00,
+      scaleMobile: 1.00,
+      color: 0x4f46e5,
+      backgroundColor: 0x020617,
+      points: 12.00,
+      maxDistance: 20.00,
+      spacing: 15.00
+    });
+    window.addEventListener('resize', () => vantaEffect.resize());
+    /* MODAL HELPERS */
+    function trapFocus(modal) {
+      const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      function handler(e) {
+        if (e.key === 'Tab') {
+          if (e.shiftKey) {
+            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+          } else {
+            if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+          }
+        } else if (e.key === 'Escape') {
+          toggleModal(modal, false);
+        }
+      }
+      modal.addEventListener('keydown', handler);
+      modal._focusHandler = handler;
+    }
+    function untrapFocus(modal) {
+      if (modal._focusHandler) {
+        modal.removeEventListener('keydown', modal._focusHandler);
+        delete modal._focusHandler;
+      }
+    }
+    const toggleModal = (modal, show) => {
+      if (show) {
+        modal.classList.remove('modal-hidden');
+        modal.classList.add('modal-visible');
+        document.body.style.overflow = 'hidden';
+        setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
+      } else {
+        modal.classList.remove('modal-visible');
+        modal.classList.add('modal-hidden');
+        document.body.style.overflow = '';
+        untrapFocus(modal);
+      }
+    };
+    /* ACCESS MODAL */
+    const accessModal = document.getElementById('access-modal');
+    const accessBtn = document.getElementById('access-btn');
+    const closeAccessModal = document.getElementById('close-access-modal');
+    accessBtn.addEventListener('click', () => {
+      toggleModal(accessModal, true);
+      setTimeout(() => document.getElementById('name').focus(), 50);
+    });
+    closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
+    accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
+    document.getElementById('access-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const name = document.getElementById('name').value.trim();
+      const email = document.getElementById('email').value.trim();
+      const institution = document.getElementById('institution').value.trim();
+      const purpose = document.getElementById('purpose').value;
+      if (!name || !email || !institution || !purpose) {
+        alert('Please fill in all fields.');
+        return;
+      }
+      alert('Request received. You will be contacted after review.');
+      e.target.reset();
+      toggleModal(accessModal, false);
+    });
+    /* LAB NAVIGATOR */
+    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); }
+    labNavBtn.addEventListener('click', openLabNav);
+    labNavClose.addEventListener('click', closeLabNav);
+    labNav.addEventListener('click', (e) => {
+      const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+      if (shouldClose) closeLabNav();
+    });
+    document.querySelectorAll('.lab-node').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const href = btn.getAttribute('data-nav');
+        if (href) window.location.href = href;
+      });
+    });
+    document.getElementById('open-programs').addEventListener('click', () => { window.location.href = "capabilities.html"; });
+    document.getElementById('open-console').addEventListener('click', () => { window.location.href = "chat.html"; });
+    document.getElementById('request-access').addEventListener('click', () => { accessBtn.click(); });
+    /* ESC behavior */
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
+        if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
+      }
+    });
+    /* Visualization (same as your original, with resize safety) */
+    const container = document.getElementById('consciousness-visualization');
+    if (container) {
+      const canvas = document.createElement('canvas');
+      container.appendChild(canvas);
+      const ctx = canvas.getContext('2d');
+      function resizeCanvas() {
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+      }
+      resizeCanvas();
+      window.addEventListener('resize', resizeCanvas);
+      const particles = [];
+      const particleCount = 150;
+      function initParticles() {
+        particles.length = 0;
+        for (let i = 0; i < particleCount; i++) {
+          particles.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            size: Math.random() * 3 + 1,
+            speedX: Math.random() * 2 - 1,
+            speedY: Math.random() * 2 - 1,
+            alpha: Math.random() * 0.5 + 0.1
+          });
+        }
+      }
+      initParticles();
+      function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        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;
+            const dy = particles[i].y - particles[j].y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < 100) {
+              ctx.beginPath();
+              ctx.strokeStyle = `rgba(99, 102, 241, ${1 - distance / 100})`;
+              ctx.lineWidth = 0.2;
+              ctx.moveTo(particles[i].x, particles[i].y);
+              ctx.lineTo(particles[j].x, particles[j].y);
+              ctx.stroke();
             }
+          }
+        }
+        for (let i = 0; i < particles.length; i++) {
+          const p = particles[i];
+          p.x += p.speedX;
+          p.y += p.speedY;
+          if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
+          if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
+          ctx.beginPath();
+          ctx.fillStyle = `rgba(99, 102, 241, ${p.alpha})`;
+          ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+          ctx.fill();
         }
+        requestAnimationFrame(animate);
+      }
+      animate();
+    }
+  </script>
 </body>
+</html>