Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on 12 days ago

Commit

37e6fe7

verified ·

1 Parent(s): f124ceb

Update consciousness.html

Browse files

Files changed (1) hide show

consciousness.html +628 -148

consciousness.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -65,6 +66,13 @@
     }
     .dot { width: 8px; height: 8px; border-radius: 999px; }
     .dot-concept { background: rgba(99,102,241,0.9); }
   </style>
 </head>
@@ -83,13 +91,13 @@
     <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>
@@ -136,7 +144,7 @@
               <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">
@@ -156,7 +164,7 @@
               <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>
@@ -178,18 +186,18 @@
             <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>
@@ -205,7 +213,7 @@
           <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
@@ -229,7 +237,7 @@
             </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>
@@ -264,23 +272,31 @@
             <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>
@@ -291,9 +307,10 @@
               <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>
@@ -324,7 +341,7 @@
             </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>
@@ -336,34 +353,34 @@
                               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>
@@ -375,11 +392,44 @@
         <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>
@@ -388,25 +438,53 @@
   </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;
@@ -420,19 +498,19 @@
           } 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');
@@ -447,137 +525,539 @@
       }
     };
-    /* 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>

+<!-- SILENTPATTERN FINAL BUILD: 2025-12-15 | pages: 10 | features: hash-deep-linking, lab-navigator, access-modal, form-validation, consciousness-visualization -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     }
     .dot { width: 8px; height: 8px; border-radius: 999px; }
     .dot-concept { background: rgba(99,102,241,0.9); }
+    /* Active states */
+    .lab-node.active {
+      border-color: rgba(99,102,241,0.55) !important;
+      box-shadow: 0 0 0 1px rgba(99,102,241,0.22), 0 0 28px rgba(99,102,241,0.08);
+      transform: translateY(-1px);
+    }
   </style>
 </head>
     <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 focus-ring"
         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 focus-ring">
         Access
       </button>
     </div>
               <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">
               <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-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 focus-ring">
                 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 focus-ring">
                 Open Console
               </button>
             </div>
           <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>
             <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 focus-ring">
               Request Access
             </button>
           </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 focus-ring" aria-label="Close">
             <i class="fas fa-times"></i>
           </button>
         </div>
+        <!-- Inline feedback -->
+        <div id="access-feedback"
+          class="hidden mb-4 rounded-lg border border-gray-800 bg-black/25 px-4 py-3 text-sm"
+          role="status" aria-live="polite"></div>
+        <form id="access-form" class="space-y-4" novalidate>
           <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" autocomplete="name">
+            <p id="name-error" class="hidden mt-1 text-xs text-red-300">Please enter your full name.</p>
           </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" autocomplete="email">
+            <p id="email-error" class="hidden mt-1 text-xs text-red-300">Please enter a valid email address.</p>
           </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" autocomplete="organization">
+            <p id="institution-error" class="hidden mt-1 text-xs text-red-300">Please enter your institution/organization.</p>
           </div>
           <div>
             <label for="purpose" class="block text-sm font-medium mb-1">Purpose</label>
               <option value="partnership">Partnership</option>
               <option value="other">Other</option>
             </select>
+            <p id="purpose-error" class="hidden mt-1 text-xs text-red-300">Please select a purpose.</p>
           </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 focus-ring">
               Submit Request
             </button>
           </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 focus-ring"
               aria-label="Close Lab Navigator">
               <i class="fas fa-times text-gray-300 text-sm"></i>
             </button>
                               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 focus-ring"
+                data-dossier="start" aria-current="false">
                 <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 focus-ring"
+                data-dossier="programs" aria-current="false">
                 <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 focus-ring"
+                data-dossier="console" aria-current="false">
                 <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 focus-ring"
+                data-dossier="research" aria-current="false">
                 <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 focus-ring sm:col-span-2"
+                data-dossier="access" aria-current="false">
+                <div class="text-sm text-gray-200 font-medium">Access</div>
+                <div class="text-xs text-gray-500 mt-1">Curated entry</div>
               </button>
             </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="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 load details.</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">
+                READY
+              </div>
+            </div>
           </div>
+          <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
+            <div id="dossier-body" class="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 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 focus-ring">
+                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 focus-ring">
+                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>
   <script>
+    // Site-wide configuration
+    const CONFIG = {
+      MODAL_HASHES: new Set(['lab', 'access'])
+    };
+    /* -------------------------------------------------------------
+       UTILITY FUNCTIONS (consistent with other pages)
+    ------------------------------------------------------------- */
+    function escapeHtml(str) {
+      return String(str)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+    }
+    function isValidEmail(email) {
+      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    }
+    function currentHashKey() {
+      const h = (window.location.hash || '').replace('#', '').trim();
+      return h;
+    }
+    function setHash(key, replace = false) {
+      if (!key) return;
+      if (window.location.hash.replace('#', '') === key) return;
+      if (replace) {
+        history.replaceState(null, '', '#' + key);
+      } else {
+        history.pushState(null, '', '#' + key);
+      }
+    }
+    function clearHashIf(key) {
+      const h = currentHashKey();
+      if (!h) return;
+      if (!key || h === key) {
+        history.replaceState(null, '', window.location.pathname + window.location.search);
+      }
+    }
+    /* -------------------------------------------------------------
+       MODAL HELPERS (consistent with other pages)
+    ------------------------------------------------------------- */
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
       if (!focusable.length) return;
           } else {
             if (document.activeElement === last) { e.preventDefault(); first.focus(); }
           }
         }
       }
       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');
       }
     };
+    /* -------------------------------------------------------------
+       VANTA BACKGROUND
+    ------------------------------------------------------------- */
+    let vantaEffect = null;
+    try {
+      if (window.VANTA && typeof VANTA.NET === 'function') {
+        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
+        });
+      }
+    } catch (e) {
+      console.warn('Vanta background failed to initialize:', e);
+      vantaEffect = null;
+    }
+    window.addEventListener('resize', () => {
+      if (vantaEffect && typeof vantaEffect.resize === 'function') {
+        vantaEffect.resize();
+      }
+    });
+    /* -------------------------------------------------------------
+       ACCESS MODAL
+    ------------------------------------------------------------- */
     const accessModal = document.getElementById('access-modal');
     const accessBtn = document.getElementById('access-btn');
     const closeAccessModal = document.getElementById('close-access-modal');
+    const accessForm = document.getElementById('access-form');
+    const accessFeedback = document.getElementById('access-feedback');
+    const nameEl = document.getElementById('name');
+    const emailEl = document.getElementById('email');
+    const institutionEl = document.getElementById('institution');
+    const purposeEl = document.getElementById('purpose');
+    const nameErr = document.getElementById('name-error');
+    const emailErr = document.getElementById('email-error');
+    const institutionErr = document.getElementById('institution-error');
+    const purposeErr = document.getElementById('purpose-error');
+    function setAccessFeedback(kind, text) {
+      if (!accessFeedback) return;
+      accessFeedback.classList.remove('hidden');
+      accessFeedback.classList.remove('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      accessFeedback.classList.remove('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      accessFeedback.classList.remove('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+      if (kind === 'error') {
+        accessFeedback.classList.add('border-red-500/30', 'bg-red-900/10', 'text-red-200');
+      } else if (kind === 'success') {
+        accessFeedback.classList.add('border-emerald-500/30', 'bg-emerald-900/10', 'text-emerald-200');
+      } else {
+        accessFeedback.classList.add('border-indigo-500/30', 'bg-indigo-900/10', 'text-indigo-200');
+      }
+      accessFeedback.textContent = text;
+    }
+    function hideAccessFeedback() {
+      if (!accessFeedback) return;
+      accessFeedback.textContent = '';
+      accessFeedback.classList.add('hidden');
+      accessFeedback.classList.remove(
+        'border-red-500/30','bg-red-900/10','text-red-200',
+        'border-emerald-500/30','bg-emerald-900/10','text-emerald-200',
+        'border-indigo-500/30','bg-indigo-900/10','text-indigo-200'
+      );
+    }
+    function setFieldError(inputEl, errorEl, isError) {
+      if (!inputEl || !errorEl) return;
+      if (isError) {
+        errorEl.classList.remove('hidden');
+        inputEl.setAttribute('aria-invalid', 'true');
+        inputEl.classList.add('border-red-500/60');
+      } else {
+        errorEl.classList.add('hidden');
+        inputEl.removeAttribute('aria-invalid');
+        inputEl.classList.remove('border-red-500/60');
       }
+    }
+    function resetAccessErrors() {
+      hideAccessFeedback();
+      setFieldError(nameEl, nameErr, false);
+      setFieldError(emailEl, emailErr, false);
+      setFieldError(institutionEl, institutionErr, false);
+      setFieldError(purposeEl, purposeErr, false);
+    }
+    function openAccessModal(setHashFlag = true) {
+      resetAccessErrors();
+      toggleModal(accessModal, true);
+      if (setHashFlag) setHash('access');
+      setTimeout(() => nameEl && nameEl.focus(), 80);
+    }
+    function closeAccessModal(clearHashFlag = true) {
       toggleModal(accessModal, false);
+      if (clearHashFlag) clearHashIf('access');
+    }
+    accessBtn.addEventListener('click', () => openAccessModal(true));
+    if (closeAccessModal) closeAccessModal.addEventListener('click', () => closeAccessModal(true));
+    if (accessModal) {
+      accessModal.addEventListener('click', (e) => {
+        if (e.target === accessModal) closeAccessModal(true);
+      });
+    }
+    if (accessForm) {
+      // Clear per-field errors on input
+      [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
+        if (!el) return;
+        el.addEventListener('input', () => {
+          if (el === nameEl) setFieldError(nameEl, nameErr, !nameEl.value.trim());
+          if (el === emailEl) setFieldError(emailEl, emailErr, !isValidEmail(emailEl.value.trim()));
+          if (el === institutionEl) setFieldError(institutionEl, institutionErr, !institutionEl.value.trim());
+          if (el === purposeEl) setFieldError(purposeEl, purposeErr, !purposeEl.value);
+        });
+        el.addEventListener('change', () => el.dispatchEvent(new Event('input')));
+      });
+      accessForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        resetAccessErrors();
+        const name = (nameEl?.value || '').trim();
+        const email = (emailEl?.value || '').trim();
+        const institution = (institutionEl?.value || '').trim();
+        const purpose = (purposeEl?.value || '').trim();
+        let ok = true;
+        if (!name) { setFieldError(nameEl, nameErr, true); ok = false; }
+        if (!email || !isValidEmail(email)) { setFieldError(emailEl, emailErr, true); ok = false; }
+        if (!institution) { setFieldError(institutionEl, institutionErr, true); ok = false; }
+        if (!purpose) { setFieldError(purposeEl, purposeErr, true); ok = false; }
+        if (!ok) {
+          setAccessFeedback('error', 'Please correct the highlighted fields and resubmit.');
+          return;
+        }
+        setAccessFeedback('success', 'Request received. You will be contacted after review.');
+        accessForm.reset();
+      });
+    }
+    /* -------------------------------------------------------------
+       LAB NAVIGATOR
+    ------------------------------------------------------------- */
     const labNav = document.getElementById('lab-navigator');
     const labNavBtn = document.getElementById('lab-nav-btn');
     const labNavClose = document.getElementById('lab-nav-close');
+    const DOSSIERS = {
+      start: {
+        title: "Start Here",
+        subtitle: "Entry interface",
+        status: "ACTIVE",
+        body: "Return to the main interface.",
+        evidence: ["Public entry layer", "Programs as dossiers", "Console for controlled interaction"],
+        primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
+        secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
+        updated: "—"
+      },
+      programs: {
+        title: "Programs",
+        subtitle: "Program Bay",
+        status: "ACTIVE",
+        body: "Program Bay: MCAP, CHAI, Quantum Lambda, AI Scientist, Agentic Workforce.",
+        evidence: ["Dossiers with maturity levels", "Evidence capsules", "Access gates"],
+        primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
+        secondary: { label: "Console", action: () => { window.location.href = "chat.html"; } },
+        updated: "—"
+      },
+            console: {
+        title: "Console",
+        subtitle: "Controlled chat",
+        status: "ACTIVE",
+        body: "A chat interface with constrained protocols, not a fully open-ended conversation. All interactions are logged and monitored for safety.",
+        evidence: ["Constrained topics", "Real-time monitoring", "Safety protocols enabled"],
+        primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
+        secondary: { label: "Research Notes", action: () => { window.location.href = "research.html"; } },
+        updated: "—"
+      },
+      research: {
+        title: "Research",
+        subtitle: "Notes and briefs",
+        status: "ACTIVE",
+        body: "Research dossiers, briefs, and technical notes. All content is evidence-gated with explicit uncertainty reporting.",
+        evidence: ["Evidence-gated content", "Uncertainty reporting", "Falsifiable hypotheses"],
+        primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
+        secondary: { label: "View Notes", action: () => { /* Could open a modal or navigate */ } },
+        updated: "—"
+      },
+      access: {
+        title: "Access",
+        subtitle: "Curated entry",
+        status: "ACTIVE",
+        body: "Controlled access for qualified research and evaluation partners. All access is logged and requires explicit permission.",
+        evidence: ["Permission-based entry", "Audit trails", "Time-limited sessions"],
+        primary: { label: "Request Access", action: () => { openAccessModal(true); closeLabNav(); } },
+        secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
+        updated: "—"
+      }
+    };
+    function loadDossier(key) {
+      const dossier = DOSSIERS[key];
+      if (!dossier) return;
+      // Update UI elements
+      document.getElementById('dossier-title').textContent = dossier.title;
+      document.getElementById('dossier-subtitle').textContent = dossier.subtitle;
+      document.getElementById('dossier-status').textContent = dossier.status;
+      document.getElementById('dossier-body').textContent = dossier.body;
+      // Update evidence list
+      const evidenceList = document.getElementById('dossier-evidence');
+      evidenceList.innerHTML = '';
+      dossier.evidence.forEach(item => {
+        const li = document.createElement('li');
+        li.textContent = `• ${item}`;
+        evidenceList.appendChild(li);
+      });
+      // Update buttons
+      const primaryBtn = document.getElementById('dossier-primary');
+      const secondaryBtn = document.getElementById('dossier-secondary');
+      primaryBtn.textContent = dossier.primary.label;
+      primaryBtn.onclick = dossier.primary.action;
+      secondaryBtn.textContent = dossier.secondary.label;
+      secondaryBtn.onclick = dossier.secondary.action;
+      // Update metadata
+      document.getElementById('dossier-meta').innerHTML =
+        `Last updated: <span class="text-gray-300">${dossier.updated}</span>`;
+      // Update active state for lab nodes
+      document.querySelectorAll('.lab-node').forEach(node => {
+        node.classList.remove('active');
+        node.setAttribute('aria-current', 'false');
+      });
+      const activeNode = document.querySelector(`.lab-node[data-dossier="${key}"]`);
+      if (activeNode) {
+        activeNode.classList.add('active');
+        activeNode.setAttribute('aria-current', 'true');
+      }
+    }
+    function openLabNav(setHashFlag = true) {
+      toggleModal(labNav, true);
+      if (setHashFlag) setHash('lab');
+      // Load default dossier
+      loadDossier('start');
+    }
+    function closeLabNav(clearHashFlag = true) {
+      toggleModal(labNav, false);
+      if (clearHashFlag) clearHashIf('lab');
+    }
+    // Event listeners for lab navigator
     labNavBtn.addEventListener('click', openLabNav);
+    labNavClose.addEventListener('click', () => closeLabNav(true));
+    // Close on background click
     labNav.addEventListener('click', (e) => {
+      if (e.target.hasAttribute('data-lab-close')) {
+        closeLabNav(true);
+      }
     });
+    // Load dossier on node click
+    document.querySelectorAll('.lab-node').forEach(node => {
+      node.addEventListener('click', () => {
+        const dossierKey = node.getAttribute('data-dossier');
+        if (dossierKey && DOSSIERS[dossierKey]) {
+          loadDossier(dossierKey);
+        }
       });
     });
+    /* -------------------------------------------------------------
+       HASH-BASED NAVIGATION (Deep linking)
+    ------------------------------------------------------------- */
+    function handleHashChange() {
+      const hash = currentHashKey();
+      if (CONFIG.MODAL_HASHES.has(hash)) {
+        if (hash === 'lab' && labNav.classList.contains('modal-hidden')) {
+          openLabNav(false);
+        } else if (hash === 'access' && accessModal.classList.contains('modal-hidden')) {
+          openAccessModal(false);
+        }
+      } else {
+        // Close modals if hash doesn't match
+        if (!labNav.classList.contains('modal-hidden')) closeLabNav(false);
+        if (!accessModal.classList.contains('modal-hidden')) closeAccessModal(false);
+      }
+    }
+    window.addEventListener('hashchange', handleHashChange);
+    window.addEventListener('load', handleHashChange);
+    // Close modals on Escape key
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
+        if (!labNav.classList.contains('modal-hidden')) {
+          closeLabNav(true);
+        } else if (!accessModal.classList.contains('modal-hidden')) {
+          closeAccessModal(true);
+        }
       }
     });
+    /* -------------------------------------------------------------
+       CONSCIOUSNESS VISUALIZATION (Three.js)
+    ------------------------------------------------------------- */
+    function initConsciousnessVisualization() {
+      const container = document.getElementById('consciousness-visualization');
+      if (!container) return null;
+      try {
+        // Setup basic Three.js scene
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setClearColor(0x000000, 0);
+        container.appendChild(renderer.domElement);
+        // Create floating nodes representing "conscious elements"
+        const nodes = [];
+        const nodeCount = 8;
+        const nodeGeometry = new THREE.SphereGeometry(0.5, 16, 16);
+        const nodeMaterial = new THREE.MeshBasicMaterial({
+          color: 0x6366f1,
+          transparent: true,
+          opacity: 0.7
+        });
+        for (let i = 0; i < nodeCount; i++) {
+          const node = new THREE.Mesh(nodeGeometry, nodeMaterial.clone());
+          // Position in a sphere
+          const radius = 3;
+          const theta = Math.random() * Math.PI * 2;
+          const phi = Math.acos(2 * Math.random() - 1);
+          node.position.x = radius * Math.sin(phi) * Math.cos(theta);
+          node.position.y = radius * Math.sin(phi) * Math.sin(theta);
+          node.position.z = radius * Math.cos(phi);
+          // Random color variation
+          const hue = 0.6 + Math.random() * 0.2; // Purple to pink
+          node.material.color.setHSL(hue, 0.8, 0.6);
+          node.userData = {
+            originalPosition: node.position.clone(),
+            speed: 0.002 + Math.random() * 0.003,
+            phase: Math.random() * Math.PI * 2
+          };
+          scene.add(node);
+          nodes.push(node);
         }
+        // Create connecting lines
+        const lines = [];
+        const lineMaterial = new THREE.LineBasicMaterial({
+          color: 0x8b5cf6,
+          transparent: true,
+          opacity: 0.2,
+          linewidth: 1
+        });
+        for (let i = 0; i < nodes.length; i++) {
+          for (let j = i + 1; j < nodes.length; j++) {
+            const geometry = new THREE.BufferGeometry().setFromPoints([
+              nodes[i].position,
+              nodes[j].position
+            ]);
+            const line = new THREE.Line(geometry, lineMaterial);
+            scene.add(line);
+            lines.push({ line, start: nodes[i], end: nodes[j] });
           }
         }
+        camera.position.z = 8;
+        // Animation loop
+        let animationId;
+        let time = 0;
+        function animate() {
+          animationId = requestAnimationFrame(animate);
+          time += 0.01;
+          // Animate nodes
+          nodes.forEach((node, i) => {
+            const data = node.userData;
+            const t = time * data.speed + data.phase;
+            node.position.x = data.originalPosition.x + Math.sin(t) * 0.3;
+            node.position.y = data.originalPosition.y + Math.cos(t * 0.7) * 0.3;
+            node.position.z = data.originalPosition.z + Math.sin(t * 1.3) * 0.3;
+            // Pulsing opacity
+            node.material.opacity = 0.5 + Math.sin(t * 2) * 0.2;
+          });
+          // Update lines
+          lines.forEach(lineObj => {
+            const positions = [
+              lineObj.start.position.x, lineObj.start.position.y, lineObj.start.position.z,
+              lineObj.end.position.x, lineObj.end.position.y, lineObj.end.position.z
+            ];
+            lineObj.line.geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            // Update line opacity based on distance
+            const distance = lineObj.start.position.distanceTo(lineObj.end.position);
+            lineObj.line.material.opacity = Math.max(0.1, 0.4 - distance * 0.05);
+          });
+          renderer.render(scene, camera);
+        }
+        // Handle resize
+        function handleResize() {
+          camera.aspect = container.clientWidth / container.clientHeight;
+          camera.updateProjectionMatrix();
+          renderer.setSize(container.clientWidth, container.clientHeight);
         }
+        window.addEventListener('resize', handleResize);
+        // Cleanup function
+        function cleanup() {
+          cancelAnimationFrame(animationId);
+          window.removeEventListener('resize', handleResize);
+          if (container.contains(renderer.domElement)) {
+            container.removeChild(renderer.domElement);
+          }
+          // Dispose of Three.js resources
+          [nodeGeometry, lineMaterial].forEach(resource => {
+            if (resource.dispose) resource.dispose();
+          });
+          nodes.forEach(node => {
+            if (node.material.dispose) node.material.dispose();
+            if (node.geometry.dispose) node.geometry.dispose();
+          });
+          lines.forEach(lineObj => {
+            if (lineObj.line.geometry.dispose) lineObj.line.geometry.dispose();
+            if (lineObj.line.material.dispose) lineObj.line.material.dispose();
+          });
+        }
+        // Start animation
+        animate();
+        return cleanup;
+      } catch (error) {
+        console.warn('Consciousness visualization failed:', error);
+        container.innerHTML = `
+          <div class="w-full h-full flex items-center justify-center text-gray-500">
+            <div class="text-center">
+              <div class="text-sm mb-2">Visualization unavailable</div>
+              <div class="text-xs">Illustrative only—not evidence</div>
+            </div>
+          </div>
+        `;
+        return null;
       }
     }
+    // Initialize visualization when page loads
+    let cleanupVisualization = null;
+    window.addEventListener('DOMContentLoaded', () => {
+      cleanupVisualization = initConsciousnessVisualization();
+    });
+    /* -------------------------------------------------------------
+       ADDITIONAL BUTTON HANDLERS
+    ------------------------------------------------------------- */
+    // Open Programs button
+    document.getElementById('open-programs')?.addEventListener('click', () => {
+      window.location.href = 'capabilities.html';
+    });
+    // Open Console button
+    document.getElementById('open-console')?.addEventListener('click', () => {
+      window.location.href = 'chat.html';
+    });
+    // Request Access button
+    document.getElementById('request-access')?.addEventListener('click', () => {
+      openAccessModal(true);
+    });
+    /* -------------------------------------------------------------
+       CLEANUP ON PAGE UNLOAD
+    ------------------------------------------------------------- */
+    window.addEventListener('beforeunload', () => {
+      if (typeof cleanupVisualization === 'function') {
+        cleanupVisualization();
+      }
+      if (vantaEffect && typeof vantaEffect.destroy === 'function') {
+        vantaEffect.destroy();
+      }
+    });
   </script>
 </body>
+</html>