<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ROB MARAN | Lead Creative Technologist</title><link href="./dist/output.css" rel="stylesheet"><style>/* 1. Business Panel & CSS Noise Fix */
        #used-future-noise, body::after {
            pointer-events: none !important;
            z-index: 9998 !important;
        }

        #business-panel-alpha {
            position: absolute;
            top: 0;
            right: -100%; 
            width: 100%;
            height: 100%;
            background: #050505;
            z-index: 10000; 
            transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        #business-panel-alpha.panel-active {
            right: 0;
        }

        #tes-c {
            outline: none;
        }</style><script type="speculationrules">{
      "prefetch": [
        {
          "source": "list",
          "urls": ["./landing", "./metrics", "./seo-content", "./slots", "./viewer", "./delta-e", "./tetraxial", "./cipherlarry", "./webwalker"]
        }
      ]
    }</script></head><body class="bg-black text-white overflow-hidden font-inter antialiased selection:bg-white selection:text-black"><button id="mobile-menu-toggle" class="md:hidden fixed top-4 right-4 z-[9999] bg-white text-black font-mono text-xs uppercase tracking-widest px-4 py-2 hover:bg-gray-300 transition-colors">Menu</button><div class="flex w-full h-screen relative z-10"><nav id="master-nav" class="hidden md:flex w-full md:w-[clamp(320px,25vw,420px)] h-full border-r border-white/20 flex-col bg-black absolute md:relative z-50 md:z-20 shadow-[20px_0_50px_rgba(0,0,0,0.8)] overflow-hidden"><header class="p-6 pb-4 border-b border-white/20 shrink-0"><h1 class="mt-5 font-grotesk text-[clamp(2rem,3.5vw,3.2rem)] font-bold uppercase tracking-kissing leading-[0.82] text-white/90 mb-4">Rob<br>Maran</h1><div class="text-xs font-mono text-gray-400 uppercase tracking-widest flex items-center gap-2 pb-4"><span aria-hidden="true" class="w-2 h-2 bg-white rounded-full"></span> <span>Engineer, Absolute Performance</span></div></header><ul class="flex-1 overflow-y-auto no-scrollbar flex flex-col relative" id="project-list"><div id="business-panel-alpha" class="p-8 border-l border-white/20 flex flex-col shadow-2xl"><h3 class="font-mono text-xs text-white/50 uppercase tracking-widest mb-6">Alpha Composting Metrics</h3><div class="flex-1 flex items-center justify-center text-sm font-mono text-white/30 text-center border border-dashed border-white/20">[Awaiting IPC Data]</div></div><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./landing" aria-label="Load Boot Sequence"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">System Initialization</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Boot Sequence</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./metrics" aria-label="Load Performance Matrix"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">Data Visualization</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Performance Matrix</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./seo-content" aria-label="Load Capability Matrix"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">Profile & Specs</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Capability Matrix</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./slots" aria-label="Load Slot Mechanics"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">Interactive Video Engine</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Slot Mechanics</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./viewer" aria-label="Load Zero-Dependency 3D"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">Secure WebGL Enclaves</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Zero-Dependency 3D</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./delta-e" aria-label="Load 32-Bit Colorimetry"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">WASM Math Engines</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">32-Bit Colorimetry</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./tetraxial" aria-label="Load Canvas Multiplexing"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">DOM Physics & Rendering</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Canvas Multiplexing</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./cipherlarry" aria-label="Load AI Persona Synthesis"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">LLM Prompt Tuning</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">AI Persona Synthesis</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li><li class="border-b border-white/20 group"><button class="w-full text-left outline-none focus-visible:bg-white/10 cursor-pointer block p-0 m-0 bg-transparent border-none" data-target="./webwalker" aria-label="Load Alpha Compositing"><div class="nav-item-bg flex items-end justify-between py-8 px-6 group-hover:bg-white group-hover:text-black transition-colors duration-300 ease-out"><div class="flex flex-col"><span aria-hidden="true" class="nav-item-label font-mono text-xs opacity-50 uppercase tracking-widest mb-3 group-hover:opacity-100 transition-opacity duration-300 ease-out">Z-Index Video Swapping</span> <span class="font-grotesk text-[clamp(1.25rem,2.5vw,1.875rem)] font-bold uppercase tracking-kissing leading-none text-white/90 group-hover:text-black transition-colors duration-300 ease-out">Alpha Compositing</span></div><span aria-hidden="true" class="nav-item-load font-mono text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 ease-out">LOAD_</span></div></button></li></ul><div id="nav-scroll-indicator" class="absolute bottom-[60px] right-6 z-30 pointer-events-none transition-opacity duration-300 opacity-0 flex flex-col items-center"><div class="bg-white text-black font-mono text-[9px] px-2 py-1 uppercase tracking-widest font-bold drop-shadow-md">Scroll ↓</div></div><footer class="p-4 border-t border-white/20 shrink-0 flex justify-between items-center text-xs font-mono text-gray-400 uppercase"><span>Hand-Coded Vanilla JS</span> <span class="text-white">0ms TBT</span></footer></nav><main class="flex-1 h-full relative bg-[#0a0a0a] overflow-hidden z-10"><div aria-hidden="true" class="absolute inset-0 z-0 opacity-10" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 50px 50px;"></div><iframe id="detail-viewport" class="absolute inset-0 w-full h-full border-none z-10" src="./landing" allow="autoplay; fullscreen; picture-in-picture" title="Hype Decay Project View"></iframe></main></div><script>document.addEventListener("DOMContentLoaded", () => {
            const projectList = document.getElementById('project-list');
            const projectItems = document.querySelectorAll('#project-list li');
            const viewport = document.getElementById('detail-viewport');
            const nav = document.getElementById('master-nav');
            const menuToggle = document.getElementById('mobile-menu-toggle');
            const scrollIndicator = document.getElementById('nav-scroll-indicator');
            let currentActiveTarget = null;
            
            // SECURITY: Cryptographically secure session ID for IPC validation
            const sessionNonce = window.crypto.randomUUID();
            console.log("🔒 Session Sandbox Established");

            projectItems.forEach(item => { item.style.opacity = '0'; item.style.transform = 'translateX(-20px)'; item.style.transition = 'opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)'; });
            setTimeout(() => { projectItems.forEach((item, index) => { setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'translateX(0)'; }, index * 40); }); }, 100);

            const lockActiveState = (targetUrl) => {
                projectItems.forEach(item => {
                    const btn = item.querySelector('button');
                    if (btn && btn.getAttribute('data-target') === targetUrl) {
                        item.classList.add('active-nav-item');
                    } else {
                        item.classList.remove('active-nav-item');
                    }
                });
            };

            const triggerCrossfade = (targetUrl, projectTitle = "Hype Decay Module") => {
                const currentPath = new URL(viewport.src, window.location.href).pathname;
                if (currentPath.endsWith(targetUrl.replace('./', ''))) return;
                
                try {
                    if(viewport.contentWindow) viewport.contentWindow.postMessage({ type: 'KILL_ENGINE', nonce: sessionNonce }, window.location.origin);
                } catch(e) {}
                
                viewport.title = `${projectTitle} | Secure Sandbox`;

                // Append Nonce to the URL query string
                const secureTargetUrl = targetUrl + (targetUrl.includes('?') ? '&' : '?') + 'n=' + sessionNonce;

                const businessPanel = document.getElementById('business-panel-alpha');
                if (businessPanel) businessPanel.classList.remove('panel-active');

                if (document.startViewTransition) {
                    document.startViewTransition(() => {
                        return new Promise(resolve => {
                            viewport.src = secureTargetUrl;
                            const readyListener = (e) => {
                                // STRICT IPC SYNC: Reject unauthorized cross-frame messages
                                if (e.origin !== window.location.origin || !e.data || e.data.nonce !== sessionNonce) return;
                                if (e.data.type === 'ENGINE_READY') {
                                    window.removeEventListener('message', readyListener);
                                    resolve(); 
                                }
                            };
                            window.addEventListener('message', readyListener);
                            setTimeout(() => { window.removeEventListener('message', readyListener); resolve(); }, 300);
                        });
                    });
                } else {
                    viewport.style.transition = 'opacity 0.1s ease-out';
                    viewport.style.opacity = '0';
                    clearTimeout(viewport.crossfadeTimeout);
                    viewport.crossfadeTimeout = setTimeout(() => { 
                        viewport.src = secureTargetUrl; 
                        viewport.fallbackFade = setTimeout(() => { viewport.style.opacity = '1'; }, 800); 
                    }, 100);
                }
            };

            // Master-Detail IPC Syncing
            window.addEventListener('message', e => {
                if (e.origin !== window.location.origin || !e.data || e.data.nonce !== sessionNonce) return;
                
                if (e.data.type === 'ENGINE_READY') {
                    if (viewport.fallbackFade) clearTimeout(viewport.fallbackFade);
                    viewport.style.opacity = '1';
                }

                if (e.data.type === 'ALPHA_COMP_INIT') {
                    const businessPanel = document.getElementById('business-panel-alpha');
                    if (businessPanel) {
                        businessPanel.classList.add('panel-active');
                    }
                }

                if (e.data.type === 'INIT_3D' || e.data.type === 'DRM_AUTH_SUCCESS') {
                    const container = document.getElementById('tes-c');
                    if (container) {
                        container.focus();
                        container.dataset.status = "active";
                        if(viewport.contentWindow) {
                            viewport.contentWindow.postMessage({ type: 'TESSERACT_READY', status: 200, nonce: sessionNonce }, window.location.origin);
                        }
                    }
                }
            });

            const loadEngine = function(item, updateHistory = true) {
                const btn = item.querySelector('button');
                if (!btn) return;
                const targetUrl = btn.getAttribute('data-target');
                const titleEl = item.querySelector('.font-grotesk');
                const projectTitle = titleEl ? titleEl.textContent.trim() : "Hype Decay Module";
                
                if (currentActiveTarget !== targetUrl) {
                    currentActiveTarget = targetUrl;
                    lockActiveState(targetUrl);
                    triggerCrossfade(targetUrl, projectTitle);
                }

                if (updateHistory) {
                    const hashName = targetUrl.replace('./', '');
                    history.pushState(null, null, `#${hashName}`);
                }
            };

            projectItems.forEach(item => {
                let hoverIntentTimeout;
                item.addEventListener('click', () => {
                    clearTimeout(hoverIntentTimeout); loadEngine(item, true); 
                    if(window.innerWidth < 768) { nav.classList.add('hidden'); nav.classList.remove('flex'); menuToggle.textContent = 'Menu'; } 
                });
                item.addEventListener('mouseenter', () => {
                    if(window.innerWidth >= 768) hoverIntentTimeout = setTimeout(() => { loadEngine(item, false); }, 150); 
                });
                item.addEventListener('mouseleave', () => clearTimeout(hoverIntentTimeout));
            });

            window.addEventListener('popstate', () => { let hash = window.location.hash.replace('#', ''); if (!hash) hash = 'landing'; triggerCrossfade(`./${hash}`); });

            const initialHash = window.location.hash.replace('#', '');
            if (initialHash) {
                const initialUrl = `./${initialHash}`;
                lockActiveState(initialUrl);
                triggerCrossfade(initialUrl, null);
            }
            
            menuToggle.addEventListener('click', () => {
                if (nav.classList.contains('hidden')) { nav.classList.remove('hidden'); nav.classList.add('flex'); menuToggle.textContent = 'Close'; } 
                else { nav.classList.add('hidden'); nav.classList.remove('flex'); menuToggle.textContent = 'Menu'; }
            });

            if (projectList && scrollIndicator) {
                const handleScrollState = () => {
                    const isScrollable = projectList.scrollHeight > projectList.clientHeight;
                    const isAtBottom = Math.abs(projectList.scrollHeight - projectList.scrollTop - projectList.clientHeight) <= 10;
                    scrollIndicator.style.opacity = (isScrollable && !isAtBottom) ? '1' : '0';
                };
                projectList.addEventListener('scroll', handleScrollState, { passive: true });
                window.addEventListener('resize', handleScrollState, { passive: true });
                setTimeout(handleScrollState, 200);
            }
        });</script><script src="./script.js"></script></body></html>