Update index.html

index.html

@@ -425,6 +425,10 @@
                             <span id="typing-indicator" class="typing-indicator hidden">SI is typing</span>
                         </div>
                     </div>
+
+                    <div class="mt-3 text-xs text-gray-600">
+                        Integration note: do not call OpenAI directly from the browser. Use a server endpoint (example: <span class="text-gray-400">/api/chat</span>) to keep keys private.
+                    </div>
                 </div>
             </div>
         </div>
@@ -606,28 +610,42 @@
                     </button>
                 </div>
 
-                <form id="access-form" class="space-y-4">
+                <!-- Inline form feedback (added; minimal footprint) -->
+                <div id="access-form-feedback" class="hidden mb-4 text-sm rounded-lg border border-gray-800 bg-black/20 p-3" 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:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
+                        <input type="text" id="name"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                               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:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
+                        <input type="email" id="email"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                               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:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
+                        <input type="text" id="institution"
+                               class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent"
+                               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 of Access</label>
-                        <select id="purpose" class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
+                        <select id="purpose"
+                                class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:border-transparent">
                             <option value="">Select a purpose</option>
                             <option value="research">Academic Research</option>
                             <option value="development">AI Development</option>
                             <option value="policy">Policy Research</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">
@@ -635,6 +653,10 @@
                         </button>
                     </div>
                 </form>
+
+                <div class="mt-3 text-xs text-gray-600">
+                    Note: This is a static demo. In production, submit to a server endpoint (example: <span class="text-gray-400">/api/access</span>).
+                </div>
             </div>
         </div>
     </div>
@@ -869,6 +891,83 @@
             vantaEffect.resize();
         });
 
+        /* -----------------------------------------------------------------
+           HASH DEEP-LINKING (modals only)
+           Supported: #lab, #access, #consciousness-demo
+        ----------------------------------------------------------------- */
+        const MODAL_HASHES = new Set(['lab', 'access', 'consciousness-demo']);
+
+        function currentHashKey() {
+            const h = (window.location.hash || '').replace('#', '').trim();
+            return h;
+        }
+
+        function setHash(key) {
+            if (!key) return;
+            if (window.location.hash.replace('#', '') === key) return;
+            window.location.hash = key;
+        }
+
+        function clearHashIf(key) {
+            const h = currentHashKey();
+            if (!h) return;
+            if (!key || h === key) {
+                history.replaceState(null, '', window.location.pathname + window.location.search);
+            }
+        }
+
+        /* -----------------------------------------------------------------
+           MODAL ACCESSIBILITY HELPER FUNCTIONS
+        ----------------------------------------------------------------- */
+        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();
+                        }
+                    }
+                }
+            }
+            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);
+            }
+        };
+
         /* -----------------------------------------------------------------
            ORB TILT INTERACTION
         ----------------------------------------------------------------- */
@@ -962,129 +1061,178 @@
         });
 
         /* -----------------------------------------------------------------
-           MODAL ACCESSIBILITY HELPER FUNCTIONS
+           ACCESS MODAL LOGIC (hash + inline feedback)
         ----------------------------------------------------------------- */
-        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];
+        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');
 
-            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);
-                }
+        const accessForm = document.getElementById('access-form');
+        const accessFeedback = document.getElementById('access-form-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 showAccessFeedback(message, tone) {
+            if (!accessFeedback) return;
+            accessFeedback.classList.remove('hidden');
+            accessFeedback.textContent = message;
+
+            // Tone is informational; minimal styling change (keeps current design language)
+            accessFeedback.classList.remove('border-red-500/40', 'border-green-500/40');
+            accessFeedback.classList.remove('text-red-200', 'text-green-200');
+            accessFeedback.classList.add('text-gray-200');
+
+            if (tone === 'error') {
+                accessFeedback.classList.add('border-red-500/40', 'text-red-200');
+            } else if (tone === 'success') {
+                accessFeedback.classList.add('border-green-500/40', 'text-green-200');
             }
-            modal.addEventListener('keydown', handler);
-            modal._focusHandler = handler;
         }
 
-        function untrapFocus(modal) {
-            if (modal._focusHandler) {
-                modal.removeEventListener('keydown', modal._focusHandler);
-                delete modal._focusHandler;
-            }
+        function hideAccessFeedback() {
+            if (!accessFeedback) return;
+            accessFeedback.classList.add('hidden');
+            accessFeedback.textContent = '';
+            accessFeedback.classList.remove('border-red-500/40', 'border-green-500/40', 'text-red-200', 'text-green-200');
         }
 
-        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);
+        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 {
-                modal.classList.remove('modal-visible');
-                modal.classList.add('modal-hidden');
-                document.body.style.overflow = '';
-                untrapFocus(modal);
+                errorEl.classList.add('hidden');
+                inputEl.removeAttribute('aria-invalid');
+                inputEl.classList.remove('border-red-500/60');
             }
-        };
+        }
 
-        /* -----------------------------------------------------------------
-           ACCESS MODAL LOGIC
-        ----------------------------------------------------------------- */
-        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');
+        function isValidEmail(email) {
+            // Conservative sanity check; server should do final validation.
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+        }
+
+        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, requestAccessBtn].forEach(btn => {
             if (btn) {
-                btn.addEventListener('click', () => {
-                    toggleModal(accessModal, true);
-                    setTimeout(() => {
-                        document.getElementById('name').focus();
-                    }, 100);
-                });
+                btn.addEventListener('click', () => openAccessModal(true));
             }
         });
 
-        closeModal.addEventListener('click', () => {
-            toggleModal(accessModal, false);
-        });
+        if (closeModal) closeModal.addEventListener('click', () => closeAccessModal(true));
 
-        accessModal.addEventListener('click', (e) => {
-            if (e.target === accessModal) {
-                toggleModal(accessModal, false);
-            }
-        });
+        if (accessModal) {
+            accessModal.addEventListener('click', (e) => {
+                if (e.target === accessModal) closeAccessModal(true);
+            });
+        }
 
-        const accessForm = document.getElementById('access-form');
-        accessForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const name = document.getElementById('name').value;
-            const email = document.getElementById('email').value;
-            const institution = document.getElementById('institution').value;
-            const purpose = document.getElementById('purpose').value;
-            if (!name || !email || !institution || !purpose) {
-                alert('Please fill in all fields');
-                return;
-            }
-            alert('Thank you for your request. Our team will review your application and contact you soon.');
-            accessForm.reset();
-            toggleModal(accessModal, false);
-        });
+        if (accessForm) {
+            // Clear per-field errors on input
+            [nameEl, emailEl, institutionEl, purposeEl].forEach(el => {
+                if (!el) return;
+                el.addEventListener('input', () => {
+                    // field-level re-validation light
+                    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) {
+                    showAccessFeedback('Please correct the highlighted fields and resubmit.', 'error');
+                    return;
+                }
+
+                // Static demo success path (no network)
+                showAccessFeedback('Request received. You will be contacted after review.', 'success');
+                accessForm.reset();
+
+                // Keep modal open for review; user can close manually.
+                // If you prefer auto-close: uncomment below.
+                // setTimeout(() => closeAccessModal(true), 700);
+            });
+        }
 
         /* -----------------------------------------------------------------
-           CONSCIOUSNESS DEMO MODAL LOGIC
+           CONSCIOUSNESS DEMO MODAL LOGIC (hash)
         ----------------------------------------------------------------- */
         const consciousnessModal = document.getElementById('consciousness-modal');
         const consciousnessDemoBtn = document.getElementById('consciousness-demo-btn');
         const closeConsciousnessModal = document.getElementById('close-consciousness-modal');
 
-        if (consciousnessDemoBtn) {
-            consciousnessDemoBtn.addEventListener('click', () => {
-                toggleModal(consciousnessModal, true);
-                setTimeout(() => {
-                    consciousnessModal.focus();
-                }, 100);
-            });
+        function openConsciousnessModal(setHashFlag = true) {
+            toggleModal(consciousnessModal, true);
+            if (setHashFlag) setHash('consciousness-demo');
+            setTimeout(() => consciousnessModal && consciousnessModal.focus(), 0);
         }
 
-        closeConsciousnessModal.addEventListener('click', () => {
+        function closeConsciousnessModalFn(clearHashFlag = true) {
             toggleModal(consciousnessModal, false);
-        });
+            if (clearHashFlag) clearHashIf('consciousness-demo');
+        }
 
-        consciousnessModal.addEventListener('click', (e) => {
-            if (e.target === consciousnessModal) {
-                toggleModal(consciousnessModal, false);
-            }
-        });
+        if (consciousnessDemoBtn) {
+            consciousnessDemoBtn.addEventListener('click', () => openConsciousnessModal(true));
+        }
+
+        if (closeConsciousnessModal) {
+            closeConsciousnessModal.addEventListener('click', () => closeConsciousnessModalFn(true));
+        }
+
+        if (consciousnessModal) {
+            consciousnessModal.addEventListener('click', (e) => {
+                if (e.target === consciousnessModal) closeConsciousnessModalFn(true);
+            });
+        }
 
         /* -----------------------------------------------------------------
            DEMO VISUALIZATION (inside demo modal)
@@ -1163,85 +1311,129 @@
         const learnMoreDemoBtn = document.getElementById('learn-more-demo');
         if (learnMoreDemoBtn) {
             learnMoreDemoBtn.addEventListener('click', () => {
-                toggleModal(consciousnessModal, false);
+                closeConsciousnessModalFn(true);
                 document.getElementById('consciousness').scrollIntoView({ behavior: 'smooth' });
             });
         }
 
         /* -----------------------------------------------------------------
-           CHAT FUNCTIONALITY
+           CHAT FUNCTIONALITY (static-safe)
+           - Preferred: POST /api/chat
+           - Fallback: local demo reply
         ----------------------------------------------------------------- */
         const chatForm = document.getElementById('chat-form');
         const chatInput = document.getElementById('chat-input');
         const chatMessages = document.getElementById('chat-messages');
         const typingIndicator = document.getElementById('typing-indicator');
+        const sendBtn = document.getElementById('send-btn');
+
+        function escapeHtml(str) {
+            return String(str)
+                .replaceAll('&', '&amp;')
+                .replaceAll('<', '&lt;')
+                .replaceAll('>', '&gt;')
+                .replaceAll('"', '&quot;')
+                .replaceAll("'", '&#039;');
+        }
 
         function addMessage(text, isUser = false) {
+            const safe = escapeHtml(text);
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex items-start ${isUser ? 'justify-end' : ''}`;
+
             if (!isUser) {
                 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>
                     </div>
                     <div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]">
-                        <p>${text}</p>
+                        <p>${safe}</p>
                     </div>
                 `;
             } else {
                 messageDiv.innerHTML = `
                     <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
-                        <p>${text}</p>
+                        <p>${safe}</p>
                     </div>
                 `;
             }
+
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        async function simulateThinking(userMessage) {
-            typingIndicator.classList.remove('hidden');
-            try {
-                const apiKey = 'YOUR_OPENAI_API_KEY';
-                const endpoint = 'https://api.openai.com/v1/chat/completions';
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': 'Bearer ' + apiKey,
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        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 }
-                        ],
-                        max_tokens: 400,
-                        temperature: 0.8
-                    })
-                });
-                const data = await response.json();
+        function setChatBusy(isBusy) {
+            if (!typingIndicator || !sendBtn) return;
+            if (isBusy) {
+                typingIndicator.classList.remove('hidden');
+                sendBtn.disabled = true;
+                sendBtn.classList.add('opacity-80', 'cursor-not-allowed');
+            } else {
                 typingIndicator.classList.add('hidden');
-                if (data.choices && data.choices[0] && data.choices[0].message) {
-                    addMessage(data.choices[0].message.content.trim());
-                } else {
-                    addMessage("Sorry, I couldn't process your message. (No valid response from AI)");
-                }
+                sendBtn.disabled = false;
+                sendBtn.classList.remove('opacity-80', 'cursor-not-allowed');
+            }
+        }
+
+        async function callServerChat(userMessage) {
+            const res = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: userMessage,
+                    meta: { page: 'index.html', product: 'silentpattern' }
+                })
+            });
+
+            if (!res.ok) {
+                const txt = await res.text().catch(() => '');
+                throw new Error(`Server error (${res.status}). ${txt}`.trim());
+            }
+
+            const data = await res.json();
+            if (!data || typeof data.reply !== 'string') {
+                throw new Error('Invalid response format from /api/chat');
+            }
+            return data.reply;
+        }
+
+        function localDemoResponse(userMessage) {
+            const msg = (userMessage || '').toLowerCase();
+            if (msg.includes('mcap')) {
+                return "MCAP acknowledged. Provide: (1) the abstraction mapping you propose, (2) how you test causal fidelity, (3) baseline comparisons. I will draft a minimal evaluation plan next.";
+            }
+            if (msg.includes('chai')) {
+                return "CHAI acknowledged. Specify assets, horizon, labeling rules, and walk-forward protocol. Then we can define leakage controls and calibration metrics.";
+            }
+            if (msg.includes('quantum lambda')) {
+                return "Quantum Lambda acknowledged. The first gate is microstructure realism: latency budget, fill model, slippage assumptions, and risk limits must be explicit before discussing performance.";
+            }
+            return "Acknowledged. State (a) objective, (b) constraints, (c) what evidence you have today. I will respond with a minimal next experiment.";
+        }
+
+        async function respondToChat(userMessage) {
+            setChatBusy(true);
+            try {
+                const reply = await callServerChat(userMessage);
+                addMessage(reply, false);
             } catch (err) {
-                typingIndicator.classList.add('hidden');
-                addMessage("Error connecting to AI: " + err.message);
+                addMessage(localDemoResponse(userMessage), false);
+            } finally {
+                setChatBusy(false);
             }
         }
 
-        chatForm.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const message = chatInput.value.trim();
-            if (message) {
+        if (chatForm) {
+            chatForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const message = (chatInput?.value || '').trim();
+                if (!message) return;
+
                 addMessage(message, true);
                 chatInput.value = '';
-                simulateThinking(message);
-            }
-        });
+                respondToChat(message);
+            });
+        }
 
         const chatBtn = document.getElementById('chat-btn');
         if (chatBtn) {
@@ -1271,22 +1463,6 @@
             });
         }
 
-        /* -----------------------------------------------------------------
-           GLOBAL ESC KEY HANDLER: close any open modal
-        ----------------------------------------------------------------- */
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                const am = document.getElementById('access-modal');
-                const cm = document.getElementById('consciousness-modal');
-                if (!am.classList.contains('modal-hidden')) {
-                    toggleModal(am, false);
-                }
-                if (!cm.classList.contains('modal-hidden')) {
-                    toggleModal(cm, false);
-                }
-            }
-        });
-
         /* -----------------------------------------------------------------
            SUPER BOLD & LARGE HEARTBEAT NEURAL ANIMATION
         ----------------------------------------------------------------- */
@@ -1393,29 +1569,12 @@
         requestAnimationFrame(drawNeuralActivity);
 
         /* -----------------------------------------------------------------
-           LAB NAVIGATOR (Constellation + Dossier Shell) — v1
+           LAB NAVIGATOR (hash + active node + dossier)
         ----------------------------------------------------------------- */
         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",
@@ -1427,7 +1586,7 @@
                     "Method: progressive disclosure via dossiers",
                     "Output: research notes and evaluation artifacts"
                 ],
-                primary: { label: "Begin", action: () => { closeLabNav(); window.scrollTo({ top: 0, behavior: 'smooth' }); } },
+                primary: { label: "Begin", action: () => { closeLabNav(true); window.scrollTo({ top: 0, behavior: 'smooth' }); } },
                 secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
                 updated: "—"
             },
@@ -1511,7 +1670,7 @@
                     "Segmentation by intent (research / build / partner)",
                     "Controlled demos with monitoring"
                 ],
-                primary: { label: "Request Access", action: () => { closeLabNav(); document.getElementById('access-btn')?.click(); } },
+                primary: { label: "Request Access", action: () => { closeLabNav(true); openAccessModal(true); } },
                 secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
                 updated: "—"
             }
@@ -1526,10 +1685,27 @@
         const dossierSecondary = document.getElementById('dossier-secondary');
         const dossierMeta = document.getElementById('dossier-meta');
 
+        function setActiveLabNode(key) {
+            document.querySelectorAll('.lab-node').forEach(btn => {
+                const isActive = btn.getAttribute('data-dossier') === key;
+                if (isActive) {
+                    btn.classList.add('border-indigo-500/60');
+                    btn.classList.add('bg-gray-900/45');
+                    btn.classList.add('ring-2', 'ring-indigo-500/20');
+                } else {
+                    btn.classList.remove('border-indigo-500/60');
+                    btn.classList.remove('bg-gray-900/45');
+                    btn.classList.remove('ring-2', 'ring-indigo-500/20');
+                }
+            });
+        }
+
         function renderDossier(key) {
             const d = DOSSIERS[key];
             if (!d) return;
 
+            setActiveLabNode(key);
+
             dossierTitle.textContent = d.title;
             dossierSubtitle.textContent = d.subtitle;
             dossierStatus.textContent = d.status;
@@ -1551,6 +1727,31 @@
             dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
         }
 
+        function openLabNav(setHashFlag = true) {
+            toggleModal(labNav, true);
+            if (setHashFlag) setHash('lab');
+            setTimeout(() => labNav.focus(), 0);
+
+            // Ensure a stable default selection when opened
+            const alreadyActive = document.querySelector('.lab-node.border-indigo-500\\/60');
+            if (!alreadyActive) renderDossier('start');
+        }
+
+        function closeLabNav(clearHashFlag = true) {
+            toggleModal(labNav, false);
+            if (clearHashFlag) clearHashIf('lab');
+        }
+
+        if (labNavBtn) labNavBtn.addEventListener('click', () => openLabNav(true));
+        if (labNavClose) labNavClose.addEventListener('click', () => closeLabNav(true));
+
+        if (labNav) {
+            labNav.addEventListener('click', (e) => {
+                const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
+                if (shouldClose) closeLabNav(true);
+            });
+        }
+
         document.querySelectorAll('.lab-node').forEach(btn => {
             btn.addEventListener('click', () => {
                 const key = btn.getAttribute('data-dossier');
@@ -1558,12 +1759,52 @@
             });
         });
 
-        // Ensure Esc closes Lab Navigator too (in addition to other modals)
+        /* -----------------------------------------------------------------
+           HASH ROUTER: open/close overlays via hash
+        ----------------------------------------------------------------- */
+        function closeAllOverlaysIfNeeded() {
+            // Close modals without clearing hash here; caller controls hash.
+            if (labNav && !labNav.classList.contains('modal-hidden')) toggleModal(labNav, false);
+            if (consciousnessModal && !consciousnessModal.classList.contains('modal-hidden')) toggleModal(consciousnessModal, false);
+            if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
+        }
+
+        function applyHashState() {
+            const key = currentHashKey();
+
+            // If hash is not a modal hash, do not force-close other modals.
+            if (!MODAL_HASHES.has(key)) return;
+
+            // Ensure only the requested overlay is open.
+            closeAllOverlaysIfNeeded();
+
+            if (key === 'lab') openLabNav(false);
+            if (key === 'access') openAccessModal(false);
+            if (key === 'consciousness-demo') openConsciousnessModal(false);
+        }
+
+        window.addEventListener('hashchange', applyHashState);
+
+        // Apply on initial load
+        applyHashState();
+
+        /* -----------------------------------------------------------------
+           GLOBAL ESC KEY HANDLER: close overlays in priority order
+        ----------------------------------------------------------------- */
         document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                if (labNav && !labNav.classList.contains('modal-hidden')) {
-                    closeLabNav();
-                }
+            if (e.key !== 'Escape') return;
+
+            if (labNav && !labNav.classList.contains('modal-hidden')) {
+                closeLabNav(true);
+                return;
+            }
+            if (consciousnessModal && !consciousnessModal.classList.contains('modal-hidden')) {
+                closeConsciousnessModalFn(true);
+                return;
+            }
+            if (accessModal && !accessModal.classList.contains('modal-hidden')) {
+                closeAccessModal(true);
+                return;
             }
         });
     </script>